Adobe Animate Basics
What is Adobe Animate?
Adobe Animate, formerly known as Adobe Flash, is a multimedia authoring and computer animation program.
Animate can be used to design vector graphics and animation, and publish the same for television pro-
grams, online video, websites, web applications, rich internet applications, and video games.
Setup
You can customize the workspace in Animate to best suite your work method.
Workspace Customization:
Open Adobe Animate
Select Window > Workspaces > Classic
Drag your Timeline to the bottom of the screen by click-and-dragging
the top border of the Timeline. A blue line will appear when you can
place the Timeline, “snapping” it to the bottom panel.
Drag and expand the Tool Bar to the left-side area of the workspace,
snapping it to the panel
Select the Color, Swatches, and Brush Library icon and drag-and-drop
it onto a the panel on the right side of the work space.
Set the percentage of the
canvas to 75% by clicking on
the drop-down menu in the
upper-right of the workspace
and typing in 75.
Completed Workspace:
Setup Cont’d
File Type and Size Settings:
Select Edit > Preferences > Set Undo: to Object-Level
Undo and set the levels to 150
Select New > General > ActionScript 3.0
-Change the Width to 1280 and the Height to 720
-Ensure Frame Rate is 24 fps
Quality Settings:
Go to File > Publish Settings
-Uncheck HMTL Wrapper
Increase the JPEG Quality to 100
Select Audio Stream > Set Bit Rate
to 160 kbps > Set Quality to Best >
Uncheck Convert Stereo to Mono
Select Audio Event > Set Bit Rate to
160 kbps > Set Quality to Best >
Uncheck Convert Stereo to Mono
Keyboard Shortcuts
Keyboard Combos
< > = Move forward & backward on the timeline
Enter = Play/Stop
Ctrl + Alt + C = Copy selected frames and attributes
Ctrl + Alt + V = Paste selected frames and attributes
Ctrl + Z = Undo
Ctrl + Y = Redo
Ctrl + Enter = Preview render
F5 = Add keyframes
F6 = Copy keyframe
F8 = Convert your media/drawing to symbol
Shift + Alt + Q = Onion skin
Setting the Scene
Select the New Layers icon in the lower of the
Layers Panel four times
Double-click Layer 1 and rename it to Background
Re-name the next layers Clouds, Stem, and Flower respectively
Creating a Background
Select the Background Layer
Select the Lock icon in the Layers Panel on all other layers
-This ensures no other layers can be selected or drawn on while working
on the Background Layer
Select the Rectangle Tool
Select the rectangle next to the Fill Color icon below the tools
-Choose a blue for a sky background
Click-and-drag the mouse from the upper left corner to the lower right corner of the
canvas, creating a background for the animation
Setting the Scene Cont’d
Drawing Clouds with the Paint Brush Tool
Select the Lock icon next to the Background layer
Select the Clouds layer and de-select the Lock icon next
to it
Select the Paint Brush Tool (Y)
Go to Brush Library in the right-side area of the work-
space
Select Decorative > Elegant Curl… > and Double-Click a
cloud brush
Select the rectangle next to Stroke in the Properties Panel
and choose a color appropriate for clouds
Select the slider next to the Stroke setting and slide it to the
right to increase the stroke size
Click-and-drag across the top of the Canvas to create a cloud
You can manipulate your creation by first selecting the
Selection Tool (V) and click-and-dragging the
rectangular box over your creation
-Then select the Free Transform Tool (Q)
You can Move, Rotate, Re-Size, and Warp your crea-
tion with this tool
Move the White Circle in the middle of the creation to
change the Rotation Point
Using the Selection Tool (V) select the clouds you have drawn
and Right-Click and select Convert to Symbol (F8)
-Select Graphic as the Type an ensure the center square of the
Registration icon is highlighted
Setting the Scene Cont’d
Drawing a Flower Stem with the Paint Brush Tool
Select the Lock icon next to the Clouds layer
Select the Stem layer, press Y to bring up the Paint Brush Tool again, navigate to the Decorative
> Elegant Curl… > and double-click a Floral Brush
Change the Stroke Color by selecting the Rectangle by the Pencil Icon in the Properties Panel
Change the Stroke Size by using the slider
Draw a flower stem on the canvas
Press V to bring up the Selection Tool and drag it over your stem drawing
(You can press Ctrl + G to group your drawing together to make editing easier)
-Press F8 to convert your drawing into a Symbol
Tip:
You can Hide layers by selecting the Eye icon next to each layer
You can see just the outline of your drawings on other layers by selecting this icon
Setting the Scene Cont’d
Drawing a Flower with the Brush Tool
Lock the Stem layer and move onto the Flower layer, unlocking it
Select the Brush Tool (B)
Choose a Fill Color by selecting the rectangle next to the Paint Bucket icon
Draw a flower, making it into a complete shape
Select the Paint Bucket Tool (K) and fill in the flower
Select the flower and convert it into a symbol (F8)
Completed Scene:
Animation
1. Go to the Timeline to frame 100 and click-and-drag down, highlighting frames
from all the Layers.
2. Right-click and select Insert Frame or press F5
-This creates keyframes between the beginning of your animation until the
100 frame mark. There are 24 frames in one second of animation
3. Go to Frame 10 and highlight down the frames again
4. Press F6, this creates duplicate keyframes from the beginning with all settings and attributes
saved
5. While you have those frames covered by the red Timeline Marker, go into each layer, unlock it,
and edit the item slightly (rotate, skew, warp it)
-(Press V for the selection tool, select the item, press Q to free transform it)
-Remember, you can change the Rotation Point of each item by moving the White Circle
6. Go to Frame 20 and repeat steps 3-5, changing the flower, stem, and clouds gradually again
Ex:
Playback
1. Select the Loop icon underneath the Timeline
2. Drag the borders of the loop tool until it passes your
edited keyframes
3. Press Enter to play the animation
Tweening
Short for in-betweening, the process of generating intermediate frames between two images to give
the appearance that the first image evolves smoothly into the second image.
Select the beginning frame of the Cloud layer
Right-click and select Create Classic Tween
-The frames in between the beginning and the next edited keyframe will turn blue.
-Repeat this process for each frame to create a much smoother, gradual animation
Tip:
Highlight already edited keyframes and press Ctrl + Alt + C to copy them
Move down the timeline and highlight empty frames and press Ctrl + Alt + V to paste the edited
keyframes. This is useful when wanting to return the animation back to the beginning frame with-
out having to eyeball it.
Exporting
Press Ctrl and click-and-drag to cut the extra frames off of the end of your animation.
Go up to File > Export > Export Video > Select Convert video in Adobe Media Encoder > Export
Under Preset, select the drop down arrow and select YouTube 1080p HD at the very bottom
Select the Blue Text under Output File, select a save location, and name the file
Select the green Play icon to export the video
Resources
Lynda.com
- “Learning Adobe Animate CC” - Joseph Labrecque
- “Learning Adobe Animate CC: Animation” - Dermot O’Connor
Youtube.com
- Draw with Jazza YouTube Channel:
“The ULTIMATE Guide to ADOBE ANIMATE CC! (AKA Flash) - Tutorial”
“How to Animate a Bouncing Ball - Like a PRO!”
Adobe.com
-http://www.adobe.com/devnet/flash/articles/avoiding-mistakes-timeline.html
-https://helpx.adobe.com/animate/kb/animate-keyboard-shortcuts.html
