Creating A Custom Cursor Using AS3

By Jamie.DS | Flash CS3 | ActionScript 3.0 | Beginner

This tutorial will provide you with a step-by-step guide on how to create a custom cursor in Flash CS3 using AS3. This a simple trick for beginners which they can use in a Flash website, a game, or even an animation. This tutorial does not require any pre-requisite knowledge. Below you can see an example of the custom cursor we will create by the end of this tutorial.

Please note that this is an ActionScript 3.0 tutorial, if you want to create the same effect in older ActionScript versions then please review our previous tutorial on how to create a Custom Cursor in Flash (AS1).

This tutorial is divided into the following sections:

  1. Preparing the FLA and creating the cursor.
  2. Writing the ActionScript code.

Preparing the FLA and creating the cursor

Start off by creating a new Flash file in ActionScript 3.0 format. We are going to use the default settings for our movie, so no changes are necessary for the background color, frame rate or movie dimensions.

AS3 Custom Cursor - Properties Inspector

You should have one layer on your timeline now, we need to have two for this project, so add a new layer, then name the one at the bottom Mouse and the one on top Actions.

AS3 Custom Cursor - Two Layers on the Timeline

We are now going to create our custom cursor shape, click on the Mouse Layer and then use the drawing the tools to draw your cursor. The exact shape does not matter, but try to draw something that points to the top left corner. Once you draw the arrow shape you will need to convert the shape to a symbol to be able to manipulate it easily with ActionScript. To do that select the shape and then press F8, set the name of your symbol to Arrow Shape, the symbol type to Movie Clip, and make sure that you set the Registration Point to the top left corner. The registration point is the central point of a movie clip and for our cursor project it will be the point at which the mouse click will be positioned.

AS3 Custom Cursor - Arrow Shape

In order to easily refer to our Movie Clip using ActionScript we will need to use its instance name. To set an instance name of an object, select it, then access the Properties Inspector and set the name "cursor_mc" in the specified field.

AS3 Custom Cursor - Instance Name

All of our assets are now ready for using this as a custom cursor. Right-click the only frame you have on the Actions layer and select Actions to start coding this project.

Writing the ActionScript Code

The code needed for this project is pretty simple. We need to do two things,(1) hide the default mouse cursor, and (2) make our new custom cursor move on the screen like the mouse. We are going to do these step by step.

To hide the our default mouse cursor we can use the .hide() method of the Mouse Class. Do this by simply typing the following:

Mouse.hide();
The Mouse Class has two methods: .hide() and .show(). The .hide() method hides the default mouse cursor while the .show() method shows the default mouse cursor.

Our default mouse cursor can no longer be seen how. We need to make our custom shape move around as if it were a mouse cursor. To do this we can use the .startDrag() method of the Sprite Class. This method makes any object get dragged by the mouse. We can use it in the following manner:

Mouse.hide();
cursor_mc.startDrag(true);
The .startDrag() method can be customized in several ways. Passing true to it ensures that the object is dragged from its center (i.e. the registration point). You can stop the dragging process by using the .stopDrag() method. For more info please refer to the ActionScript reference.

That should do it. You can now test your movie (Ctrl+Enter) to see your custom cursor working.

This concludes our tutorial. I hope that you learnt something new from it. If you have any questions then please feel free to post at the Oman3D Forum.

- End of Tutorial