An Applet and the Code

In this simple example, we show how to create a custom mouse cursor in ActionScript 3. We use a disk as our custom cursor but, obviously, you can use any custom graphic. In Flash Player 10 and Flash CS4, there is a new property, Mouse.cursor, which provides five custom cursors. See AS3 Tip: Mouse.cursor - A New Property in Flash Player 10. We do not use this property here.

Download

The code in the source file is exhaustively commented.

The Code

/*
We are creating a Sprite, 'board'. We add board as a child of 'this', that is, the MainTimeline, and position board within the main movie. Then, we call a function (defined later in the script) that draws a white square in board.
*/

var board:Sprite=new Sprite();

this.addChild(board);

board.x=95;

board.y=85;

drawBoard();

/*
When the user mouses over board, the mouse cursor will be replaced by a custom cursor -- in our case a disk with a gradient fill. In order to avoid drawing a gradient fill at runtime, we drew our disk by hand and converted it to a MovieClip, DiskCursor. We deleted the clip from the Stage; the clip remained in the Library. From the menu in the upper right corner of the Library window, we chose 'Linkage' (or 'Properties' in Flash CS4) and checked 'Export to ActionScript' under the name 'DiskCursor'. After the linkage is established (and only after that), we can create instances of our clip at runtime. We do it below.
*/

var disk:DiskCursor= new DiskCursor();

/*
Without the line below, the code wouldn't work. Why? The portion of board hidden under the custom cursor (which is a MovieClip and thus an InteractiveObject) would not receive mouse events; disk would receive them. Try commenting the line out, and decyphering the havoc that happens. It does follow logically from the way event listeners below are assigned.
*/

disk.mouseEnabled=false;

 

function drawBoard():void {

board.graphics.lineStyle(1,0x000000);

board.graphics.beginFill(0xFFFFFF);

board.graphics.drawRect(0,0,250,250);

board.graphics.endFill();

board.filters = [ new DropShadowFilter() ];

}

/*
We attach the appropriate listeners to board. The listeners will cause the mouse cursor to change when the user mouses over board (ROLL_OVER). When the user moves the mouse outside board (ROLL_OUT), the cursor returns to the regular shape. When the user moves the mouse over board (MOUSE_MOVE), the custom cursor follows. The code responsible for that is placed in event handlers 'boardOut', boardOver', and 'boardMove'.
*/

board.addEventListener(MouseEvent.ROLL_OUT,boardOut);

board.addEventListener(MouseEvent.ROLL_OVER,boardOver);

board.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);

/*
When the user moves the mouse over board, our custom cursor, disk, is added as a child of the MainTimeline so it can now be visible. The regular mouse cursor is hidden and disk is placed at the mouse position. In boardMove handler, disk will be made to follow the mouse.
*/

function boardOver(e:MouseEvent):void {

this.addChild(disk);

disk.x=stage.mouseX;

disk.y=stage.mouseY;

Mouse.hide();

}

/*
When the mouse moves away from board, and the MainTimline contains disk as a child (this.contains(disk)) the child is removed and the regular mouse cursor shows. The test, this.contains(disk), in this example is an overkill. In general, though, an attempt to remove nonexisting children causes an error.
*/

function boardOut(e:MouseEvent):void {

if(this.contains(disk)){

this.removeChild(disk);

Mouse.show();

}

}

/*
The next function is executed when the user moves the mouse over board. The disk coordinates are set to those of the mouse, so disk follows the mouse. e.updateAfterEvent, which can be used with MOUSE_MOVE, causes the motion to appear smoother. Without e.updateAfterEvent(), the position would not be updated until the next frame. at 12 fps, it causes roughness.
*/

function boardMove(e:MouseEvent):void {

disk.x=stage.mouseX;

disk.y=stage.mouseY;

e.updateAfterEvent();

}

 

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.