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:

import flash.display.MovieClip;
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.


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.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out


Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
new books - yay!!!