Beginning Flash

We are beginning animations with Adobe Flash. Students will watch online Flash animations and receive hand-outs of Flash User Interface and Toolbar. On the back of hand-out please write the following Vocabulary Words:

  • Vector vs. Raster
  • Timeline
  • Stage
  • Library
  • Toolbar
  • Properties Palette
  • Symbol
  • Keyframe
  • Motion Tween
  • Shape Tween
  • Loop
  • Instance

AT THE END OF THIS LESSON YOU SHOULD UNDERSTAND:

  • How to use Symbols, Keyframes and Tweens in Flash
  • How Symbols can be re-used on multiple Layers
  • How Instances of Symbols can be changed with Free Transform and Properties

BOUNCING BALL

  1. Open a new file in Flash. Set the Stroke Color to Black and the Fill Color to Grey. Insert New Layer. Name the New Layer “circle1.”
  2. Use the Oval Tool to create a Circle on Layer “circle1.” Highlight the Fill and Stroke, then Group the image (Cmd-g). Once grouped, drag the image to the Library. Save as a Graphic Symbol called “circle.”
  3. Place the Symbol “circle” on the upper left of Stage, on Layer “circle1.” Then Insert Keyframe on Frame 60 of Timeline (right-click or Cntrl-click on Frame 60). It’s important that the Symbol is in the same spot on Frame 1 and Frame 60.
  4. Then Insert Keyframe on Frame 15. Move Circle on Frame 15 to right side of Stage.
  5. Insert Keyframe on Frame 30. Move Circle on Frame 30 to left side of Stage.
  6. Insert Keyframe on Frame 45. Move Circle on Frame 45 to right side of Stage.
  7. Highlight the entire Layer. From Properties Palette select Motion Tween. There should be blue arrows on all the blank cells in Timeline.
  8. From Menu choose Control > Test Movie. If all steps were done correctly, you will now have an animation of a Bouncing Ball. If Frame 60 and Frame 1 are identical, the animation will Loop.

BOUNCING BALL 2

  1. Add a New Layer and rename it “circle2.” Place Graphic Symbol “circle” on this new layer (in a different position from the first Graphic Symbol). Then Insert Keyframe on this new layer at Frame 60.
  2. Insert Keyframe on Frame 10 and move “circle” to a different spot. Then Insert Keyframe on Frame 30 and move “circle” to another different spot on the Stage. Keyframe on Frame 50 and move “circle” to yet another spot on the Stage.
  3. Highlight the entire layer and choose Motion Tween from Properties Palette. Then Test Movie. If everything is animated correctly on both layers, proceed…
  4. Select Frame 10 on layer “circle2.” Use Free Transform Tool to make the circle much larger. Use Properties Palette to change circle to Red.
  5. Select Frame 30 on layer “circle2.” Use Free Transform Tool to make the circle much smaller. Use Properties Palette to change Alpha of circle to 10.
  6. Select Frame 50 on layer “circle2.” Use Free Transform Tool to distort the circle. Use Properties Palette to change circle to Green.
  7. Test Movie