Adobe Animate: Beginner’s Guide 

______________________________________________________________________________

Table of Contents: 
 
Navigating Workspaces​………………....3

The Tool Bar​……………………....…….4

Select Tool​………………………………..4
Free Transform Tool​……………………...4
Lasso Too​l………………………………...5
Fluid Brush Tool​………………………….5
Classic Brush Tool​…………………….....5
Rectangle Tool​…………………….……..6
Line Too​l………………………………….7
Pen Tool​…………………………………..7
Text Tool​……………………………...….8
Paint Bucket Tool​………………….….....8
Eyedropper Tool​…………………..……..8
Asset Warp Tool​……………………..…..8
Hand Tool​ ………………………..……...8
Zoom Tool​…………………………….....9

The Properties Panel​………………..….9

The Rectangle Tool’s Properties​……..….9
Fill vs. Stroke​………………………..…..9
The Classic Brush Tool’s Properties​….…9
Merge Drawing Mode​………………….10
Object Drawing Mode​…………………10

The Color Panel​………………….…11

Linear Gradient and Radial Gradient​...11
Bitmap Fill​…………………………...11

The Timeline​…………………..…….12
Insert Frame​…………………..……....13
Insert Keyframe​……………….……..13
Insert Blank Keyframe​………….……13
Onion Skin​ ..………………………...14

Using Symbols​…………………….…...15
Convert to Symbol​………………...…...15
Movie Clips vs. Buttons vs. Graphics​….16
Looping Options​……………………….17
Arrange Symbols​…………………...….17

1 
Tweens​……………………………….....18
Classic Tween​………………………......18
Motion Tween​…………………….…....18
Shape Tween​…………………………...19
Properties Panel​……………………......20

2 
Navigating Workspaces 
 

This is what you will see when you first open Adobe Animate:

This is called the ​Bouncing Ball Workspace.

To use animate to the best of its ability, you are going to want to work in the ​Animator
Workspace.

However, if you prefer the layout of this workspace, you can still access all the elements of the
Animator Workspace ​by going up to the ​Window ​dropdown menu. All panels can be located
and opened from there.

To change workspaces go up the ​Window​ dropdown menu and select ​Workspaces >. ​Then
choose ​Animator.​ This is what the animator workspace looks like:

3 
You can move around any panel in this workspace by holding down on its title and dragging it to
where you want it to be. You can also edit the size of these panels by using the adjustment
arrows. If you ever want to reset the workspace to default, open the ​Window​ dropdown menu
and select ​Workspaces >. ​Then go to the bottom of the menu and select ​Reset “Animator”...

The Tool Bar 

 

This is the ​Tool Bar​. By right clicking on any of the tools that have a triangle in their bottom left
corner, you have more tool options. A description of all of these tools is listed below:

From left to right:

 1: The Select Tool ​(Shortcut: ​V)
This allows you to click on things throughout the workspace. It also allows you to reshape a line
or shape outline. If you right click on this icon, you will also be able to use the ​subselection tool
(shortcut: A).​This highlights the vector points of any shape you select.

The highlighted vector points will look like this:

 2: The Free Transform Tool ​(Shortcut: Q)

You can use this tool to edit any shape freely:

4 
If you right click on this tool, you can also select the ​Gradient Transform Tool. ​This allows
you to freely edit the gradient of a shape (if you’ve applied a gradient to the shape).

 3: The Lasso Tool ​(Shortcut: L)

This allows you to free-hand a selection and then drag it wherever you’d like:

If you right click you can also use the ​Polygon tool​ and the ​Magic Wand. ​The ​Polygon tool
makes the same type of selection as the ​lasso tool ​but instead uses straight lines. The ​Magic
Wand tool ​is a sort of smart selection tool.

 4: Fluid Brush Tool vs. Classic Brush Tool ​(Shortcut: B)

5 
The difference here is that the ​Classic Brush tool ​automatically smooths the lines of your
drawing and the ​Fluid Brush tool ​does not:

Additionally, the ​Fluid Brush tool ​allows for customization while the ​Classic Brush tool​ does
not. That means you can edit the settings of the ​Fluid Brush ​in the ​Properties Panel​ ​so that it
smooths your lines. You also have control over exactly ​how much ​smoothing it does.

