- In 2016, Adobe Flash CC was renamed Adobe Animate CC.
- In Animate 2020, File>New presents you with a screen with a number of choices:
- Character Animation (the only type we'll use in this course)
- the width and height of the movie - you can choose from 4 preset sizes or specify your own dimensions at the right. This choice can be modified later on inside the movie
- the frame rate - the default in Animate 2020 is 30 frames per second; in earlier versions it was 24 frames per second. The increase is presumably due to the fact that computers are faster and thus can process a faster frame rate. This choice can also be modified later on within the movie.
- Platform type - The choice is between HTML5 Canvas and ActionScript 3.0. In earlier versions of Animate, there were additional choices. For Character Animation (selected above), the default is HTML5 Canvas.
- ActionScript 3.0 - ActionScript 3.0 is a scripting language which is similar to Java. The ActionScript 3.0 format in Flash/Animate exports to .swf format that plays in the Flash Player. The Flash Player was very widely available in desktops and laptops, but not in Apple or Android mobile devices since 2011/2012. However, Adobe has announced they will not support the Flash Player in browsers beyond 2020 and during 2020 access to the Flash Player will be limited by some browsers. For example, I can no longer play an Animate movie using the ActionScript 3.0 format at home in Chrome.
- 14 sample files - these are pre-built animations you can play or modify - To play one of the animations, select it and then choose Control>Test Movie>In Animate or Control>Test Movie>In Browser.
- So go ahead and choose the dimensions, the frame rate, and the platform type to start with a new movie.
- Animate interface - The Tools appear at the left, the Timeline at the bottom. The rectangular area in the middle (the Stage) defines what is visible in the movie at that frame. The current frame is specified by the blue arrow at the bottom (called the playhead). If an object is off the Stage in the current frame (as specified by the playhead), it is not visible in the movie in that frame.
- Layers - if a layer is above another in the list of layers, the contents
of that layer will be in front of the contents of the other layer on the Stage and in the movie.
Animate Drawing Tools
In versions of Animate before 2020, about 24 tools showed up in fixed positions in the toolbar, with additional tools hidden underneath some of the tools. In Animate 2020, only 11 tools show up initially. Others can be added to the toolbar by clicking the three dots (Edit Toolbar) and dragging the desired tool to the desired position on the toolbar.
Stroke Only Drawing Tools
Exercise 1 - Drawing with the Pencil Tool - Click on the Pencil Tool which is second from the bottom in Animate 2020. If the Property panel isn't open, select Window>Properties. To select a color, click the crosshatched symbol to the left of the word "Stroke" to bring up the palette. You can select a color by clicking with the eyedropper or by entering a hexadecimal value for the color. You can set other properties such as stroke width or style. The stroke width does not have to be uniform. Ctrl A will select everything on the stage and then you can hit the delete
key to delete everything.
Exercise 2 - Using the Line Tool and Modifying Strokes - Click on the Line Tool (4th from the top in Aimate 2020) and draw a line. Draw other lines to form a closed shape.
Now we will set some other stroke properties
Note: You may notice that if the Property Panel is open, and you click on another tool, the Property Panel goes away. This behavior is new in Animate 2020. While the Property Panel can be brought back by the keyboard shortcut Ctrl F3, you may want, as I do, to have it stay open till you close it. To do this, choose Edit>Preferences>Edit Preferences>General>uncheck the box "Auto-collapse Icon Panels."
- Stroke style (Hairline, Solid, Dashed, Dotted, Ragged, Stippled, and Hatched)
- Cap - sets the way a solid or hairline stroke ends - to see this, set the stroke size to be large, say 15 and select one of the three cap icons
- Join - to connect lines (again three different styles)
To change an existing stroke, choose the Selection Tool (top tool in Animate 2020) and then click on the stroke. The stroke will appear thicker
and a dotted pattern appear over it, both indicating it has been selected. You can now change the color of the stroke in the Property panel.
- Using the Selection tool, move the cursor over a line in the closed shape. As you move over the line, a small curved line appears -- this indicates
you are over a stroke
- Click on a line segment - notice that only this line segment is selected;
if you double click on any line segment, all the connected line segments are selected. Once something is selected, you can move it just by dragging it
- Using the selection tool, if you approach a stroke, you will see a curved line, if you click and drag, you will change the shape of the existing stroke. But if you click on the stroke and select it, dragging will then move the stroke without changing its shape.
- Select Ink Bottle tool (bottom tool in Animate 2020). Before we selected a stroke using the Selection Tool and then modified it in the Properties panel. Alternatively, you can set the stroke properties, then click on the Ink Bottle tool and then on the stroke to modify the stroke. For example, click
the stroke color icon (which is immediately below all the tools) and select a color from the palette, then select the Ink Bottle tool and then click on the stroke to apply the color.
- To delete the stroke, click on the Selection Tool, then click
the stroke to select it and hit delete.
You can use the Selection Tool to select several items on the Stage by clicking on the selection tool and with this tool drawing a rectangle around the objects to be selected - this will select items on multiple layers.
Fill Only Drawing Tools
Exercise 3 - Using the Classic Brush Tool (third tool down in Animate 2020)
- Select the Classic Brush Tool and draw a circle. It uses the fill color for
this shape, not the stroke color. The shape created is a fill, and does not have a stroke
- In the Options area of the toolbox, change the Brush Size and Brush
Tools Creating Both Stroke and Fill
Exercise 4 - Using the Oval, Rectangle, and Polystar Tools - creates strokes and fills
that are independent of each other
- Select the Oval Tool (6th tool down in Animate 2020). Press and hold the Shift key while dragging --
this constrains to a circle - the circle is created using the current stroke color and the inside of the circle with the current fill color. You can set either of these to No Color - the white box with a diagonal line through it at the top of the color panel
- To create a pie-wedge shape, enter a number between 0 and 360 in the Start Angle and/or End Angle field.
- Setting the inner radius greater than 0 creates an oval with a hollow center - the number entered is the percentage of the outer oval that gets removed. The settings determine whether one will see a fill color.
- Select the Rectangle Tool (5th tool down in Animate 2020). Press and hold the shift key while dragging
- this constrains to a square. In the Properties panel, you can set the Rectangle corner radius. To set a corner independently of the other corners, click the lock symbol to unlock it.
- Select the Polystar Tool (last tool in the first column of extra tools) - Click on the options button in the Property panel to choose between a polygon and a star, the number of sides, and the star point size
Modifying Strokes and Fills
Exercise 5 - Stroke and Fill as Separate Objects
- To use the Property panel to change the color of a fill - e.g. use
the Selection tool to select the fill and in the Property panel, change
the fill color
- To use the Paint Bucket (8th tool down in Animate 2020) to change the color of a fill - just select
the Paint Bucket and click on the fill
- Zoom feature - Ctrl + , Ctrl =, or Z
click to zoom in, Ctrl - minus to zoom out, or click on Zoom Tool (the magnifying glass with plus sign) and then click the area of the stage you
want to enlarge. To zoom out, click on Zoom Tool (the magnifying glass with the minus sign) and then click on the area of the Stage where you want to zoom out.
- Undo feature - Ctrl + z (or Edit>Undo)
- To select multiple objects - Hold down the shift key while clicking
- To clear all selections - Hit the escape key
- Set the fill and stroke colors to different colors and not white - draw
an oval and then use the Selection tool to click on the fill and move it -
Animate treats the stroke and fill as separate objects.
- Move the cursor over the stroke -- a small curved line appears at the
end of the cursor - this means that you will select the line, rather than
the fill, if you click. Again select and move the line (the fill stays
in the same place). To change the stroke or the fill, just drag when you see the curved line without first selecting it.
- To select both, double click
Interaction among Objects (Merge Drawing Model)
Four ways ways to prevent this interaction:
- Fills intersecting - if same color, joined; if different color, the second one divides the first one into sections; if the second one is moved, there will be holes in the first; if you try to move the first, you will only move a section
- Intersecting strokes - splits into segments, regardless of color of each
- Stroke intersecting a fill -- the fill splits the stroke, regardless of the color or each
- Object Drawing Model - Select a tool and then click the icon at the bottom of the toolbar to select the Object Drawing Model - if you draw intersecting objects, and then move one of them, you will see they don't interact with each other. You can toggle between the Merge Drawing Model and the Object Drawing Model by pressing the lowercase j key on the keyboard.
- (Optional) Use primitive shapes created by the Rectangle Primitive Tool or the Oval Primitive Tool (these are created behind the scenes using the Object Drawing Model - note that for these, the stroke and fill are not separate objects)
- Grouping Objects (Modify>Group) - If you create a grouped object, the parts of the object will interact with each other as specified in the Merge Drawing Model, but other objects on the stage won't interact with them. Grouped objects are useful because if you move them, the parts move together
- Layers - Objects in different layers won't interact with each other as in the Merge Drawing Model
Creating Gradients - Animate lets you create two types of gradient fills: linear and radial.
- Using the Selection tool, click on a fill (e.g. something drawn with the brush tool, but best demonstrated with a fill that is in a rectangle)
- Make sure the Color Panel is open; if not, choose Window>Color to open it. Click the down arrow to choose Linear gradient in the Fill Style
drop down menu.
- Double click on the small rectangular pointer in the Color Mixer panel - this opens a dialog box and by selecting a color, this color
will be used as an endpoint for the gradient.
By double clicking the pointer at the other end, you can select a color as the other endpoint for the gradient.
You can click in between to add additional color stops to the gradient.
- Select the Gradient Transform Tool (second row of second column of extra tools) from the toolbar - see how the various edit handles (center point, width handle, and rotation handle) affect the gradient.
- Using the Selection tool, click on another fill. Now select Radial gradient in the
Fill Style drop down menu and then the Gradient Transform Tool from the toolbar - see how the various edit handles (center point, focus point, width handle, radius handle, and rotation handle) affect the gradient.
- Click on the button "Add to Swatches" at the bottom of the color panel and select Add Swatch.
This adds this gradient to the Swatches panel. If it isn't open,
choose Window>Swatches to open the panel and the new gradient
should be at the bottom on the right.
It will also be at the bottom of the color palette that opens when one clicks the fill color in the toolbar or in the Properties panel and can henceforth be selected just like any color in the palette.
Using the Text Tool
Select the Text Tool (a capital T) At the top of the Property panel you will see a choice between Static Text and Dynamic Text.
Static text uses fonts available on the designer's computer. Animate converts these fonts into outlines when you publish. This means you don't need to worry about which fonts are on your user's machines; they will see the text as you designed it. However, too much text can lead to a bloated file which can slow down execution.
To access dynamic fonts, click the globe symbol to the right of the Family prompt in the Character section. Once you select a font, that font will appear at the top of the font list and you can then choose if from the Family dropdown.
In Animate 2020, the dynamic text option is available for an HTML5 Canvas document, but not apparently for ActionScript 3.0 files. One chooses between Adobe Fonts and Google Fonts.
Dynamic text uses fonts available from Typekit through your Creative Cloud subscription and font from Google. This avoids the large file size issue above from use of large amounts of static text.
The use of these fonts in HTML5 Canvas is discussed in more detail in two documents:
To enter text, draw a rectangle after selecting the Text Tool. In the Property panel, one can set the font, style (regular, italic, bold, bold italic), point size, letter spacing, and color (which will be the fill color if that has been previously specified with another tool). Unlike an HTML page, you do not need to worry about what fonts are on your user's machine.
If one choose Paragraph in the Property Panel, one can set alignment spacing and margins
Revised: March 21, 2020, Comments to William Pegram, email@example.com