Home > Flash 5 > Custom Cursors 5/13/2008

Flash 5 Custom Cursors

Go ahead. Move the airplane around in the movie clip above. Notice that the buttons behave (although not linked to anything) in that their actions for mouse over and mouse down work as they should.

Creating a custom cursor in Flash 5 is extremely easy to do. There is one most important fact to keep in mind when creating custom cursors for your movies. Always have the layer the cursor is on on top of all other layers that you don't want to hide the cursor and don't put anything else on the layer that the cursor is on.

You can use fonts or drawings for your custom cursor. For this tutorial I have taken the easy way out and used a font. Also, I used one of the standard buttons that come in the Flash 5 Button Library. You can access that library from the Window menu. Window>Common Libraries>Buttons.

1

First create your layers. I have an extra layer (Text) that is not necessary but you'll want a buttons layer and a cursor layer. Remember to keep the cursor layer above your button layer.

 

2

If you use a font like I have you'll want to set the Text Options to Static Text.

I used the Webdings font and the letter "j" to get the airplane.

Once you have your text and set the Text Options to Static Text you need to break apart the text. You can do that by selecting the text and going to the Modify menu. Modify>Break Apart.

 

3

After breaking apart the text it really isn't text anymore. It is now an image as far as Flash is concerned.

With the image selected go to the Insert menu. Insert>Convert to Symbol.

The Symbol properties dialog box will open. Type in a name for your cursor and set the behavior as a movie clip. I named mine cursor. Click ok.

 

4

With the new movie clip selected go to the Instance Panel and in the name box type a name for your cursor movie clip. I named mine airplane. Click ok.

 

5 Now select the movie clip if it is not selected and right click on it. In the menu that appears choose Actions. The object actions dialog will appear.

Click on the Arrow next to Actions. Scroll down to onClipEvent and double click it. It will now show up in the script panel of the Object Actions Dialog.

Your script panel will look something like:

onClipEvent (load) {

}

 

6

Now go back to the left pane and find the Objects. Click on it to open it and look for Mouse. Click on the arrow next to mouse to open it and double click on hide. Your script will now look similar to:

onClipEvent (load) {
Mouse.hide();
}

 

7

Go back to Actions in the left pane and look for startDrag.

 

8

In the Target: field you need to type in the name of the movie clip. This is the name you gave your movie clip in step 4 above. Mine is named airplane so I typed that in followed by a comma and the word true.

This is an expression so be sure that the Expression box is checked as above.

Your script panel should now look like the one below.

 

9

That's it. You're done. Go to the File menu. File>Publish Preview. You'll now be able to see your new cursor in action.

You are not limited to static images. I imagine you could even create an animated cursor to use in this manner.






 



Copyright 1998-2005 © Web-Helper.net, All Rights Reserved  Privacy Policy