How To Make Your Own Cursor Using Flash

A while back, I posted an article here on DevWebPro explaining that you can change your cursor type using JavaScript and CSS, and in this tutorial, I will show you how you can change your cursor in Flash with a cursor that you can make yourself. In this example/tutorial, I will be using a blue-circled cursor when you hover over the boy, and a pink-cicled cursor when you hover over the girl.

Step 1: Create Flash Document and Import Images into Library:

After you have created a fresh, new Flash document, we will need to import the images that we will be working with. In this tutorial, we will be using two images of a boy and a girl (you can use the images provided below). For Flash to work with these images, we will need to import these into the Flash library.

To import the images into the Flash library, from the File menu, click on the Import to Library option. From this window (which will look similar to an “Open” window), select the two files that you would like to use and then press the “Open” button. These images will then be automatically added to the Library.

(If your Flash library does not automatically load for you by default, press your F11 key)

Step 2: Placing Images on Stage

Now that you have both images in your Library, you are ready to place the images on the stage. To do this, drag the name of the image that you would like to have placed on the stage onto the stage. You can use your mouse or keyboard arrow keys to nudge/position the image where you would like it.

Depending on the image you are using, you may need to resize the image so that it fits on the stage. To do this, use the Free Transform Tool on the Toolbar to resize the image you have just placed on the stage.

Now that you have one of the images placed where you would like it on the stage, repeat this step to bring the other image onto the stage. When this has been completed, you should have both of the images for the girl and boy on the stage (as shown below).

Step 3: Converting Images to Symbols

For both of these images to have ActionScript associated with them (which we will add later), we will need to convert them to different symbols than what they currently are. To do this, select the boy image and then press F8 and a “Convert to Symbol” window will appear. Within the “Convert to Symbol” window for this object, please assign the following:

  • Name: Boy Graphic
  • Behavior: Movie Clip

Repeat this step for the girl image that you are using. All that you have to change in the “Convert to Symbol” window is the name from Boy Graphic to Girl Graphic.

Step 4: Creating Circles/Cursors

In this step, we will be creating the circles that we will be using as our cursors. To do this, we will be using the Oval tool from the Toolbox.

The first circle that we will create in this tutorial is the circle for the boy. Please execute the following steps to create the circle for the boy image:

  1. From the Color Mixer section on the right-hand side of your Flash window, select the color blue as the Fill Color.
  2. Select the Oval Tool from the Toolbox.
  3. Draw a small circle (about penny size) on the stage. After you have drawn it on the stage, drag it off stage, because we do not want the circle(s) to be visible when the Flash presentation starts to load.

Repeat this step to create a circle for the girl; however, change the Fill Color in the Color Mixer from blue to pink.

Step 5: Convert Circles to Symbols

For this step, we will be using the same principles as described in Step 3. We will need to convert the circles from Shapes to Movie Clips so that we can access these with ActionScript. To do this, select the first circle that you would like to convert and then press the F8 key to open the “Convert to Symbol” window.

Within the “Convert to Symbol” window, please assign the following properties to the first circle shape:

  • Name: Blue Circle
  • Behavior: Movie Clip

Repeat this step for the pink circle you have created. All that you have to change is the name in the “Convert to Symbol” window from blue to pink.

Step 6: Assigning Instance Names to Objects

Now that the boy and girl images have been assigned to movie clips, we are now ready to assign Instance Names to them so that ActionScript can reference them. To do this, click once on the first/blue circle, and in the Properties Inspector at the bottom of your Flash window, enter the name “boycursor” (without quotes, one word) in the Instance Name: field (as shown below).

Repeat this step for the pink circle, naming the Instance Name of the pink circle as “girlcursor”.

Step 7: Applying the ActionScript

We are now ready to apply the ActionScript to both the girl and boy images. To do this, click on the boy image first and then open the Actions Inspector (right above the Properties Inspector). Within the Actions Inspector with the boy image selected, insert the following ActionScript code:

on (rollOver) { 
	Mouse.hide() // This tells ActionScript to hide the mouse. 
	_root.boycursor.startDrag(true); // Replace mouse cursor with the blue circle. 
	_root.boycursor._visible = true; 
	_root.girlcursor._visible = false; // If the cursor is the pink circle, disable it. 
}

After you have entered the ActionScript in the Actions Inspector for the boy, you are ready to apply ActionScript for the girl image. To do this, select the girl image, and in the Actions Inspector insert the following ActionScript code:

on (rollOver) { 
	Mouse.hide(); 
	_root.girlcursor.startDrag(true); // Replace mouse cursor with the pink circle. 
	_root.girlcursor._visible = true; 
	_root.boycursor._visible = false; // If the cursor is the blue circle, disable it. 
}

Now that you have the ActionScript inserted into both of the images, you are now ready to test your Flash presentation. To test your Flash presentation and see the cursor replaced by the new circles that you have created, click on the Control drop-down menu, and then select Test Movie.

A new window will appear with the Flash presentation you have just created, and to test it, hover your mouse over the boy and girl to see your mouse cursor toggle between the two colored circles (as shown below).

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment