Chapter
4
Motion Tween Animations
Adobe Animate provides two main ways of animating, Tweening and Frame by Frame
Animation. The most common form is Tweening where you set a start point and an end
point and let the program animate the object BETWEEN those points. This is where the
term TWEEN comes from.
In this chapter you will be shown how to create TWEEN ANIMATIONS for a text symbol.
The next few chapters will demonstrate animating graphics.
Creating a Motion Tween
Motion Tweening involves moving objects from a start point to an end point. You can
Motion Tween objects, text, drawings, etc. They must be grouped or converted to a
symbol (although text boxes can be animated directly). To illustrate Motion Tweening, a
simple text symbol will be moved around the stage.
A Setting the Symbol
1 Load Animate or close the current files and create a new FULL HD preset file.
© Guided Computer Tutorials 2021 4-1
Learning Adobe Animate CC
4 Select the SELECTION TOOL and the text box should be selected, then use the
MODIFY menu to select CONVERT TO SYMBOL.
NOTE: Text can be Motion Tweened without converting it to a symbol,
but it is a good habit to get into as other shapes do need to be
converted to a symbol before they can be Motion Tweened.
B Setting the Motion Tween
To animate an object frames need to be inserted in the TIMELINE panel. Animate is set
to insert 30 frames (which represents a 1 second animation) when you create a Motion
Tween. However, you can easily adjust the number of frames once the animation is set.
1 Display the INSERT menu and select CREATE MOTION TWEEN.
4-2 © Guided Computer Tutorials 2021
Motion Tween Animations 4
NOTE: There is also a CREATE MOTION TWEEN icon in the FRAME
section of the PROPERTIES panel that can be clicked on to
create the MOTION TWEEN.
6 Use the TEST MOVIE button to test the movie then close the TEST MOVIE screen.
© Guided Computer Tutorials 2021 4-3
Learning Adobe Animate CC
7 You can do a live preview of the animation without opening the TEST MOVIE
screen.
8 Move the PLAYHEAD MARKER to FRAME 1, press the <enter> or <return> key
and the animation should play once. It is a useful way of quickly testing that an
animation is working correctly. You can also click on the PLAY arrow at the top of
the TIMELINE panel.
Understanding the Timeline Panel
Now that you have created your first animation it is important that you understand the
various sections of the TIMELINE panel. The following diagram labels its sections.
Layer Controls Frame Settings Frame Navigation Onion Skin Tools Timeline Adjustments
Keyframe Marker Frames Playhead Property Keyframe Marker Play Tools
The important sections of the TIMELINE panel are:
• The KEYFRAME MARKER which is a solid •. It stores major changes in an
animation. If there is no content in a KEYFRAME the dot will open.
• The PROPERTY KEYFRAME MARKER which is a diamond shape. It stores symbol
property changes such as position, rotation, size, etc. in the animation.
• The PLAYHEAD which is the blue rectangle and line. It allows you to move
through the frames. The frame that the PLAYHEAD is over has a FRAME NUMBER
which is displayed at the top of the TIMELINE panel.
• The FRAMES are contained in a shaded bar in the TIMELINE panel. They control
the duration of the animation.
4-4 © Guided Computer Tutorials 2021
