Recipe 9.3. Defining the Area that Activates the Button

Problem

You want to define the area that causes the button's over state to be triggered.

Solution

Define a shape in the button's Hit frame.

Discussion

By default, any shape that is defined within a button can trigger the button's over state when the mouse is moved over it. In many cases, this behavior is sufficient, because buttons are often composed of solid shapes. However, in other situations you may run into problems when you rely on the default behavior. Consider, for example, a button that is composed of text. When the user moves the mouse directly over the shapes of the characters that compose that text, the button's over state is activated. However, if the user moves the mouse such that it is generally over the text, but not directly over the character shapes, then the button's over state is never activated. This result can be very frustrating for the user who is trying to move the mouse over the button.

In these types of situations, it is best to define a hit area. You can accomplish this by drawing a shape that defines the area you want to use to activate the button's over state at the button's Hit frame. The contents of the Hit frame are never displayed in the resulting movie, but that shape is used by Flash to determine what area should activate the button.

If you are using a movie clip to handle button events rather than an actual button instance, then you don't have the option of simply adding an extra keyframe with the label _hitarea, as you might have assumed. You can actually use ActionScript to apply a hit area to a movie clip, but that course is a bit convoluted. Instead, the simplest approach is to add invisible artwork within the movie clip symbol. The steps are as follows:

1. Open the movie clip symbol for editing.

2. Add a new layer, and give it a label of hit area.

3. Open the Color Mixer panel (Window Design Panels Color Mixer).

4. Select the Fill color and turn the Alpha setting to 0.

5. From the Tools panel, choose one of the drawing tools most appropriate for creating the hit area shape. For example, if you want to define a rectangular hit area, choose the Rectangle tool.

6. Draw the hit area shape on the stage within the Hit Area layer. The artwork should be invisible. However, if you select it with the Arrow tool, you should be able to see that it is there.