Adobe Animate 2020 2 – Animation Basics

ADOBE ANIMATE 2020

2 – Animation Basics
Animation Basics 1

Exercise 1. Creating a Symbol 2

Exercise 2. Working with Layers 4

Exercise 3. Using the Timeline 6

Exercise 4. Previewing an Animation 8

Exercise 5. Classic Tweens 9

Exercise 6. Motion Tweens 12

Exercise 7. Shape Tweens 14

Animation Basics
Animation can be achieved a number of ways in Animate. One way is by using Frame by Frame
animation. I.e. drawing a slightly different version of your image on each frame to create the illusion
of movement when you play the animation. For certain types of animation, frame by frame is a good
choice. In other cases, however, it is a better idea to let Animate handle the hard work by making
use of Tweens. These exercises will focus on using tweens for animation.

There are two types of tweens in Animate. Shape Tweens are used for morphing from one shape in
to another.

Motion Tweens are used for moving (and changing) objects. Before Adobe Flash was replaced with
Animate there were changes to the way motion tweens worked. The old way of doing tweens is still
supported and is called Classic Tweening. In some instances, classic tweens are still necessary to get
the effect you need.

© Steve O’Neil 2020 Page 1 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

Exercise 1. Creating a Symbol

When you create pictures or shapes in Animate, you can then take the shape and turn it in to a
Symbol. Symbols reside in the Animate Library. There are some good reasons for using symbols in
your Animate work.

a. Symbols allow you to re-use components in your animation rather than having to re-create
them.
b. Using symbols mean your Animate files take up less memory. This is because rather than
saving the same image several times, Animate will simply save the image once, and then
make it appear in more than one instance.
c. Symbols are easier to animate and work with than regular shapes.

You can create a blank symbol and then add content to it, or you can
take an existing component on your stage and convert it to a symbol.
We will create a symbol by starting with some text and converting it
to a symbol.

1. Make a new blank Animate file.

2. Select the Text Tool by clicking the icon or pressing T on your
keyboard.
3. Choose the options shown to the right from the Properties panel
(including a fill colour for your text).
4. Click in the middle of the stage and type the text Animate!

If you need to make changes to the text, such as formatting changes

or correcting typing errors, make sure the text tool is still selected and
edit the text as you would normally.

5. Choose the Selection tool (click ) and make sure your text is still
selected on the stage. Next we need to convert the text to a symbol. There are several ways to
do this.
a. Select Convert to Symbol from the Modify menu.
b. Press F8.
c. Right click on the text and select Convert to Symbol.
d. Use the Select tool to drag the text in to the bottom half of the Library Panel. It is usually
grouped with the Properties panel though you may need to click the Library tab at the top to
show it first.

© Steve O’Neil 2020 Page 2 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

6. Use one of the methods just described to convert the image to a symbol. The options below will
appear.

7. Enter Animate Text as the Name of the Symbol. Make sure the Type is set to Graphic. Don’t
worry about changing the Registration point for now.
8. When you have specified the name and type, click OK.
9. To see the Library Panel if you don’t already see it, click the Library tab at the top of the
Properties Panel or select Library from the Window menu (or press Ctrl L).

The new symbol will now appear in the library. The bottom half of the library panel lists the library
items in the current project. A preview of the selected item appears in the top half of the library
panel.

Now that we’ve created the symbol we can add instances of the symbol. This simply means that
Animate will make the text appear more than once without having to make more copies of it. Only
one copy will be saved in your Animate file and that one copy will appear each time you create an
instance.

Before we add another instance of the object we will create a layer for the new instance.

© Steve O’Neil 2020 Page 3 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

Exercise 2. Working with Layers

Before creating a new layer, we’ll name the layer that already exists in the file.

1. In the Timeline below the stage, double-click on the name of the layer (Layer 1).

2. Type Animate_Text for the name of the layer and press Enter. Make sure you use an underscore
(Shift - ) instead of a space since blank spaces aren’t permitted in layer names.

3. At the top of the Layers Panel, click the New Layer icon.

A new layer will appear above the original layer.

4. Repeat steps 1 to 2 to rename the new layer as New_Text.

Since it’s good to get in to the habit of saving regularly (instead of waiting until you finish and risk
losing your work if there’s a problem), we’ll save the file now.

5. Save the file and call it Animating Symbols.

6. Make sure the New_Text layer is still selected. You can tell it’s the selected layer if it’s shaded.
7. Drag your Animate Text object from the library on to the stage so that it overlaps the other text
slightly (it should be lower and more to the right than the first one).

Each instance of an object can be modified to make it slightly different from the original. This allows
you to have the same object appear a little different without your file having to store multiple copies
of the object.

