Lesson Notes
Lesson 1
  1. Introduction
  2. Access the Server
  3. Drawing & Painting
Lesson 2
  1. Basic Animation
  2. The Timeline
Timeline Review
  1. Timeline Review
Lesson 3
  1. Symbols & Library
  2. Shape Tweening
Lesson 4
  1. Animation Review
  2. Break Apart
  3. Distribute to Layers
Lesson 5
  1. Motion Path
  2. Buttons
  3. Intro to Actions
Lesson 6
  1. Setting Up Projects
  2. Project Checklist
  3. Action Scripting Buttons
Lesson 7
Lesson 8
Lesson 9
  1. Animated Buttons
Lesson 10: Walk Cycle
  1. Character Design
  2. Terms Explained
  3. Project Overview
  4. Setting Up
  5. Frame 9 & Animated Guides
  6. Animating The "Bounce"
  7. Legs & Feet
  8. Arms & Finalizing
Lesson 11: Preloader
  1. Simple Preloader
  2. Advanced Preloader
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
The Timeline, Frames and Keyframes Pt. 2
| Pt. 1 | Pt. 2 | Pt. 3 | Pt. 4 |

Flash: Interactive Web Animation
by Ken Kimura


  1. Create a new layer. To do this click on the "insert layer" button on the bottom left corner of the timeline. (see below)


  2. Once you’ve created the new layer, rename the layer by double clicking on the layer name, type “circle” then hit the Return key. Change the fill and line colors on the tool palette (near the bottom of the tool palette) and draw a circle on the stage inside the rectangle.

  3. Rename Layer 1 to "rectangle."

  4. Now the timeline will show that both the circle layer and the rectangle layer are visible for 25 frames.


    Try this experiment:
    • Click on the empty white space below the layers (this ensures that no frames are selected). Now press the F5 key. Notice that this will add frames to both layers. If you had 20 layers, you would be adding frames to all 20 layers. Add frames until both layers reach 30 frames. If you’ve added too many frames, hold down the shift key while pressing F5. This will remove frames.
    • Now click on one of the frames in the "circle" layer - let’s say frame 12 (this will select the frame). Hold down the shift key and press the F5 key. This will remove frames from only the "circle" layer and not the rectangle layer.
    NOTE: When you remove or add frames, it happens on the right side of the playhead.

    Remove enough frames so that the circle layer ends at frame 25. Your timeline should look like so:


    When you play your movie, you should see the circle on top of the rectangle until you reach frame 25, at which time the circle disappears.

  5. Another experiment. You can see the circle on stage because it’s layer is “on top of” the rectangle layer. If you wanted to, you can rearrange your layers. Click on the the name of the "circle" layer and drag downwards. While holding the mouse button, you will see a gray line that represents where the layer will go once you release the mouse button. Release the mouse button so that the "circle" layer is below the "rectangle" layer. When you look at your stage, your circle will have disappeared. In fact it hasn’t disappeared, it’s just that you can’t see it because it is “behind” the rectangle. Move the circle layer back on top.

| Pt. 1 | Pt. 2 | Pt. 3 |