• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 13. Interactivity with Objects > Creating Buttons That Change Shape

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:

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

From the Insert menu, choose New Symbol.

The Symbol Properties dialog box appears.

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.

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

From the Modify menu, choose Frames > Convert to Key Frames.

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

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.

Repeat step 6 for the Over and Down frames.

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

Figure 13.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 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.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint