Adobe Animate 2020 1 - Introduction

ADOBE ANIMATE 2020

1 – Introduction
Overview 2
About Animate 2
Key Concepts 2
Frames 2
Key Frames and Tweening 2
Meet Animate 3
Menu Bar 3
Tool Bar 3
Control Panel 3
Additional Panels 4
Timeline 4
File Tabs 4
The Stage 4

Exercise 1. Starting an Animate Project 4

Exercise 2. Customising the Workspace 7

Exercise 3. Using the Shape Tools 8

Exercise 4. Selecting Shape Colours 9

Exercise 5. Drawing Other Shapes 10

Exercise 6. Selecting Shapes 12

Exercise 7. Additional Methods for Selecting Shapes 13

Exercise 8. Cookie Cutter Shapes 14

Exercise 9. Changing Shape Settings 15

Exercise 10. Using The Pencil Tool 16

Exercise 11. Using the Brush Tool 18

Exercise 12. Using the Pen Tool 19

Exercise 13. Modifying Anchor Points 20

Exercise 14. Pen Practice 21

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

Adobe Animate 2020 1 - Introduction

Overview
About Animate
Adobe Animate is an application that is used to create various types of animation. It is commonly
used on the Internet due to the small file sizes possible and many of its features are specially tailored
for use in websites. Animate was originally an animation application called FutureSplash Animator
until it was bought by Macromedia in the mid 90s and renamed Flash. Later, the company
Macromedia was acquired by Adobe Systems and sold as Adobe Flash. In more recent years Flash
was renamed as Animate. These tutorials have been prepared using Adobe Animate 2020 which is
also referred to as version 20. You can check which version you are using by going to the Help menu
and then choosing the About option at the bottom of the menu. Most of what we will do in these
exercises will be the same or similar in older or newer versions of Animate.

Key Concepts
Before we learn about Animate it is important to understand some concepts that are important in all
forms of animation. Animate uses some terminology that is common, not only in computer
animation but in traditional forms of animation also.

Frames
When you watch a film the movie is made up of frames being
displayed quickly one after another. The amount of frames that
appear each second can vary. For example Australian analogue
television is based on the PAL standard, which shows 25 frames per
second. Newer high definition television often displays 30 frames
per second.

In Animate you can modify the number of frames which appears each
second, though 30 frames per second is the default setting.

Key Frames and Tweening

In traditional animation, such as old Disney cartoons, each frame was drawn by hand. The main
animator didn’t necessarily draw each and every frame though. Generally, the lead artist or
animator would draw frames which showed the main sequence, such as a frame for each second.
Then those frames would be passed on to an assistant animator who would draw the frames in
between. The frames drawn by the lead animator are the key frames while the process of
connecting them with intermediate frames is tweening.

The same concept applies in computer animation. Rather than have to draw every single frame of
animation, you will typically only crate key frames at important points in your animation. Then you
can use tweening to get the computer to fill in the frames in between. The following example shows
how tweening creates frames that lead to a smooth transition between key frames.

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

 Adobe Animate 2020 1 - Introduction

Meet Animate
Like most applications, Animate can be opened in a
variety of ways, such as selecting the link from the
Windows Start Menu.

When Animate is open, it will look similar to the following

Menu example.

Panels

File Tabs

Properties

Tool Bar

Stage

Timeline

Menu Bar
Along the top of the window is the Menu Bar. This works
like the menu in most Windows applications and we will
use it frequently to access important functions in Animate.

Tool Bar
The Tool Bar sits along the left side of the window in the default workspace and provides access
to tools used for drawing and similar functions. It can be moved to different positions. To avoid
the tool bar becoming too cluttered, it only shows the most common options by default. If a tool
you need is not showing, you can easily customise the tool bar to add additional icons.

Properties Panel
Along the side of the window is the Properties Panel. The
options in this panel will change depending on what tool or
object you have currently selected. A tab along the top allows
you to change to the Library Panel.

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

Adobe Animate 2020 1 - Introduction

Additional Panels
To the right of the Properties panel you may see various other panels. Many of them will be
hidden but can be displayed by clicking on one of the panel icons.

Timeline
Along the bottom of the screen will be the
Timeline area. The left section of this area will
contain the layers that are being used in your
animation. The right section of this area
contains the timeline which allows you to
control the frames in your animation.

