ActionScript - Controlling the Mouse Cursor - Part 1: Creating the Cursors

ActionScript - Controlling the Mouse Cursor
Part 1 - Creating the Cursors

On this page, I described how to create a cursor library that can be reused in several projects. In Part 2: Code, I describe the code that actually displays the cursors.

Getting Started

The Flash help provides a pretty decent example on how to modify the mouse cursor at the bottom of the Mouse class description.

The example contains one obvious "error" - (well, maybe this was intentional to help you learn).

Use event.stageX & Y instead of event.localX & Y: If you play with the position of the large square (controlled by gutter), you will see why.

When I tried to write my own ... well, it was pretty bad - the cursor motion was real jerky and the cursor would sometimes flash on and off. Of course, I did not *exactly* follow the example ... I used a Movie Clip to create the cursor because I did not want to do complicated graphics in code.

The solution is simple - stop the object (Movie Clip) from receiving mouse events

  if (image is InteractiveObject){
    (FActiveCursor as InteractiveObject).mouseEnabled = false; 
  }

I created a single frame movie clip and used it as a cursor. Without this code, sometimes the real (hidden) mouse cursor would slip over the movie clip and generate MOUSE_OUT events for the lower (target) object. The result was a flashing cursor.

"cursors" Layer

To always show mouse cursors on top of all other objects

Create a new layer
Name the layer cursors
Place all the cursors (Movie Clips) you want on this layer ... and name them
Make the cursors invisible so they won't show at run time (I do this in code as they are registered)
Make it the topmost display layer ... so the cursors don't go under other graphics

Using this method, each cursor will have a unique name that can be used in your code and it will be shown on top of every thing else.

Apparently, the layers in the timeline are for design use only and they do not represent objects that can be accessed via ActionScript 3. If these were available to code, then it would simplify accessing custom cursors (including making them invisible).

A Library of Cursors

You don't what to have to create new cursors for all your projects ... if possible, you want to do it once and then reuse them.

When you create Movie Clips they are automatically placed in the Library. If you like, you can create a folder (in the library), change the name to cursors, and move the cursors there. When you right click a Movie Clip, there are 2 export options.

Menu Option	File Extension	Size	File Type
Export Flash Movie...	*.swf	1 KB	Flash Movie
Export SWC File...	*.swc	4 KB	Flash Component File

In order to reuse the *.swf files (Movie Clips) use

File / Import / Import to Library...

You can multiselect several files and import them. (This entire process is more than a little slow.) After this, you will need to place instances of these cursor on the stage, name them, and so forth.

In order to also import the folder structure, use

File / Import / Open External Library...

This allows you to select an *.fla file - you need to copy and paste the entire Library (delete what you don't want later). However, you still have to place each individual cursor (movie clip) on the form ... and name then.

"cursors" Movie Clip

I want something with a little less work ... this describes creating a movie of movies which has the advantage of having to import, place, and name only one (1) object to provide an entire library of cursors.

Create a Movie Clip called TCursors
Place all the individual cursors (Movie Clips) in this clip
In the Library, right click the TCursors Movie Clip and select Export Flash Movie... to save the master clip - all the others will be automatically included

This has tremendous advantages.

Adding a single component to the library adds all the cursors
The cursor names are already associated with the images (objects) - otherwise, you have to name each one as it is placed on the form
Searching for an cursor by name is easier

This is close, but, unfortunately, Export Flash Movie... does not work. The detailed example below does work.

Creating a Cursor

It is possible to create an image and then convert it to a Movie Clip ... but I don't think that is a good idea because it is difficult to control where the hotspot will be. Instead,

From the menu, select Insert / New Symbol...
Name the class - either start the name with "T" (for Type), or end it with "_class", to help keep things clear
Be sure that Movie clip is selected
After clicking OK, a plus sign indicates where the hotspot will be ... this locates the actual spot that the mouse cursor will be over
Set the zoom to 800%
Draw what ever you want - try to keep everything inside a 16x16 or 32x32 box
You can use the H W X Y properties to precisely control where individual components are placed ... but be aware that Y is negative going UP and positive going DOWN
To look good, you want to consider adding a drop shadow or a white border next to single width black lines
Double check ALL the values you entered ... Flash changes them and you will probably have to fix them several times

After creating a number of cursors, create a TCursors Movie Clip and drag all your new cursors to it. Place the cursors so that they are visible in the Library display. You might also want to add their names ... if you have room. Don't bother saving this Movie Clip as a file ... it won't work ... just save the *.fla file like usual and use File / Import / Open External Library... to load the Movie Clip.

Import Method	File Type	Results
Import to Stage...	*.swf	You get one Group per cursor - these will have to be converted to Movie Clips to use them
Import to Library...	*.swf	You get a Graphic with one Group per cursor
Open External Library...	*.fla	You get a usable movie

Using File / Import / Open External Library..., you can copy and paste TCursors to the existing Library, or you can just leave the external library open and use it directly. To keep down the clutter, you should place the individual cursors in a separate folder (as discussed above) before saving the original *.fla file.

There are a couple of issues with this

The x/y location of each cursor is relative to its container ... therefore, the code needs to set the container's location to 0,0.
The cursors flash unless you disable mouse events for the container.

Another alternative is to attach the cursor directly to the stage

stage.addChild(cursors.DoubleVert);

Because I do this inside classes that don't recognize the stage object, I use

private var FActiveCursor : DisplayObject;   // This is the cursor
private var FActiveObject : DisplayObject;   // The cursor is displayed over this

FActiveObject.stage.addChild(FActiveCursor); // Puts the cursor on top of everything

Note: While Windows uses 32x32 cursors, the visible icon is normally smaller and located somewhere inside the 32x32 canvas. For instance - the Arrow has a height of 20 pixels, the Pointing Finger is 23 pixels high, and others have one dimension of 26 pixels.

Notes

I frequently use the term folder. This refers to a folder in the Flash library window, not a file folder (directory) in Windows Explorer.

I come from a Delphi programming background where

All (most) resusable things are named with an initial capital T (standing for Type)
Many private variable names begin with an initial capital F (standing for Field)

Author: Robert Clemenzi - clemenzi@cpcug.org