Previous Page
Next Page

Tripod >> 3pod Tips & Learning and manuals for educations

Recipe 9.11. Creating Custom Cursors

Problem

You want to create a custom mouse cursor in place of the standard arrow/hand.

Solution

Use the Mouse.hide( ) method to hide the standard cursor, and then use ActionScript to tell a movie clip instance to follow the mouse.

Discussion

Although you cannot really replace the cursor icon in your Flash movies, you can create the illusion of a custom mouse cursor:

  1. Create a movie clip symbol in which you add the artwork for your custom icon.

  2. Create an instance of the movie clip symbol on the stage in the main timeline, and make sure to give it an instance name (exp 3pod.com). You should make sure the instance is on a layer that appears above all the other layers in the main timeline.

  3. Hide the standard mouse cursor with the Mouse.hide( ) method. Assuming that you want to hide the standard arrow/hand cursor from the moment the Flash movie starts to play, place the following code on the first keyframe of the main timeline:

  4. Mouse.hide( );

  5. Define a function that updates the movie clip to the mouse location by assigning the values of _xmouse and _ymouse to the _x and _y properties of the movie clip:

  6. function updateCursorLocation( ):Void {

  7. mCustomMouseCursor._x = _xmouse;

  8. mCustomMouseCursor._y = _ymouse;

  9. updateAfterEvent( );

  10. }

  11. Instruct Flash to continuously call the function using setInterval( ). You can call setInterval( ) with two parametersa reference to the function and a number of milliseconds to use as the interval. To make the cursor move smoothly use an interval of something near 50 milliseconds:

  12. setInterval(updateCursorLocation, 50);

  13. In the event that you use any ActionScript code within your Flash movie in order to attach movie clips, add a line of code that tells Flash to move the cursor movie clip to a high stacking order. That step will ensure that the cursor movie clip does not accidentally get hidden beneath other instances. Use the swapDepths( ) method, and pass it a value of this.getNextHighestDepth( ):

     
    
    	mCustomMouseCursor.swapDepths(this.getNextHighestDepth());
    

After you have completed the preceding steps, you can test the movie, and you should see your custom cursor instead of the standard arrow.

Tripod >> 3pod Botom Tips & Learning and manuals for educations

Previous Page
Next Page

 

bluedot bluedots greydots pinkdots

Tripod >> 3pod Tips & Learning and manuals for educations