8. Make sure your new instance of the object is selected. It will have a thin blue rectangle around it
if it is.
9. In the properties panel, change the Color Effect option from None to Tint.

© Steve O’Neil 2020 Page 4 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

This option allows you to have the object tinted with a different colour so that it looks different from
the original object.

10. Select a colour from the colour box next to the Style option and then use the Tint selection slider
to the right to modify how much the tint will affect your object.

The new instance of your object should now appear a different colour from the original.

Now that both instances of the object look a little different, we’ll look at some of the layer options.
We’ll start by changing the layer order. When objects overlap, the order of the layers determines
what will appear in front, much like other applications such as Adobe Photoshop.

11. In the Timeline, drag the New_Text layer so that it is below the Animate_Text layer. When you
are done, the new instance of your object will be behind the first one.

There are additional options in the layers panel which we will now try out.

When you move your mouse over a layer you will see an icon that looks like a small eye. Turning this
icon on and off will hide or display that layer.

12. Click the Hide Layer button on the New_Text layer. The button will now have a small line
through it to show the layer is currently hidden and you will see that layer hidden from the
stage.

13. Click the Hide Layer button on that same layer to turn show that layer again.

Tip You can click the eye symbol at the top of the layer panel to turn all layers on and off.

© Steve O’Neil 2020 Page 5 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

Next to the Hide Layer button on each layer is a small padlock button for locking layers. This can
prevent you from making accidental changes to a layer while you are working on other layers.

14. Click the Lock Layer icon on the Animate_Text layer. The Lock will now be lit up to indicate that
layer is locked from editing.

15. Make sure the Selection tool is selected and try moving the text that is on that layer (this should
be your original text). You will still be able to move your other text but you won’t be able to
select or move the text that is on the locked layer.

Another on the Layers Panel allows you to highlight the layer’s contents. When you have a lot of
layers it can be difficult to tell which layer certain objects are on and this option makes it a lot easier.

16. Click on the coloured box on one of your layers. All objects on that layers will changes so that
they are highlighted, using the colour of that layer’s box.

17. Click the layer’s colour box again to turn off highlighting.
18. Try using the layer highlight option with your other layer.
19. Turn off all layer highlighting and save changes.

Exercise 3. Using the Timeline

Animation in Adobe Animate is done using the Timeline. The Timeline is used to plan when events
will occur in your animation. There are normally 2 rows of numbers along the top. One row
represents seconds while the other row represents frames. Most projects will play animation at a
speed of 30 frames per second (30fps), though that can be changed in your settings.

We’ll start with a basic animation that changes the colour of the text.

1. Select the text object that is on the Animate_Text layer (this should be the first one you placed
on the stage). Unlock the layer if you haven’t already by clicking the padlock on the layer.

Look on the timeline and you will see that both layers currently have a dot in frame 1. This lets us
know that there is a frame in that part of the timeline on each layer. If you get a layer with a hollow
dot, that means that there is a frame in that part of the timeline but that particular layer has nothing
on it.

© Steve O’Neil 2020 Page 6 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

2. Click in frame 30 on the timeline, making sure that you are still clicking on the Animate_Text
layer. Since our project will be playing at 30 FPS, 30 frames will be the equivalent of one second.

We will tell Animate to mark an event on the timeline by adding a Key Frame. Key Frames are points
on the timeline where significant changes in our animation will take place. In this case, the Key
Frame will mark a point on the timeline when the colour of the text will change.

There are a few ways you can insert a key frame on to the timeline:

 Select the Insert menu and then select Timeline and Keyframe.
 Right click on the frame where you want the Key Frame inserted and select the Insert
Keyframe option from the right-click shortcut menu.
 Press F6.

Tip To clear a key frame, you can right click the frame in the timeline and select Clear Keyframe,
or you can press Shift F6.

3. Use one of the above methods to add a key frame to frame 30 of your Animate_Text layer.
4. The frame will now have a solid dot marker and all the frames in between will be filled in.

Currently, your other text object will not appear on the stage. This is because we have frame 30
selected on the timeline and the New_Text layer has no frame at that point on the timeline.

5. Add a key frame to frame 30 of the New_Text layer. Both layers should now have a key frame at
frame 30 of the timeline.
6. Select one of your text objects, making sure you have the Selection Tool active.
7. Use the Color option from the properties panel at the side to tint this object with a different
colour. If you can’t see the Color option in the properties panel it may be showing properties for
the frame in the timeline instead of properties for the object. If that is the case, click on another
part of the stage and then click the object again to make sure it is selected.

8. Use the tint options to change the colour of the other object on Frame 30. Both should now be
different from their original colours.
9. Add a key frame for both layers at frame 60.
10. Repeat steps 7 and 8 to change the colour of both objects.

