Adobe Flash CS4 Professional for Windows and Macintosh: Visual QuickStart Guide

Creating Shape-Changing Button Symbols

Chapter 14

404

Figure 14.10 Name your button symbol and choose

Button as the symbol type in the Create New Symbol

dialog.

Figure 14.11 With the Over, Down, and Hit frames of a

button symbol selected, Control-click (Mac) or right-

click (Windows) to access the contextual menu and

choose Convert to Blank Keyframes. Flash adds blank

keyframes to all the selected frames.

Creating Shape-Changing

Button Symbols

Button graphics can emulate real-world

switches or toggles. In a game, you can dis-

guise buttons as part of the scenery—making

the blinking eye of a character a button, for

example. When the Up, Over, and Down key-

frames of your button symbol contain graphics

of di erent shapes and sizes, however, you

need to create a graphic for the Hit state that

covers all of the other states.

To create Up, Over, and Down states

with various graphics:

1.

Open a Flash document and choose

Insert > New Symbol.

 e Create New Symbol dialog appears.

2.

Enter a name in the Name  eld (for

example, AnimatedBtn), choose Button

in the Type section, and click OK

(Figure 14.10).

Flash creates a new symbol in the Library

panel and returns you to the Timeline and

Stage in symbol-editing mode.

3.

In the Timeline, select the Over, Down,

and Hit frames.

4.

Control-click (Mac) or right-click (Windows)

the selected frames and choose Convert

to Blank Keyframes from the menu

(Figure 14.11).

5.

With the Up keyframe selected in the

Timeline, on the Stage, create a new

graphic, or place an instance of the

graphic symbol that you want to use for

the button’s Up state.

6.

Repeat step 6 for the Over and Down

keyframes.

For this task, use graphics that have

di erent shapes—a circle, a star, and a

double-headed arrow, for example.

Creating Shape-Changing Button Symbols

Building Buttons for Interactivity

405

To create the Hit state for graphics of

various shapes:

1.

Using the  le you created in the

preceding task, in the Timeline, select

the Hit keyframe.

2.

To create the graphic that de nes

the button’s active area, do either of

the following:

▲

Draw a simple geometric shape

large enough to cover all areas of the

button. Turn on onion skinning so

you can see exactly what you need

to cover (Figure 14.12).

▲

Use Flash’s Edit > Copy and Edit >

Paste in Place commands to copy the

graphic elements from the  rst three

keyframes of the button and paste

them into the Hit keyframe of the

button one by one.  e graphics stack

up in the Hit keyframe, occupying

the exact area needed to cover the

button in any phase of its operation

(Figure 14.13).

3.

Return to editing the document, for exam-

ple, by choosing Edit > Edit Document.

You’re ready to place an instance of the

button on the Stage and test it out by

choosing Control > Test Movie.

✔ Tip

■ Use a transparent color (one with an

alpha value less than 100 percent) for the

graphic in the Hit keyframe. In Onion Skin

mode the Up, Down, and Over graphics

show through the Hit graphic, making

it easy to see how to position or size the

graphic in the Hit keyframe to cover the

graphics in the other keyframes.

Figure 14.12 The silhouette in the Hit keyframe

needs to encompass all possible button areas

in all three button modes. For example, if you

duplicate only the circle as the graphic for the

Hit keyframe for this button, you exclude the

tips of the star. As the user moves the pointer

over the tips, the button returns to its Over

phase; the user can’t click the tips to activate

the button. If you duplicate only the star, the

user may roll over several areas of the circle

and never discover that it’s a button.

Figure 14.13 By copying the graphic in each of

the button states and using the Paste in Place

command to place them in the Hit keyframe, you

wind up with a perfectly positioned silhouette

that incorporates all the possible button areas.

Transparent fi ll for Hit-frame graphic

Onion-skin outlines