Intro Adobe Animate

1
Intro to Adobe Animate (handout/notes)
(Note: The Adobe Animate GUI is shown using the Basic workspace. There are various terms for the stage used in practice. I tried to keep close to the proper
nomenclature as much as possible but showed variations where they existed.)

2
The planned session
Topics
Hour 1 • What is Adobe Animate?
• What are the components of simple animations?
• What are the templates for Adobe Animate?
• What pre-built tutorials are available in Adobe Animate? (demos)
• What are some work pipelines for Adobe Animate?
• How does one begin a project in Adobe Animate? Templates (“presets”)
• What are some ways to engage the software?
• What are various features of the tool?
Hour 2 Demonstrations / walkthroughs of concepts / examples in-tool
Layout
• Foreground background (and interplay)
• Backgrounds
• Layer depth mapping
• Layout and layout tools, uses of screen “real estate” (guides, grids)
• Layering (in the timeline) [locking, visible/invisible, stacking]
Shapes
• Shapes, symbols (graphics, buttons, and movie clips)
• Character designs
• Libraries, editing in libraries (and extensions into various scenes)
Features
• Color design resources [solid color, linear gradient, radial gradient, bitmap fill; color picker
(visual picker and paint bucket / Ink bottle tool, eyedropper; Hue Saturation Brightness or HSB;
red-green-blue or RGB; hex colors); color swap; b/w conversion; swatching (capturing accurate
color samples); color design; and others]
Sound
• Audio waveforms, inherited assets
• Foley resources, soundtracks, soundscapes, audio tracks
• Lip-syncing (voice prints, but not live voice capture; automated, or manual)
Importing Multimedia Assets
• Importing folders
Motion Design
• Frames, framerates
• Frames, keyframes
• Tweening (classic, motion, shape; 3d tween); the computational filling of frames in-
between two keyframes on a timeline
• Rigging and bones
Time
• Timeline
• Extending time, foreshortening time
• Framerates
Action Code
• Window -> Actions (for various code-controlled actions)
Hour 2 Or a group project?

3
An accessibility note: If you are triggered by motion, please use the .pdf download and not the .docx download. There
is no single-button ability to turn off the light animations in this handout. Or just save your .docx file as a .pdf, which will
render the .gifs inert. Or you can hit the pause button on each of the visuals. Just mouse hover over the visual and click
on the pause icon. Thanks!
About Seeing and Illusions
Human brains engage in pattern-making and constant sense-making. Apophenia refers to the human tendency to look
for patterns, even where none exist. (People who are investigators have to train themselves out of this…and to think
critically.) This animation has at its core an illusion. Can you guess what it might be? Only three elements have been
included: the bubbling vial, the rabbit, and an added “chalkboard” in the background to enable the white rabbit to show
up against the background.
Ways to use the session
Think about why animation is interesting to you…and what you want to learn from this session. Jot down a few notes.
Be ready to share…and also to speak up at any time during the session. This is an interactive session. Ask questions via
mic or chat at any time.
This session has not been designed as a follow-along one because not all participants have access to the software. And
the two hours is really too short to begin to learn a complex tool. [In formal credit courses, this software would take a
semester at least, maybe several. And there would be the assumption of prior learning in Adobe Photoshop and Adobe
Illustrator. Adobe Animate also requires some basic knowledge of vector graphics and something about motion.
Perhaps there would be assumptions of learning related to animation itself.] This session is very much an introductory
one, with the trainer also in the early phases of the learning the tool. Most of this will showcase capabilities of the tool.
Please do not try to memorize the sequences. The notes are here, so you do not have to try to take notes or make
screenshots along the way, unless you want to. [Notetaking is good practice.] Please make note some of the
terminology and capabilities, so you can use the available features when you need to. Give yourself a lot of reasons to
practice…until it starts to stick.

4
If you are wholly new to all of this, go with the built-in assets (static visuals, animated visuals, and sound files), and start
there. You do not have to make your own visuals. You do need connectivity to the Internet to access the server on
which these assets are stored. The assets include characters, objects, and backgrounds…and sounds. There are
additional downloadable background sets and other resources off of the Adobe site. We all start with what we know
and build from there. Digital animation assumes a wide range of dependencies and understandings.
Selling the Motion Illusion
The foreground and the background have to “sell” the motion. In this pre-built, each of the chicks has its own gait.
Why create animations? (motivation)
Animations—movement, changes over time—convey information in a way that still images may only hint at or that they
may not convey at all. It involves visual “deformations” that take place over time. Motion animations are commonly
used in entertainment. It is also used for teaching and learning.
Animations are an inherent part of video, but video can be transcoded into still images, which can be animated.
Animations may be made over the tops of videos. Animations may be drawn from scratch using analog materials or
digital ones. Motion may be applied to text objects (but these have to be wrapped in a “graphic” or “movie clip” symbol
first, so the motion can be applied to that symbol wrap). Vast swaths of people are acculturated to animations.
So why create animations?
1. Motion information shares insights about various in-world phenomena, in-world physics. Motion may be used
to engage “world building” in digital games and virtual immersive spaces and other contexts.
2. Motion may be explanatory; it may be used in exemplifying ways.
3. Motion draws human attention. Motion may make informational graphics more engaging. They may point to
particular ideas or concepts or practices, for emphasis.
4. Motion may convey humor and make some information or learning more appealing. Motion plays to human
visual attention and memory. Motion can offer a visual mnemonic.

