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);
// 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;
}_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.
Now, you need to put some simple code in each of these methods to change the frames of the MovieClip:
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:
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.
