Changing the Mouse Cursor

by kirupa   |   6 September 2011

  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:

arrow cursor

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:

hi mom!!!

[ 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:

mouse cursor

[ 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 arrow
MouseCursor.AUTO arrow
MouseCursor.BUTTON button cursor
MouseCursor.HAND hand cursor
MouseCursor.IBEAM ibeam cursor

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.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

WHAT DO YOU THINK?

NEWSLETTER

No spam. No fluff. Just awesome content sent straight to your inbox!

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!