Adobe Animate 2020 3 – Shaping Your Scene

ADOBE ANIMATE 2020

3 – Shaping Your Scene
Exercise 1. Modifying Shapes 1

Exercise 2. Creating a Gradient Fill 2

Exercise 3. Modifying a Gradient 3

Exercise 4. The Zoom and Hand tools 5

Exercise 5. Using the Ink Bottle and Paint Bucket tools 6

Exercise 6. Using the Eye Dropper tool 7

Exercise 7. Using The Gradient Transform tool 8

Exercise 8. Shape Modification Practice 9

Exercise 1. Modifying Shapes

1. Open your Shapes Practice file you created in the first section. 1
2. Activate the Selection tool . (shortcut V or hold down the Ctrl key)

The selection tool can be used to modify the shape of many objects.

3. Move your mouse over the corner of the rectangle shape. Your mouse will
change to show a corner next to it. This lets you know that you can drag to
modify the corner.
4. Drag to change the position of the rectangle’s corner.

1
If you didn’t complete the basic shapes exercise, you can get a completed copy from the Animate exercises
website at http://oneil.com.au/pc/animate.html

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

Adobe Animate 2020 3 – Shaping Your Scene

5. Move your mouse over one of the sides of the rectangle. Your mouse will change to
show a curved line next to it. This lets you know that you can drag to turn the line in to
a curve.
6. Drag the line to turn it in to a curve.

7. Practice using the select tool to modify the shape of some of the other objects on the stage.

Exercise 2. Creating a Gradient Fill

1. Select one of your rectangle shapes (even if it no longer looks much like a rectangle). It doesn’t
matter if you select the whole shape or just the fill since it is only the fill that we’re going to
modify.

When you select fill colours from the colour swatches, the last few options
are for gradient fills. A gradient fill means that the fill will transition from one
colour to another, perhaps including several colours. Instead of using one of the preset gradient fills,
we’ll try creating some of our own.

2. Open the colour panel by clicking the icon to the right of the screen.
3. Display the list of colour types as shown to the
right.
 The first option is none, meaning the shape
will be empty with no fill.
 Solid means the fill will all be the same colour.
 Linear means there will be a gradient fill where
the colours change in one direction.
 Radial means there will be a gradient fill where
the colours change starting from the middle
and progressing outward
 Bitmap means a picture will be used to fill the
shape.

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

Adobe Animate 2020 3 – Shaping Your Scene

Tip If you would like the panels to stay open without you clicking on the icon, you
can click the small Expand Panels button at the top of the list of panel icons.

4. Select Linear gradient.

Your shape will now be filled with a gradient that blends from black at one end to
white at the other end.

The bottom part of your colour panel will display options which are used for customising the
gradient.

5. Double click the white marker on the gradient display.

6. Select a yellow colour for that point of the gradient.
7. Double click the black marker at the other end and change it to a blue colour.

Your gradient should now start with yellow at one end and transition smoothly to blue at the other
end. Notice that the markers under the gradient bar will now show the colours you selected.

Exercise 3. Modifying a Gradient

1. Click on the yellow gradient marker and drag it to the left a small distance. Now the gradient will
start a little further in rather than on the edge of the shape with solid colour up until that point.

2. Move your mouse to a point between the two gradient markers. A + sign will appear next to

your mouse.
3. Click on this point to add a new gradient marker.
4. Double click the new gradient marker to change it to a colour of your choice.

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

Adobe Animate 2020 3 – Shaping Your Scene

Tip You can have as many different colours on a gradient as you need. To remove a gradient
marker, simply drag it downwards off the gradient bar until it disappears.

5. Try creating the following gradients using shapes on your stage (hint - the second one is a radial
gradient rather than a linear gradient).

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

Adobe Animate 2020 3 – Shaping Your Scene

Exercise 4. The Zoom and Hand tools

Generally, when you open an Animate project the view will be set to see the stage and a small
amount of blank space around the stage. If you want to see more or less than that, you can use the
zoom tools.

One way to use the Zoom tools is to make use

of menu options.

1. From the View menu, select Magnification.

2. Try some of the options in the
magnification menu.
3. Note that some of the options have
keyboard shortcuts for accessing them. Try
some of the shortcuts shown in the menu.
4. Press Ctrl + to zoom in.
5. Press Ctrl – to zoom out.
6. Press Ctrl 1 to return to 100% zoom view.

You can also use the Zoom tool to change the view.

7. Click the Zoom Tool icon from the toolbar.

8. Click on the stage to zoom in (the point you click on will become the centre of your view).
9. Hold down Alt and click to zoom out.
10. Drag your mouse around an area of the stage (as shown to the
right) to zoom with that area fitting in your screen.
11. Double click on the Zoom tool icon to return to 100% view.
12. Click on the Hand Tool icon from the toolbar.
13. Drag the stage to move it around your screen.

