Advertisement
  1. Code
  2. ActionScript
Code

Quick Tip: Setting a Native Cursor using Flash Player 10.2

by
Difficulty:BeginnerLength:ShortLanguages:

In this Quick Tip I will show you how to set the operating system's Native Cursor through AS3, using the new feature in Flash Player 10.2.


Brief Overview

Not working at it should? You'll need to grab Flash Player 10.2+..

In the SWF you'll see a Start button.When you click on this button, your mouse becomes a crosshair ready to do some damage. As you click around on the stage, a gunshot sounds and a bullet hole graphic gets added to the stage at the point where you clicked with the mouse.

Compare it to the "old school" method which we discussed yesterday:

Not as smooth as the new Native Cursor in FP10.2 eh?


Step 1: Downloading and Setting up the Flex SDK

Before you can code the Native Cursor you need to make sure you have the correct Flex SDK. For this tutorial we will be using the cutting edge "Hero" SDK. I downloaded the one with a build date of Thu Feb 3, 2011(4.5.0.19786). Once you download it you will need to extract it; I extracted my copy to my C: drive.

Open Flash Builder and go to Menu > Window > Preferences. Choose "Flash Builder/Installed Flex SDKS" then click on the "Add" button.

custom native cursor as3 flash

Browse to the location where you extracted the SDK.Press the "OK" Button when you are finished.

custom native cursor as3 flash

You will be taken back to the installed SDK's screen.Check the box next to the newly installed SDK and press "Apply".We are now ready to use the new SDK.

custom native cursor as3 flash

Step 2: Setting Up the Flex Project

In Flash Builder, go to Menu > New > Flex Project. Set the following attributes

  • "Project Name": NativeCursor
  • "Application Type": Web (runs in Adobe Flash Player)
  • "Flex SDK Version": Use Default SDK (currently "Flex 4.5")
custom native cursor as3 flash

In the "Package Explorer" right click on the project folder and go to New > Folder.

custom native cursor as3 flash

Name this folder "assets".

custom native cursor as3 flash

In the project download there is a source folder. In this folder are two .pngs and one .mp3 file; copy these files and paste them into the newly created "assets" folder.


Step 3: Setting Up the Button and Sprite Container

In the NativeCursor.mxml within the s:Application attribute change the minWidth to "500" and the minHeight to "400". Add a width and height attribute and set them to "500" and "400" respectively. Lastly add a creationComplete="Setup()" attribute.The creationComplete attribute sets a function to be called when the application first loads.

You can delete the fx:Declarations block; we don't need it here.

Add the following code to the .mxml. The s:SpriteVisualElement is used as a container for a sprite in which we will place the button and bullet hole graphics:


Step 4: Import the classes and Set Up Variables

Above the Button and SpriteVisualElement, add an fx:Script tag.

Within this tag, inside the ![CDATA[ section, add the following code:

Here we just imported the classes we need, and set up some variables.


Step 5: Coding the SetUp() function

The SetUp() function is called when the application first loads, much like a constructor function. Here we add our Sprite to the container, add the button to that Sprite and add an EventListener to the button.


Step 5: Coding the startGame() function

The startGame() function is called when the user clicks on the "Start" button.

Add the following code

The first thing we do is remove the button from the stage.

Next we create a new MouseCursorData() object. The MouseCursorData class lets you define the appearance of a "native" mouse cursor -- i.e., one that replaces your operating system's cursor. Then we code a Vector to hold the BitmapData of our "crossHair" PNG image, which we embedded earlier.

Next we set the hotspot for our cursorData. Think of the hotspot as a "registration" point; it defines where the "tip" of the cursor is. We also set the cursorData.data property to our crossHairData Vector, which holds the BitmapData of the "crossHair" image.

Lastly we register the cursor with the cursorData object we created, and set the Mouse.cursor property. We also add a MouseEvent.CLICK event listener to the stage.


Step 6: Coding the fireShot() function

The fireShot()function is called whenever the user clicks on the stage.

Add the following code below the startGame() function:

We first check to see if this is the first time the user has clicked; if it is not the first time then we play the gunshot sound and add the bulletHole to the position on stage where the user clicked by using e.stageX ande.stageY. We actually subtract 16 from the stage.X and stage.Y so the image will be centered with the crosshair (the image is 32x32px). The event holds information about itself,you can see what it contains by using trace(e.toString())

If we did not check if this was the first time, then when the user first clicked on the Start button it would add a crosshair and play the gunshot sound -- and we don't want that.


Conclusion

One thing you should note about using Native Cursors is that the image cannot be bigger than 32 x 32px.

You can also use have an animated cursor with the Native Cursor by adding multiple Bitmaps (one per frame of animation) to the crossHairData Vector (let us know if you'd like a full Quick Tip explaining this).

Native Mouse Cursors are a welcome addition to the Flash Player (if not long overdue!)

Thanks for reading and I hope you found this tutorial useful.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.