Click to Show Lecture Notes

ANIMATION: Using Motion Tweens

Components      Shape Tweens   Pr 1   Pr 2   Pr 3   Pr 4

In Flash you can place anything you want in keyframes. The first frame is a keyframe, then let's say you have 30 regular frames on your Timeline and another keyframe at the end of these frames, you can have Flash calculate the proper movement for a smooth animation effect. So, let's say in the first keyframe you have a car on the left of the stage, and in the last keyframe you moved the car to the right side of the stage, Flash will "tween" each of the 30 frames until it looks like the car is moving from the left to the right.

NEW TERM: Tweening is the process of populating the frames between two keyframes. Tweening will smooth out a big change by breaking it into little steps.

Examples from the first practice session.


Setting the motion tween.
Hide the Image

Click for Practice Session on Motion Tweens... Create a Basic Motion Tween

TASK: Create a Basic Motion Tween

A basic Motion Tween is very easy to produce. Let's do one, and then we can come back to analyze it.

  1. In a new file, draw a circle onstage.


  2. Select the entire circle and choose Insert > Convert to Symbol (or press F8). Name it Circle, leave it set to the default Movie Clip, and click OK.


  3. Click in the Timeline on frame 30 and select Insert > Keyframe (or press F6).


  4. Click on the keyframe in frame1; the red current frame marker will move to frame 1. Position the circle where you want it to appear at the beginning—let's move it to the left side of the stage.


  5. Click in the last keyframe (frame 30) and notice that the red current frame marker moves to frame 30. Position the circle on the right side of the stage.


  6. Try scrubbing. The animation will look pretty abrupt. The circle stays on the left side for 29 frames and then jumps to the right side. To make the movement smoother, Flash will take care of the in-between frames.


  7. Tweening is set in the beginning keyframe, in this case the first keyframe (in frame 1). Select the keyframe in frame 1 and then open and observe the Properties panel.


  8. When a frame is selected, the Properties panel contains a Tween drop-down list.


  9. Select Motion from the Tween drop-down list. Leave all the default settings.


  10. That's it! Notice that Flash has drawn an arrow with a blue background to represent the tweened frames—those between two keyframes. Select Control > Text Movie (or press Ctrl + Enter) to see what you did.


    11. Hide Practice Session

TIP: Follow the Rules of a Motion Tween
The previous task worked because the instructions carefully followed the rules of a Motion Tween: You can't have multiple objects in your keyframes, and the one object you do have must be a symbol. Flash is very unforgiving when you don't follow these rules.

Let's try to tween more than just an instance's position. This is just an exercise to practice tweening—it's not supposed to be subtle. We can get to the Fine-Tuning a Motion Tween next.

Examples from the second practice session.

Image at the 1st keyframe. Image at the 15th keyframe.
Image at the 30th keyframe.

Hide the Images

Click for Practice Session on Tween Position, Scale etc... Learn Tween Position, Scale, Rotation, and Color

TASK: Learn Tween Position, Scale, Rotation, and Color

