Recipe 9.4. Creating Hotspots with Invisible Buttons

Problem

You want to define hotspots in your movie in which there is no visible button.

Solution

Create a button with no content except a hit area.

Or, if you are using a movie clip as a button, create a movie clip with the shape you want, and set the alpha value of the movie clip to zero.

Discussion

More often than not, you will want the user to be able to see a button within the movie so that she can locate it and click it. However, there are reasons you might want to use invisible buttons to create hotspots in your movie. Here are a couple examples of the uses of hotspots:

• Define clickable regions of a map or other image

• Add hidden or surprise functionality

In any of these scenarios, you will want to create an invisible button. You can quickly create an invisible button by defining the hit area and nothing else. Remember that a hit area is never displayed in your Flash movie. It remains as an invisible shape that causes the button over state to be activated when the user moves the mouse over it. Therefore, when you define a button that has no contents other than on the Hit frame, the button will be active in the movie, but will be invisible to the user (except that the hand cursor will appear when the user moves the mouse over it.) When you create an instance of an invisible button in your Flash movie, the instance will show up as a transparent, light blue shape on the stage while you are authoring. This is for your benefit so that you can see where the instance exists. However, the light blue shape will not show up in the resulting movie.

Alternatively, if you are using a movie clip as a button instead of a button symbol, you need to use a slightly different approach to creating an invisible button:

1. You should define the movie clip symbol with a single frame, and on that frame, draw the hit area shape.

2. Create an instance of the movie clip in the movie to act as a button.

3. Select the movie clip instance, and locate the Color menu in the Property inspector.

4. Select the Alpha option from the Color menu.

5. Adjust the alpha value to 0%.

With either the button symbol or movie clip symbol techniques, you should name the instances and assign actions to them as you would to any other button or movie clip instance.