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. 3
| Pt. 1 | Pt. 2 | Pt. 3 | Pt. 4 |

Flash: Interactive Web Animation
by Ken Kimura



Adding Keyframes
  1. When you want something in a layer to change, you need to use a keyframe. Let’s add a keyframe to the circle layer at frame 20. Select frame 20 then press the F6 key.

    THIS IS IMPORTANT: When you add a keyframe, Flash automatically creates a keyframe that is an exact duplicate of the preceding keyframe.


    In our example, when we insert a keyframe at frame 20 of the "circle" layer, the size, color and location of the circle at keyframe 20 is identical to the size, color and location of the circle on the first keyframe (the keyframe that precedes frame 20).

  2. Let’s add another keyframe at frame 15 of the circle layer. After adding the keyframe, your timeline should look as follows:


  3. Now lock the rectangle layer by clicking in the “lock” column to the right of the layer name. This will make it easier to select the circle on the stage, without selecting the rectangle.

  4. Make sure your playhead is at frame 15 (the red line). Using the selection tool (the black arrow) drag a selection around the circle. With the entire circle selected, press the "Delete" key. Look at your timeline - you will see that the filled-in black keyframe at frame 15 is now a blank keyframe, but the first keyframe and the keyframe on frame 20 are intact. Play your movie.



  5. Select the blank keyframe at frame 15 of the circle layer. On the toolbar, change the fill color, select the brush tool and paint a random “squiggle” on the stage. Notice how the keyframe is now filled.

  6. Drag the playhead through your movie (drag the red box on top of the red line). You will see that when you deleted the circle, it was only deleted from the time of the keyframe until the next keyframe. When you added the “squiggle” it was only added to that same segment of time. At frame 20 the circle appears just as it did on the first keyframe.
THIS IS AN IMPORTANT IDEA TO REMEMBER: When you are editing content on a keyframe, you are only editing the content that exists between the current keyframe and the frame before the next keyframe.
| Pt. 1 | Pt. 2 | Pt. 3 |