Recipe 7.7 Checking for Mouseover

7.7.1 Problem

You want to check whether the mouse pointer is over a movie clip.

7.7.2 Solution

Use the onRollover( ) event handler, or use the hitTest( ) method within an onEnterFrame( ) method.

7.7.3 Discussion

In many cases, the onRollOver( ) and onRollOut( ) event handler methods, as shown in Recipe 7.5, are the easiest way to respond to the mouse pointer rolling over a movie clip. However, this technique fails when you drag one clip over another, such as when using a clip as a custom mouse pointer. Here is an example to illustrate the point:

// Include the DrawingMethods.as file from Chapter 4 for its drawRectangle(  ) and
// drawCircle(  ) methods.
#include "DrawingMethods.as"

// Create a rectangle_mc movie clip on the Stage.
_root.createEmptyMovieClip("rectangle_mc", 1);
rectangle_mc.lineStyle(1, 0x000000, 100);
rectangle_mc.beginFill(0, 100);
rectangle_mc.drawRectangle(100, 200, 10);
rectangle_mc.endFill(  );
rectangle_mc._x = 100;
rectangle_mc._y = 100;

// Create onRollOver(  ) and onRollOut(  ) methods such that when the mouse rolls on and
// off the movie clip, it goes to 50% transparency and back.
rectangle_mc.onRollOver = function (  ) {
  this._alpha = 50;
};

rectangle_mc.onRollOut = function (  ) {
  this._alpha = 100;
};

// Create a circle_mc movie clip.
_root.createEmptyMovieClip("circle_mc", 2);
circle_mc.lineStyle(1, 0x000000, 100);
circle_mc.beginFill(0xFFFFFF, 100);
circle_mc.drawCircle(50);
circle_mc.endFill(  );

// Create onPress(  ) and onRelease(  ) methods such 
// that circle_mc is draggable when clicked.
circle_mc.onPress = function (  ) {
  this.startDrag(  );
};

circle_mc.onRelease = function (  ) {
  this.stopDrag(  );
};

Testing this example reveals that mousing over the rectangle normally works just fine. But when you drag the circle over the rectangle, the rectangle_mc.onRollOver( ) event handler is not triggered.

The workaround is to use an onEnterFrame( ) method instead of onRollOver( ) and onRollOut( ) and check whether the mouse pointer's coordinates overlap the movie clip using hitTest( ). You should use _root._xmouse and _root._ymouse as the x and y parameters for hitTest( ).

// Include the DrawingMethods.as file from Chapter 4 for its drawRectangle(  ) and
// drawCircle(  ) methods.
#include "DrawingMethods.as"

_root.createEmptyMovieClip("rectangle_mc", 1);
rectangle_mc.lineStyle(1, 0x000000, 100);
rectangle_mc.beginFill(0, 100);
rectangle_mc.drawRectangle(100, 200, 10);
rectangle_mc.endFill(  );
rectangle_mc._x = 100;
rectangle_mc._y = 100;

// Use an onEnterFrame(  ) method instead of onRollOver(  ) and onRollOut(  ).
rectangle_mc.onEnterFrame = function (  ) {

  // Check whether the mouse pointer, at coords (_root._xmouse, _root._ymouse), 
  // overlaps the movie clip using the hitTest(  ) method. If it overlaps, set _alpha
  // to 50; otherwise, set _alpha to 100.
  if (this.hitTest(_root._xmouse, _root._ymouse)) {
    this._alpha = 50;
  } else {
    this._alpha = 100;
  }
};

_root.createEmptyMovieClip("circle_mc", 2);
circle_mc.lineStyle(1, 0x000000, 100);
circle_mc.beginFill(0xFFFFFF, 100);
circle_mc.drawCircle(50);
circle_mc.endFill(  );

circle_mc.onPress = function (  ) {
  this.startDrag(  );
};

circle_mc.onRelease = function (  ) {
  this.stopDrag(  );
};

There is an additional issue that arises with this technique. In the preceding example code, the _alpha property is set to 50 continuously as long as the mouse pointer is over the movie clip, and it is set to 100 continuously as long as the mouse pointer is not over the movie clip. In this example this is not particularly a problem, but in some applications it is important that the code be executed only once on mouseover and once on mouseout. You can accomplish this task by the addition of a custom property and a little bit of extra logic, as shown by the bold text in the following example:

rectangle_mc.onEnterFrame = function (  ) {
  // Check whether the mouse pointer is over the movie clip and whether the custom
  // property, mouseover, is false. If both conditions are true, perform the
  // mouseover actions. Otherwise, if the mouse pointer is not over the movie clip
  // and the mouseover property is true, perform the mouseout actions.
  if (this.hitTest(_root._xmouse, _root._ymouse) && !this.mouseover) {
    trace("setting _alpha = 50");
    this._alpha = 50;

    // Set mouseover to true to prevent mouseover actions from executing again.
    this.mouseover = true;
  }
  else if (!this.hitTest(_root._xmouse, _root._ymouse) && this.mouseover) {
    trace("setting _alpha = 100");
    this._alpha = 100;

    // Set mouseover to false to prevent mouseout actions from executing again.
    this.mouseover = false;

  }
};