You have more options and more control. For this reason we typically recommend always using
the ​Fluid Brush ​tool on your detailed drawings. The ​Classic Brush ​only makes sense for
simplistic drawings.

5: The Eraser ​(Shortcut: E)

The eraser tool works just like the classic brush tool. It does not erase entire objects with a click
but rather erases whatever you drag the eraser tool over. You can change the size of this the same
way that you can change the size of the brush tool.

 6: The Rectangle Tool ​(Shortcut: R)

The next tool is the ​Rectangle tool ​which also contains the ​Rectangle Primitive tool, Oval tool
(shortcut: O)​, Oval Primitive tool, ​and ​PolyStar tool. ​All of these tools create shapes for you.

6 
Note: when you create a shape using one of these tools, the outline and the color fill are
technically different objects and can be moved separately (unless you are in ​object drawing
mode​). If you want to move both a shape’s outline and a shape’s fill, you have to click and drag
using the ​selection tool​ ​to select the entirety of the object.

The difference between a regular ​Rectangle tool ​and a ​Primitive Rectangle tool ​(or an ​Oval
tool ​and a ​Primitive Oval tool) ​is that the primitive tools have hinges that allow you to edit the
shape. The regular shape tools do not.

However, if you ever want to edit a regular shape that was not made using a primitive tool, you
use the ​Free Transform tool​.

 7: The Line Tool ​(Shortcut:N)

This tool allows you to draw lines.

  The Pen Tool ​(Shortcut: P)

8:
The ​Pen tool ​allows you to draw lines and shapes by creating points. When you first click on the
tool it gives you the ​Initial Anchor Point pointer ​which allows you to create your first point.
Every point after that will be created using the ​Sequential Anchor Point pointer. ​By right
clicking on the ​Pen tool ​you can select either the ​Add Anchor Point tool ​or the ​Delete Anchor

7 
Point tool ​to add or remove anchor points. The last tool you can choose is the ​Convert Anchor
Point tool.​ This will convert any point where two lines meet into a sharp corner.

 9: The Text Tool ​(Shortcut: T)

Allows you to create text boxes.

 10: The Paint Bucket Tool ​(Shortcut: K)

Allows you to fill in complete shapes with color. Within the ​Paint Bucket tool ​there is also the
Ink Bottle tool ​(shortcut: S) which allows you to change the ​stroke ​color of an object.

 11: The Eyedropper Tool ​(Shortcut: I)

The ​eyedropper tool ​is used in conjunction with the ​Paint Bucket tool. ​The ​Eyedropper tool
allows you to click on anything in your scene and select its color. Once it's selected, the ​Paint
Bucket tool ​will appear and you’ll be able to fill a different object in your scene with that same
color.

 12: The Asset Warp Tool ​(Shortcut: W)

Used when you want to create motion in an object, and is therefore valuable during the actual
animation process. You double click on a point in your object with the ​Asset Warp tool ​and it
creates a pin placement (which will be represented by a black and white dot) and this mesh over
the entirety of your image. You can continue to create multiple pins throughout the object. These
pins will then allow you to control how the object moves.

 13. The Hand Tool ​(Shortcut: H)

8 
Allows you to drag and move your stage around. You can also use the ​Rotation tool ​(Shortcut:
shift ​+ ​H​) to rotate your stage. The ​Time Scrub tool ​(Shortcut:​ shift ​+ ​alt ​+ ​H​) allows you to
easily scrub through your timeline.

 14. The Zoom Tool ​(Shortcut: Z)

Allows you to zoom in on the scene.

If you click on the three dots on the very right of the tool bar, this will allow you to access some
other tools such as the ​3D Rotation tool ​and the ​Bone tool.

The Properties Panel 

 

For almost every tool that you use in Animate, you can edit its
properties in the ​Properties Panel ​in the Tools tab. This tab will look
different depending on the tool you are using.

 The Rectangle Tool’s Properties 

<<When you have the ​rectangle tool​ selected, these options will
appear in the ​properties panel​.

As you can see, there are two color boxes under the ​Color and Style
drop down menu: one labeled ​Fill ​and one labeled ​Stroke.

 Fill vs. Stroke 