© Steve O’Neil 2020 Page 7 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

11. Add a key frame for both layers at frame 90.

12. Repeat steps 7 and 8 to change the colour of both objects.
13. Add a key frame for both layers at frame 120.

This time instead of changing the colours for the new frame, we’ll make a copy of the first frame.
This will mean that the last frame will be the same as the first frame which will look better when the
animation repeats.

14. Right click on the first frame of the Animate_Text layer and select Copy Frames.
15. Right click on the last frame of the same layer and select Paste Frames.
16. Repeat steps 14 and 15 for the other layer.
17. Save the changes.

Exercise 4. Previewing an Animation

We’ll start by previewing the image on the stage.

1. Click on frame 1 (on either layer) to make sure you are at the beginning of the timeline. You can
also press Shift , (comma) to go to the beginning of the timeline and Shift . (full stop) to go to
the end of the timeline.
2. Select the Control menu and then select Play (you can also press Enter). This command will play
from the current position on the timeline to the end of the timeline. If you are already at the end
of the timeline it will play from the beginning. Pressing Enter while it is already playing will pause
and resume playback.

The animation will now play on the stage. You will see the timeline marker moving from left to right
along the timeline. The objects on the stage should change colour each time we reach one of the key
frames on the timeline.

Animate also provides several options in your control menu for previewing your animation outside
Animate (such as previewing it in a web browser).

© Steve O’Neil 2020 Page 8 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

Exercise 5. Classic Tweens

The animation we have done so far has been little more than one frame abruptly changing to
another frame. There has been no smooth transition from one stage of the animation to the next.
Smoother transitions can be accomplished using tweens. Tweening involves placing Key Frames at
the key positions in the animation and then using a tween to make Animate fill in the bits in
between.

1. Ensure you are on Frame 1 in the timeline and create a new layer called Star.
2. Make sure you have the Star layer selected and use what you learned in the previous sections to
create a star on the left side of the stage. Use any fill and stroke settings.

3. Select the star (remember you can double click with the selection tool to select both fill and
stroke).

Tip Like Photoshop and Illustrator, you can hold down Ctrl to temporarily activate the Select tool.

4. Create a new Graphic Symbol called Star. (If you can’t remember how, refer to page 2)

5. Insert a new key frame at frame 30 on the Star layer.

6. While you are still on that frame, move the star to a location near the top of the stage. Position
it so that it slightly overlaps one or both of your text objects.
7. In the properties panel on the side, change the Colour Effect property to Alpha and set the
amount to 60%. The alpha setting controls transparency of objects on the stage.

© Steve O’Neil 2020 Page 9 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

8. Insert a new key frame at frame 60.

9. Move the star to the right of the stage (still overlapping the text objects).
10. Adjust the alpha setting to 40%.

11. Insert a new key frame at frame 90 with the star positioned towards the bottom of the stage.
Set the alpha setting to 75%.
12. Right click on frame 1 and select Copy Frames.
13. Right click on frame 120 and select Paste Frames. The final frame should now be the same as the
first frame.

If you preview the animation right now, the star will simply be jumping from one location to the next
each time there is a new key frame. If we want it to move between those points we need to add
tweens.

14. Right-click on the timeline between frame one and frame 30 (the first key frames).
15. From the shortcut menu select Create Classic Tween (this option is also available from the Insert
menu).

An arrow will now appear between the two key frames, indicating that there is now a tween
between them.

© Steve O’Neil 2020 Page 10 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

16. Press Shift comma to move to the first frame and then press Enter to preview your animation.
You will see the star move smoothly from the first key frame to the next key frame.
17. Repeat steps 15 and 16 to insert motion tweens between all of the other key frames on the Star
layer.

Tip You can add several motion tweens at once by dragging your mouse to select a range of
frames on the timeline, then using the Create Classic Tween option to add tweens along all
the timeline you have selected.

18. Preview the animation to see the effect of the motion tweens.

Lastly we’ll change a few tween options.

19. Click on the first tween. I.e. click anywhere on the Star timeline between frame 1 and frame 29.

The properties panel on the right will now show the tween properties instead of the object
properties.

20. Change the Ease option to -90 (with the minus sign). Changing this property to a negative
number will mean that instead of moving at a constant speed, the object will start moving slowly
and speed up. You can enter the number in to the space next to the Ease label or you can simply
drag left or right on the number until you see the value you want (you can use this method of
dragging the number with many of the properties in Animate).

21. Click on the second tween and change the Ease option to 90. Setting this to a positive number
will make the object start moving quickly and then slow down.
22. Click on the third tween and change the Rotate option to Clockwise. This will make the object
rotate in a clockwise direction as it moves (you can change the number next to it to determine
how many times it will rotate in the course of its movement).

