Working with Native Custom Cursors in Flash

Another cool feature available for the first time in the Flash Player 10.2 beta release is the introduction of support for native custom mouse cursors. This was a feature request that gathered lots of votes from our Flash community.

The Problem

What problem does this feature solve? In the past, when you wanted to have custom cursor you had to do something along these lines:

  • Hide the mouse cursor (Mouse.hide())
  • Use a bitmap or a movie clip as the mouse cursor and place this either by listening for the MouseMove event or using startDrag method

There is one problem with this approach: you use a lot more resources than when using the system cursors and the fake cursor movement can be bumpy.

The Solution

To solve this problem, Flash Player 10.2 introduces a new API that enables you to use bitmaps as the source for native cursors – offloading this task from Flash Player to the OS. The new API is pretty simple:

  • flash.display.MouseCursorData – a new class used to defined new cursors using bitmaps
  • a new method added to the Mouse class for registering the cursors: Mouse.registerCursor(“name”, MouseCursorData)

Here is a simple code snippet that shows how you can use this new API:

[Embed (source="/assets/xmas.png" )]
public static const XmasTree:Class;

...

//create the cursor for Xmas Tree
var bitmapDatas:Vector.<BitmapData>
		= new Vector.<BitmapData>(1, true);
var bitmap:Bitmap = new XmasTree();
bitmapDatas[0] = bitmap.bitmapData;

var cursorData:MouseCursorData = new MouseCursorData();
cursorData.hotSpot = new Point(0,0);
cursorData.data = bitmapDatas;
//register the MouseCursorData
Mouse.registerCursor("Xmas", cursorData);

...
//use the custom cursor
Mouse.cursor = "Xmas";

//revert to default cursor
Mouse.cursor = flash.ui.MouseCursor.AUTO;

You have to keep in mind that you can not use images bigger than 32 pixels X 32 pixels (this is an OS limitation). You can use a series of still images if you want to define an animated cursor. You have to pay attention when defining the BitmapData vector lenght – if you define the length bigger than the number of elements you’ll get an error and the mouse cursor will not apear. You can control the animation speed by using the frameRate property of the MouseCursorData. Here is a snippet of code:

[Embed (source="/assets/cancel1.png" )]
public static const Cancel1:Class;
[Embed (source="/assets/cancel2.png" )]
public static const Cancel2:Class;
[Embed (source="/assets/cancel3.png" )]
public static const Cancel3:Class;

...

//create the cursor for Xmas Tree
var bitmapDatas:Vector.<BitmapData>
		= new Vector.<BitmapData>(3, true);
var bitmap:Bitmap = new Cancel1();
bitmapDatas[0] = bitmap.bitmapData;
bitmap = new Cancel2();
bitmapDatas[1] = bitmap.bitmapData;
bitmap = new Cancel3();
bitmapDatas[2] = bitmap.bitmapData;

var cursorData:MouseCursorData = new MouseCursorData();
cursorData.hotSpot = new Point(0,0);
cursorData.data = bitmapDatas;

//set the framerate
cursorData.frameRate = 3;

//register the MouseCursorData
Mouse.registerCursor("Animated", cursorData);

Demo Time

Note: I’m by no means a designer and as a direct result the bitmaps I created for my custom cursors are ugly as hell. So please don’t dismiss this feature because of my total lack of artistic skills :D

If you have Flash Player 10.2 or newer installed on your machine, you can click here to see a Flex application using this feature (you can right-click and choose View Source). Or you can download the project from here and see how the code is put together.

If you don’t have Flash Player 10.2 or newer installed you can watch this screencast:

Show Comments

Hide Comments

Comments are closed.