Regardless of which shape tool you
are using, it creates two separate
objects: an outline and a fill. That
outline is called ​Stroke. ​This means
that you can independently change the color of the fill and the
color of the outline if you want to. You can also edit the size
of the ​Stroke ​if you want a thicker outline.

 The Classic Brush Tool’s Properties  

You can change the color and opacity in the ​Color and Style
drop down. You can change the size under ​Classic Brush
Options. ​If you are using a drawing tablet with a pressure
sensitive pen, you can edit the ​Minimum size. ​You can also
edit how much the program smoothes out your brush strokes.

In this panel you can also switch between the two drawing
modes: ​Merge drawing mode ​and ​Object drawing mode.

9 
The Fluid Brush Tool’s Properties
The Fluid Brush Tool’s property panel has all the same features as the ​Classic Brush​ tool’s
property panel and more. The Fluid Brush tool gives you a lot more ability to customize the way
your brush tool functions.

You can edit the percentage of stabilization, curve smoothing, roundness,

angle, taper, velocity, and pressure. This is particularly useful if you are using a
drawing table with a pressure sensitive drawing pen.

You can also save your brush settings as a preset so you can use them over and
over again.

 Merge Drawing Mode 

Merge Drawing mode ​is what you’ll be drawing in by default. This drawing
mode means two things. The first, is that when you draw two overlapping
things of the same color within the same layer, they will merge together. The
second, is that if you draw two overlapping things of ​different c​ olors, they will
cut into each other. This goes for your object drawing tools as well, not just
your brush tool. Here is an example of what this looks like:

This cutting feature can be useful in creating shapes with unique, but sharp, edges. You can use
merge drawing mode as a makeshift knife tool.

 Object Drawing Mode 

In ​Object Drawing mode ​objects do not destroy each other, slice into each other, or merge. And
fills and strokes are ​not ​separate, selectable objects.

10 
The Color Panel 
 

While you can change the color of your brush or your object
in the ​Properties Panel, ​there is also a panel for editing
colors in more detail

In this panel you can edit colors numerically to get the exact
look you want. You can also add your color to the ​Swatches
Panel ​by clicking “Add to Swatches” once you have a color
you like selected.

You can also edit what ​type ​of color you are using. If you
click on the drop down menu that will, by default, say ​Solid
color​ you will see the
other options: ​Linear
Gradient, Radial
Gradient, ​and ​Bitmap fill.

When you choose one of the gradient options, this is what

the color panel will look like:

 Linear Gradient & Radial Gradient 

You can edit your gradient in two ways: by changing where
your point is within the normal color picker, and by
adjusting the handles on the example gradient below the
color picker. And then of course you can adjust this gradient
within your shape by using the ​Gradient Transform Tool​.

 Bitmap Fill 
The ​Bitmap fill ​allows you to insert an image from your library into your object.
You can edit which part of your image shows by using the ​Gradient Transform tool​.

11 
The Timeline 
 

This is the ​Timeline​. This is where Adobe keeps track of your animations. On the left you have
your layers. Here you can add layers, create folders, delete layers, hide layers, and lock layers.
Then on the right you have your actual timeline. It is important to know that each of these little
boxes represent a single frame. Above,​ where it says 24.00FPS​, that is how many frames per
second your video will have. You can adjust this number (although 24.00FPS is the standard).

TIP: You can name your layers and folders by double clicking on the layer’s (or folder’s) name. We ​always
recommend labelling your layers and folders.

In the top center there are arrows that allow you to navigate back and forth through the frames.
The button that is a square with a black dot in the center is the ​Insert Keyframe ​button. To the
right is the ​Onion Skin ​feature.

The next button to the right is the

Edit Multiple Frames ​feature.
Then the ​Create Tween ​button and

12 
the ​Center Frame ​button. Lastly, there are four buttons that allow you to navigate the timeline
for playback easily: the ​loop ​feature (which allows you to restrict the area of the timeline in
which you will playback), the ​step back one frame, play button, ​and ​step forward one frame.

Keyframing… 
The first important thing to know about the timeline is that there are three different things that
can fill the spaces of the timeline. A​ keyframe​- which will be represented by ​a filled-in dot​,
then there are​ blank keyframes​, which will be represented by the ​outline of a dot​. These will
create a blank slate for you to work with. Then everything else, the frames that don’t have
anything in them, are just extensions of the previous keyframe. They are in between frames. The
end of a keyframe’s range is represented by a small black line. 