File Tabs
Along the top of the screen beneath the menus, you will see a tab for each file you have open. These
can be used to easily close or switch between open files.

The Stage
The main editing area of Animate is referred to as The Stage. This is where all the action takes place,
just like the action in a play takes place on the stage.

Exercise 1. Starting an Animate Project

When you first open Animate or when you close all the files you have been working on, you will see
a Welcome Screen like the one below.

From the left side of the screen you can choose between Home and Learn.

1. Click the Learn option.

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

Adobe Animate 2020 1 - Introduction

A list of tutorials will appear. These can help you learn a range of useful skills in Animate and are well
worth exploring. At the bottom of the list is a link to further tutorials on the Adobe website.

2. Click the Home option to return to the main options.

The Start a new file fast options allow you to quickly create an animation designed for a certain
purpose. For example if you were going to use Animate to design an animation or game for an
android phone, you could quickly select the appropriate option here to start with a bank animation
that is just the right size. The Create New button provides a wider range of options when you start a
new project so we will do it that way for now.

3. Click the Create New button to view the new project options.

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

Adobe Animate 2020 1 - Introduction

4. Make sure the Standard present is selected from the Character Animation category. The options
to the side allow you to change the height and width of your project as well as the Frame Rate.
5. Ensure the options are as shown above and click the Create button to begin your new project.

Note When you create a new project you can set the
Platform Type to either ActionScript 3.0 or HTML5
Canvas with even more options under the advanced
tab. The option you choose will depend on what your
final animation is intended for. If you create your
project as an HTML5 Canvas then it will be suitable for
use in websites. Previewing your animation will
automatically create an HTML and Javascript file that
can run in your web browser. Creating a project as
ActionScript 3.0 will mean that when you preview your animation, it will create an swf file
which can be run on its own. You will find the output in the same folder where you are saving
your project with the same name.

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

Adobe Animate 2020 1 - Introduction

Exercise 2. Customising the Workspace

Workspaces allows you to quickly change your Animate screen layout to certain pre-set options.
Animate includes several default work layouts you can choose from. You can also customise any one
of these layouts to suit the way you prefer to work. You can select different workspaces from the
Window menu or from the workspaces selection button to the right of the menus.

1. Click the Workspaces button near the top right corner of the Animate window to show a list of
the built-in workspaces.

Each of the built-in workspaces is tailored for certain purposes.

2. Select some of the workspaces to see the layout change.

3. Select the Essentials workspace when you have tried a few of them.

You can customise a workspace to suit your own needs.

4. Move your mouse to the Panel icons down the right side of the screen. Click the Color
icon to open the Color panel.

Clicking a panel’s icon will open and close it. You can also separate panels from their icon and
position them anywhere on the screen. This can be useful for panels you use frequently.

5. Drag the bar along the top of the Color panel to move the panel. You can now move the panel
and resize it.

After customising your screen, you can easily revert back to the original layout by resetting the
workspace you are in.

6. Click the Workspaces button again. A small arrow will appear next to the Essentials workspace.
7. Click this arrow to reset the Essentials workspace and remove any changes you have made to
the layout. Click Yes when you are asked to confirm the change.

Tip You can create a new workspace from the Workspaces menu to save your own custom layout

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

Adobe Animate 2020 1 - Introduction

Exercise 3. Using the Shape Tools

Animate has several shape tools that you can use to help you create pictures for
your animations.

1. Locate the Rectangle shape tool to the left of the screen on the Tools Panel.
2. Depending on your screen resolution you might not be able to see all of the tools on the tool
bar. You can widen it to show two columns of icons so that they fit easier.
3. You will notice a small triangle shape in the bottom corner of the icon. This lets
you know that there is more than one tool grouped together. Click on the icon and
hold your mouse button down to see the rest of the icons in the group.
4. Make sure the Rectangle tool is selected.

Tip notice that the icon has a letter R next to it. That lets you know that in future you can select
the rectangle tool by pressing R on your keyboard. Paying attention to the tips given on the
icons, or the tool tips as you move your mouse over an icon, is a good way of learning
shortcuts.

5. You can draw shapes in either Merge drawing mode or Object drawing mode. This is
determined by an Object Drawing icon that appears near the bottom of the Tools Panel when
you have a shape tool selected. When the icon is turned on it has a box around it. Make sure
that icon is turned off for now.

