old post office banner

Adobe Animate

Adobe Animate logoThis software is available free for use at Idea Exchange, Old Post Office, Creative Studios.

Adobe Animate is a software application for designing interactive vector animations for games, apps and the web. Make your digital art come to life or create online graphics that respond to user interactions such as mouse clicks, touch or movement.



How to Guide

Create New Document

Choose the type of document you would like to work with using Create New… on the Start screen. The HTML5 Canvas is a good option for beginners because it will run in most web browsers without the need for plug-in.

Set Stage Resolution and Background

Go to the Properties menu on right side of screen.

Click on the Stage property to select a new colour for the background (the default is white).

Choose the colour you prefer from the available options on the menu and the background will change to that colour.

To change the stage size, go to the Size property’s W (Width) and H (Height) areas. You can make the stage area wider or taller by clicking with your mouse and manually changing the number of pixels in these areas. Click on the default numbers to change them to the ones you want.

Import Content

Select File>Import>Import to Stage. Using the dialog window that opens, select the image file that you wish to import to the scene you are creating.

The Import window will appear with options for your object (i.e. whether it is animated or a background object, etc). These settings will be specific to the project you are working on, but if you need help, consider looking at the tutorials in the Learn More section of this guide for advice on the possibilities available to you. Click Import when you have selected your preferences.

Use the Free Transform tool from the Tools menu to re-shape or re-size imported content to background.

Adding Layers

Similar to Adobe Photoshop and other digital image editing programs, Adobe Animate relies on using layers to separate different levels of an image or animation (for example, keeping a static background separate from an animated character).

Add a new layer by clicking the New Layer icon at the bottom left corner of the Timeline panel.

Use Tools to Fill Out Designs

Add shapes to your basic image using the Rectangle, PolyStar, Line and Ellipsis tools on the Tools menu. Turn Object Drawing Mode on in the Properties menu to draw the shape you want.

Use the Paint Brush tool to create brush strokes and paint directly onto your background.

Preparing a Character for Animation

Select the character you’ve imported to the stage using the Selection tool.

Right-click on the character and choose Convert to Symbol from the menu that appears.

The Convert to Symbol window will open with options to name your character for animation, etc.

At this juncture, the Properties menu will show the character as a movie clip symbol, with properties that may be changed such as position and size.

Repeat this process for all the parts of your scene and character that you wish to animate, so that they are all movie clip symbols in the Properties menu and able to be animated.

Select all the symbols you want to animate, then choose Modify > Timeline > Distribute to Layers.

Using the Distribute to Layers mode to send symbols to separate layers

This sends each symbol to its own layer on the timeline with a stacking order (so for example, a character’s right arm, which is closer to the viewer, might stack further to the front).

You can move items on the timeline to change their stacking order based on how the character is moving and what perspective is most logical.

Animating Your Character

Currently, you only have one frame: the image you are working on at present. To have an animation, you need more frames showing slight changes in a character's position to make it appear to be moving.

Add more frames to the timeline by clicking on the timeline at the number of frames you would like to add. This will create a golden line that you can extend to all relevant layers you will be animating. Choose Modify>Timeline>Frame to finish adding your frames.

Adding more frames to the animation timeline in Animate

Select Insert>Apply Motion Tween to show that you will have motion occurring between each of your frames.

Adding a Motion Tween between each of your frames in Animate

Select Insert > Timeline > Keyframe. Keyframes are those that establish the essential properties of your animation (character, background, etc). The first and the last frame of your animation should always be keyframes.

Once the keyframes are established, go to the middle of your frames and change the properties of each of your animation layers so that they demonstrate the character motions between the first frame and the last frame.

This can be done by selecting Modify > Transform, then choosing the change you want to make to your character’s body to create motion. Options include Free Transform, Scale, Skew and Rotate.

Motion Paths

You can also use Insert > Apply Motion Tween to create a motion path for your character from one side of the stage to another and even off-stage.

To do this, use your mouse to place your character in their starting position for the first frame.

Select Insert > Apply Motion Tween then move to your last frame and use your mouse to move your character to their final position.

The program will create a pink motion path for your character based on how its position changed between the first and last frames. You can move the motion path around to change where your character goes and how they move.

A Motion Path in Adobe Animate

To preview an animation using the PC's native web browser, go to Control > Test.

Saving and Exporting Your Project

Go to File > Save to save your animation as an Adobe Animate file (*.fla). This will allow you to go back in and continue editing in Adobe Animate as needed.

Once your animation is complete and you are happy with the results, you will want to export your creation so it can be viewable elsewhere.

Your Publish settings are viewable from the Property menu. Click Publish Settings, then choose your output file format, save file location and other preferences.You have the option of creating an OAM Package with your save file that may be transferred to other Adobe software programs such as Muse, Dreamweaver or InDesign for incorporation into another project, such as a website.

Click the Publish button when you are done and ready to publish your animation for use in another program or medium.

Learn More