AS3 Quickie – Native Mouse Cursors

We’re looking all the way back to Flash Player 10.2 for a peek at native mouse cursor support! This feature allows us to use bitmap based mouse cursors that run at the OS level rather than inside the display list in Flash Player. Huge performance gains!

[kml_flashembed publishmethod=”static” fversion=”10.2.0″ movie=”/wp-content/uploads/2012/07/NativeCursor.swf” width=”550″ height=”400″ targetclass=”flashmovie” play=”true” loop=”true” menu=”false” quality=”high” wmode=”direct” allowfullscreen=”true” allowscriptaccess=”always” allownetworking=”all”]
Requires Flash Player 10.2 or above!

It is fairly simple to use a bitmap as a native cursor in Flash Player. We can do so through the [Embed] mechanism:

[Embed (source="AngryFace.png" )]
public static const AngryFace:Class;

Or by utilizing a bitmap image imported through the Flash Professional Library:

Perform the necessary imports:

import flash.ui.Mouse;
import flash.ui.MouseCursorData;
import flash.geom.Point;
import flash.display.BitmapData;

Verify that the system supports this feature:

if(Mouse.supportsNativeCursor){}

Set up all of our objects… note that AngryCursor is a bitmap object within our library:

public var angryCursor:AngryCursor;
private var cursorBitmapData:BitmapData;
private var cursorData:MouseCursorData;
private var cursorVector:Vector.<BitmapData>;

The first step is to create a new instance of AngryCursor and then draw the BitmapData from it for later:

angryCursor = new AngryCursor();
cursorBitmapData = new BitmapData(32, 32, true, 0x000000);
cursorBitmapData.draw(angryCursor);

The MouseCursorData requires a Vector of BitmapData objects [not to exceed 32×32 per OS restrictions]. Assign the newly created BitmapData to index 0 of our Vector:

cursorVector = new Vector.<BitmapData>();
cursorVector[0] = cursorBitmapData;

Now, we create a new MouseCursorData object. Set an offset, if desired, through the MouseCursorData.hotSpot property… and then assign the Vector we’ve created to the MouseCursorData.data property:

cursorData = new MouseCursorData();
cursorData.hotSpot = new Point(10, 10);
cursorData.data = cursorVector;

As the final step in this process, we assign the MouseCursorData to the Mouse object through Mouse.registerCursor and set Mouse.cursor to that names assignment.

Mouse.registerCursor("angryCursor", cursorData);
Mouse.cursor = "angryCursor";

That should do it! We will now have a native accelerated mouse cursor with our Flash application. The full code is below:

package  {
	import flash.display.Sprite;
	import flash.ui.Mouse;
	import flash.ui.MouseCursorData;
	import flash.geom.Point;
	import flash.display.BitmapData;
	
	public class NativeCursor extends Sprite {
		
		public var angryCursor:AngryCursor;
		private var cursorBitmapData:BitmapData;
		private var cursorData:MouseCursorData;
		private var cursorVector:Vector.<BitmapData>;
		
		public function NativeCursor() {
			if(Mouse.supportsNativeCursor){
				setupMouseCursor();
			}
		}
		
		private function setupMouseCursor():void {
			angryCursor = new AngryCursor();
			cursorBitmapData = new BitmapData(32, 32, true, 0x000000);
			cursorBitmapData.draw(angryCursor);
			
			cursorVector = new Vector.<BitmapData>();
			cursorVector[0] = cursorBitmapData;
			
			cursorData = new MouseCursorData();
			cursorData.hotSpot = new Point(10, 10);
			cursorData.data = cursorVector;
			
			Mouse.registerCursor("angryCursor", cursorData);
			Mouse.cursor = "angryCursor";
		}
		
		
	}
	
}

NOTE: If using multiple bitmap images, we can have animated cursors and control the playback frame rate via MouseCursorData.frameRate.

Want the full package? Download below:
Packaged code and Flash Professional CS6 project