ActionScript - Controlling the Mouse Cursor

ActionScript - Controlling the Mouse Cursor
Part 2 - Code

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

Getting Started | Package | Calling the code

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. This page provides an overview of the technique and the modifications necessary to create a class to simplify implementation.

This code assumes that you already have a Movie Clip that will be used as a cursor.

To simulate a cursor you must

Detect that the mouse has entered some object
Hide the existing cursor - the Arrow
Make the custom cursor visible
Make sure that the cursor is on top of the object
Move the cursor as the mouse moves
Hide the custom cursor and restore the original cursor when the mouse "leaves" the object

The code to perform these functions is attached to events

Mouse Over	Hide the existing cursor and display the new one
Mouse Out	Restore the original cursor
Mouse Move	Move the cursor

Package

I define classes in a package so that they can be easily reused. Because mine is still under construction, this will only describe the basics.

I come from a Delphi programming background, so I am following Delphi syntax and design rules. This means that

Class names begin with "T" (for "Type")
Local private variable names begin with "F" (for "Field")
I ignore the c-like case sensitive naming rules

  private var FActiveCursor : DisplayObject;
  private var FActiveObject : DisplayObject;

public function DefineCursor(AnObject:DisplayObject, image:DisplayObject){
  SetCursor(   image);
  SetObject(AnObject);
}

public function SetCursor(image:DisplayObject){
  FActiveCursor = image;

  if (image is InteractiveObject){
     // This stops the cursor from flashing
     // Otherwise, Mouse_Out is called when the mouse moves over the cursor
    (FActiveCursor as InteractiveObject).mouseEnabled = false; 
  }

  image.visible = false; // Hides cursors shown on stage
}

public function SetObject(AnObject:DisplayObject){ 
  AnObject.addEventListener(MouseEvent.MOUSE_OVER, DoMouseOver)
  AnObject.addEventListener(MouseEvent.MOUSE_OUT,  DoMouseOut)

  FActiveObject = AnObject; // just for test, will search for it later
}

These are the events

function DoMouseOver(m:MouseEvent){
  Mouse.hide();
  FActiveObject.addEventListener(MouseEvent.MOUSE_MOVE,DoMouseMove)

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

  FActiveCursor.x = m.stageX;
  FActiveCursor.y = m.stageY;
  FActiveCursor.visible = true;

  m.updateAfterEvent(); // This makes the scrolling much smoother
}

function DoMouseOut(m:MouseEvent){
  Mouse.show();
  FActiveObject.removeEventListener(MouseEvent.MOUSE_MOVE,DoMouseMove)
  FActiveCursor.visible = false;
}

function DoMouseMove(m:MouseEvent){
  FActiveCursor.x = m.stageX;
  FActiveCursor.y = m.stageY;

  m.updateAfterEvent(); // This makes the scrolling much smoother
}

Calling the code

The current code only handles one cursor icon and one target per instance of TMouseCursors. Any number of targets can be defined using multiple instances of TMouseCursors.

In the following example, target1 and target2 are single frame Movie Clips (so they can have names). cursors is an imported Movie Clip that contains several named cursors, cursors.DoubleVert refers to one of the cursors.

import mcCommon.*;

var MouseCursor1: TMouseCursors = new TMouseCursors;
var MouseCursor2: TMouseCursors = new TMouseCursors;

MouseCursor1.DefineCursor(target1,cursors.DoubleVert);
MouseCursor2.DefineCursor(target2,cursors.DoubleHorz);

Author: Robert Clemenzi - clemenzi@cpcug.org