Now you will have the rectangle tool activated and when you move your mouse over the
stage, your mouse pointer will change in to a cross shape.

6. With the rectangle tool still active, drag your mouse to create a rectangle shape in the top left
section of the stage. A rectangle using the currently selected colours will be created. Unless you
have changed the colours before drawing the shape, the rectangle will have a black outline and a
white interior.

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

Adobe Animate 2020 1 - Introduction

Exercise 4. Selecting Shape Colours

You can modify the colours of a shape either before you draw the shape, or after you have drawn it.
In this exercise we will select colours and some other options before drawing a new shape.

1. Make sure your Rectangle Tool is still active and press the Esc to make sure nothing is selected.

Shapes consist of a Fill (interior of the shape) and a Stroke (border of the shape). Selecting colours in
Animate is similar to other adobe applications such as Photoshop and Illustrator. Icons for changing
the colour of the fill and stroke for a selected shape can be found at the bottom of the tool bar.

Select a fill colour Swap fill and stroke colours

(Shortcut key – X)
Set colours to default. I.e. Select a stroke colour
White fill and Black stroke
(Shortcut key – D)
2. Click the Stroke Colour button to select it.

While you have the stroke colour selected, you can change the stroke colour in a number of ways.

3. From the Panels on the far right of the screen, click the Colour icon to open the Colour
Panel. If you don’t see the icon you can also select Colour from the Window menu.

The Colour panel allows you to select solid colours as well as gradients and textures.

4. Close the panel by clicking its icon again or by clicking the symbol in the panel’s top corner.

You can also quickly choose from a range or pre-set colours known as Swatches.

The icon for the Swatches Panel is right below the Colour panel. You can open the Swatches
panel by either clicking this icon, or by clicking the Stroke colour icon when it is selected.

5. Click the Stroke Colour icon or the Swatches icon to open the swatches Panel.

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

Adobe Animate 2020 1 - Introduction

6. Click on one of the colours. Since we don’t have a shape selected, choosing a stroke colour will
apply to the next shape we draw.
7. Double-click on the Fill colour icon and select a different colour for the fill.

The fill and stroke icons will now display the colours you have chosen.

8. With the Rectangle tool still active, draw another rectangle next to the first one. It will have the
fill and stroke colours you selected.

Exercise 5. Drawing Other Shapes

1. Change the fill colour and stroke colour the same way you did in the last exercise to colours of
your own choosing.
2. Click the Oval tool from the tool bar or press the letter O to select it.
3. Draw an oval near your rectangles.

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

Adobe Animate 2020 1 - Introduction

4. Click the Polystar tool to select it.

5. Choose a different Fill and Stroke colour for the new shape.

Before you draw an object with this shape you can change the options to select how many sides the
shape has. You can also choose to make the shape a star and modify how ‘pointy’ the star’s points
will be.

6. Make sure the Properties panel Is visible to the right or your screen. You can select it from the
Window menu or press Ctrl F3 on your keyboard if it isn’t.

The options in the Properties Panel will change depending on what tool you are using. If you still
have the PolyStar tool selected, the Properties panel will show at the top of the
options. These properties allow you to change several things about a polygon shape before you draw
it (or a selected on you have already drawn). These include colours and stroke styles.

7. Go to the Tool Options at the bottom of the properties panel. On smaller screen resolutions you
may need to scroll down.
8. Change the type of shape from Polygon to Star.
9. Change the number of sides and star point size to an amount different from what was already
selected

Note When you draw a rectangle or oval you begin drawing from the corner. When you draw a
polygon or star though, you draw from the centre of the shape outward. Keep this in mind
when you choose where to draw it.

10. Now that you have chosen your settings, draw the star shape near your other shapes.

11. Save your file as Shapes Practice.

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

Adobe Animate 2020 1 - Introduction

Exercise 6. Selecting Shapes

If you want to modify shapes you have already placed on your stage, such as changing colours or
moving them, you first need to know how to select shapes. Selecting objects in Animate has many
things in common with other applications you may have learned, though there are a couple of
techniques unique to Animate.

Firstly, it is important to note that in Animate, a shape is made up of the Fill and the Stroke. These
are sometimes treated as separate components even though they may look like they are all part of
the same object. This allows you to select parts of a shape separately but it also means that you
need to know how to select the whole shape when necessary.

