Building a Button

An answer option must be sensitive to the mouse. Players click on one of the options and actions are performed. It would also be good to have visible and audible reaction to the various steps in the mouse click and to the mouse rollover as well. Flash gives us all these abilities and more in the Button primitive. To clearly understand how buttons operate , it is best to take a step or two back.

To create a button, invoke Flash's N EW S YMBOL function, tucked away in the Insert pulldown (Figure 1.3).

Figure 1.3. Starting a New Button Symbol

Button Graphics

The button we want is a wide panel of color . One such button will sit behind the text of each answer option and perform all mouse interactions.

We create a filled rectangle ” nice and wide and not much taller than a single line of text. It can easily be resized and reshaped later, if necessary. Our example is 400 pixels wide and 30 high.

We also included a simple beveled effect by making an outline rectangle of the same size . For clarity, it is given its own Border layer. New layers are created by clicking the dog-eared icon with a + sign.

Right-clicking on the outline brings us to the Stroke palette, where we set the thickness to 3. We duplicate the Border layer and create Border-top and Border-bottom using cut and paste and rename. We differentiate them by deletion so that Border-top has only the top and left line segments and Border-bottom has the bottom and right segments. The Border-top layer is colored brighter than the panel, while the Border-bottom layer is darker .

Button States

As we've seen, a button has four predefined frames :

• Up is the default button state.

• Over starts with mouse roll-on and ends with roll-off or click.

• Down is from mouse click until release or roll-off.

• Hit is the invisible shape that defines the click-sensitive area (hot spot) of the button.

We leave Hit as our original rectangle. Its color is meaningless.

For each of the three visible states we create a keyframe (I NSERT /K EYFRAME ) on each layer. Colorizing these nine keys gives us a lively button. The panel (a solid shape) is colored with the Paint Bucket while the borders (strokes) require the Ink Bottle. Each tool has its own color menu.

Big jumps in color make buttons very interactive but often very unpleasant. Rather than choosing colors from all over the spectrum, we should seek a meaningful palette with subtle transitions.

Button Sounds

Before moving on, let's add a finishing touch to this button: a bit of audible response. Ideally, we would like to hear a sound begin when the button is pressed and conclude when it is released. Like cha-klunk ”sounding cha on press, klunk on release. This is possible in Flash, but it is not directly supported. It is much easier to simply attach a sound to the Down frame. Users will hear the sound ”the whole sound ”as soon as they press the button. Unfortunately, this means that they hear the same confirming cue when they press down but roll off (i.e., change their minds) as when they solidly click and release the button (commit).

Create a Sound layer, which is simply an ordinary new layer that you name Sound (only for our own source clarity, not for Flash). Insert a single keyframe in the Down frame. Choose a sharp sound from the choices in W INDOW /C OMMON L IBRARY /S OUNDS . A tiny Play button in the library window allows you to preview each sound. With the keyframe highlighted, merely drag the sound into the main window to integrate it into the button (Figure 1.4).

Figure 1.4. Adding Sound to a Button

By now, you must be ready to try this button out. C ONTROL /T EST M OVIE lets you click your new button. Close the window to return to the editor.

Experiment with your own ideas to make the button lively and unique. Subtle tunings make big differences. Get happy with your button and move on.