Recipe 7.14 Creating a Custom Mouse Pointer

7.14.1 Problem

You want to create a custom mouse pointer in place of the usual arrow or hand cursor.

7.14.2 Solution

Simulate a mouse pointer using a movie clip. Use a movie clip with an onEnterFrame( ) method to continually update its position to match the mouse pointer, and use Mouse.hide( ) to hide the standard pointer.

7.14.3 Discussion

You can effectively replace the mouse pointer with a custom movie clip using a simple, two-step technique. First, you should hide the default arrow pointer from view with the static method, Mouse.hide( ). You saw in Recipe 7.13 how you can cause a movie clip to move with the pointer using the startDrag( ) method. It seems logical to use this approach to make a custom pointer movie clip follow the mouse movement on stage; however, only one movie clip can follow the mouse movement at one time using the startDrag( ) method. This limitation can cause problems if you want to use startDrag( ) for both a custom pointer and to implement drag-and-drop functionality. To avoid this conflict, use an onEnterFrame( ) method to continually update the custom pointer movie clip's position on stage so that it matches the built-in _xmouse and _ymouse properties of the clip's parent, as follows:

myCustomPointer.onEnterFrame = function (  ) {
  this._x = this._parent._xmouse;
  this._y = this._parent._ymouse;
};

Or, if you prefer, you can use the setInterval( ) technique in place of onEnterFrame( ) (see Recipe 7.8). Using setInterval( ) is advisable in situations in which the frame rate is too low to update the custom pointer position quickly enough.

function updatePointer (pointerClip) {
  pointerClip._x = pointerClip._parent._xmouse;
  pointerClip._y = pointerClip._parent._ymouse;
  updateAfterEvent(  );
}

pointerInterval = setInterval(updatePointer, 10, mousePointer);

Follow these steps to replace the mouse pointer:

Let's create a simple working example. The following code creates a circle movie clip that uses the custom fade( ) method (see Recipe 7.9) to continually fade the circle in and out. Then, using an interval, Flash continually updates the position of the movie clip to follow the mouse movement. And to show that there is no conflict between the custom mouse pointer and draggable movie clips, we add a draggable square movie clip as well.

// Include DrawingMethods.as from Chapter 4 for its custom drawing methods. Include
// MovieClip.as from this chapter for its custom fade(  ) method.
#include "DrawingMethods.as"
#include "MovieClip.as"

// Create a custom pointer movie clip with a depth of 10000 to ensure that it appears
// in front of all other movie clips on the Stage. In this example, draw a small
// filled circle in the movie clip.
_root.createEmptyMovieClip("mousePointer", 10000);
mousePointer.lineStyle(1, 0x000000, 100);
mousePointer.beginFill(0, 100);
mousePointer.drawCircle(9);
mousePointer.endFill(  );
// Add an onEnterFrame(  ) method to mousePointer that causes the movie clip to
// continually fade up and down.
mousePointer.onEnterFrame = function (  ) {
  
  // If the movie clip is not currently being faded, call fade(  ).
  if (!this.isFading) {

    // Call fade(  ) with a rate of 5 and with the value of property this.up. The
    // this.up property is a custom property created for this situation. At first,
    // this.up has the value undefined, which is like passing false to fade(  ). After
    // each call to fade(  ), toggle this.up so that it alternates between true and
    // false, causing the clip to fade up and down repeatedly.
    this.fade(5, this.up);
    this.up = !this.up;
  }
};

// Create an interval to update the position of the custom pointer movie clip.
function updatePointer (pointerClip) {
  pointerClip._x = pointerClip._parent._xmouse;
  pointerClip._y = pointerClip._parent._ymouse;

  // Use updateAfterEvent(  ) to make sure that the screen updates often enough.
  updateAfterEvent(  );
}

// Set the interval on which updatePointer(  ) is called.
pointerInterval = setInterval(updatePointer, 100, mousePointer);

// Hide the default pointer.
Mouse.hide(  );

// Create a square movie clip.
_root.createEmptyMovieClip("square_mc", 1);
square_mc.lineStyle(1, 0x000000, 100);
square_mc.beginFill(0, 0);
square_mc.drawRectangle(100, 100);
square_mc.endFill;

// Make the square draggable when clicked.
square_mc.onPress = function (  ) {
  this.startDrag(  );
};
square_mc.onRelease = function (  ) {
  this.stopDrag(  );
};

To show the default pointer again in place of the custom pointer, follow these steps: