Current Classes | Syllabus | Class Schedule

VCB-331 Rich Media 1

Custom Cursor (Flash AS3)

Introduction

One of the most common modifications designers make to a Flash interface is the addition of a custom cursor. After spending weeks, months (years?) building a really cool interactive with custom buttons, menus, and all kinds of eye candy, do we really want people to mouse around with that silly black arrow? Better to give them a cursor that fits the style of our labor of love. So in this exercise we'll build a simple custom cursor .

Graphic

1. You'll need a graphic to serve as your cursor. The easiest way to create one is to draw one in Flash. But you could also create a graphic in Illustrator or Photoshop and import it. If you use Photoshop save it as a 24-bit png with a transparent background. For now, use this Flash file; in it I already have a cursor drawn for you. You can make your own later.
2. Open the Flash file. Note that in the library I have a graphic symbols—a purple arrow (arrow1.ai).
3. Choose Insert > New Symbol. Create a movie clip symbol called "cursor".
4. In the cursor timeline, place an instance of the purple arrow on stage. Make sure that the tip of the arrow lines up with the little cross in the center of the movie clip stage. The easiest way to do this is to set both of your x and y coordinates to zero in the Properties window. However, you should note that this works because the arrow symbol is registered top-left. Had the arrow been registered in the center (or anywhere else), you would have had to manually position the arrow (or change its registration).
5. Go back to the main timeline.
6. Drag an instance of cursor on to the stage. Give it an instance name of "cursor_mc".
7. Move the cursor_mc instance off stage (on to the gray area around the stage).
8. Create a button symbol and put it on stage. Give it an over state. Although this is not strictly necessary to create a custom cursor, we will use it to test to make sure our cursor has the propper hot spot.

Actionscript

1. On the main timeline, create a new layer called "actions". Select the keyframe on the actions layer and open the script window. Write the following script:

   stage.addEventListener(MouseEvent.MOUSE_MOVE,moveCursor);    
   function moveCursor(myEvent:MouseEvent) { 
       cursor_mc.x = (mouseX); 
       cursor_mc.y = (mouseY); 
       Mouse.hide();    
   }  

   The first line adds a listener to the stage that "listens" for mouse movement. When the mouse moves, the moveCursor function is called. That function does two things; it hides the standard cursor and causes the movie clip "cursor_mc" to follow the mouse around.
2. But there's a problem; if you placed the button on stage after the arrow cursor, or put it on a higher layer, the cursor could slip behind the button. A good cursor should always remain on top of everything else on stage. To address this, we'll add new line to our code:

   stage.addEventListener(MouseEvent.MOUSE_MOVE,moveCursor);    
   function moveCursor(myEvent:MouseEvent) { 
       setChildIndex(cursor_mc, this.numChildren-1);
       cursor_mc.x = (mouseX); 
       cursor_mc.y = (mouseY); 
       Mouse.hide();    
   }  

   What's with the "Children?" Simply put, every item on the stage is a "child" of that stage, so it's counting the number of items on stage. We currently have a movie clip and a button, giving us a total of 2 children. But note that we then subtract 1 from that total (giving us 1 as the result). Why? Well, the reason we want our cursor in position 1 and not 2 is that Flash counts the bottom-most position as position zero; therefore 1 is actually the second position. This line totals up the number of objects and assigns the highest value to the cursor.

   Try it out. Try adding more items to the stage. No matter how many objects you add (nor what layers you place them on), the cursor should always float over the top.