Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Custom Cursor

VCA224 Multimedia 2

Custom Flash Cursor

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 that changes appearance when it scrolls over a button.

Specifications

Part 1: Flash Layout

  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.

    2. 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 two graphic symbols—one purple arrow (arrow1.ai) and one yellow arrow (arrow2.ai).
  3. Choose Insert > New Symbol. Create a movie clip symbol called cursor_mc.
  4. In the cursor_mc timeline, place an instance of arrow1 (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. Still in the cursor_mc timeline, add a keyframe in frame 2. Select the arrow symbol and choose Modify > Symbol > Swap Symbol. Choose arrow2 (the yellow arrow). Now you should have the purple arrow in frame 1 and the yellow arrow in frame 2.
  6. Still in the cursor_mc timeline, add a new layer called actions. Select the keyframe in frame 1 and add a stop();
  7. Go back to the main timeline.
  8. Drag an instance of cursor_mc on to the stage. Give it an instance name of cursor_in.
  9. Move the cursor instance off stage (on to the gray area around the stage).
  10. Create a button symbol and put it on stage. You can add an over state if you like, but it's not necessary at this time

Part 2 Flash: Actionscript

  1. In case you missed it, we actually added a tiny bit of Actionscript to the cursor_mc back in step 6 above.
  2. Now select the cursor_in movie clip instance. Open the Actionscript window and add the following code:

    3. onClipEvent (load) {
    Mouse.hide();
    this.swapDepths(99999);
    }

    onClipEvent (enterFrame) {
    this._x = _root._xmouse;
    this._y = _root._ymouse;
    }

    onClipEvent (unload) {
    Mouse.show;
    }

    The first bit of code hides the "real" cursor. We've also added a swapDepths command. This line moves the cursor (this) to the 99,999th level of the stage. Since it's unlikely that there will be 100,000 objects on stage at any one time, we can be fairly confident that the cursor movie clip will be on top of everything. This is important, because a cursor that disappears behind an object is not very useful.

    The second piece of code causes the cursor movie clip to follow the mouse. Unlike onClipEvent (load) which happens only once, onClipEvent (enterFrame) happens continuously while the movie is playing.

    The third handler is not always necessary. If you plan on using the same cursor for your entire movie, you don't need it. However, if you plan on going back to the regular cursor at some point, you'll have to turn it back on. This code causes the regular cursor reappear once you've left the frame that has the custom cursor movie clip.

  3. Select the button. Add the following code;

    4. on (rollOver) {
    cursor_in.gotoAndStop(2);
    }
    on (rollOut) {
    cursor_in.gotoAndStop(1);
    }

    This code actually uses the button to control the cursor movie clip, very much like the movie clip exercise we did a couple weeks ago. In this case, rather than a press or release handler, we're using a rollOver and rollOut. When the cursor rolls over the button, the playhead inside the cursor movie clip jumps to (and stops on) frame 2, which as you should recall, is the yellow arrow. When the cursor rolls off of the button, the cursor timeline goes back to frame 1 (the purple arrow). The effect is a cursor that changes color when it hits the button.

Go Above and Beyond

Some possibilities:

 

Course Outline

Syllabus

Student Resources