8 February 2011
The release of Adobe Flash Player 10.2 introduces a compelling new feature called native mouse cursors. You can now use bitmap-based mouse cursors that run at the OS level rather than inside the display list in Adobe Flash Player. In this article, you'll learn how to leverage this new capability using minimal coding.
Since the introduction of Flash Player 5, developers have been able to use methods such as
Mouse.hide to customize the appearance of cursors in games and applications. However, the previous implementation had the following limitations:
updateAfterEventmethod can lead to high CPU usage.
Fortunately, leveraging the new native mouse cursor feature does not require writing a lot of code. You'll need to use slightly more ActionScript to implement simple
startDrag functionality. The code is fairly straightforward and the visual effects are worth the effort required to customize the cursor or animate it.
When implementing native mouse cursors, you'll use several properties that are very concise and efficient. The primary functionality is performed by the MouseCursorData object that is located in the flash.ui package.
The following three properties control the MouseCursorData object:
After you've created a MouseCursorData object, use the
Mouse.registerCursor method to assign it to the Mouse object. Once the Mouse object has been registered, you can pass the alias to the
Note: By passing a vector of BitmapData objects, you can specify a series of bitmap cursors in order to create a native animated cursor.
Examine the following code example:
// Create a MouseCursorData object var cursorData:MouseCursorData = new MouseCursorData(); // Specify the hotspot cursorData.hotSpot = new Point(15,15); // Pass the cursor bitmap to a BitmapData Vector var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true); // Create the bitmap cursor // The bitmap must be 32x32 pixels or smaller, due to an OS limitation var bitmap:Bitmap = new zoomCursor(); // Pass the value to the bitmapDatas vector bitmapDatas = bitmap.bitmapData; // Assign the bitmap to the MouseCursor object cursorData.data = bitmapDatas; // Register the MouseCursorData to the Mouse object with an alias Mouse.registerCursor("myCursor", cursorData); // When needed for display, pass the alias to the existing cursor property Mouse.cursor = "myCursor";
It is important to remember that the bitmap files used for the cursors should not exceed 32 × 32 pixels, due to an OS limitation. Attempts to pass a larger bitmap will fail silently.
At any time, you can stop using the current bitmap cursor and switch back to display the default OS cursor. To achieve this, use one of the constant values of the
MouseCursor class, as shown below:
Mouse.cursor = MouseCursor.AUTO;
The previous example created a simple static bitmap cursor; the next example creates an animated cursor. The process is easy—simply supply multiple bitmap images and then specify the frame rate of the cursor animation, as follows:
// Create a MouseCursorData object var cursorData:MouseCursorData = new MouseCursorData(); // Specify the hotspot cursorData.hotSpot = new Point(15,15); // Pass the cursor's bitmap to a BitmapData Vector var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(3, true); // Create the bitmap cursor frames // Bitmaps must be 32 x 32 pixels or less, due to an OS limitation var frame1Bitmap:Bitmap = new frame1(); var frame2Bitmap:Bitmap = new frame2(); var frame3Bitmap:Bitmap = new frame3(); // Pass the values of the bitmap files to the bitmapDatas vector bitmapDatas = frame1Bitmap.bitmapData; bitmapDatas = frame2Bitmap.bitmapData; bitmapDatas = frame3Bitmap.bitmapData; // Assign the bitmap data to the MouseCursor object cursorData.data = bitmapDatas; // Pass the frame rate of the animated cursor (1fps) cursorData.frameRate = 1; // Register the MouseCursorData to the Mouse object Mouse.registerCursor("myAnimatedCursor", cursorData); // When needed for display, pass the alias to the existing cursor property Mouse.cursor = "myAnimatedCursor";
By setting the
MouseCursorData.frameRate property and passing a series of BitmapData objects, Flash Player automatically creates an animated cursor that plays at the specified frame rate. This happens automatically, so you do not need any additional code to animate the cursor.
The following demo shows examples of a native static cursor and native animated cursor. The bottom button resets to the default OS cursor.
Note: You must have Flash Player 10.2 installed to view this behavior.
Whether you develop games or RIAs, the native mouse cursor feature makes it easier to customize cursors than ever before. Additionally, the new implementation enhances the appearance and responsiveness of an application while reducing the CPU load required to move and redraw the cursor on the Stage.
Check out Mihai Corlan's article, Working with native custom cursors in Flash, on the Adobe Flash Platform blog to research further.
The native cursor example uses icons from the Silk Icons 1.3 set by Mark James.