Task: Rollover Custom Cursor

I l @ ve RuBoard

The custom cursor in the preceding task has one major flaw: It does not change when it rolls over a button like a real cursor does. We can fix this easily enough:

1. Start with the movie you completed from the previous task, or use 13fulltimecursor.fla.

2. Create a button at the root level. You should give the button different over and down states. See 13rollovercursor.fla for an example.

3. In the cursor movie clip, make a few changes. First, add a second key frame to the movie clip. This should be similar to how the first key frame looks but with some sort of indicator to the user that the cursor is over a button. Figure 13.2 shows an example.

   Figure 13.2. The second frame of the movie clip is used when the cursor is over a button.

   

4. Name the two frames of the movie clip normal and over button.

5. Place a stop(); command in the first frame of the movie clip to prevent it from animating between the two frames when the movie starts.

6. At the root level, name the movie clip cursor.

7. Place a script on the button that tells the cursor to change when it is over the button:

    on (rollOver) {     cursor.gotoAndStop("over button"); } on (rollOut) {     cursor.gotoAndStop("normal"); } 

8. Test the movie or use 13rollovercursor.fla.

Figure 13.3 shows the cursor right next to the button, in its normal state. It also shows the cursor moved just over the button, now in its over button state.

Figure 13.3. On the left is the custom cursor not quite over the button. On the right is the cursor in its other state while it is over the button.

You can place more than one extra frame in the cursor movie clip. For instance, you can have over choice button, over menu button, and over quit button key frames, each with a slightly different graphic. A common method extra would be to have an over inactive button graphic that the cursor changes to when it rolls over a button that can't be used on the current frame.

I l @ ve RuBoard