Dec 02

How to Create a Custom Cursor in Flash

Fri, 12/02/2011 - 02:16 — julie

Flash is a great tool creating beautiful looking interactive applications. But a lot of times the default cursor will not go with the theme of your application. Fortunately it is very easy to create your own cursor in Flash. In this Flash tutorial I will show you how to replace the default cursor with your customized cursor. You need to know the basics of how to make a Flash website and little know-how of ActionScript 3.0 before you can understand this tutorial.

It is good if you follow along with me in this tutorial. Let’s start by creating a new ActionScript 3.0 document in Flash. Press Ctrl+F8 to create a new MovieClip symbol. We will design our new cursor in this MovieClip.

I have drawn a little red cursor with a circle on its back but you can draw anything you want, you can even make an animation in this MoveClip if you want an animated cursor. But right now I will stick to a static cursor because animated ones become a little too over in most cases.

One thing that you need to make sure is that you have to keep the registration point of the movie clip at the position where you would want your cursor to register the clicks. Naturally I want my cursor to register clicks on the tip so I have kept the registration point at the tip of the cursor.

Now that we have made the graphics part of the cursor lets go back to the main timeline and drag our new cursor to the stage. Also we would give a name to our cursor so that we can manipulate it in the ActionScript code. I have named my cursor MovieClip as cursor_mc.

Now create a new layer to contain the ActionScript code.

On the ActionScript layer, press F9 to open the Actions window and paste the following code there.



function follow(E:MouseEvent){

cursor_mc.x = mouseX;

cursor_mc.y = mouseY;


This is the code that replaces our current cursor with the new cursor. It’s a very short and simple code. The first line here calls the Mouse.hide() function which hides the default cursor. After the default cursor has been hidden, we need to move in the new cursor. To do that we add an event listener to the stage that detects whenever a user moves their mouse and then calls the follow function which will make the new cursor follow the movement of the mouse. In the follow function we simply set the coordinates of the new cursor (which is cursor_mc) equal to the coordinates of the mouse.

And that’s it,  you can press ctrl+ENTER to test the application.
Click Here to see the cursor in action.

You can use this method to create a variety of cursors. Just make sure that you keep the basic functionality of cursor in mind when modifying it.

Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

Copyright 2009. E-mail Me
Auto Spare Parts