6a - Keyframes and Tweening.

15/11/2010 11:19

 Keyframe & Tweening 

The timeline consists fo many layers and many frames within each layer. In the picture of the timeline below the 10th frame of the layer "Train" is selected.

keyframes in Flash CS3

The first frames of all the layers are keyframes and are indicated by a gray background and black dot. The remaining frames are all blank.

Continuing with the tutorial let us begin to animate the wheel in the "wheel animation" movie clip by creating new keyframes within the movie clip's timeline.

Getting into the "Wheel Animation" Symbol

Let’s begin by getting into the symbol “wheel animation”. To do this:

  • Double click the wheel on the stage.

  • You will see the main stage elements fade out slightly and only the wheel remains clear. 

  • Also, you will see the movie clip symbol name “wheel animation” appear next to “Scene 1”.

    editing a symbol in flash cs3

  • You can always click on “Scene 1” to go back to the main stage area.

Animating the Wheel - Part 1

Now let’s make the wheel go round.

  • Click on the 5th frame in the timeline of the movie clip "wheel animation". 
    selecting a frame in flash cs3

  • Insert a key frame (right click + “Insert Key Frame”)

  • Now rotate it 90 degrees counter clock wise 

    Modify > Transform > Rotate 90 degrees CSW

  • Though it might look like the wheel is the same, Flash knows that the wheel has rotated and you will be able to see the results in the animation later.

  • Insert another key frame at the 10th,15th and 20th frames rotating each time.

  • Take a look at the wheel animation.
    Control > Test Movie 

You will notice that the wheel is turning but the movement is rather jerky.

Motion Tweening

 

Motion Tweens in Flash CS3 are a very useful feature. Basically we specify the positions of the symbol in the keyframes and Flash creates the animation be(tween) the two keyframes. This gives us a smooth animation.

Let's use the tween feature as we continue with the tutorial to make the wheel animate smoothly.

 

To create the motion tween between the keyframes in the "wheel animation" movie clip:

  • Right Click on the 1st frame in the timeline (or any of the frames in between the 2 keyframes).
     
  • From the options that appear, select “Create Motion Tween”. 
    create motion tweens in flash cs3 for smooth animation 
     
  • An arrow will appear between the 1st and 5th frames on the timeline. This will create a smooth animation between the wheel in frame 1 and the wheel in frame 5.
     
  • Click on the 5th, 10th and 15th frames and create motion tweens.

    motion tween in flash cs3
     
  • Your wheel animation is ready.
     
  • You can get an idea of how it looks by testing the movie.

    Control > Test Movie
     
  • Click on Scene 1 to go back to the main stage area. 
     
  • Double click on the zoom tool to see the actual stage dimensions.

    zooming in flash cs3
     
  • Make copies of the wheel as required.
     
  • This is what your stage will look like now.

flash cs3 animation tutorial

  • When you test the movie you will notice that all the wheel are turning.

Now you do it!!!