An Applet and the Code

In Flash Player 10 and Flash CS4, there is a new property, Mouse.cursor, which provides five custom cursors. Below is an applet that illustrates all of them. It is a useful property. Suppose that you have a MovieClip which responds to mouse clicks. You would like the mouse cursor to change to a clicking hand when the user hovers over the MovieClip. The new property makes it easy to accomplish.

Download

The Code

The simple code behind the applet illustrates how to use the Mouse.cursor property.

/*
In Flash Player 10 there are a few custom cursors available and the Mouse class has a new property: Mouse.cursor. There are only five possible values for this property: "hand", "ibeam", "auto", "arrow", and "button". The default value for the property is "auto". In this How-To, we illustrate the behavior of each of the available cursors.
*/

/*
We created five MovieClips on the Stage with instance names: handClip, ibeamClip, autoClip, arrowClip, and buttonClip. When the user mouses over each clip, the setting for Mouse.cursor changes accordingly.
*/

/*
Each clip contains a button in it. The buttons do not do anything. We inserted them in order to demonstrate the behavior of the mouse cursor for each setting of the property Mouse.cursor.
*/

clipHand.addEventListener(MouseEvent.ROLL_OVER,overHand);

clipHand.addEventListener(MouseEvent.ROLL_OUT,outClip);

clipIbeam.addEventListener(MouseEvent.ROLL_OVER,overIbeam);

clipIbeam.addEventListener(MouseEvent.ROLL_OUT,outClip);

clipButton.addEventListener(MouseEvent.ROLL_OVER,overButton);

clipButton.addEventListener(MouseEvent.ROLL_OUT,outClip);

clipArrow.addEventListener(MouseEvent.ROLL_OVER,overArrow);

clipArrow.addEventListener(MouseEvent.ROLL_OUT,outClip);

clipAuto.addEventListener(MouseEvent.ROLL_OVER,overAuto);

clipAuto.addEventListener(MouseEvent.ROLL_OUT,outClip);

 

function overHand(e:MouseEvent):void {

Mouse.cursor="hand";

}

 

function overIbeam(e:MouseEvent):void {

Mouse.cursor="ibeam";

}

 

function overButton(e:MouseEvent):void {

Mouse.cursor="button";

}

 

function overAuto(e:MouseEvent):void {

Mouse.cursor="auto";

}

 

function overArrow(e:MouseEvent):void {

Mouse.cursor="arrow";

}

 

function outClip(e:MouseEvent):void {

Mouse.cursor="auto";

}

 

Instead of:

Mouse.cursor="arrow";

You can use:

Mouse.cursor=MouseCursor.ARROW;

etc.

There are only five options. If you want to use a custom graphic for your mouse cursor, check out another of our How-Tos: How to Create a Custom Mouse Cursor in ActionScript 3.

Back to AS3 How To and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.