Introduction to Adobe Animate CC interface
Adobe Animate is a great tool to create animation and interactive content (such as web
banners). Examples: https://helpx.adobe.com/animate/how-to/make-an-animation.html
To create a new Animate file:
Open Adobe Animate CC. Click on ActionScript 3.0 under Create New (or choose a recently
opened file from Open Recent Item if you are continuing to work on a project).
Stage: The Stage is the white rectangular area where you place graphic content when
creating Animate documents. Whatever animation happens in this rectangular space
during playback is what you will be able to see as a result in a web browser window or as
an exported video. Anything in the gray area (backstage or pasteboard) will not be
published.
1
You can zoom in and out, and use grid, guides and rulers. Shortcut for zooming in and out:
Ctrl + = (zoom in) and Ctrl + - (zooming out).
More on how to zoom, edit and use the stage:
https://helpx.adobe.com/animate/using/using-stage-tools-panel.html
You can open/create multiple files to work on (File>New or File>Open). Save is also under
the File drop down menu, remember to save often and create different versions as you
progress (shortcut Ctrl+S). Go ahead and Save As your project file onto your USB and give it
a name.
Workspace: (top right) Pick the workspace that has the windows needed for your type of
project (Classic, or Animator). You can access other window tools also from the Window
drop down menu.
On the right is the Properties tab, that gives us settings depending on what we have
selected. When nothing is selected we can access and edit the stage Properties or settings.
If we select a tool or object we get property settings for the selected tool or graphic object
we created.
With nothing selected, make sure you have
the Frames Per Second (FPS) set to 24
(standard film projection). You can leave the
size of the stage as it is, or change it to W:
1280, H: 720 (pixels) for widescreen format.
The graphics we create in Animate are
vectors, so lines and curves are created
mathematically and can be scaled to bigger
sizes without losing quality and becoming
pixelated like a photo or image created in
Photoshop for example.
The Tools panel (on the left in the Classic workspace) has all the tools we need for drawing,
painting, selecting, coloring and modifying artwork, as well as navigating around the Stage.
By rolling over a tool button you can see its name and keyboard shortcut and by pressing it
and holding down the mouse you can view extra tools (if a little arrow is present).
The options area, below, contains modifiers for the currently selected tool. Modifiers affect
the tool’s painting or editing operations.
Basic Tools: https://helpx.adobe.com/animate/using/basic-tools.html
Color Panel: https://helpx.adobe.com/animate/using/colors.html#main-pars_header
2
Tool shortcuts:
For more shortcuts go to: https://helpx.adobe.com/animate/kb/animate-keyboardshortcuts.html
3
Next to the Properties tab we have the Library. Here we can find all the symbols we create
or images and other files we import into our project. By turning shapes or artwork into a
Symbol it gets stored in the Library and we can use it multiple times, have extra animation
options for it etc.
Down below is our Timeline. Here is where we create our animation frames and layers.
Like a movie film, Animate documents divide lengths of time into frames (the series of little
boxes). The major components of the Timeline are layers, frames, and the playhead.
The timeline header at the top indicates frame numbers. The playhead indicates the
current frame and moves from left to right as we play our animation.
Layers are like multiple filmstrips stacked on top of one another, each containing a
different image (or part of an image), that appears on the Stage. Remember to give each
layer a name (double click on name and type). Objects/artwork in the top layer will be
visible above those in the layer below, so for example you would put your character on the
top layer and the background in the one below. You can add layer, create folder and delete
the selected layer with the buttons at the bottom of the timeline.
How to use the Timeline: https://helpx.adobe.com/animate/using/timeline.html
Using timeline layers: https://helpx.adobe.com/animate/using/timeline-layers.html
More details on timing and frames:
https://helpx.adobe.com/animate/using/time.html#main-pars_header_313330812
Exercise:
Create a small blue circle and a large red square behind it, on different layers.
(tip: hold down shift to create a perfect circle or square instead of an ellipse or rectangle)
4