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

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.

You can customize the workspace in Animate to best suite your work method.

Workspace Customization:

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

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

Quality 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

File Type and Size Settings:

Keyboard Shortcuts

< > = 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

Keyboard Combos

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

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

Creating a Background

Setting the Scene Cont’d

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

Drawing Clouds 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

Setting the Scene Cont’d

Drawing a Flower Stem with the Paint Brush Tool

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

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)

Setting the Scene Cont’d

Drawing a Flower with the Brush Tool

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