Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Preparing the Invisible Button Hotspot

In most situations, buttons are a visible interface element that users deliberately click for a given behavior to occur, such as navigating to a different Web page. However, in some cases, you want the button functionalityits ability to trigger behaviors based on user eventswithout including a visual interface element. The interactive map is a case in point. You want the act of rolling over the tornadoes, storms, wars, and swamps to trigger the quicktip. But these elements, though clearly visible, are actually a part of the background map; they are not button symbols.

The solution is to layer invisible buttons over these map elements. That way, users rely on the visuals of the background map, while they still benefit from the functionality of buttons.

Creating invisible buttons is easy. As you'll recall, buttons have four states: Up, Over, Down, and Hit. The first three enable you to specify the appearance of the button at different times: the default appearance, the look when the user is rolling over the button, and the look when the user is clicking the button. The fourth state, the Hit state, enables you to specify the "hot" area, the area that responds to the mouse.

To create an invisible button, or a hotspot, in Flash, you first draw a shape in a button's Hit state, and leave the remaining states empty. In the Hit state, the shape can be any color, with any fill or stroke you want. As long as the shape is filled, the hotspot will work.

The Library contains several elements that you'll use in this and the next lesson. The bitmaps folder contains numerous graphics produced in Fireworks for the map, including the maps themselves. The Library also contains the fiery buttons that enable users to navigate between the two levels of the Inferno. The TextArea is a component that has already been applied to the second screen in the movie. Later in this lesson, you'll apply it to the first screen in the movie as well.

This converts the graphic symbol into a Button symbol. Notice that its icon in the Library changes to indicate the new symbol type.

The stage contains a black square, which will be used to indicate the hotspot of the button. This square is in the Up state, rather than the Hit state. If you deployed the button now, it would appear black on the stage and obscure the map elements you want to make interactive. You'll need to fix that.

[View full size image]

This transfers the black square keyframe to the Hit state. Notice that the Up, Over, and Down states are all empty at the end of this step.

You're finished editing the button.

You can trigger something to happen when the user rolls over the tornado. Of course, nothing will happen yet, because no script has been associated with this button. You'll do that later in the lesson.

With an instance name, the button is now exposed to ActionScript, which means you can control its behavior. The button instance is now ready, so let's turn our attention to the other objects in the application: the movie clip and the dynamic text field.