To create a new frame, right click on the timeline

There are three options for making a new frame and they all do slightly different things: ​Insert
Frame, Insert Keyframe, ​and ​Insert Blank Keyframe. 
 
 Insert Frame 
If you click ​Insert Frame, ​it will extend the previous frame. Like this:

^^This is an example of a b​ lank keyframe​ (symbolized by the outline of a dot in the first frame).

 Insert Keyframe 
If you click ​Insert Keyframe, ​it will create a new keyframe that contains the same image as
your previous keyframe. If you jump ahead a few slots you will notice that when it creates a new
keyframe it extends your previous keyframe.

^^This is an example of a k​ eyframe (​ symbolized by a filled in dot in the first frame).

Insert
  Blank Keyframe 

13 
If you click ​Blank Keyframe​ it does the same thing with one major difference: instead of
creating a frame that replicates your previous frame, it creates a completely blank slate.

 Onion Skin 
The onion skin feature of the timeline is probably one of the most important aspects of the
timeline. It allows you to see previous and/or future frames while editing your animation by
layering previous and/or future frames translucently over the current frame.

In Adobe Animate, this is what happens when you turn on the onion skin feature:

The green handles on the left and right of the onion skin allow you to adjust the range of the
onion skin.

To make more detailed adjustments to the onion

skin, right click on the onion skin icon along the
top of the timeline and select “​advanced
settings​”. This is what the advanced settings look
like:

Advanced Onion Skin Settings: 

Starting in the top left corner: you can choose
whether the onion skin covers only a “​range​” of
frames or “​all frames​”. Below that, you can
choose whether or not your onion skin is just an
outline or if it is filled in. The left option is for
outline and the right option is for fill.

In the top right corner you can choose what color the onion skins appear as. You can choose
different colors for previous frames and future frames. You can also type in the range in the
boxes here.

Opacity​ determines the opacity of the onion skin. By “​Starting opacity​” it means that this is
what opacity your onion skin will appear in the frames closest to your current frame. The
“​Decrease by​” option adjusts how much the opacity will decrease with each frame away from
the current frame.

14 
So for example, if you are on frame 5 with an onion skin that shows the previous two frames,
frame 4 will be at 70% opacity and frame 3 will be at 50% opacity because it is decreasing by
twenty percent each time.

The two icons in the bottom left corner stand for: “​Show keyframes only​” and “​Anchor
markers to a fixed position, independent of playhead​.” The icon in the bottom right corner
stands resets the onion skin settings.

If you ever are having trouble with your onion skin, the advanced settings are the best place to
look.

Using Symbols 
 

Symbols are used for minor, detail-oriented animations. Usually symbols will allow for minor
animations to occur within a larger overall animation.

A symbol creates a contained timeline. Symbols allow you to keep your main timeline simple
and organized.

For those of you who are familiar with After Effects, Symbols are similar to pre-compositions.

When you create a symbol, it gets added to your ​library. ​This means you can reuse that
image/animation over and over again. Within your library, you can preview the animations of
your various symbols.

 Convert to Symbol 
To create a symbol out of something you have drawn, select the entirety of the shape you want
and right click (or use the F8 shortcut). This will pull up a drop down menu. Select “​Convert to
Symbol​”. You will be presented with this pop-up menu:

15 
TIP: Try to keep all of your symbols on their own unique layer. This makes future efforts to use
tweens much more simple.

 Choosing Type: Movie Clips vs. Button vs. Graphic 

You will notice that when you open the menu to convert your image to a symbol, you have three
options for the ​type o​ f symbol your image will become. This is extremely important because all
of these types allow for different things and have different quirks.

Movie Clips and Graphics ​are the most commonly used symbol types. ​One primary difference
between a graphic and a movieclip is that the movieclip can exist as an animation on a single
frame of a parent timeline. Regardless of how many frames you extend that movieclip along the
parent timeline you will only see the first frame of it when scrubbing the timeline. But when you
test the file, the movieclip will play thru while it is present.

Graphic symbols can also be animations that get placed in a parent timeline, but they can only be
animated if they extend along that timeline for the same number of frames that they contain.

