Main Content

You are here:

Custom Cursors in AS3

Welcome to another one Foundation Flash's free ActionScript tutorials. In this tutorial, we are going to make a custom cursor in Flash, just like the one we made in AS2, just now with ActionScript 3. In fact, exactly the same. What we will make will look like this:

Pretty good, eh? Well, let's get started. Open up a new Flash document. First we are going to draw our mouse. You don't have to have any text next to it, like I do, just make it look different to what you mouse normally does. It can also have a little animation in it, once you have converted it to a Movie Clip. So, select it and press F8 to convert it to a Movie Clip symbol. Give it an instance name of "cursor".

Now let's add the code. Go to frame one, or a separate document class, then type this (with comments as neccessary):

//Depending on your setup, you may need to uncomment
//the next lines and place them in the correct
//area in your document:
//import flash.events.MouseEvent;
//import flash.ui.Mouse;
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
function follow(evt:MouseEvent){
        cursor.x = mouseX;
        cursor.y = mouseY;
}

That's it. Not much code, but let's explain what I have done.

Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);

This calls upon the Mouse.hide() function in this frame or at this point. The Mouse.hide() function basically hides the mouse, as simple as that. And yes, you guessed it, there's a Mouse.show() function as well. Then we set up a fairly simple event listener for an event you may not have seen before, for when the mouse moves. And every time it does, we're going to make our Movie Clip follow it.

function follow(evt:MouseEvent){
        cursor.x = mouseX;
        cursor.y = mouseY;
}

This code says that every time you enter the frame, then the Movie Clip's x position on the stage (cursor.x) will equal the x position of the mouse on the stage (mouseX - a universal constant). Similarly so, the code also says that every time you enter the frame, the Movie Clip's y position on the stage (cursor.y) will equal the mouse's y position on the stage (mouseY).

So that is all the code. Test your movie and see that it works. Great! We're done. But wait, hold on, it isn't dragging it around by the tip of the mouse? Ah! We forgot one small thing! To move the Movie Clip's registration point. If you double click on your Movie Clip, you should see a small cross in the middle of the screen. That is your Movie Clip's registration point. This is the point that your hidden cursor is dragging your custom cursor around by. Basically, it is what determines the exact x and y values of your Movie Clip. How can we fix this? Simple. Drag your cursor around until its tip is right on the registration point (preferably make sure the point is NOT on top of you Movie Clip, or you won't be able to click anything). Now that is the point that it is dragged round by. Test your movie and you should see that it works.

Well, thank you for reading this, and I hope you've learned something from it. Please join us for our next free ActionScript tutorial,

Harry, based on an original tutorial by Leon.