Table of Contents

mc.hitArea

Description

The hitArea property is used only with movie clips that define button event handlers (e.g., onPress( ), onRelease( ), etc.). It sets mc's button hit area�the physical region that must be under the mouse pointer in order for the button to be activated by a mouseclick. When the value of hitArea is null or undefined, the shape of mc's content is used as the hit area. When the value of hitArea is a reference to a movie clip, the shape of that clip's content is used as mc's hit area. The hitArea clip can move, be invisible, or even be reassigned at any time, allowing great flexibility for dynamically generated buttons. For example, an animated button can have a hit area that changes size with the animation, or a button can have a different hit area for its Over, Up, and Down states.

The movie clip used as the hitArea for mc can reside on any clip's timeline, including mc's. For example:

// Set button_mc's hit area to a clip inside itself
button_mc.hitArea = button_mc.shape_mc;
// Set button_mc's hit area to a clip outside itself
button_mc.hitArea = _root.shapeClips.shape_mc;

When the mouse pointer moves into the hit area, it changes from an arrow pointer to a hand pointer. To suppress the display of the hand pointer, set useHandCursor to false.

For information on implementing button behavior for a movie clip, see the MovieClip class, MovieClip.hitTest( ), and Section 13.9.

Example

The following code creates a button-enabled movie clip and draws its hit area entirely from scratch. It automatically adjusts the size of the hit area to be twice the size of the text in the button. By defining the hitArea property explicitly, we prevent any future content added to the button from being included in the hit area.

// Make a clip that will act as a button
this.createEmptyMovieClip("button_mc", 1);
   
// Add some text to the clip
button_mc.createTextField("button_txt", 1, 0, 0, 0, 0);
button_mc.button_txt.autoSize = true;
button_mc.button_txt.text = "click here!";
button_mc.button_txt.selectable = false;
   
// Define a button handler for the button clip
button_mc.onPress = function () {
  trace("thank you for clicking");
}
   
// Make a clip to be the button clip's hit area, and 
// put it inside the button clip
button_mc.createEmptyMovieClip("hitarea_mc", 2);
// Set the hit area rectangle to be twice the size of the button text
var x1 = -button_mc.button_txt._width / 2;
var y1 = -button_mc.button_txt._height / 2;
var x2 = x1 + button_mc.button_txt._width * 2;
var y2 = y1 + button_mc.button_txt._height * 2;
// Draw the hit area rectangle
button_mc.hitarea_mc.moveTo(x1, y1);
button_mc.hitarea_mc.beginFill(0x000000);
button_mc.hitarea_mc.lineTo(x2, y1);
button_mc.hitarea_mc.lineTo(x2, y2);
button_mc.hitarea_mc.lineTo(x1, y2);
button_mc.hitarea_mc.lineTo(x1, y1);
button_mc.hitarea_mc.endFill();
   
// Make the hit clip invisible
button_mc.hitarea_mc._visible = false;
   
// Assign the drawn clip as the button's hit area
button_mc.hitArea = button_mc.hitarea_mc;

See Also

The Button class, MovieClip.enabled, MovieClip.hitTest( ), MovieClip.useHandCursor; Section 13.9

Table of Contents