Adobe Animate: Introduction

What is Adobe Animate?

Animate is part of the Adobe Creative Suite (like Photoshop, Illustrator, InDesign , Premiere etc.). It was previously called Adobe Flash Professional and retains much of that software’s interface. While it can be used to create interactive animations, apps and web interfaces, we will only use it to create linear character animations in this class.

Interface

The Animate Interface can be setup differently for different usage. The preferred workspace for animation is “Classic” (go to Windows > Workspaces > Classic).

The most important windows when animating are:

  • The Stage is where all the action takes place. This is where you’ll place and adjust your visual elements
  • The Timeline is where you control action through time. It is composed of layers, which are composed of frames (the individual rectangles within each row).
  • The Tool palette is where you’ll find tools to create and edit visual elements. While you can import files from Photoshop and Illustrator into Animate you can also build all your content directly in the software.
  • The Propertieswindow  is context sensitive, and you can set many propertiesdependent on the context, like stage size, stage color etc.
  •  The Library contains some of your resources, for example symbols, sounds, bitmaps – but not necessarily all of them (shapes for example do not show up in the library).

You may want to adjust some of these elements before moving forward (i.e: placing the Timeline at the bottom vs. the top of the interface, placing the Library under the Properties and minimizing unnecessary windows – see below). You can save these adjustments by going to Window > Workspaces > New Workspace.

week2_1
Adobe Animate’s main windows

Settings

To create a new project with settings appropriate for HD videos, go to File > New make the following adjustments and clickOK:

  • Width: 1920px | Height: 1080px
  • Ruler units: Pixels
  • 24 fps (frames per second)
  • Background color: White (you can always change it in Properties window later on)

Go to File > Save As and give your file an appropriate name and location.

You can show or hide the Grid by right-clicking and selecting Grid > Show/Hide Grid. You can also adjust  the Grid size by right clicking and selecting Grid > Edit Grid.

Layers

It’s very important to keep your scene organized. You should place each element of your animation in a separate layer within the Timeline. To create a new layer, click on the New Layer icon at the bottom left of the Timeline. You can rename an existing layer by double-clicking on its name.

Screen Shot 2018-06-04 at 12.26.12 PM
Timeline with 2 layers (“sun” and “sky”)

Keyframes

Animation (no matter the software or technique) is made up of frames. In Adobe Animate, these frames are represented on the Timeline. Before the digital age and software such as Animate, the animator had to draw every single frame (24 drawings for 1 second of animation). In Animate, you can use Keyframes to define “key” stages of the motion. The software then takes care of bridging the gap between two keyframes (see Tweening page). To create a keyframe:

  • Place your cursor on the Timeline on the frame you want to apply the Keyframe to and select Insert Keyframe orpress F6 on your keyboard
Screen Shot 2018-06-04 at 1.40.03 PM
A layer in the Timeline with 2 Keyframes (represented by black dots)