23. Change the Ease option for the last two tweens to settings of your choosing.
24. Preview the animation to see the effect of the tween property changes.
25. Save the changes to your file (this should be becoming a regular habit by now).

© Steve O’Neil 2020 Page 11 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

Exercise 6. Motion Tweens

The method we used for creating a motion tween in the previous exercise was the standard way of
doing it in all older versions of Flash. Later versions of Flash added a new way of doing motion
tweens which is also used in Animate. The older method, now labelled as Classic Tweens, is still
useful in many cases. In most cases, you’ll probably use the newer method which is far simpler.

1. Create a new layer called Bug.

2. Click on the first frame in the Bug layer.
3. Using the drawing tools of your choice, draw a small flying insect to the right of your text.
4. Make sure the whole bug is selected and create a new Graphic symbol called Bug.

The last frame in the timeline will currently display a Frame symbol . All of the frames in between
will be grey indicating that this layer will currently be the same across all frames in the timeline.

5. Right click on the first frame and select Create Motion Tween. The Frame symbol in the last
frame will be removed and all the frames on that layer will change colour to indicate that a
motion tween has been added.
6. Click in the last frame on the Bug layer.
7. Move the bug to the left side of the stage. A row of dotted lines will appear between the bug’s
starting point and finishing point. These dots represent the position of the bug at different
points in the timeline. If you preview the animation now, you will see the bug slowly move from
the beginning to the end of that dotted line.

Motion tweens using this method can be controlled by making use of Property Keyframes.

8. Click on a frame in the middle of the Timeline on the Bug layer.

9. Move the bug to a point near the bottom of the stage. The dotted line will now move through
the new position to show that the bug will move through that position on the way to the end
point.

© Steve O’Neil 2020 Page 12 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

A small dot will appear on the timeline to indicate that there is a property keyframe at that point.

While you are on that property keyframe, you could adjust some of its properties such as colour and
size like we did earlier.

With classic tweens, if you wanted to make an object travel along a certain path as it moved, you
needed to add a motion guide. With regular tweens, motion guides are not necessary as you can
simply modify the dotted line to change where the object goes.

10. With the Selection Tool active, move your mouse over the dotted line. A small curve will appear
next to your mouse. Drag to change the shape of the line.

11. Continue shaping the line and preview the result. The bug will follow whatever shape your line
takes.

Tip You can turn on Orient to path in the tween settings if you would like the object to change the
direction it is facing while it moves along the path.

© Steve O’Neil 2020 Page 13 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

Exercise 7. Shape Tweens

Shape tweens allow you to change the shape of an object over time. Unlike motion tweens, shape
tweens must be done on objects that haven’t been converted in to symbols.

1. Insert a new layer and call it Shapes.

2. Make sure you have the first frame of the Shapes layer selected.
3. Draw a rectangle in the right area of the stage. Choose your own fill and stroke settings.
4. With the Selection tool, Double click the rectangle to ensure the fill and stroke are both selected.
5. Select the Free Transform tool from the toolbar.
6. Move your mouse just outside one of the rectangle’s corners until your mouse
pointer is a circular arrow shape.
7. Drag to rotate the rectangle slightly (while the free transform tool is active, you can also resize
and move the object). The object will rotate around the white dot in the middle. You can move
that white dot to change the centre of rotation.

8. Select frame 30 from the timeline (on the Shapes layer) and insert a new key frame.
9. With frame 30 still selected, delete your rectangle (press the Del key). The keyframe will show a
hollow dot to indicate that there is nothing on that layer at that frame.
10. Draw an oval near the bottom of the stage with different fill and stroke settings.
11. Add a new key frame at frame 60.
12. Delete the oval and draw a large polygon with your choice of sides and colour.
13. Add a key frame at frame 90.
14. Delete the polygon and add a shape of your choosing.
15. Copy frame 1 to frame 120.
16. Right click between the first two key frames on the shape layer.
17. Choose Create Shape Tween.
18. Add shape tweens for the rest of the timeline on the shape layer.

© Steve O’Neil 2020 Page 14 of 15 http://www.oneil.com.au/pc/

Adobe Animate 2020 2 – Animation Basics

19. Preview your animation. You will see the shape on each key frame change in to the shape in the
next key frame.

20. For a bit of added variety in the animation, use the Free transform tool to adjust the size of your
star object on the star layer so that it is different for each key frame.
21. Save the changes.

Note If you want to apply a shape tween to text, first you must select the text and then use the
Modify, Break Apart option from the menu to break the text in to individual letters. Then use
the Break Apart option again to turn them in to shapes that can be edited.

© Steve O’Neil 2020 Page 15 of 15 http://www.oneil.com.au/pc/