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
- Download the fla file our example: htcursorcs4.fla
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.
