Making a Custom Mouse Cursor in Flash with Actionscript 3

In most games, you will see a custom mouse cursor that the developers created to make the mouse seem like part of the game world.  For Stack-O-Lantern, I didn't want to have the standard mouse pointer while playing the game because I wanted it to feel like you were actually grabbing the characters and picking them up.  Luckily, as I found out, this is very easy to do in Flash and Actionscript.


Since I decided that I wanted my mouse cursor to look like a hand, I went into Flash and created a MovieClip with two frames:  one where the hand has all fingers and its thumb stretched out, the second with a clinched fist.

Open Hand (Frame 1)

Clinched Fist (Frame 2)

I also added a little dark gray outline to both frames so that the hand would stand out against a white background.  Make sure when you create the MovieClip that you check the option Export for Actionscript; this will ensure that you can use it in your code.  If you've already created your MovieClip and didn't set a class name, just right click the MovieClip in your Library and click Properties.  Then click the Advanced toggle to drop down the options you see below.  Click Export for Actionscript and put in your Class name.  I named my Hand object as seen below:

Hand MovieClip properties

We are now ready to use this thing in our code.  First, in your main document class, create a class member that will represent your mouse cursor.  I made the object at the class level so that I could reference the cursor wherever I was in the code.


private var _mouseCursor:MovieClip;

In Stack-O-Lantern, I wanted the user to have a normal mouse cursor while they were navigating the menus, so I didn't display the hand until I got into the actual game.  Here is the code to make the switch between the normal cursor and your custom cursor:

// This is a general function that might be used when your
// game is loaded and the user is presented with the actual
// screen.
private function startGame():void

{

    // Instantiate the mouse cursor object

    _mouseCursor = new Hand();

    // This will keep the cursor from going between
    // frames at a rapid rate :)
    _mouseCursor.gotoAndStop(1);

    // Add the mouse cursor MovieClip to the stage

    // so that it is visible

    stage.addChild(_mouseCursor);

    

    // Hide the generic mouse cursor

    Mouse.hide();

}

You also need to create an event listener that is called every frame; a good one for this Event.ENTER_FRAME.  In your document class' constructor, add this line of code:

addEventListener(Event.ENTER_FRAME, onEnterFrame);

Create the actual method that handles this event:

private function onEnterFrame(e:Event):void

{

    ...

    // This will make the mouse cursor MovieClip follow the

    // mouse coordinates

    _mouseCursor.x = mouseX;
    _mouseCursor.y = mouseY;

}

To get the cursor to change frames when you click the mouse, you need to create two mouse event listeners:  one that checks when the mouse is clicked, and the other when the mouse button is released.

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Now, you need to put some simple code in each of these methods to change the frames of the MovieClip:

private function onMouseDown(e:MouseEvent):void 

{

    _mouseCursor.gotoAndStop(2);

}

private function onMouseUp(e:MouseEvent):void 

{

    _mouseCursor.gotoAndStop(1);

}

You now have a functioning custom mouse cursor!  That wasn't too bad was it?

If you want to turn the generic mouse cursor back on, you can use the following code:

Mouse.show();

stage.removeChild(_mouseCursor);

...or, if you don't want to dispose of your custom cursor, you can opt to just hide it: 

Mouse.show();

_mouseCursor.visible = false;

Let me know if you have any questions or comments...I'll be posting more tutorials real soon.