You can also temporarily select the hand and zoom tools while other tools are active.

14. Click the Selection Tool so that the hand tool is no longer active.
15. Hold down the Spacebar. As long as your spacebar is held down the Hand Tool will be active so
you can move around your stage.
16. Hold down the Control key and the Spacebar at the same time to activate your Zoom tool.
17. Hold down the Control key and the Spacebar at the same time, and then hold down the Alt key
as well to activate your Zoom Out tool.

Tip Many of these shortcuts are the same in other Adobe applications such as Photoshop and
Illustrator.

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

Adobe Animate 2020 3 – Shaping Your Scene

Exercise 5. Using the Ink Bottle and Paint Bucket tools

The Paint bucket tool will take a fill or gradient that you have prepared and then apply it to objects
you select.

1. Use the colour panel to create a linear gradient similar to the one shown below (make sure you
don’t have any objects selected first by pressing Esc, otherwise you’ll be changing them).

2. Click the Paint Bucket tool.

3. Click on one of the shapes on your stage to fill it with your gradient. You could also click on
additional objects to fill them with your gradient if you wish.

The ink bottle tool can be used to apply a stroke style to objects you select.

4. Select the Ink Bottle tool (it is grouped with the paint bucket
tool so you might need to click and hold your mouse on the
paint bucket tool to see it).

The properties panel at the side of your screen will show stroke options.

5. Change the stroke options so that they look similar to the example below.

6. Click on one of the shapes on your stage to apply the selected stroke options.

Tip If you are adding a gradient fill using the paint bucket tool, you can hold down the mouse and
drag across an object to set the direction and length of the gradient.

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

Adobe Animate 2020 3 – Shaping Your Scene

Exercise 6. Using the Eye Dropper tool

The eye dropper tool can be used to copy either Fill or Stroke settings from one object to another.
This is done by selecting the shape you want to format and then using the eye dropper to indicate
the shape you want to copy formatting from.

1. Select an object on your stage which you want to format with fill and stroke settings from
another shape. Make sure you don’t still have the Ink Bottle tool selected – you may need to
click on the Select tool first.
2. Make sure that both the fill and stroke of the object are selected (remember you can double-
click with the selection tool to select both the fill and stroke)
3. Click on the Eyedropper tool.
4. Move your mouse over the middle (fill area) of the object that you want to copy the fill settings
from. Your mouse pointer will change to show a small square next to it.
5. Click to copy the fill settings from this object. Your mouse will change to the paint bucket tool.

6. Click on another shape to copy the same fill on to it.

7. Click on the Eyedropper tool again.
8. Move your mouse over the edge (stroke) of another shape that you want to copy stroke settings
from. Your mouse will change to show a small empty square next to it.

Your mouse will change to the ink bottle tool

9. Click on another shape to copy the selected stroke settings to that shape.

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

Adobe Animate 2020 3 – Shaping Your Scene

Exercise 7. Using The Gradient Transform tool

The Gradient Transform tool in Animate can be used for modifying the shape, size and position of
gradient fills in an object. This can be especially useful if you have copied a gradient fill from another
object since that often results in a gradient that isn’t positioned the way you want it to be
positioned.

1. Click on one of the shapes on your stage. Make sure it is a shape which uses a gradient fill.

If your Gradient Transform tool does not appear in your Tool Bar, you might need to customise the
bar first (In older versions of Animate and Flash it was typically grouped with the Free Transform
tool).

2. To add a tool to your Toolbar click the Edit Toolbar button above the colour
options.

A range of icons that can be added to your Toolbar will appear.

3. Find the Gradient transform tool and drag it to a suitable location on your Toolbar.
4. Once you have finished editing your Toolbar click the Edit Toolbar button again to close the edit
options.
5. Make sure you still have the Gradient transform tool selected

Your selected shape will now have three symbols on it.

6. Drag the dot symbol to adjust the position of the gradient’s centre.
7. Drag the circle symbol to rotate the direction of the gradient.
8. Drag the arrow symbol to adjust how far the gradient extends.

The way these symbols work varies slightly between a linear gradient and a radial gradient. Once you
have tried it on one type of gradient, try it again with the other type.

9. Save the changes to your Animate file (Ctrl S).

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

Adobe Animate 2020 3 – Shaping Your Scene

Exercise 8. Shape Modification Practice

1. Start a new Animate file.
2. Use what you have learned to create shapes that look as much as possible like the ones shown
below.

3. Modify those same shapes so that they look like the ones below.

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