Have questions? Discuss this Flash / AS3 tutorial with others on the forums.

When you think of the mouse cursor, the most common image you probably have is that of the classic arrow:

As you go about doing the things that you do on your computer, your mouse cursor will change. While this change may just seem cosmetic, the mouse cursor gives you important feedback on what is going on.

 When you hover over a textfield, your cursor will change to one that enables text selection:

[ for more gripping updates like this, friend me!! ]

This gives you an idea that you can probably click and start typing on your keyboard. One of the most important mouse cursors you see is the one that indicates a link is clickable:

[ if it wasn't for this cursor, would you know you could click on the image? ]

If you did not see your cursor changing to the link cursor, you would probably not realize that you can click on it or manipulate it using your mouse.

 I could go on all day, but you get the gist of it. Depending on the context, your mouse cursor will change. You (and your users) rely on the mouse cursor to inform what is going on or what can be done.

In Flash, there are many cases where your mouse cursor will automatically change depending on what you are interacting with. You will see the link cursor when you are over a button. Giving focus to a text field, will give you the text selection cursor.

When you go beyond the default behaviors and scenarios, you will have to explicitly set the mouse cursor yourself. In this short tutorial, you will learn how to do just that!

The MouseCursor Class

In ActionScript 3, you have the MouseCursor class that allows you to specify the mouse cursor.

First, you'll need to add the appropriate using statements to be able to use the MouseCursor class and, as part of the whole experience, the Mouse class:

import flash.ui.MouseCursor;

import flash.ui.Mouse;

Once you have added your using statements, you can change the cursor by setting the global Mouse object's cursor property to the mouse cursor you want:

Mouse.cursor = MouseCursor.AUTO;

The cursor you want is specified by the MouseCursor enum which contains the following values: ARROW, AUTO, BUTTON, HAND, and IBEAM.

Those values probably don't mean much, so the following table shows them pictorially:

Cursors	Picture
MouseCursor.ARROW
MouseCursor.AUTO
MouseCursor.BUTTON
MouseCursor.HAND
MouseCursor.IBEAM

There isn't much more to changing the cursor. To give you a complete example, below is some code that shows how to change the cursor when one hovers over an element:

package

{

 

import flash.display.MovieClip;

import flash.events.MouseEvent;

import flash.ui.MouseCursor;

import flash.ui.Mouse;

 

 

public class Main extends MovieClip

{

var mouseIsDown:Boolean = false;

 

public function Main()

{

// constructor code

myImage.addEventListener(MouseEvent.MOUSE_OVER, changeCursor);

myImage.addEventListener(MouseEvent.MOUSE_OUT, resetCursor);

}

 

private function changeCursor(e:MouseEvent)

{

Mouse.cursor = MouseCursor.HAND;

}

 

private function resetCursor(e:MouseEvent)

{

Mouse.cursor = MouseCursor.ARROW;

}

}

 

}

Notice that the cursor is your standard Arrow when you aren't hovering over the element, but when you are hovering over it, it is the Hand.

Conclusion

That is all there is to know about changing your mouse cursor. The cursor is set globally in your application, so you'll have to ensure you have code for both setting the cursor as well as resetting it to a more appropriate state - MouseCursor.AUTO.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!