You are here: Home > tutorial>tutorial_coolmotion>Creating a Custom Mouse Cursor
Creating a Custom Mouse Cursor

You can create a custom mouse cursor in any shape and color that you want, just by creating an object that follows the real mouse cursor around as a visual substitute.

Start off by drawing the shape that you want to use for your cursor.

Select the object and create a Movie Clip symbol (F8) from it.

Note: this will work with a static object, or with an animation. You can create an animated movie clip cursor if you like, but it’s on your head if you make an annoying one that drives your users mad.

Now that the easy part’s out of the way, we get to the fun stuff: the ActionScripting. Select your custom cursor’s symbol, and open the Actions Panel. We’ll start off with a simple onClipEvent:

onclipEvent (enterFrame) {
}

What we’re going to do is have the movie clip align its x and y coordinates (Cartesian, remember) with the X and Y coordinates of the mouse with each frame that Cool Motion plays, so that no matter what position the mouse is in on each frame passed—or each time the same frame cycles—the custom cursor is there, tailing its exact position. That’s why we used the enterFrame event.

Next we’re going to add the code that tells it to align the movie clip’s x position with that of the mouse:

onclipEvent (enterFrame) {
_x = _xmouse;
}

_x is the Flash operator representing the x (horizontal) position of the object in question, measured in pixels from the left edge of the stage, while _xmouse is the Flash operator representing the x (horizontal) position of the mouse cursor in pixels from the left edge of the stage. We just told Cool Motion to make the horizontal position of the cursor object the same as the horizontal position of the mouse.

Now for the vertical position:

onclipEvent (enterFrame) {
_x = _xmouse;
_y = _ymouse;
}

_y and _ymouse are the same as _x and _xmouse, only the operators represent the y (vertical) position as measured in pixels from the top edge of the stage.

Now, the moment that each frame loads, Cool Motion checks the x and y coordinates of the mouse cursor, and matches the position of the custom cursor to it.

Just in case, add a _root. in front of each _xmouse and _ymouse operator, to make sure that Cool Motion knows it needs to return to the main stage before getting those mouse coordinates:

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

Let’s fix the double-cursor problem.Go to your Timeline and click on the keyframe on which you created your cursor. (This is assuming a single-frame movie. If you have a multiple-frame movie, create a new layer, call it Actions, and make sure to keep only your Actions on that layer. You’ll want a keyframe on the first frame, but make sure that the frames continue on as static continuity to the end of the movie.)

Then open the Action Panel.

Now we just need to hide the mouse cursor using a simple Mouse.hide () function.