Lesson 9:

Animated Button Exercise
Flash: Interactive Web Animation
by Ken Kimura



Overview: We're going to create two graphic symbols, one of text, and the other a circle. Then we're going to create an animation with each symbol. Finally, these animated symbols will be used to create a button.
  1. Create a new GRAPHIC symbol of text - For example: "Movie 1." Call it “Movie 1”
  2. Create a new GRAPHIC symbol of a colored circle. Call it “circle.”
    Try to make the center of the circle be on the center of the symbol
  3. Create a new MOVIE CLIP symbol that will be an animation of the text symbol. Call it “mc_anim_text”
    • Add a keyframe with a motion tween.
    • Have the text move to the right in the second keyframe.
    • Set the Alpha of the first keyframe to “0”
    • Put a STOP action on the last frame
  4. Create a new MOVIE CLIP symbol that will be an animation of the circle symbol. Call it “mc_anim_circle”
    • Add a keyframe with a motion tween.
    • Scale the circle to be larger on the second keyframe
    • Set the Alpha of the SECOND keyframe to “0”
    • Copy the frames
    • Create 2 more layers and paste the frames into the new layers
    • Stagger the timing of each layer
  5. Create a new BUTTON Symbol. Call it “bt_button”
    • Use the text symbol on the UP frame.
    • Use the mc_anim_circle on the OVER frame.
      In the inspector panel, make sure the symbol behavior is set to Movie Clip
    • Make a new layer. In the OVER frame place the mc_anim_text clip.
      In the inspector panel, make sure the symbol behavior is set to Movie Clip
    • Create a Hit Area.
  6. Place the button symbol on the stage and test your movie.
  7. Create an animated button with your own animation.