Introduction: How to Make a Custom Cursor in Flash

This is a simple tutorial to show you how you can change the simple arrow cursor to pretty much anything you want in Adobe Flash.

Step 1: Getting Started

Create a new Flash document. If you are using the CS3 Suit, choose the actionscript 2.0 option. The size of your work space does not matter. Since this cursor will probably be for your project (web page, etc), make the dimensions whatever you wish.

Once you have created a new document. Change the frame rate to 30fps at the bottom in the Properties panel for smoother movement.

Step 2: Making the Cursor

Rename your first layer in the timeline 'cursor'. Your custom cursor can pretty much be anything you want. If you want to use a photo, then upload it your stage and make it a movie clip. Resize it to however big you want your cursor to be.

You can also draw your custom cursor, which i did for this tutorial. To do this, select the pencil tool, choose a colour, and draw your shape. Once you have your shape, select the selection tool (arrow) and double click on your shape to select the whole thing. Press F8 to bring up the symbol box and select movie clip and name it 'cursor'. Also make sure the Registration is at the top left corner, or wherever you want the click point to be.

If you decide to use a photograph and want to publish it on the internet, beware of copyright issues.

Step 3: Instance Name

In your properties panel at the very bottom, under movie clip, you will see a box that says "instance name." Click on it and change the instance name to "custom_cursor."

Step 4: ActionScript

Create a second layer in the timeline at the top and call it "actionscript". Click on the very first key frame and hit F9 to bring up the actions box (or right click on the keyframe and select actions).

Copy and paste this code into it:

custom_cursor.startDrag("true");
Mouse.hide();

This code is telling the original cursor to hide and to replace it with the new one by using the instance name you entered before.

Close the actions box.

Step 5: Preview

Your custom cursor is complete! Just hit Control and Enter to preview your custom cursor.