Contents

Creating and Using Motion Tweens in Flash CS4...............................................................2

Creating a Tween Animation...........................................................................................2
12. Altering the Motion Tween...................................................................................3
Adjusting the Timing.......................................................................................................3
Adjusting the Motion Path...............................................................................................3
Correcting the Motion Orientation..................................................................................3
Creating and Using Motion Tweens in Flash CS4
Traditional animation is done by creating a series of frames whereby each one is slightly
different from the previous one. The changes that occur from the first frame to the last
(when all are viewed quickly one after the other) is what creates the animation.

For example: a ball that starts at the left side of the stage and progresses towards the the
right side would require a series of frames where each successive frame has the ball
moved slightly to the right until the final frame has the ball at the right side of the stage.

Because this type of animation requires the manual creation of every frame it is known as
'frame-by-frame' animation.

A 'tween' is a Flash animation term referring to the action whereby Flash automatically
creates the animation frames between a start and end position for you (no need to do
frame-by-frame animation anymore!)

Creating a Tween Animation

1. Start a new movie (from welcome screen select Flash File Actionscript 2.0)
2. From the Library panel click the New Symbol button at the bottom
3. Name the symbol "rocket", choose Graphic from the Behaviour list and click OK.
4. Use the drawing tools to create a simple small rocket shape (triangle on top of a
rectangle)
5. When done, click on the 'Scene 1' link at the top of the Workspace panel to return
to the stage
6. Drag your rocket from the Library panel to the bottom of your stage, at
approximately centered from left to right (if it is large, resize it so that it is no
more than about 20% of the height of the stage)
7. In the timeline, right click on the keyframe (the only frame you have right now)
and select 'Create Motion Tween'. Flash will automatically extend your timeline
layer 24 frames (because that is the default length of a one second animation), and
it will be shaded blue to indicate it is a motion tween.
8. Position the playhead (red/pink box above the timeline) over the last frame (likely
already there unless you moved it)
9. On the stage, click and drag your rocket from the bottom to the workspace above
the stage (yes, off the stage!). Instantly you should now see a motion path visible
on the stage that shows the path your rocket will take from start to end position (if
not see your teacher).
10. Click and drag the playhead left and right and observe the rocket move up and
down accordingly along the path
11. Test your animation by keying CTRL+Enter on the keyboard. A pop-up window
will appear showing your animation as it is right now.
 12. Altering the Motion Tween
The motion tween can be adjusted to allow various property changes while the motion
occurs. You can adjust both the size and appearance of the symbol instance during
motion. You can also alter the path of that the symbol instance takes during the motion
and the length of time the animation takes.

Adjusting the Timing

1. On the timeline, move your mouse over the right edge of the last frame of the
animation
2. Click and drag the end point of the animation to frame 48 (so based upon a frame
rate of 24fps the animation will now take 2 seconds)
3. Re-test your animation and notice the change in timing
4. Adjusting the Symbol Instance Size
5. Position the playhead to the last frame
6. Change to the 'Free Transform' tool
7. Click on the rocket in the Workspace panel (there should now be 8 black boxes
(control points) around your rocket
8. Click and drag one of the corner control points so that the rocket is now about half
its original size
9. Re-test your animation and notice that now not only does the rocket travel up and
off the stage, it also gets smaller as it does

Adjusting the Motion Path

1. Change to the 'Selection' Tool
2. Position the playhead to frame 15, then click and drag your rocket to the left
approximately half way to the left edge of the stage
3. Position the playhead to frame 30, then click and drag your rocket to the right
approximately half way to the right edge of the stage
4. Re-test your animation and notice that now the rocket continues to get smaller as
it goes up but now follows the new path. However you will also notice that the
rocket does not obey the laws of physics as it travels up the path.

Correcting the Motion Orientation

1. The first problem with the animation is that the rocket is constantly pointing
upwards:
2. Position the playhead on the first frame of the animation
3. Select the 'Free Transform' tool and click on your rocket
4. Move your mouse slightly above one of the top corners of the box around the
rocket, your mouse should show a circular arrow
5. Click and drag the mouse until the point of the rocket is aligned with the path
6. Click on any frame within the animation timeline
7. View the Properties panel and look for the "Orient to Path" checkbox under the
'Rotation' option. Click the checkbox to enable path orientation
 8. Re-test your animation and notice that the rocket is now oriented so that it
changes direction according to the path.

9. Correcting the Motion Path

10. The second problem with the animation is the abrupt change of direction in the
motion path:
11. Move your mouse over one of the dots in between the two turns (it should change
to show a curved line)
12. Click and drag one of the dots up a little. Notice how it creates a curving effect
13. Continue to click and drag other dots to make the motion path smoother and more
realistic

Correcting the Motion Path

1. The second problem with the animation is the abrupt change of direction in the
motion path:
2. Move your mouse over one of the dots in between the two turns (it should change
to show a curved line)
3. Click and drag one of the dots up a little. Notice how it creates a curving effect
4. Continue to click and drag other dots to make the motion path smoother and more
realistic