Tips for Using Custom Mouse Cursors in Flash AS3

Custom mouse pointers are pretty easy to implement in ActionScript 3.0 Flash movies. I'll go over the basics first, but if you want to skip to the bits about making it look more professional, be my guest.

Custom Mouse Pointers in Actionscript 3.0

Using your own MovieClips as custom cursors is a two step deal. First you need to hide the default mouse cursor.

import flash.ui.Mouse;
Mouse.hide();

Done. Next, you need to add your MovieClip to the stage and have it follow the mouse around. This requires a bit more code:

function init()
{
	Mouse.hide();
 
	// this creates an instance of the library MovieClip with the
	// name, "MyCursorClass".  this contains your mouse cursor art
	//
	myCursor = new MyCursorClass();
 
	// you'll want to make sure the child is added above everything
	// else, possibly in its own container
	//
	addChild(myCursor);
 
	// respond to mouse move events
	stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
 
function mouseMoveHandler(evt:MouseEvent):void
{
	// whenever the mouse moves, place the cursor in the same spot
	myCursor.x = evt.stageX;
	myCursor.y = evt.stageY;
}

That's pretty much it for the basics. Now, whenever a mouse move event is received, the custom MovieClip's position will be updated to match the hidden mouse cursor's position.

Cleaning Up the Behavior

In the "what not to do" example there are a couple problems in addition to the fact that the cursor itself is pretty unwieldly and, not to mention, ugly.

The first problem is that when the movie first loads, before the user mouses over it, the cursor can be seen in the top left corner. This can be remedied by hiding the custom cursor until the user moves their mouse over the Flash movie.

myCursor = new MyCursorClass();
myCursor.visible = false;
 
...
 
function mouseMoveHandler(evt:MouseEvent):void
{
	myCursor.visible = true;
	myCursor.x = evt.stageX;
	myCursor.y = evt.stageY;
}

Now, when the movie first loads, the cursor will be invisible. It will only appear when the user starts moving the mouse around. However, when the user moves the cursor out of the Flash movie, it will still be visible at the last position before they left off. Lucky for us, Flash fires an event when the mouse leaves the stage so we just listen for that and have the handler hide the cursor.

stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler);
 
...
 
function mouseLeaveHandler(evt:Event):void
{
	myCursor.visible = false;
}

The final problem is a pretty important one. In fact, this should probably be part of the "basic" version above. You'll notice in the "what not to do" example that none of the UI components work. The problem is that the custom cursor is blocking all the mouse events so roll over skins don't appear and the component doesn't notice user clicks.

To fix this, we simply set the mouseEnabled property of the cursor MovieClip to false.

myCursor = new MyCursorClass();
myCursor.visible = false;
myCursor.mouseEnabled = false;

...aaand that's it. Building a quality web application is all in the details and using these tips for custom cursors will bring you one step closer.