1. Choose the selection tool from the top of your Tool Panel by
clicking the icon or pressing V on your keyboard.
2. Move your mouse over the middle of the first rectangle you drew.
While your mouse pointer is over the middle of a shape your
mouse pointer will change from the normal selection arrow to a
different shape.
3. Click the rectangle to select it. The inside of the rectangle will
become shaded to show that it is selected.
4. Drag the rectangle away from the other shapes.

You will notice that the fill of the rectangle (the interior) will move but the stroke (the line around
the rectangle) stays behind. This is because when you click in the middle of the shape you have only
selected the Fill and not the Stroke.

5. Go to your Edit menu and select Undo or press Ctrl Z on your keyboard to undo the move.
6. Click on a blank area of your stage or press the Esc key to make sure no shape is selected.
7. Move your mouse over the stroke (outline) of the first rectangle you drew. Your mouse pointer
will change in to a different shape. The exact shape will depend on
whether your mouse is over one of the sides or one of the corners as

the following examples show.

8. Click to select one of the sides of the rectangle. That line will be
shaded to show it is selected.

Note When you are selecting colours for either a Fill or a Stroke, in the top corner of the colours you
can see a No colour icon . If you select this icon then the shape you draw will have no fill or
no stroke, depending on which one you were changing at the time. If a shape has no stroke
then you won’t be able to click on its edge. If a shape has no fill then you won’t be able to click
in the middle to select it.

9. Move your mouse over the fill (middle) of the rectangle and double-click. This will select the
whole shape including both the Fill and Stroke.

10. Try selecting one of your other shapes in the same way.

Note If you have the Object Drawing icon turned on when you draw a shape, the fill and stroke
will be treated as one object when you select them. You won’t be able to edit them separately
as we are about to but you will be able to change their colours separately.

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

Adobe Animate 2020 1 - Introduction

Exercise 7. Additional Methods for Selecting Shapes

One additional way that you can select a shape is by dragging your mouse around the shape you
want to select.

1. Make sure you have the select tool active and move your mouse to
an area above and to the right of the second rectangle you drew.

Tip If you have another tool active, you can temporarily activate the
Select tool at any time by holding down the Ctrl key. This will
allow you to use the Select too for selecting or moving shapes,
without abandoning whatever tool you were already using.

2. Hold down your mouse button and drag a rectangle shape that completely surrounds the shape.

If you don’t drag your mouse around the entire shape, then only the parts you drag your mouse
around will be selected.

3. Drag your mouse around the oval shape, but this time, don’t select the
entire shape. Now try dragging the selected area away from the rest of the
shape. The selected area will become separated from the rest of the shape.
This can be very handy as an easy way of splitting a shape in to separate
pieces but be careful, you could do this accidentally when trying to select the whole shape.

You can select more than one shape in a

variety of ways.

4. Drag a rectangle area with your

selection tool that covers both of your
rectangles so that they both become
completely selected.

You can also use your shift key to select and de-select objects.

5. Hold down shift and click on an object (such as your star) to add it to what is currently
selected. Remember that when you do this you will only select the part you click such
as the fill or a part of the stroke. You will need to hold down shift and click on the
other parts of the shape if you want them to be selected also. In the example shown
to the right, the fill of the star is selected but only some parts of the stroke along the
right edge are selected.
6. Hold down shift and click on an object that is already selected to de-select it.
7. Press Ctrl A to select everything on your stage.
8. Press Esc to ensure nothing is selected.
9. Press Ctrl S to save changes to the file (it’s a good idea to do this often).
10. Close the file (Ctrl W or choose the Close option from the File menu).

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

Adobe Animate 2020 1 - Introduction

Exercise 8. Cookie Cutter Shapes

Many people are familiar with using a cutter to cut out shapes from pastry. A similar
concept can be used to create shapes in Animate. This is because when a shape in
Animate is moved to overlap another shape, it will remove the parts of the other
shape that it covers. The exercise below will illustrate how this can be used.

1. Create a new standard size file from the welcome screen.

