Chapter 12. Building Buttons for Interactivity

12. Building Buttons for Interactivity

After you master the drawing and animating tools in Flash 8, you can create movies that play from beginning to end. But Flash is more than a tool for making animated movies. You can use it to create interactive environments that transform viewers into users. To move your Flash movie into the realm of interactive experience, you need to create interface elements that allow users to control and interact with your application. The most common interface element is a button. Buttons have two levels of interactivity. First, a button can respond to a user with visual feedbackfor example, changing color when the pointer enters the button area. Second, the button can carry out tasksfor example, switching to a new scene when the user clicks the button.

Flash comes with a number of predefined interface elements, including button symbols and button components. For these elements, built-in coding takes care of the first level of button interactivity, responding to mouse movements with visual feedback. For example, when a user positions the pointer over a button symbol or component's hot area, built-in coding tells Flash to change the pointer to the hand cursor and alter the look of the button.

In this chapter, you learn to set up the first level of interactivity by working with button symbols and button components. You also learn to set up a movie clip symbol that can act as a visually responsive button.

To achieve the second level of interactivity, you attach scripts to individual button instances to make buttons respond in new ways and carry out tasks. You'll learn some simple ways to do that in Chapter 13.

The Mystery of Button Symbols

In Flash, you can make a button by creating a symbol and then assigning it button behavior. Buttons are actually shortfour frames, to be preciseinteractive movies. When you select button behavior for a symbol, Flash sets up a Timeline with four keyframes. You create graphics for the first three keyframes to display the button in three common states: Up, Over, and Down. The fourth keyframe (never shown to the viewer) defines the active area of the button.

In the Up state, you create a graphic that looks like a static, unused button. This graphic appears whenever the pointer lies outside the active area of the button. In the Over state, create the graphic as it should look when the pointer rolls over the button. Flash automatically changes the pointer to the hand cursor for the Over state; but often, you want additional visual changes to alert the viewer that the pointer is now on a live button. In the Down state, create the graphic as it should look when someone clicks the button. In the fourth frame, the Hit frame, create a graphic that defines the boundary of the button. Any filled shape in this frame becomes a place where mouse movements trigger the button during movie playback.

Any changes you make in the appearance of the graphic elements in the keyframes create the illusion of movement. In other Flash animation sequences, changes occur over time as the playhead moves through the frames. In button symbols, however, changes occur when the user moves the pointer over a specific area of the screen.

You can include movie clips within each frame of a button to create buttons that are fully animated, and you can attach actions to buttons to give your viewers more control of the movie.