| Button graphics can emulate real-world switches or toggles. In a game, you can disguise buttons as part of the scenerymaking the blinking eye of a character a button, for example. Finding the hot spots or buttons is part of the fun. When the Up, Over, and Down frames of your button symbol contain graphics of different shapes and sizes, however, creating an effective Hit-frame graphic can be tricky. 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 to which you want to add buttons. | 2. | Choose Insert > New Symbol. The Create New Symbol dialog appears. | 3. | Enter a name in the Name field (for example, AnimatedBtn), choose Button in the Behavior section, and click OK. Flash creates a new symbol in the Library panel 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. | Choose Modify > Timeline > 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 (Figure 12.8). Figure 12.8. In a button symbol's Timeline, as in the main Timeline, choosing Modify > Timeline > Convert to Blank Keyframes places a blank keyframe in each selected 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 task, use graphics that have different shapesa circle, a star, and a double-headed arrow, for example (Figure 12.9). Figure 12.9. You can create fanciful buttons that change shape when a user rolls over or clicks them. In this example, the inactive button is a 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 (bottom). |
To create the Hit state for graphics of various shapes 1. | Using the file you created in the preceding task, in the Timeline, select the Hit frame. | 2. | To create the Hit-frame graphic, 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 12.10).
Figure 12.10. The Hit-frame silhouette needs to encompass all possible button areas in all three button modes. For example, if you duplicate only the circle as your Hit frame for this button, you exclude the tips of the star. As the user moves the pointer over the tips, the the button returns to its Over phase; the user can't ever 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. - 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 12.11).
Figure 12.11. By copying the graphic in each of the button states 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.
| 3. | Return to editing the document, for example, 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. |
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 can 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.
|