2. Select the Oval tool.
3. Set the Fill colour to yellow and set the Stroke colour to the same colour.
4. Draw a circle on your stage. When you are drawing the shape, while you are at a point where
the width and height are similar, you can see a small circle next to your mouse. This lets you
know that Animate is helping you to keep the height and width the same so that your oval will
be a perfect circle. You can also hold down the Shift key when you are drawing any
shape to ensure that the height and width stay the same.
5. Draw a slightly smaller circle next to the first one.

6. Now using the Select tool (V), select the smaller circle. Make sure you select the whole circle and
not just the fill (hint – double click with the selection tool to select the entire circle).
7. Drag the smaller circle so that it overlaps the larger circle.

Tip In addition to dragging objects with your mouse, you can also move them a little bit at a time
by pressing the arrow keys on your keyboard. This is good for small adjustments.

8. Press Esc so that nothing is selected.

9. Double click the smaller circle again to select it.
10. Drag it away from the larger circle. The parts of the larger circle that were covered have now
been removed, leaving us with a neat, crescent moon shape. You can use this technique to
create a wide variety of shapes with the ‘cookie cutter’ method.

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

Adobe Animate 2020 1 - Introduction

Note In later exercises we will begin to use Layers so that we can make shapes overlap without
them affecting each other in the way we have just seen. You can also create shapes with the
Object Drawing option active if you want to be able to move them around without removing
parts of other shapes.

11. Save the file as Moon and close the file.

Exercise 9. Changing Shape Settings

1. Open your Shapes Practice file.
2. Select your star shape using any of the methods learned
previously (make sure you have the whole shape selected
including stroke and fill).

The Properties Panel will show the properties for the selected
shape.

The first options can be used to change the position and size
of the shape (later we will look at using the transform tool to
resize objects).

3. Use the Stroke colour option to change the line colour.

4. Use the Fill colour option to choose a different colour for

the fill.
5. Use the Stroke Size option to change the line thickness to

5.
6. Use the Line style option to select a dashed line.

7. Save the changes to the document.

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

Adobe Animate 2020 1 - Introduction

Exercise 10. Using The Pencil Tool

1. Create a new blank Animate file.
2. Select the Pencil tool.

Look at the Properties Panel and you might notice that the options for the pencil tool are the same
as the last stroke options you used. In this case they will most likely be the same as the settings you
changed for the stroke around your star in the last exercise.

3. Change the stroke options as shown below (blue, size 2 and solid).

4. At the bottom of the tool bar (below the colours) a Pencil Mode icon will be available while you
have the pencil tool active. Make sure it is set to Smooth drawing mode.

5. Use the pencil tool to draw a small fish on your stage. Make sure there are no gaps in the outline
of your fish.

As long as you left no gaps around the edge of the shape you drew, you will now be able to apply a
fill to the shape you have drawn.

6. Select the Paint Bucket tool .

7. Select a light blue fill colour from the Fill colour options.
8. Click inside the fish to apply the fill colour.

Note The fill tool won’t work if there are gaps around the edge of the shape you have drawn.

In addition to being able to change the stroke options for the pencil tool, you can also change the
pencil mode options.

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

Adobe Animate 2020 1 - Introduction

9. Pencil tool and then observe the Pencil Mode icon at the bottom of the toolbar.

Each of the pencil modes changes how the pencil follows your mouse movements as you draw.

Straightens the lines as you draw Smooths the lines as you draw Follows the movements of your
with the pencil with the pencil mouse exactly without smoothing
or straightening lines
10. Make sure the Smooth option is selected for the pencil mode.
11. Use the pencil to write your name, leaving plenty of room underneath.
12. Now try writing your name again in the available space using the Straighten and Ink modes.

13. Close the file (saving optional).

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

Adobe Animate 2020 1 - Introduction

Exercise 11. Using the Brush Tool

1. Create a new blank Animate file.

The way the brush tool works is quite different to the pencil tool. When you use the Brush tool, the
lines you draw will use your fill colour instead of the stroke colour.

2. Select the Classic Brush tool from the toolbar (or press the letter B).
3. From the Properties Panel, set the brush Size to approximately 20 pixels.

4. Change the Brush Type to the second option as shown to the right.

Note If you are using a graphics tablet with a pen or a

computer with a touch screen and pen, you may also
have icons at the bottom of the Tool Bar that turn on
additional options. These options can vary your brush
strokes based on how hard you press with the pen
and what angle you hold the pen.