5
5. Motion may serve as a form of artful visual aesthetics.
6. Motion may be applied to animated agent characters for learning and entertainment. (In video games, these
are non-playable characters.)
Motion may be synchronous and multi-faceted. In Animate, they include transitions (of alpha channels, of color, of
shapes, of movement, and others). They include parallax effects and other forms of illusion-making to emulate the
world. Animations may be silent; they may be accompanied by a sound snippet or music; or they may involve human
speech, or some combination.
What is Adobe Animate®?
Macromedia Flash (May 1996) -> Adobe acquisition of Macromedia (2005) -> Adobe Flash
Professional (2005) -> Adobe Animate (Feb. 2016)
Adobe Animate enables the following:
• Storyboarding
• Planning
• Roughs, sketches, guides
• Multimedia drawing
• Layout
• Animation
• Interactive design
o Interactive infographics
o Motion infographics
o Interactive posters
o Motion posters
• Video annotation / overlays
• Simple game creation
Ephemera in Motion
Motion may involve ephemera. It may involve particulate (and liquid) effects.

6
ActionScript 3.0 or HTML 5 for various output platforms?
Various animations are created using Adobe Animate (for ActionScript 3.0 or HTML 5 platforms).
(1) ActionScript 3.0 is an object-oriented programming language. ActionScript enables interactivity by users through
input devices to trigger events, in games, digital learning objects, and other applications. ActionScript objects may be
used on DVDs. They may be shared through zipped folders (which contain JavaScript libraries to enable the actions).
(2) HTML 5 is the core language of the WWW, and actions enabled in HTML 5 play natively in the Web browsers.
Interactive infographics or other objects that play on the Web would likely do best with HTML 5. The files require the
.fla (originally for “Flash”) project file, an html file, a JavaScript file, and a folder with images. The files may be hosted on
one server, and an inline frame (iframe) may be used to host the content on a web page or a blog site, and so on.
Deciding which to go with depends on whether one is creating (1) a lightweight portable animation or (2) something
hosted on the Web. The intended destination matters. Regardless, whatever the initial settings, the versioning is
flexible, so one can reset the settings and output in various ways in Adobe Animate. [Note: All internally coded objects
transfer well between the various platforms, but if additional coding was made using the Action window, then new
coding has to be done for the HTML 5 version to function correctly.]
Human visual processing of transient contents
The animations are vector-based and generally simple visuals with motion (because of human visual consumption of
transient media…that people do not finer details in a live motion context…that human vision follows motion, and it
follows color—in part to detect threats). Human vision can be precise in particular circumstances, particularly when
focal (vs. peripheral) vision is employed in good light. People are informed by the world (light almost always comes from
above outside), and they are informed by a naïve physics (for example, senses of mass and motion and time). How
people view animations depends in part on cultural experiences and conventions of animations (in entertainment, in
education, and others). [For example, conventions of memetic .gif images usually take video snippets like facial
expressions of known actors or short-action sequences. Animated .gifs are very short in memetic application, so they
run for anywhere from less than a second to a few seconds only.] Animation is a lot about illusion and creating content
based on how people see and process visual information.
Animate does not require any direct coding
unless particular features are desired. Go to
Window -> Actions. In the menu at the top of
the window that opens, there are Code Snippets
built in for ActionScript or HTML 5 Canvas,
depending on whatever one is building to. This
is a form of “auto-complete” for coding, with
human-readable labels…so “coding” is sort of
much easier than one might think here.
Figure 1. Code Snippets in the Actions Window to Enable
Various Object Functions
Older Files Exported from Animate: Some older forms may also be exported from Animate: .swf (shockwave flash,
which plays in-tool); .air (Adobe AIR applications / code and assets / download as zip folder / email / CD-ROM); and
animated .gif. Various retro games have also been built on some of Animate capabilities. Flash has been deprecated

7
and is no longer available. The code applied to the ActionScript or HTML 5 outputs may not apply to the older files. Test
every object for performance. Test them in the context in which they will be deployed.
Transferability of Animation Editing between Various Software Programs: The ideas / concepts in various animation
tools are somewhat transferable. For example, timelines are common ways to represent changes over time. That said,
there is some real investment in the learning of complex software, and people have to be strategic about what they
invest their effort in for their particular work or other context.
Combining Pre-Built Digital Assets and White Space
One beginner approach may involve bringing in various pre-built animations
for a combined effect. Allow sufficient white space for the effects to express.
This visual does not have a background to provide context. Rather, the three
elements are “isolates.”
Basic elements of a short animation
Our sense of animations is informed by what we’ve experienced…and the conventions we’ve observed in the expression
of animations. We are also informed by our so-called “naïve physics” and sense of how the physical world works.
Foreground:
Character (animate, inanimate; humanoid, animal, object; others)
Objects (props)
Background:
Landscape
Space
Sound (in some cases)
Motion(s) or changes over time
Automation
[“tweening” between keyframes:
shapes (morphing from one to another),
classic (movement of shapes or symbols from one location to another), or
motion (moving a shape along a controlled path)
3d tween]
Uses of video and extracted .jpg stills (used in sequence)
Uses of video as reference visuals for drafted stills
Note that animation here comes from working with a series of stills…and changes to the stills create a sense of motion.

