• 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 Create New Symbol 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 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.

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



Not a subscriber?

Start A Free Trial

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