There are seven ways in which instances can be varied: Position, Scale, Rotation, Skew, Brightness, Tint, and Alpha. Flash tweens changes in these properties as well.

  1. In a new file, use the Text tool to create a text block that contains your name. (Make it big enough to see clearly.)


  2. Using the Arrow tool, select the text block (not the text itself). Then select Insert > Convert to Symbol (F8) and name the symbol My Name. Make sure to select Movie Clip behavior. Click OK.


  3. Now click in the Timeline on frame 30 and insert a keyframe (select Insert > Keyframe (F6).


  4. Click on the keyframe in frame 1 and position you name in the bottom-left corner. (This will be the initial position).


  5. While the first keyframe is selected, pick Motion from the Tween drop-down list in the Properties panel.


  6. Now click on the keyframe in frame 30 so you can edit the end position. Select the transform tool and use Scale to scale the text large enough to occupy the entire stage. (You may need to position it closer to the center).


  7. Go ahead and scrub to get an idea of how the tween looks. From this point forward, remember that you'll only be able to edit the Properties panel when either the beginning or ending keyframe is selected, not between—that's where Flash is responsible for the tweening.


  8. Move the red current frame marker to frame 30, and modify the color effect on the same instance. Select the instance of My Name from the Properties panel and select Tint from the Color styles drop-down list. Pick a bright color and set the percentage to 100%. Scrub for a quick preview.


  9. Go to frame 1 and with the Transform tool stretch your name really tall. (You may need to adjust the position.)


  10. While still in frame 1, use the rotate option to rotate your name counterclockwise just a few degrees. Do a little skewing, too. When the rotate option for the Transform tool is selected, the corner handles rotate and the middle handles skew.


  11. Now check out your animation by scrubbing or testing the movie. You created two very different keyframes, and Flash figured out how to animate from one to the other.


    12. Hide Practice Session

REMEMBER: That keyframes establish when something should be onstage and where it will remain until another keyframe comes along. Also, stay away from the tweens Flash creates, be aware of what you are trying to edit.

Click for Practice Session 3...Make an Animation Finish Where it Starts Make an Animation Finish Where it Starts

TASK: Make an Animation Finish Where it Starts

  1. In a new file, draw a circle.


  2. Select the circle and convert it to a symbol (F8). Call it Yo-Yo, leave the default Movie Clip behavior, and click OK.


  3. Position the yo-yo in its starting position, near the top of the screen.


  4. Click the Timeline on frame 10 and insert a keyframe (F6).


  5. Before you move anything, click the Timeline on frame 20 and insert another keyframe (F6). At this point you should have three identical keyframes.


  6. Now position the red current frame marker on frame 10 and move the yo-yo down to the bottom of the stage.

    7. Tweening the Yo-Yo
  7. Set the Motion Tween for frame 1 through frame 10 and for frame 10 through frame 20. (You can save time by doing both at the same time, hold the Shift key down and select frame 1 and frame 10.) Access the Properties panel and you can set tweening for both keyframes. Select Motion.


  8. Select Control > Test Movie (Ctrl + Enter). Save the animation because we will add to it next.


  9. Click on the first keyframe and from the Properties panel set the Ease slider to -80, this will cause the yo-yo to start slowly and speed up at the end.

    10. Setting the Ease factor.
  10. Select the keyframe in frame 10 and from the Properties panel set Ease to 80. Test the movie again, you'll see that the yo-yo slows down before it stops at the top, making it look more natural!


    11. Hide Practice Session

Click for Practice Session 4...Make an Animation Ease In and Ease Out Make an Animation Ease In and Ease Out

TASK: Make an Animation Ease In and Ease Out

  1. In a new file, draw any shape and make it a Movie Clip symbol. Place the symbol somewhere on the left side of the stage.


  2. Click in the Timeline at frame 50 and insert a keyframe (F6).


  3. While the red current frame marker is in frame 50, move the instance of your symbol to the right side of the stage.


  4. Go back to the keyframe in frame 1 and create a Motion Tween (right-click and select Create Motion Tween).


  5. Test the movie (Ctrl + Enter) and remember how it looks.


  6. Place the red current frame marker in the middle frame 25.


  7. If you insert a keyframe in frame 25 (where there's already a Motion Tween), not only will Flash copy the contents of the previous keyframe, it will position the contents of the new keyframe in the appropriate midstream location. Go ahead and insert a keyframe in frame 25; you'll notice that nothing moves, Just the keyframe appears, and your symbol is already in its tweened location. Test the movie again it should be unchanged.


  8. Now we can set Easing. In frame 1, set the Properties panel Ease setting to Ease In (-100 to make it obvious). In frame 25, set Easing to Ease Out (100).


    9. Hide Practice Session

Rotating in a Motion Tween

If you manually rotate a symbol in one keyframe, Flash will tween the rotation appropriately. Additionally, in a Motion Tween you can tell Flash to rotate your symbol a specific number of rotations. In the Properties panel when a keyframe set to Motion Tween is selected, you can set the Rotate drop-down to CW (clockwise) CCW (counterclockwise).

You might have already figured this out, round objects like yo-yos don't make good candidates for rotation! Not unless there is something off-center for you to notice rotating... just thought I'd mention it here.

Components    Back to Contents    Shape Tweens    Top

Page Updated on March 2, 2003