Lesson 3

Create Frame-by-Frame Animations 

 

OBJECTIVE:  In this lesson, you will create frame-by-frame animations.

 

Lesson:  Create an in-place frame-by-frame animation

  1. Open fl4_4.fla from the Digital Design folder on the server
  2. Save to your server folder as Fl_C4_L3_frameAn_your username
  3. Insert a new layer, name it stickfigs, click frame 1 of the stickfigs layer, then drag stickfig1 from the Library panel to the center of the Stage so it touches the white walkway
  4. Click frame 2 of the stickfigs layer to select it, click Insert on the menu bar, point to Timeline, then click Keyframe
  5. Drag stickfig2 so it is on top of stickfig1, use the arrow keys on the keyboard to align the heads, then click a blank area of the Stage to deselect stickfig2
  6. Select stickfig1 by clicking the foot that points up, then press Delete
  7. Click frame 3 on Layer 1 to select it, insert a keyframe, drag stickfig3 so it is on top of stickfig2, then use the arrow keys on the keyboard to align the heads
  8. Click a blank area of the Stage to deselect stickfig3
  9. Select stickfig2 by clicking the foot that points down, then press Delete
  10. Play the movie

Summary:  You created a frame-by-frame animation.

 

Lesson:  Copy frames and add a moving background

  1. Click frame 1 of the stickfigs layer, hold down Shift, then click frame 3
  2. Click Edit on the menu bar, point to Timeline, then click Copy Frames
  3. Click frame 4 of the stickfigs layer, click Edit on the menu bar, point to Timeline, then click Paste Frames
  4. Click frame 7, then repeat step 3
  5. Click frame 10 of the stickfigs layer, hold down Shift, then click frame 13
  6. Click Edit on the menu bar, point to Timeline, then click Remove Frames
  7. Insert a new layer, name the layer houses, then drag the houses layer below the stickfigs layer
  8. Click frame 1 of the houses layer, then drag the houses symbol from the Library panel to the Stage, position the house above the sidewalk and below the clouds – align the left side of the 1st house with the left edge of the Stage
  9. Play the movie
  10. Click frame 1 of the houses layer, click Insert on the menu bar, then click Motion Tween
  11. Click frame 9 on the houses layer, then drag the houses object to the left so the right side of the last house is aligned with the right edge of the Stage
  12. Test the movie, close the Flash Player window, save your work, then close the document

Summary:  You copied frames and added a motion tween to a movie with an in-place frame-by-frame animation.

 

Lesson:  Create a frame-by-frame animation of a moving object

  1. Open fl4_5.fla from the Digital Design folder on the server
  2. Save to your server folder as Fl_C4_L3_frameM_your username
  3. Insert a new layer, then name it stickfigs
  4. Click View on the menu bar, point to Magnification, then click 50%
  5. Click frame 5 on the stickfigs layer, then insert a keyframe
  6. Drag stickfig1 from the Library panel to the left edge of the Stage along the top edge of the sidewalk
  7. Click frame 6 on the stickfigs layer, then click Insert on the menu bar, point to Timeline, then click Blank Keyframe – a blank keyframe keeps the object in the previous frame from appearing in the current frame
  8. Click the Edit Multiple Frames button on the Timeline status bar to turn it on – this allows you to view the contents of more than one frame at a time
  9. Drag stickfig2 to the right of stickfig1
  10. Click frame 7 on the stickfigs layer, then insert a Blank Keyframe
  11. Drag stickfigs3 to the right of stickfigs2
  12. Click frame 8 on the stickfigs layer, insert a Blank Keyframe, then drag stickfig1 from the Library panel to the right of stickfig3
  13. Click frame 9 on the stickfigs layer, insert a Blank Keyframe, then drag stickfig2 to the right of stickfig1
  14. Click frame 10 on the stickfigs layer, insert a Blank Keyframe then drag stickfig3 to the right of stickfig2
  15. Click frame 11 on the stickfigs layer, then insert a Blank Keyframe
  16. Click the Edit Multiple Frames button on the Timeline status bar to turn it off
  17. Test the movie, then close the Flash Player window
  18. Change the frame rate to 6 fps
  19. Test the movie, then close the Flash Player window
  20. Save the movie, then close the document

Summary:  You created a frame-by-frame animation that causes objects to appear to move across the screen.