Creating Buttons That Change Shape

I l @ ve RuBoard

Creating Buttons That Change Shape

You can use Flash to create buttons more exotic than the simple geometric shapes you'd find on a telephone or calculator. Button graphics can emulate real-world switches or toggles. You can disguise buttons as part of a movie's scenery making the blinking eye of a character a button, for example. That situation often happens in games ; finding the hot spots or buttons is part of the fun. When the exterior shape of the button changes in Up, Over, and Down modes, however, creating an effective Hit-frame graphic can be a bit tricky.

To create Up, Over, and Down states with various graphics:

1. Open a new Flash document, or open an existing Flash document to which you want to add buttons.

2. From the Insert menu, choose New Symbol. The Create New Symbol dialog box appears.

3. Enter a name in the Name field, choose Button in the Behavior section, and click OK.

   Flash creates a new symbol in the Library window and returns you to the Timeline and Stage in symbol-editing mode. The Timeline for a button symbol contains the four frames necessary for defining the button: Up, Over, Down, and Hit.

4. In the Timeline, select the Over, Down, and Hit frames.

5. From the Modify menu, choose Frames > Convert to Blank Keyframes.

   Now you have a blank keyframe in every frame of your button, and you're ready to place various graphics in each frame.

6. With the Up frame selected in the Timeline, on the Stage, create a new graphic, or place the graphic symbol that you want to use for the button's Up state.

7. Repeat step 6 for the Over and Down frames.

   For this exercise, use graphics that have different shapesa circle, a star, and a double-headed arrow, for example (Figure 13.11).

   Figure 13.11. You can create fanciful buttons that change shape when a user rolls over or clicks them. In this example, the inactive button is a simple circle (top). When the pointer rolls over the button, the circle changes to a star (middle). When the user clicks the button, it changes to a double-headed arrow.

   

When the Up, Over, and Down frames of your button contain graphics of different shapes and sizes, you need to create a graphic for the Hit state that covers all of them.

To create the Hit state for graphics of various shapes:

1. Using the file that you created in the preceding exercise, in the Timeline, select the Hit frame.

2. To create the Hit-frame graphic, do one of the following:

   • Draw a simple geometric shape large enough to cover all areas of the button. Turn on onion skinning so that you can see exactly what you need to cover (Figure 13.12).

     Figure 13.12. The Hit-frame silhouette needs to encompass all possible button areas in all three button modes. If, for example, you duplicate only the circle as your Hit frame for this button, you exclude the tips of the star. A user who clicked those tips in the Over phase would be unable to activate the button. If you duplicate only the star, the user could roll over several areas of the circle and never discover that it's a button.

     

   • Use Flash's Edit > Copy and Edit > Paste in Place commands to copy the graphic elements from the first three frames of the button and paste them into the Hit frame of the button one by one.

     The graphics stack up in the Hit frame, occupying the exact area needed to cover the button in any phase of its operation (Figure 13.13).

     Figure 13.13. By copying the graphic in each of the button modes and using the Paste in Place command to place them in the Hit frame, you wind up with a perfectly positioned silhouette that incorporates all the possible button areas.

     

Tips

• When you use the copy-and-paste -in-place technique to create your Hit-frame graphic, it's a good idea to expand the resulting graphic slightlyby using the Modify > Shape > Expand Fill command, for example. Making the Hit graphic slop over the edges of the active button areas ensures that your viewers will easily activate the button.

• Use a transparent color (one with an alpha value less than 100 percent) for your Hit-frame graphic. The other graphics will show through the Hit-frame graphic in onion-skin mode, making it easy to see how to position or size the Hit-frame graphic to cover the graphics in the other frames.

I l @ ve RuBoard