How to Make a Custom Cursor in Flash

by Jenn Taylor in Circuits > Software

17183 Views, 8 Favorites, 0 Comments

How to Make a Custom Cursor in Flash

custom cursor 1.JPG
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.

Getting Started

custom cursor 2.JPG
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.

Making the Cursor

custom cursor 3.JPG
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.

Instance Name

custom cursor 4.JPG
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."

ActionScript

custom cursor 5.JPG
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.

Preview

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