Creating Interaction with ActionScript > Creating complex interactivity > Creating a custom cursor

 

Creating a custom cursor

A standard cursor is the operating system's onscreen representation of the user's mouse pointer. By replacing the standard cursor with one you design in Flash, you can integrate the user's mouse movement within the movie environment more closely. The sample in this section uses a custom cursor that looks like a large arrow. The power of this feature, however, lies in your ability to make the custom cursor look like anything—for example, a football to be carried to the goal line or a swatch of fabric pulled over a couch to change its color.

To create a custom cursor, you design the cursor movie clip on the stage. Then in ActionScript you hide the standard cursor and track the movement of the custom cursor. To hide the standard cursor, you use the hide method of the built-in Mouse object. To use a movie clip as the custom cursor, you use the startDrag action. To see an animated demonstration of a custom cursor, move your mouse over the movie below.

 
To create a custom cursor:

1

Create a movie clip to use as a custom cursor.

2

Select the movie clip instance on the Stage.

3

Choose Window > Actions to open the Actions panel if it is not already visible.

4

To hide the standard cursor, in the Actions toolbox, click the Objects category, click the Movie category, click Mouse, click Methods, and double-click hide.

The code should look like this:

onClipEvent(load){
	Mouse.hide();
}

5

To apply the new cursor, in the Actions toolbox, click the Actions category, then click Movie Clip Control and double-click startDrag.

6

To limit the mouse movement, select the Expression box and type this for the target. Then select Lock Mouse to Center and Constrain to Rectangle, and enter values. For example, you might enter the following:

L: 0

T: 46

R: 400

B: 280

Your code should look like this:

onClipEvent (load) {
	Mouse.hide();
	startDrag(this, true, 0, 46, 400, 280);
}

7

Choose Control > Test Movie to test your custom cursor.

Buttons still function when you use a custom cursor. It's a good idea to put the custom cursor on the top layer of the Timeline so that it moves in front of buttons and other objects as you move the mouse in the movie.

For more information about the methods of the Mouse (object), see Mouse (object) in the ActionScript Dictionary.