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

Chapter 5. Symbols and the Library > Nested and Compound Animation

Nested and Compound Animation

We've covered how to take a symbol and place it inside another symbol, thus creating a nested symbol. One of the real powers of nesting symbols is the ability to create compound animation, which means, in not so many words, animating an animated symbol. In the preceding exercise, we nested a graphic symbol inside a movie clip. When you tested the movie, the movie clip actually animated, even though the main timeline was only one frame long, because the movie clip was made up of an animation. In the next exercise, we have a movie clip on the main timeline that doesn't animate unless we test the movie. The main timeline contains only one frame, but we'll add more. By inserting a keyframe and tween into that frame and then testing the movie, you'll notice you have animated your animation!

Creating an Animated Button

You can nest movie clips within buttons, and vice versa. By nesting a movie clip within a button, you can create an animated button. In this exercise, we are going to take a look at how to animate a button as the end user moves a mouse over it. Here are the steps to follow:

Open a new document by choosing File, New. In the new document, create a new button symbol by choosing Insert, New Symbol. Give the symbol a button behavior and name it button. Click OK to be placed in button symbol editing mode.

Draw a circle filled with any color of your choice. Add keyframes in the Over, Down, and Hit states. Change the color slightly on each keyframe.

Name the layer button and click the Add Layer button. Name this new layer glow.

Insert a keyframe in the Over state of the glow layer. If, at this point, you add content to this frame, you would then populate the Down and Hit states as well, and we don't want that. To avoid this, insert a blank keyframe (F7) in the Down state, thus clearing anything on the frames before it.

Drag the glow layer underneath the button layer so that the glow layer is on the bottom, as shown in Figure 5.20.

Figure 5.20. The glow layer underneath the button layer.

On the glow layer, draw a small yellow circle without a stroke underneath the button. When you let go of the mouse to finish drawing the circle, it will look as if nothing has happened because the circle you just drew is hidden under the button. To see the circle, turn on the visibility of the button layer by clicking the bullet under the eye column.

Highlight the circle and convert it to a movie clip symbol by pressing F8. Name this symbol glowMC.

Click OK. Double-click the small yellow circle to go into movie clip symbol editing mode.

Highlight the circle by clicking it and open the Color Mixer if it isn't already open. To open the Color Mixer, choose Window, Design Panels, Color Mixer. In the Color Mixer (see Figure 5.21), choose the fill swatch and bring the Alpha setting down to 0%. This will make the circle invisible when you deselect it by clicking away from it.

Figure 5.21. In the Color Mixer, you can fill a symbol with a color that has an Alpha setting of 0%, thus filling it with an invisible color.

Insert a keyframe on frames 7 and 14 by pressing F6. Notice that the black circle representing the keyframe appears in both frames. Then create a shape tween from frame 1 to 7 and from frame 7 to 14.

Move the play head back to frame 7. In frame 7, select the circle and then choose Modify, Transform. In the dialog box that appears, you can scale the item numerically. Scale the circle up 400%.

With the circle still selected in frame 7, open the Color Mixer. Bring the fill's Alpha setting back up to 100%.

It is important to remember that movie clips play and loop by default. Therefore, the glow movie clip will always be playing. However, glow will only be visible in the Over state of the button. Therefore, only when an end user moves the mouse over the button will he see the animated glow.

Click the Scene 1 link to come back to the main timeline. Open up the Library panel and drag out an instance of the button symbol. By dragging out an instance of button, you are also dragging out an instance of glow, because glow is nested inside the button.

Choose Control, Test Movie. This will launch a Flash player. In the Flash player, move your mouse over the button to see the animation play (see Figure 5.22).

Figure 5.22. An animated button symbol.



Not a subscriber?

Start A Free Trial

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