Motion Tweens
V I S U A L M E D I A D E S I G N 10 5
MOTION TWEENS
Animate has a few built-in functions that can quickly create certain
types of animated movement. You establish the key points in the
sequence and Animate flls in the “in bet weens” – Animate refers to
these functions as “Tweens”.”
Motion Tweens can move an object, transform it (enlarge or
shrink), and/or change its opacity and color. Before an element in a
Animate fle can be animated in this way it must be converted to a
Symbol.
MOTION TWEENS: STEP-BY-STEP
Most of the animations you create in this class will be based on the
Motion Tween. Here’s the workflow!
• Defne the starting point. Be sure the right layer and frame
are targeted. Position the object you want to move at the place
on the Stage where you’d like the animation to begin.
• Convert to Symbol. Select the object on the Stage and
choose Modify >Convert to Symbol.
• Insert a Motion Tween: Go to Insert >Motion Tween. A
colored highlight will appear in the Timeline to visually indicate
the tween. If there are frames in the layer, the tween will
extend out to the end of the timeline for that layer.
• Defne the ending point. Move the Playhead to the point in
the Timeline where you want the animation to end. Then, use
the Selection Tool to move the object to the ending point of
the animation on the Stage. You will see a dotted motion path
indicating the trajectory that the object will follow.
To preview the animation, slide the Playback Head on the Timeline
back and forth, or press Return. Cmd-Return will play the fle in a
separate window.
145
Visual Media Design 105 > Digital Skills for Visual Media
WORKING WITH SYMBOLS
Motion tweens in Animate can only be created with Symbols.
Symbols are objects that have been converted into special
containers. A symbol is a parent object which resides in the Library.
Copies of the symbol, called “instances”, can be dragged from the
Library onto the Stage multiple times without increasing the fle
size. Each instance is linked to the original symbol; changes made
to the original will update in all its instances.
TO CREATE A SYMBOL
• Select an object on the Stage.
• Choose Modify>Convert to Symbol.
• In the resulting dialog box, name the new symbol and select
which type it is to be from the radio buttons listing Movie Clip,
Button or Graphic.
• In this class we will primarily be using the type “Graphic”
• Press OK. The new symbol appears in the Library.
After an Object is turned into a Symbol, it is placed in the Library Panel.
146
Visual Media Design 105 > Digital Skills for Visual Media
ANIMATING ATTRIBUTES
Motion tweens can animate much more than simple motion. You
can animate rotation and opacity changes, in addition to creating
complex motion paths with variations in speed. Here’s a quick
overview of the options you have with this technique once the
basic tween is in place.
EDIT THE MOTION PATH
If you select the motion path itself with the selection tool., you will
have these options:
• You can now drag this path into curved shapes for more
dynamic animations.
• You can rotate the element by using the rotation controls in
the Properties Panel
• You can change the rate of speed by using the ease controls in
the Properties Panel
EDIT THE OBJECT
If you select the object with the selection tool., you will have these
options:
• Transforming the object in between the beginning and end of
the animation will add those elements to the tween.
• You can adjust the opacity of the element in Properties to
make it fade in or out of the stage. This control is nested inside
the Color Effect area of the panel; Style: Alpha
• You can add color effects by adjusting the Tint slider in this
same area.
All these properties can be animated in endless combinations.
What fun!
147
Visual Media Design 105 > Digital Skills for Visual Media
PROJECT: YOUR FIRST MOTION TWEEN!
This project will take you through the process of setting up a simple
motion tween. This is not difcult, but there are some important
details to be aware of.
GETTING STARTED
£ Create a new Animate fle. Make it 1200 x 500 pixels at 24
fps.
£ Go to File > Import > Import to Stage. Select the fle
creatures.ai and click through the dialogues until you see the
creature on the stage. Animate places the creature on a new
renamed layer in the timeline.
MANIPULATE THE CREATURE
Before we can animate, we need to transform and reposition the
creature.
£ Equip the transform tool and shift-drag to scale it so that it fts
into the stage.
£ Use the selection tool to reposition the creature along the left
edge of the stage.
CREATE A SYMBOL
Graphic elements in a motion tween must frst be converted to
Symbols before the animation will work.
£ Right-click on the creature and chose Convert To Symbol.
[You can make the same conversion through the menus at
Modify > Convert to Symbol.]
£ In the Convert dialogue, give the symbol a name and keep
the rest of the default settings.
CREATE THE MOTION TWEEN
Let’s make that tween!
£ In the timeline, right-click in frame 1 and choose Create
Motion Tween. Animate automatically inserts 23 more frames
in your fle and moves the playhead to the last frame.
£ Use the selection tool to move the creature to the right edge
of the fle. When you release the mouse, you’ll see a visible
motion path with ticks for each frame in the timeline.
£ Play or preview the fle now and you’ll see that Animate has
automatically generated the frames in between the starting
and ending points you defned. This is a simple illustration of
the beauty of the tween!
148
Visual Media Design 105 > Digital Skills for Visual Media
EDITING THE MOTION TWEEN
Motion tweens are visually indicated with a colored highlight in
the timeline and a diamond at the end of the tween sequence. You
have control over the motion tween after you have created it. Here
are a few useful tips for making edits.
£ If you want to extend the time period of the tween, you can
click and drag the end of the tween to make it last longer.
£ You can always edit the starting and ending points of the
tween by moving the playhead to the right frame and
moving the creature.
£ Try scaling the end creature in this fle to be smaller and then
play the animation to gauge the result. You can modify other
attributes of the starting and ending states and the motion
tween will include those in the transitions it generates.
£ Take some time to experiment with motion tweens; save your
favorite version of this fle to turn in along with the rest of the
projects from this section. Future exercise will explore some of
the features in greater detail.
149
Visual Media Design 105 > Digital Skills for Visual Media
PROJECT: A COMPLEX MOTION TWEEN
This project will lead you through the creation of a more complex
animation that will use multiple objects, layers and of course
motion tweens.
GETTING STARTED
£ To get started, locate the fle ComplexMotion.fla. Rename
the fle Lastname_Firstname_Complex.fla.
£ Open the fle. The basic elements of this scene are already
in place, and layers have been created for each one. You will
need to transform and reposition each fgure before you
create the animations.
£ Before you do, use Properties to change the color of the Stage
to Light Blue: #OOCCFF.
£ Now, add 48 empty frames in the Timeline for each layer in
the fle. This gives you two seconds of animation time to work
with.
£ Save your fle and move on.
CREATE THE MOTION TWEENS
Create the tweens for each layer one at a time. It might be helpful
to selectively hide the other layers as you work for less clutter.
Poodle. The pooch sits beneath the Subway sign, waiting for his
owner.
£ Select and unlock this layer.
£ Use the Transform tool [Q] to scale the dog so that it fts
under the subway sign. No Motion Tween is needed for this
character.
£ Save your fle and move on.
Jazzy Guy
£ Select and unlock the Jazzy Guy layer.
£ Position him off the stage to the right.
£ Now go to Insert > Motion Tween to setup the tween.
£ Now you need to defne the end of the animation. Move
the playhead to the end of the active frames, and reposition
the man so that he is standing next to the poodle. As you do
this, you’ll see a motion path that shows the path of motion.
£ Preview the animation and refne as necessary. If you
preview the fle in a browser [Cmd-Return], you’ll see the man
appear on the stage from the right.
£ Save the fle.
150
Visual Media Design 105 > Digital Skills for Visual Media
Tucan
£ Make the bird visible and unlock the layer.
£ Go to Modify > Transform > Flip Hortizontal to flip the bird’s
orientation.
£ Now, use Transform to scale the fgure so that it fts into the
blue space on top of the subway background.
£ You will need to change the stacking order of the
layers so that the bird appears to be behind the subway
background. A simple drag and drop will do the trick.
£ Position the bird off stage left as the starting point for
this element. Create the tween and have the ending point be
off stage right.
£ Preview, save and move on.
Monster. You should be able to do this one on your own! The
monster appears behind the subway and the tucan, so you will
have to rearrange the layers.
£ The monster needs to be resized to fll half the stage
horizontally.
£ Setup the tween so that the monster is “falling” from
the sky. The animation begins from offstage Top, and the
fgure disappears behind the subway at the end.
£ Preview, save and move on.
Turn on all the layers and play the animation in all its glory. Building
this animation one layer at a time is a good approach to working
with multiple elements. As always, feel free to experiment.
FINISH UP AND MOVE ON!
151
Visual Media Design 105 > Digital Skills for Visual Media
PROJECT: ANIMATING ATTRIBUTES
This project will refne your understanding of the options available
to you with Motion Tweens. You will create a fle that animates,
motion, rotation, opacity and more.
GETTING STARTED
£ Navigate to the exercise folder; open the fle Space_
start.fla. Spend a few moments getting acquainted with the
document: it has four elements already embedded in it. Each
element has already been converted into a symbol so they
are ready for motion tweens.
£ Each layer has 120 frames in it; this animation will last 5
seconds at 24 FPS!
Over the course of this project, you will make the sun fade into
the scene and rotate; the asteroid and space ship will also be
introduced dynamically. Play the sample GIF before you build your
fle so you can see what you’ll be creating.
CREATE A FADE-IN EFFECT FOR THE SUN
You want the sun to fade into the scene over the frst two seconds
of the animation.
£ Target the sun layer and move the playhead to frame 1.
£ Go to Insert > Create Motion Tween
£ In Properties, open the Color Effect pane and adjust the Alpha
to be 0. The sun should disappear.
£ Now move the playhead to frame 48.
£ With the sun selected, take the Alpha back up to 100. If you
play this section of the animation you should see the sun fade
in.
MAKE THE SUN ROTATE IN PLACE
Now, let’s make the sun rotate in place.
£ Move the playhead to the end of the live frames in the
timeline and select the Sun on the stage
£ In Properties, click into the Frame pane and use the controls
under Tweening to make the sun rotate 1x/clockwise.
£ Preview, save and move on.
Everytime you make a change to the sun from its starting state, you
will see a diamond in the Timeline. This is a keyframe automatically
generated by Animate to indicate a key moment in the animation.
152
Visual Media Design 105 > Digital Skills for Visual Media
THE ASTEROID
You want the asteroid to enter the scene from off stage left, exit
stage right and rotate through space.
£ Target the asteroid layer and create the tween. First, just
set it up so that the object moves through the stage.
£ Adjust the rotation controls in Properties > Frame > Tweening
so that the object rotates fve times counterclockwise as it
moves through the scene.
£ Getting fancy! Preview, save and move on.
THE SPACESHIP
You want the ship to arc into the scene and disappear into the sun.
How dramatic!
£ Target the ship layer and create the tween. First just set
it up so that the ship enters the stage from the lower-left and
moves behind the sun.
£ Use the transform controls to scale the ship to be
completely covered up by the sun at the end of the tween.
£ Bring the playhead back to frame 1. Use the Selection tool
to grab the motion path and bend it into a subtle arc.
£ With the motion path still selected, use Properties to set
the Ease to -100. This will make the ship speed up as it moves
across the stage.
£ Right now, the orientation of the ship on the motion path
looks unnatural. You can tell Animate to try to maintain the
right orientation by checking Orient to Path in Properties. Try
it and see what you think.
£ Save and preview the fle.
There are lots of way that you could add elements or refne what
you have already created. Feel free to experiment!
FINISH UP!
£ When you’re happy with your fle, rename it LastName_
Firstname_Space.fla. Submit the fle along with the other
projects from his module
153
Visual Media Design 105 > Digital Skills for Visual Media
CHALLENGE: PUBLIC SERVICE ANNOUNCEMENT!
Use the empty street sign as a template to create a public service
announcement around an urban issue you feel strongly about!
You can use our assets [if you like bikes] or create your own unique
animation.
This is similar to the previous challenge project, but now you know
how to move, fade, & rotate; use these tween techniques in the
project!
You can do anything you want with this fle, provided that you
meet a few simple requirements:
PROJECT REQUIREMENTS
£ Work in a fle that is 1000 x 1500 pixels. 24 FPS. ActionScript 3.0.
£ Use the empty street sign in Bilboard.jpg as your base layer
£ Create an animation that is at least 5 seconds long
£ Use motion tweens to move elements onto the stage
£ In at least 1 tween, animate an attribute! You can choose from
any of the variables we’ve explored in this section:
• Opacity [Alpha]
• Rotation/Ease
• Scale
£ Don’t abandon the workflow we’ve established for these
projects: make a plan and build a skeleton fle before you start
animating!
FINISHING UP
£ Preview the fle in Animate to make sure that it’s perfect.
£ Submit the native .FLA fle in Canvas, along with the other
projects from this module. Rename it LastName_Firstname_
PSA.fla
£ Export out a GIF fle to share in our Discussion this week. You
can do this via File > Export > Export Animated GIF.
154
Visual Media Design 105 > Digital Skills for Visual Media