Recipe 7.6 Defining Hit Areas for Movie Clips

7.6.1 Problem

You want to define a hit area for a movie clip used as a button.

7.6.2 Solution

Create a second movie clip to serve as the hit area. Then assign a reference to the hit area movie clip to the hitArea property of the button movie clip.

7.6.3 Discussion

When you create button symbols at authoring time, you can create alternate hit areas using the Hit frame of the button's timeline. This can be very useful if the artwork in the button is not solid or if you want to define a hit area that is otherwise different from the shape defined by the button's artwork.

You can also define hit areas for movie clips used as buttons. All movie clips have a built-in property named hitArea. If hitArea is left undefined, Flash automatically uses the movie clip's artwork as the hit area. However, you can assign the hitArea property a reference to another movie clip to serve as the hit area.

The following example shows how a custom hit area can be useful when dealing with odd shapes or outlines. Using code, we generate a movie clip that contains 100 small, unfilled circles that are aligned to form a square grid. We then assign an onRelease( ) event handler method to the movie clip instance. Testing the code reveals that the movie clip's rollover state is activated only when the mouse pointer is directly over one of the circle outlines.

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

// Create the button movie clip. Name it myButton_mc.
this.createEmptyMovieClip("myButton_mc", 1);

// Use a for statement to create 100 small circles and align them in 10 rows of 10 to
// form a square grid.
for (var i = 0, x = 0, y = 0; i < 100; i++) {
  myButton_mc.createEmptyMovieClip("circle_mc" + i, i);
  circle_mc = myButton_mc["circle_mc" + i];
  circle_mc.lineStyle(0, 0, 100);
  circle_mc.drawCircle(1);
  circle_mc._x = x;
  circle_mc._y = y;
  // Space the circles in a row by five pixels.
  x += 5;

  // Start the next row of circles.
  if (x > 45) {
    x = 0;
    y += 5;
  }
}
myButton_mc.onRelease = function (  ) {
  trace("you clicked the button");
};

We can create a solid, filled, transparent square movie clip and overlay it on top of the square grid composed of circles. Then, by assigning the new movie clip to the button movie clip's hitArea property, Flash uses its shape to define the hit area for the button movie clip.

// Create the new movie clip.
this.createEmptyMovieClip("hitArea_mc", 2);

// Draw a square in the movie clip with the dimensions of myButton_mc.
hitArea_mc.lineStyle(1, 0, 0);
hitArea_mc.beginFill(0, 0);
hitArea_mc.drawRectangle(myButton_mc._width, myButton_mc._height);

// Position hitArea_mc so that it overlays myButton_mc.
hitArea_mc._x = myButton_mc._x + hitArea_mc._width/2;
hitArea_mc._y = myButton_mc._y + hitArea_mc._height/2;

// Assign hitArea_mc as the hit area for myButton_mc.
myButton_mc.hitArea = hitArea_mc;

7.6.4 See Also

Recipe 7.15