Movie Clips:
-Will not preview when you playback your timeline.
-Will not preview when you scrub through the timeline
-This is because the internal timeline is independent of the main timeline.
-By opening the ​Control ​dropdown menu and pressing ​Test​, you can view the animation
of the movie clip in the context of the larger animation.
-You can code movie clip animations by giving it an “​instance name​”. (This is not possible with
graphics)
-Allow you to use ​filters ​and ​color effects.

Buttons:
-These are for interactive animations

16 
-​Buttons ​contain four frames​. Each frame of a button symbol represents a different state for the
button: Up, Over, Down, and Hit. These states determine how a button visually behaves when
the mouse is rolled over it or when the user clicks the button.

Graphics:
-Will allow you to preview when you playback your timeline.
-Will preview when you scrub through the timeline.
-This is because the internal timeline of the graphic is directly tied to the main timeline.
-Can not be controlled by code. But you can control your graphic symbols in the ​Looping
section of the ​Properties panel​.

Once you hit “OK” your image will become a symbol. You’ll notice that your image is now
surrounded by a blue box like this:

Then, if you double click on your image, it opens a new

timeline for you.

Whatever you create in this timeline, will loop infinitely

on your main timeline.

 Looping Options Within Graphic Symbols 

You have three looping options within the ​Properties
Panel ​of your graphic symbol: ​loop, play once, ​and
single frame.

If you select a ​loop​, your symbol’s animation will loop indefinitely. In the loop settings you can
change the start frame. This means that if you had your symbol duplicated multiple times within
one scene, you could offset their animation so that they are not all in sync.

The ​place once​ option will just play your animation all the way through one time. It will not
loop. Be aware that whatever the last frame of your symbol’s animation is will remain on screen
for as long as you have the symbol on screen. If you want your animation to appear and then
disappear, make sure the last frame of your symbol’s animation is blank.

Single frame​ allows you to choose one static image from your symbol’s animation to show on
your main timeline. This feature is particularly useful for animating mouth shapes. You can have
multiple mouth shapes within one symbol and then use the single frame + frame picker features
to animate mouth movement.

 Arrange Symbols 

17 
If you have only one symbol on a layer, it will always be in front. However, if you have multiple
symbols on one layer. You can arrange them however you’d like by right clicking on your
symbol and selecting “Arrange”.

Breaking Apart 
If you ever want to undo a symbol (reverse the change) all you have to do is right click on your
symbol and select ​Break Apart.

Tweens 
 

Tweens simplify the animation process by functioning as a shortcut for certain types of common
animation.

Note: Your object must be converted to a symbol in order to tween.

 Classic Tween
The classic tween is great for creating movement. It can easily move objects across the page
and/or rotate them. The classic tween can do multiple things to your shape at one time.

 Motion Tween 
Position, scale, rotation, and movement can all be created with this tween.

18 
When you make edits using the motion tween option, lines with dots will appear to signify the
motion of your object. This is called a ​path​. Every dot on the path represents a frame.

This path is what makes the motion tween option special.

You can easily customize your motion by editing the path.
The dots on the path all function as handles that you can
click and drag.

If you double click on the tween in the timeline, these

options will appear:

This will also allow you to make detailed edits to your tween.

 Shape Tween 
Shape tweens will morph your symbol from one thing to another.

19 
 Properties Panel 
This is what the properties panel will look like for the ​Classic
Tween​.

You can label your tweens by giving it a name. This can be useful
if you are using a lot of tweens in your project.

However the most important part of the Properties Panel is the

section where you can choose an ​Effect ​for the tween. These
effects change the way that the tween functions.

The Effect options are: No Ease, Classic Ease, Ease In, Ease Out,
Ease In Out, and Custom.
For the ​Ease In, Ease
Out, and Ease In Out
effects you can customize
by selecting one of the nine interior options.
Each of these options will give you a different type of
ease.

This is what the properties panel looks like for the ​Motion Tween:

20 
When you select the “Orient to path” option in the ​Tweening ​section of the properties panel, it
automatically has your object follow the path in a more natural way. It moves with the path.

You can also easily add a clockwise or counterclockwise rotation to the object in the “Rotate”
section of the ​Tweening ​section. You can also decide how many times it rotates (count) and at
what angle it rotates.

Created By Katelyn Brooks Spring 2020

21