5. Select a dark fill colour and then draw a fish similar to the one you drew in the previous
exercise.

You will notice that the brush shape means that the lines are thinner in some parts depending on
which direction your mouse was moving. Sometimes it is easier to draw freehand with the brush tool
than it is with the pencil tool, especially if you are using a graphics tablet.

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

Adobe Animate 2020 1 - Introduction

Exercise 12. Using the Pen Tool

The pen tool is used for drawing straight lines and curves rather than freehand shapes. It can be a
little confusing if you’re not familiar with it but once you’ve made a few shapes with it you should be
more comfortable with it. The pen tool works by creating Line Segments which are joined up with
Anchor Points. The line segments can be either straight or curved and are controlled by the anchor
points using Direction Points.

The following example shows straight and curved lines created using the pen tool
Anchor Point
Curved Anchor Point

Line Segment Direction Point

(controls the direction and
sharpness of the curve)

We’ll start by using the pen to make a shape with straight line segments. Initially, the Pen tool might
not be showing on your Toolbar and will need to be added. If your Pen Tool is already visible on the
Tool Bar, you can skip steps 2 and 3.

1. Create a new blank document.

2. Click the small Edit Toolbar button at the bottom of the Toolbar.
3. When the selection of available tools appears, locate the Pen Tool
and drag it to a suitable location on your Toolbar.
4. Click on the Pen Tool if it is not already selected. The stroke colour you used with the pencil tool
will most likely still be selected. If not, then select a dark stroke colour.
5. Click in the top left area of your stage to add an anchor point.
6. Click to the right to make another anchor point.
7. Move your mouse below the first two anchor points and click to add a third one.
8. Move your mouse over the first anchor point you created. When you see a small circle
appear next to your mouse pointer, you will know you’re back to your starting point.
9. Double-click on your starting point to end placing anchor points and close
the shape. If you only single click, then the next time you add an anchor point
to start a new shape, Animate might assume you are continuing the current
shape and join them together. Double clicking indicates that you are done.
10. Select the Paint Bucket tool , along with a suitable fill colour and then click in the
closed shape to fill it. Note that this will only work if you close the shape by placing the
last anchor point on the starting anchor point.

Now we’ll try using the pen tool to create curved line segments

Note Many vector image editing applications such as Adobe Illustrator also have a pen tool or
something similar.

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

Adobe Animate 2020 1 - Introduction

11. Select the Pen tool

12. Move your mouse to a blank area on your stage, making sure you have plenty of room to the
right of where you click.
13. Click and drag to the right, then release your mouse. As you are dragging, direction points will
come out of the anchor point. The longer you drag, the more gradual the curve will be. The
direction of the direction points controls the angle of the curve. The following examples show
how the direction points can shape curves.

14. Move your mouse upwards and to the right, then click and drag to the right to create another
curved anchor point.
15. Move your mouse downward and to the right, then click and hold your mouse button down
while dragging to the right to create your third curved anchor point.
16. This time press Esc to tell Animate that you won’t be adding any more anchor points. Your
curved line should look similar to the example below. The direction and sharpness of your curve
will depend on how you dragged your mouse.

17. Create more wavy lines to practice using the tool.

Exercise 13. Modifying Anchor Points

1. Click the Subselection tool or press the letter A. You might need to
click and hold your mouse button on the regular selection tool to
see it. You can also press the letter A to select it with your keyboard.
2. Click on one of your non-curved anchor points on the triangle to select that corner and then drag
it to modify its position.

3. Click on one of the curved anchor points. Not only can you move the anchor point but you can
also modify the direction points. Drag the direction points to see how it modifies the curve.

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

Adobe Animate 2020 1 - Introduction

Exercise 14. Pen Practice

1. In a new Animate document, try creating the following shape using the Pen tool and the use the
fill tool to fill the shape afterward. The second example shows a hint on what types of anchor
points to add. The anchor points on the top edges are both curved anchors points while the ones
in the middle are non-curved.
2. Choose a suitable stoke colour and thickness before you draw the shape.

3. Save the new document as Heart.

Tip If you want to customise the Animate interface, one way to do it is with colour schemes. From
your Edit menu select Preference and then Edit Preferences. The General section of your
preferences lets you choose from a selection of darker and lighter UI themes. You will see
different UI themes shown in the images in these exercises.

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