Actionscript Cookbook

7.14. Creating a Custom Mouse Pointer

Problem

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

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.

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 ...