Creating a Fully Animated Button

I l @ ve RuBoard

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

    graphics/13fig14.gif

  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.

    graphics/13fig15.gif

  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.

    graphics/13fig16.gif

  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.

    graphics/13fig17.gif

  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.

graphics/01icon02.gif Tips

  • You can place a movie clip in the Hit frame of your button, but only the visible graphic from the clip's first frame determines the hit area.

  • With buttons enabled, in movie-editing mode, Flash previews the Up, Over, and Down frames of your button but not its complete animation. For each frame, you see only the first frame of the movie clip. To view the fully animated button, you must export the movie and view it in Flash Player (by choosing Control > Test Movie, for example).


I l @ ve RuBoard


Macromedia Flash MX for Windows and Macintosh. Visual QuickStart Guide
Macromedia Flash MX 2004 for Windows and Macintosh (Visual QuickStart Guides)
ISBN: 0582851165
EAN: 2147483647
Year: 2002
Pages: 243

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net