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

Chapter 13. Interactivity with Objects > Creating a Fully Animated Button

Creating a Fully Animated Button

The buttons that you created in the preceding exercises are animated in the sense that they change as the user interacts with them. Flash also allows you to create buttons that are fully animated—a glowing light bulb, for example, or a little ladybug that jumps up and down, saying, “Click me!” The trick to making fully animated buttons is placing movie clips in the frames of your button. Because the movie clips play in their own Timeline, animated buttons remain animated even when you pause the movie.

To animate a rollover button:

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

2.
Choose Insert > New Symbol.

The Create New Symbol dialog box appears.

3.
Name your button, choose Button in the Behavior section, and click OK.

4.
In the Timeline, select the Over, Down, and Hit frames of the button, and choose Modify > Frames > Convert to Blank Keyframes.

Flash creates blank keyframes for the button’s Over, Down, and Hit frames.

5.
In the Timeline, select the Up frame, and create a movie-clip symbol or import one from an existing movie.

For this example, the Up-frame clip contains a spinning pentagon (Figure 13.14).

Figure 13.14. Onion skinning reveals all the frames of the spinning pentagon (a motion tween) that appear when the fully animated button is in the Up state.


6.
In the Timeline, select the Over frame, and create a movie-clip symbol or import one from an existing movie.

In this example, the Over-frame clip contains a pentagon that turns into a star (Figure 13.15).

Figure 13.15. The Preview mode of the Timeline shows the animation of the clip that appears when the pointer rolls or rests over the button area.


7.
In the Timeline, select the Down frame, and create a movie-clip symbol or import one from an existing movie.

For this example, the Down-frame clip contains a star that flies apart (Figure 13.16).

Figure 13.16. Onion skinning reveals the animation of the clip that appears when the viewer clicks inside the button area.


8.
In the Timeline, select the Hit frame, and create a graphic that covers all the button areas for the three button states (Up, Over, and Down).

A large oval works well for this purpose (Figure 13.17). This graphic creates an active button area that’s larger than the spinning pentagon. As your viewer’s pointer nears the spinning graphic in the final movie, the button switches to Over mode. In Over mode, the oval is big enough to encompass all points of the star, and in Down mode, the user can let the pointer drift a fair amount and still be within the confines of the button.

Figure 13.17. When you’re creating a Hit-frame graphic, use onion skinning to see the first frame of the movie clip in each button frame. Here, the Hit-frame graphic is a transparent fill, which also helps you position the graphic to cover the graphics in the other frames.


9.
Return to movie-editing mode by clicking the name of the current scene in the Info bar at the top of the Stage.

10.
Drag a copy of your button from the Library window to the Stage.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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