FLASH 5: CHANGING THE CURSOR IMAGE

This is for Flash 5.

OVERVIEW


There are three essential steps required to change the cursor image in Flash:
  1. Create a new cursor-image.
  2. Hide the default cursor-image.
  3. Drag the new cursor-image.  

IMPLEMENTATION


Step 1: Creating a new cursor image.

A cursor in Flash is essentially a MovieClip.  Create it as you would in creating a movie clip.  Start by inserting a New Symbol.

Name the symbol.  For this example, I name it CustomCursor.

Draw the desired shape.  Here are some things to consider:  

  • The size of the shape should not be too large (the default Windows cursor is about 25 by 25 pixels, but some as large as 32 by 32 pixels).  A custom one should be about 25 to 32 pixels range.
  • If the cursor is to be used to point at buttons that are small or positioned close to each other, the shape should have a clear tip, otherwise it will be hard to tell where the cursor is pointing to.  
  • When drawing the shape, the shape should be positioned such that the tip is located at the cross-hair.  Whatever is at the cross-hair will be the hotspot of the cursor.  (You can use the Info window to be precise.)  

Here's an example:

Step 2: Hiding the default cursor-image.

Simply use the following action:

Mouse.hide();

To make the icon disappear when the movie starts, put this action on the first frame of Scene 1 timeline.  

In case you need to make the cursor re-appear, use this following action:

Mouse.show();

For more info on this subject, consult the Flash 5 User Guide » ActionScript Dictionary » Max - Mov Mouse(object) section.

Step 3: Drag the new cursor-image.

Add the following code to the first frame of CustomCursor MovieClip symbol.

startDrag("", true);  // true indicates the movie clip will be

                      // centered when being dragged, 

                      // putting "this" instead of "" will 

                      // also work

This dragging action will cause the cursor cursor to follow the "hidden" default cursor pointer, essentially replacing it.  Insert an instance of the CustomCursor onto the stage.  

Test it.

Note: The Flash 5 manual (page 80-81) has a slightly different way to do this, but it will work as well.  
  

CHANGING TO MULTIPLE CURSORS


Here's another example where user can change the cursor by clicking one of the buttons.


Download FLA
   

More example: Color Alternating Cursor (click this link, the example is at the end of the page).

DESIGN ISSUES

  
To read about design issues related to this topic, click here>>

<<INDEX>>
    

(C) 2001 F. Permadi