8
Rain, Snow, Ash?
The following is a first-run at particulate effects. The background is a digital rendition of hills and a red sky. The
foreground involves a localized and light slow rain. Or could this be snow? Ash?
Particulate / particle / liquid – flow animations (wind, snowfall, rain, and
others; pour, flow, trickle, splash, fall, and others)
[There are ways to create such effects albeit indirectly, using particular
visual overlays with transparency, visual blurring, and so on. There is not a
particle generator inside the software tool.]
These animations do not often define every frame but perhaps every other
frame. The typical framerate may vary but tend to be between 24 – 30
frames per second. [To change the framerate in an Animate .fla file, go to
the Modify tab -> Document.
Figure 2. Modify -> Framerate (left)
Short animations capture a particular scene or even a brief story. They
capture a sense of mood or sentiment, through color, through shapes,
through motion, and through the depiction (the story told).
Detailed animations may include stops or pauses, slow motion, or other ways to enable people to visually capture the
relevant information.
Animations that include sound require a solid and clear soundtrack…and alignment with the soundtrack. (Animate and
other tools enable synchronization of character mouth movements to audio-recorded speech.) In buttons (symbol
type), sounds included in keyframes and frames are indicated with a waveform indicator line (horizontal) across the
keyframe or frame. There are built-in sound clips and effects in the Assets in Animate.
Guide Layers are inherently invisible to the animation, but they serve as references for the digital or manual drawing of
the images for animating. (In still image tracing in Photoshop or Illustrator, images informing traces—manual or
automated—are often referred to as reference images.) Paths on which objects move may also be placed on these
layers because they are invisible on-stage but can be used to guide object motion. “Onion skin” views (on the timeline)
can also help with drawing or illustrating sequential visuals.

9
A general animation sequence and other notes
An animation work sequence
A general animation sequence includes the following:
conceptualization -> style guide -> storyboarding and roughs -> initial reviews in initial pilot testing -> digital
assets creation (analog or digital or combined) -> animation -> alpha testing (esp. in environment to deploy) -
> beta testing (with target users) -> refinement -> versioning for different contexts -> deployment
The prior is a non-linear sequence, with much recursion. As one tests, one returns to re-plan and rebuild.
12 basic principles of animation
Ollie Johnston and Frank Thomas (1981) introduced the idea of 12 basic principles of animation in describing the
Disney animation approach from the 1930s onwards. This work is still considered relevant today.
For all users
The technologies today enable the starting out with a basic concept and a few rough visuals…and enabling an up-
sampled (software generates some of the pixels) refined animation that can be shared broadly. The technologies
here, too, do the heavy lifting as long as a person or a group knows what it wants and is willing to input the effort to
communicate that through computers. (AI neural filters can help clean up images, and they also inform some of the
outputs in animations.
About “style”: conceptualization and execution
In the amateur space, what is stylish in terms of animations may depend on various aspects. What is the concept?
The implied audience? The implied values? How is an audience expected to respond?
Then, what is the execution of the concept? What is the look and feel? The mood? The aesthetics? The timing?
How original are the animations? What aspects of the animations make them original? How does the individual (or
team) engage the multi-channel multi-media space? With more work samples, what makes for an original hand?
How does the skill and taste evolve over time?
Some work pipelines / paths with Adobe Animate: pre-production, production, post-production
When to go with preproduction? When to go with post? Pre-production makes sense when there is some level of
design work in creating the visuals (such as character design, prop design, background design, and others). There are
tools that are dedicated to digital image creation, with a range of image editing tools and color design tools, that are not
comprehensively in Animate. When should one go to post-production? Animate has limited outputs, but its capabilities
may be extended with the Adobe Media Encoder. After Effects has more animation capabilities than Animate. So pre-
and post- are called on as needed. Also, the choices depend on which tools one has trained in…which is why it may
make sense at some point to acquire as much of the Creative Cloud suite as possible.
Figure 3. Recursive Work in Pre-, Production, and Post-

10
Components Some Work Pipelines / Paths (preproduction,
postproduction)
Visuals:
• Drawing in analog or digital
• Photography
• Diagramming
Text:
• Writing
• Font design
Sound:
• Voiceprints
• Sound effects
Video:
• Video snippets
Multimedia:
• Multimedia elements
• Light compositing
Motion:
• Rigging
• Timeline
One can start in physical analog space and draw / sketch /
paint works, scan those, and move into the digital image
editing for particular assets for an animation.
Preproduction…in Sequence:
(scanners)
(digital cameras)
(diagramming tools)
(web-facing visualization tools)
Adobe Illustrator -> artwork and assets -> Adobe
Animate
Adobe Photoshop -> artwork and assets -> Adobe
Animate
Adobe Photoshop and Illustrator -> artwork and assets -
> Adobe Animate
Audacity or audio recording tool -> waveforms -> Adobe
Animate
Adobe Media Encoder -> jpg stills from video -> Adobe
Animate
Postproduction…in Sequence:
Adobe Animate -> Adobe After Effects
Adobe Animate -> Adobe Media Encoder
And many others… including pre- and post-
Optimal file types for visual / artwork assets
Adobe Animate trainers suggest the use of .jpg or .png as seeding visuals for animations. When importing these into
Animate, do so in a “lossless” (vs. “lossy”) compression. Ensure that the spatial resolution is sufficient to avoid
pixellation and aliasing. The default quality looks to be 80 ppi / dpi, but I have used at least 200. (The higher the
resolution, the larger the file size, so it helps to consider tradeoffs between transient visual details and file size /
delivery.)
A Photoshop (.psd) file may be imported in layers for more control in editing in the animation software. Layered objects
may be imported into Animate in any of the three options: Animate layers, single Animate layer, or keyframes. The
appropriate option will depend on the contents and how the contents will be used in the animation.
.fla documents and uncompressed .xfl documents may be imported by the Open External Library command.
If importing a series of stills, name them with numbering (for example: Sun1, Sun2, Sun3, Sun4), so Animate can import
the series and place in the same space and on the same timeline as keyframes. The visual on the right uses a 3d tween
because of the visual illusion of spherizing.

11
Figure 4. Importing Stills in a Series (in One Import)
Right-sizing digital images to the stage and / or to the planned usage will save on digital processing and manual work.
Basics of layout on a 2d plane
Adobe Animate enables a wide variety of
templates (or “presets”) for setting stages for
layouts and animations. The layouts are set
on a two-dimensional plane, with x and y
coordinates. The x and y axes are in the
conventional spaces, with x on the horizontal
and y on the vertical, but the 0,0 is at the top
left. (In traditional data graphs, 0,0 is at the
bottom left.)
Figure 5. Spatial Reference Point of x and y at the Top
Left
Changing stage sizes mid-stream. There is
some flexibility in changing the stage from
one to another, but it makes sense to right-
size the stages and contents sufficiently for
targeted purpose.
To change the stage size during a build, go to Modify tab -> Document, and change the dimensions of the stage.
Frame picker. The frame
picker in the Properties ->
Frame Properties panel
enables the usage of still
frames based on the frame
picker to place in the timeline.
Figure 6. Frame Picker to the Right of the Fighting Cats

12
Slow Motion and Scene Setting and Atmospherics
Motion may be slow. This is more about the scene than one major action.
A Vertical Frame
Some motions may work better in particular vertical stages / canvases.
When doing layout, do not just think of a static layout. Think about what motions will occur on the stage…and how to
show these in a comprehensible way. Think about the use of “empty” or “white” spaces. Test the outputs for the
various versions because they behave differently in different file formats and contexts.
About 2d illusions of 3d (two-dimensions to the illusions of three)
The z-axis or the third dimension (3d) is illusory. The z-axis is built using various elements: object placement relative to
each other, object sizing, visual shading, textures, shadows, depth settings, foreground-background illusions, zoom-in
'When doing layout, do not just think of a static layout.
Think about what motions will occur on the stage…and
how to show these in a comprehensible way. Think
about the use of “empty” or “white” spaces. Test the
outputs for the various versions because they behave
differently in different file formats and contexts.

13
and zoom-out movements, sound effects, and so on. Much of visual
communication is suggestion and not the full definition of all elements.
The visual to the left shows a zoom classic tween created using the
camera feature. The windmill was made for augmented reality in the
3d, and something in it is preventing the turning of the blades. Drat.
To the left of the workspace is the toolbar. Depending on the
workspace setting (Animator, Basic, Classic, Debug, Designer,
Developer, Essentials, Small Screen, and Icon Animation…), the
toolbar and other aspects of the space will show differently
(although all are customizable using the “Edit Toolbar” button in
the toolbar or the three dots / ellipses near the bottom).
Many of the tools also are grouped with other similar tools, and
these can be seen in the flyout when right-clicking on the tools.
Some tools to help with layout
Vertical and horizontal guidelines can be pulled out from the rulers at
the top and at the left of the stage to help with aligning objects.
[Various snap-to effects may be toggled on or off.] Numerous
guidelines can be pulled out. These are non-publishing guidelines, so
even if they are left on the stage and off-stage, they will not appear
when exporting or publishing.
There are various align tools in the Properties panels. These help in
the alignment of objects.
Figure 8. Some Layout Tools from the View Menu
A grid may be created to run on background for precise item placement.
Imported images to the stage can be aligned to the stage. If content falls outside the stage, it is possible to
automatically clip any content outside of the stage to make it disappear.
Figure 9. Clipping Content Automatically with Button at Top Right of the Stage and Off-Stage
Figure 7. Right-Clicking the Pen Tool to See the Flyout with
Related Additional Tools (Anchor Points)

14
Figure 10. Bounding Box around a Scribble (to the Right)
“Bounding boxes” around symbols (shapes turned into symbols, which
may be “graphic” or “button” or “movie clip” types) may be helpful for
similarity-sizing between objects. (Several objects may be highlighted
simultaneously using the “shift” key and clicking (or clicking on the stage
and holding down the left mouse key and dragging over multiple objects.)
In the figure below, both scribbles are highlighted…but the one on the
left is a “shape,” and the one on the right is a “symbol” (a “graphic” one).
The blue-lined bounding box wraps the symbol (but it is a non-publishing
support feature, like guides, like grids, etc.).
The symbol also has a reference point (anchor
point), in this case, placed in the middle…but this is movable by clicking on the item and going
to the Free Transform tool in the left toolbar. See the figure at the right. The anchor point may
be moved from the center of the flame to the tip of the flame, which changes the fulcrum
around which the object may rotate (as one example). The anchor point can be moved
anywhere on the object. [Any object may be flipped on horizontal or vertical axis, or rotated, or
shifted, and so on.]
Figure 11. Changing the Reference or Anchor Point of the Item using Free Transform Tool
[A motion tween around shapes is broken by changing one of the shapes into a symbol. In this
case, I reverted the object on the right to a shape, so the shape-to-shape motion tween would continue working.] The
tool is a WYSIWYG (“what you see is what you get”) one.
Jitter / Vibration / Tremble Motions
Using the looping motion (and two or more keyframes), it is possible to offer a
fast jitter motion (or vibration or tremble).
Elements of the Basic / Classic / Essentials / Small Screen toolbar
A typical toolbar sequence has the various capabilities. Note that there are additional tools in the “…” ellipses.
Toolbar Tools Basic Function
Selection (and sub-
selection)
Select an object or multiple objects (to “isolate” and edit)
Free transform Change the shape of an object or other characteristics (while
maintaining aspect ratio)

15
To not keep aspect ratio while doing a free transform, break apart the
image first with the Highlight object on stage -> Modify -> Break
apart…and then drag the edges to reshape
Lasso Select an object or multiple objects
Fluid brush tool Is a GPU-accelerated tool that enables drawing with fills (vs. strokes,
which is what the paintbrush tool does, which may require using the
closing gaps tool in order to apply a fill to a closed space)
Classic brush Enables the drawing of vector art, enables accessing brushes from the
brushes library
Eraser tool Delete some elements
Shape tool Primitive shapes and basic geometries
Line tool Used to draw lines (strokes) of various types
Pen tool Used to draw controlled curves
Text tool Used to apply text based on various font types
Paint bucket (and ink bottle
tool)
Colorizing filled shapes (switching the color and style of a figure)
Eyedropper Precise color selection and application; enabling selection of shape
attributes (fill and stroke color, line weight, line style) and transferring to
other shapes
Asset warp Laying down pins and stretching a mesh based on those pins to deform
objects
Hand tool Grabs objects in a way to move them
Zoom Focusing in on a particular part of the animation
… “Edit Toolbar” Ability to add or remove elements from the toolbar
Color fill and stroke Ability to change the foreground and background colors of an object
(shape fill) or line (stroke or outline color)
Others…
Figure 12.
Toolbar

16
Elements of the root (main) timeline
Getting the timing right is one of the tougher challenges in animations, particularly with various elements that are
interacting synchronously. The world we live in is a high-motion one with many changes occurring simultaneously. A
simulation is selective in terms of motion; it is not depicting all motions (because so much would overwhelm the human
visual system, which itself selects details to pay attention to).
The root or main timeline is a centerpiece of Adobe Animate. The timeline enables deep levels of control over the
depiction of motion over time. (The level of control can be a negative. Remember to stay simple…but with the proper
speed to keep viewer attention…but the proper slowness for the viewer to understand the visual. Enable viewer control
in some cases—as in video watching…with pauses and stops, and so on…Enable slow-motion wherever possible. If there
is no viewer control, keep the message simple.)
The layers of a timeline show all the elements (shape objects, symbols, text, and so on) in the animation, in a named
(optimally) hierarchy. The layers work in Animate as they do in Photoshop and Illustrator. Masking works the same. A
reference layer at the bottom (or elsewhere) is called a “Guide” layer. There is nesting of layers as well. Layers may be
locked, so that they cannot be changed. Layers may be visible or invisible (based on the eye toggle). Layers may be
added by the user, or they may be added by the software if various objects are pulled from the library into the stage or
pasteboard…or for other reasons. The “plus” adding of a layer means a new layer will be added above whichever is the
active layer being edited. Layers may be moved by dragging and dropping.
Using Masks for a Slower Reveal
A sloshing bowl is revealed using masking and a brush.
Keyframes and frames in the timeline
The timeline has a start point at the left, and time progresses to the right. The different layers of a timeline can start
and end all along the timeline. Each layer may contain different visual elements that will exist in time together and co-
move together.

17
The timelines may contain frames and keyframes. Regular frames are visuals on the stage; keyframes are important
frames that indicate moments of change (keyframes are the heart of various tweens or “in-betweens”). Keyframes are
used to book-end motions in between.
The frame icons or representations indicate some of their contents, such as the inclusion of sound on particular events.
There are visual indicators of various types of “tweening,” frame-by-frame motion (requiring manual coding), motion
tweens, and such, applied.
The playhead shows the location of the visual/motion on the screen. The playhead can be scrubbed back and forth to
view frame-by-frame action.
Typical frame rates are 24 to 30 fps (frames per second). Slower (lower) framerates means a more static vs. smooth
motion look.
For visuals that appear for a short time and never again in the animation sequence, one can place blank keyframes after
that frame. This is a “blank thereafter” setting on that particular layer.
“Auto keyframing” automatically creates a keyframe for every change made on the stage.
Figure 13. Various Types of Applicable Frames on the Timeline
Frames can be copied and pasted. Frames can be reversed. This means that
actions can play in reverse order.
Figure 14. Various Types of Frame Edits
When pasting over frames, do “paste and overwrite” or else
the layer will extend beyond the end of the current
animation. Pasting over frames means that the paste replaces
whatever was there before.
Figure 15. Pasting and Overwriting Frames (left)

18
Figure 16. Loop Markers Define and Limit the Looping Sequence
The timeline has various settings for looping (including markers for the
starting and ending of the looping). Closer-in indicators mean faster
looping. Farther-out indicators mean slower looping. Loops can end after
one or two or however many n-iterations the user sets.
Figure 17. An Onion Skin View of the Stage and Off-Stage
On the timeline, there are also onion-skinning settings that enable design
and development work as well as cool visual effects. The onion skin view
enables seeing all objects on all layers but in outline format, so placement
of a new object can be done with more “omniscient” (all-layers) awareness.
Ease settings (slow-ins, slow-outs, slow-ins-and-outs)
In some types of motion—one example is the throwing of a ball into the
air—the motion starts slow, speeds up, slows as it reaches an apex (pull of
gravity), and it comes back down. Simulating gravity and a physical object
under its pull involves “easing.” [Another common example is a car
starting out from a stop-point…gaining speed…and slowing down for the
yellow light.]
To control for start, end, and middle speeds in a motion (for gradual
transitioning), there are various settings that may be applied through the
Properties panel -> Frame button…in terms of tweening. These involve
various types of “easing.” An “ease in” means a more gradual transitioning
into a movement (vs. an explosive change). An “ease out” means a more
gradual exiting from a movement or motion. An “ease in out” offers
gradualism at both ends, in various patterns. An ease in the middle
involves making multiple keyframes, to enable an ease at the “middle.”
An “ease” makes the transition gentler by moving into a motion or out of a
motion or in the middle of a motion. It does not lengthen the time period
of that motion, but it spaces out the frames to create the illusion of
slowness (vs. fastness or speed).
To access this, click anywhere on the tween in the timeline. Go to
Properties -> Frame.
The eases may be designed in different times in the sequence. An “Ease-
in” occurs early. An “Ease-Out” occurs later.
Figure 18. Properties, Frames, Eases

19
Figure 19. An “Ease-In” Set of Curve Options
The “Ease In Out” addresses both ends. The visual shows bouncing in and bouncing out.
Figure 20. An “Ease In Out” Set of Curve Options
Symbols and within-object timelines
Visuals are mere shapes unless they are changed into symbols. Three types of symbols (containers) may be used in
Adobe Animate. These include the following:
Types of Symbols (containers) in Animate General Definition
Movie Clip A symbol with its own timeline that rides with the object and does not
show motion on the root timeline (but does when the movie clip itself
is activated)
Button (more often used for games but
sometimes used for animations, such as in
infographics)
A visual indicator that can be interacted with by a user to trigger an
event
Graphic A symbol with its own timeline that maps to the root timeline and show
demonstrates its coded motion when the root timeline is played
Note that the actions within the symbols are part of the overall synchronous motion of the animation. The elements
should work of a piece.
Symbols can be anything that involves motion. They can be in the foreground or the background.
The vertical rectangles on a timeline serve as a toggle to turn on the outline mode of the layer, so that an object that is
being edited in relation to other elements on the stage can be viewed clearly (without opacity, without occlusion).

20
There are parent and child timelines. Said another way, there are main timelines and sub timelines nested within the
main ones.
Manual coding options for interactivity
There are ways to make frame-by-frame visuals through manual coding. Or one can code at every other frame / framing
by twos…or threes…or fours…and so on. Framing by a particular “n” changes the visual feel and detail level and pace of
the animation.
Action frame and interactivity
The Action frame enables the uses of particular code to control for “buttons” and other interactive animations.
https://helpx.adobe.com/animate/using/add-interactivity-code-snippets.html
Figure 21. Window tab -> Action in Dropdown for JavaScript or HTML 5 Window
Setting advanced layers to enable bone-rigging
To enable bone-rigging, there has to be the setup for Layer Depth.
Figure 22. Window -> Layer Depth
The above action leads to the window which shows the turning on of using
“Advanced Layers.”

21
Figure 23. Turning on Advanced Layers to Access Camera, Layer Depth, Layer Effects, Layer Parenting (Rigging/Bones)
The following screenshot shows a digital female character riding a bicycle. Below in the timeline, the bone rigging may
be seen. The bone rigging refers to the connecting of bodies and limbs…so that action in one part has implications to
others. The bone rigging may also refer to connecting of the head with the attendant eyes and mouth and hair, so the
movement of the head has natural implications for the facial features. The ties from the child elements to the parent
elements may be seen to the left side of the timeline. [The head element would be a parent one, and the eyes and
mouth and hair would be the child ones.]
Figure 24. Bones and Rigging of a Built-In Character in Adobe Animate
Layer Depth, in and of itself, enables the illusion of parallax view. Layer Depth also involves focal distance or the
apparent space between the viewer and the focal object.
Layer Depth has to be activated for the camera to work, such as to zoom-in and to zoom-out.

22
Figure 25. Layer Depth Setting Window for Parallax View (when Zooming In or Out)
Figure 26. Multiple Ways to Access the Break-Apart Feature
Breaking Objects into Parts. Various objects may be broken out
into separate parts that can be placed on separate layers or
keyframes, to enable greater control over the variant parts. The
breaking objects into parts may enable different applications of
color and other applications to different parts. It may enable
the creation of background elements that maintain the illusion
of movement when various parts are moved for the action.
Different parts may affect the different applications of motions.
For pre-made labeled objects, the breaking will result in labeled
layers so that the lhand will be the left hand, and rhand will be
the right hand, and so on. However, some breaks will result in
unnamed layers when it is not clear what the various elements
are. Some complex visuals, like a photograph or drawing may
not show as broken apart parts. The break apart function may
be accessed through the stage (Free transform tool in tool bar
and then right-click object for options), the menu (Modify-> Break apart), and through keyboard shortcuts.
Figure 27. Automated Breaking Apart of a Composite Object or Symbol (Graphic or Movie Clip)
Figure 28. Distribution of Elements to Different Layers and to Different Keyframes

23
In Movie Clip symbols, the motion
attaches to the symbol, so the
motion is not on the “root
timeline.” Rather, one has to be
inside the symbol to play or run
the motion (the above isolated
visual in the screenshot above vs.
the root timeline view below).
Each movie clip has its own
timeline.
Built-in animated and static visual resources
It is totally possible to do all the work in Adobe Animate, from drawing (with
shapes, with paintbrushes, and other within-tool-created content). There are sets
of animated movie clips and graphics (including bone-rigged) and static digital
visuals as well.
There are objects, characters, and backgrounds. The “search” enables the finding
of various digital assets using text search.
Walk and run (locomotion) cycles (loops) for animated characters
A basic walk cycle is defined with at least four keyframes, for a human walk. Right foot up, contact with ground, left foot
up, contact with ground (along with the accompanying arm swings). With proper timing and (classic, motion, or other)
tweening, the walk cycle looks real. The more keyframes, the more “accurate” or high(er)-fidelity the locomotion.
Some animations are built off of the frames of video-recorded actions for even closer fidelity.
Figure 29. Visual Search for Built-in Digital
Assets

24
Figure 30. An Animated Bear Walk Cycle Figure 31. Dragon “Movie Clip” Symbol Run Cycle
Synchrony or Asynchrony
Digital characters may be synchronized, as may be seen in this visual from the Adobe assets included with the Adobe
Creative cloud licensure. There are three assets here, two designed characters and a background.
Synchronized Non-Synchronous / Asynchronous / Multi-synchrony
Some keyboard shortcuts
Animate has many common keyboard shortcuts familiar to those who have used other tools in the Adobe Creative Suite.
Hold down “alt,” select an object, and drag it to copy the shape (and all internal coding) on the stage (and off-stage).

25
Use the directional pad (arrows in all directions) to nudge objects or lines on the stage. These enable incremental
moves.
A comma moves backward several frames on the timeline; a period moves forward a few frames on the timeline.
Double click the hand in the toolbar to recenter stage. Or hold down ctrl + click 0.
Click the spacebar to reach the hand tool to pan around the image. (This allows a user to left-click the image and drag it
to move it.)
Shift and hold to constrain when re-sizing a shape prim.
Those who do not prefer keyboard shortcuts can right-click an object to access some of the same functionalities in a fly-
out dropdown menu.
“Clean” (trouble-free) work practices
It is generally good practice to create and own what you use in an animation, even if the animation is fleeting. (Berne
Convention says you generally own what you make in terms of intellectual property.)
Or, occasionally, free visuals may be used from trusted sources. Otherwise, it is easy enough to make a quick object or
background at the level of coarse (vs. detailed, vs. granular) visual that may suffice for a fairly fast visual. The various
digital assets are evocations, maybe only a little more detailed than silhouettes, instead of direct and full visual
representations. Animations are visual gists, in terms of common usage, and their consumption is fast and fleeting.
People get the message and move on.
Subscription access to visuals tend to be expensive over time.
Keep good records and contracts if there are purchased objects. Follow the letter of the law of the objects.
Keep records of the objects created for the visuals, so one has proof of the creation.
Back up files. Keep clear documentation.
Note: Some of the visuals in this handout come from the built-in assets that come with Adobe Animate. These are in
the public domain.
Adobe licenses at K-State
https://support.ksu.edu/TDClient/30/Portal/KB/ArticleDet?ID=85
Adobe Animate is part of the Creative Cloud suite license. This software has built-in tutorials which are not only fun but
straightforward and “hand-holding” in approach.
Learning resources
YouTube has some great talented folks who do animations and show nice work sequences, troubleshooting, and some
cool visual effects. LinkedIn has trainings for Adobe Animate, including some very fun ones by Joseph Labrecque. His
trainings often include downloading sets of files, for following-along and practice. [Manhattan Public Library provides
access to online LinkedIn trainings for all clients with library cards.]

26
There are simpler animation software programs with particular applications (like cartoon drawing), and there are more
complex ones (that include 3D, that include more natural hair motion, that include various types of analog materiality
representation via digital). These are well beyond the purview of this short training and set of notes.
A Catfight on Stage
The animated .gif combines a combination of visual effects. One is “cat fight,” and the other involves “stage lights.” This
visual captures something of cartoonish conflict. Note the interplay of shadows, which might suggest that there are
lights from backstage, too based on where the cats’ shadows fall. This combination looks highly frenetic, but it is
possible to slow the pace of the two prebuilts used to create this visual animation.
URLs for handout download (.docx or .pdf)
I update the handouts every so often, so if you downloaded an earlier version, please re-download a newer one.
http://www.k-state.edu/ID/AdobeAnimateHandout.docx (download, with .gif animations)
http://www.k-state.edu/ID/AdobeAnimateHandout.pdf (download, with inert .gif animations)

27
Shape Motion Tweening
A shape tween enables a morphing effect. A shape is a non-symbol. A shape usually has to have closed edges. There
are shape “prims” inside Adobe Animate’s toolbar as well. Imported images do not seem to be “seen” as shapes in
Animate.
Presenter:
Dr. Shalin Hai-Jew
ITS - K-State
Hale Library
shalin@ksu.edu
785-532-5262
Original Date: June 2022

28
An Animated GIFs Gallery
The animated GIFs work in MS Word, but they do not work in the Adobe .pdf version, which might be a good thing after
one or two iterations. You can always stop or pause the visuals. (Aren’t you glad that sound is not included?) I could
have made these a one-iteration animation, but then you would miss the ones on the next page as they just play and
stop. (Sorry if these are annoying. I wanted visual motion examples.)
The following visual involves the use of pin-warp. (Similar capabilities are known as “puppet warp” in digital image
editing tools.) In real life, ostriches run fast and elegantly… The color applied to the ostrich shape uses an AI-informed
neural filter that enables style transfer.
The following shows a shifting background from night to day (or stormy to sunny). A kitty walk cycle is in the
foreground. Motions may be set to follow particular tracks. Note that the kitty’s color has changed. A pink tint (color
red + white) was applied to the originally gray cat based on the movie clip’s timeline.
This owl was drawn using a mouse. A reference image informed the visual. The only motion is a wink from a flirty owl.

29
“Anti-physics” (or made-up physics) can attract attention because it is eye-catching because it is unusual. Adobe
Animate simulates some built-in physics, but nothing like a full-blown physics engine (in game design tools and
immersive virtual worlds).
It is possible to reverse layout…and reverse directional motion frames. The layout was not reversed here only the
motion. The reversal can be part of the motion sequence. (See the three walking chicks above with the reversal during
the action.)

30
Some MP4 Versions
The .pdf version will require the use of the link to play the .mp4 version. In Word, this is an embedded video on the
YouTube social video sharing site. This means that you have to be connected to the Internet in order to play these
videos. There are various output formats possible.
The following short video may also be accessed at
https://youtu.be/OYofMQ21SaE on YouTube.
This short video is available at
https://youtu.be/ZehHJCJbqbU on YouTube. This has
sound embedded.
About masking. The following Animate video shows how masking a layer works, for a selective reveal of the visual
underneath. The mask reveal involves the use of a tweened path for the rectangle revelatory overlay (so this uses a
shape to reveal what is underneath). The URL for this video is https://youtu.be/t1zJa37HrDQ.

31
Much of what has not been addressed here…include the following:
• Alpha (transparency) effects may be applied to objects, backgrounds, and texts. In other words, these shapes
and symbols may appear and disappear as a motion.
• Sound can be built into the various visuals. The animations can be multi-sensory (sight and sound). Actions may
be timed to auditory events. Lip syncing exists also, so pre-recorded sound may be related to a digital puppet’s mouth
movements.
• Code may be applied to symbols (graphics, buttons, movie clips) for certain behavioral effects. They may be
applied to various objects to pause and hold them for a period of time or digital perpetuity.
• Parallax effects may be applied to camera zoom-ins and zoom-outs, using visual depth effects and layers.
• Close-ups to character faces…hands…and objects…may convey a sense of intimacy or close-in knowledge.
• Bone-rigged characters may dance and move in different ways. Rigging may be pre-designed and applied to
characters.
• There are ways to create particulate effects (speckles on a transparent background…and motion loops to depict
snow or rain). There are ways to create liquid effects (loops of small-motion movements to depict shimmer, tweens of
water moving in streams, flow, and others).
• Complex elements may be combined for a full scene with (non)simultaneous and / or interacting various
motions.
• Backgrounds may be moved horizontally to simulate motion like a person bicycling down a street or a train or
car or bus moving, and so on.
• Built-out rigs may be applied to characters with the various definitions of limbs. Rigs may be applied to non-
character objects, too.
• Frames can be in various sizes (with a wide range of presets available to various contexts and devices). They can
be portrait (vertical), and they can be landscape (horizontal). They can be made to fit to whatever is placed on the
stage.
• Visual elements may be combined from various sources, even though it helps if everything looks of a piece. In
terms of style, elements should look visually coherent.
• Data driven animations (like carousels, and others, from JSON data) are also possible in Adobe Animate (and
Adobe After Effects).

32
Motion and accessibility
Accessibility elements may be applied to various animated visuals.
1. Textual alternatives (alt text) should be included with the motion visual element. (AI capabilities to assess
these are still somewhat iffy, in many cases.)
2. There should be user ability to “pause/stop/hide” the moving contents.
3. There should never be strobe effects, which can trigger seizures and other physical reactions.
4. Color should not be used alone to convey information. Use text labels or other approaches to convey the
necessary information.
5. Color should be used in a high-contrast and visually accessible way.
6. The color design should be inclusive of those who have color blindness issues. Be careful about combining
colors that may be undifferentiated to those with color blindness issues.
7. Visuals should be adaptive, where possible.
8. Sound should be closed captioned and / or transcripted. There should be an ability to turn off the sound.
Primary audio should be focused on, not other distractive noise (in terms of audio).
9. Visuals should be substantive, not decorative, which all of my examples are…for this training…except for the
motion part that involves the learning of the technology. Motion visuals can be highly distracting to the neural
diverse (and others).
Notes:
Remember not to be limited by the limits of your trainer. Think and do more and do broader. Do different.
Perhaps Animate may be a bridge to Adobe After Effects®, which is the more high-powered software.
Regardless, have fun.
Thanks for your interest in the topic and participation! Squirrel out!

Intro Adobe Animate

More Related Content

What's hot (20)

Similar to Intro Adobe Animate (20)

More from Shalin Hai-Jew (20)

Recently uploaded (20)

Intro Adobe Animate