Animate Guide

The color palette comparison below demonstrates how the I-See- U universal palette matches the red's and green's color attention to the color-blind simulation. The full-color palette shows how, when not adjusted, the red's and green's attention factors will not translate correctly for a red-green color-blind person. These Universal Palette Colors are restricted to those that can be achieved using the CYMK offset printing process.

Download the I-See-U Universal Color Palette Here (external link). Then, reference this Adding Colors Demo (external link) for importing it into Adobe Animate.

I-See-U Universal Palette

Universal Color Palette with Colorblind Filter

Red-Green Color-blind Simulation

Full Color Palette for print & web

Color Blindness Simulators:

(1) Chromatic Vision Simulator

This color-blind simulation mobile app (external link) runs on both the Android and iOS smart phones. with the app running, designers can simply aim their phone camera at any digital display, physical print, object, or environment and it will simulate three types of color-blindness. (free)

(2) Color Oracle Simulator

A native app for MAC and PC that simulates colorblindness for anything currently showing on a display (external link)y(external link). (free)

Viewing a colorful laptop screen through a smart phone using the simulator

Importing

Importing from Photoshop

1. In Adobe Animate - go to File > Import > Import to Stage OR Import to Library > get your file

Import to Stage will add your object to both the stage (your canvas) and library.

Import to Library will add it only to the library; you will have to add it to the stage yourself.

2. In the dialogue box that pops up, choose the your import options. This will depend on your specific project.

3. Click "Okay."

Timeline

Onion Skinning: viewing or moving more than one frame at a time
See the adobe guide to the timeline
Timeline: Help from Adobe
Function Shift F5 = remove frame
Shift F5 = add frame
You can go to the top timeline with your timeline indicator and it will add or remove for all of your layers, if you are in a layer you are adding or removing only on that layer

Frame by Frame Help in Animate

Adobe Guide including onion skinning and changing an ease to a frame by frame to start

Layers

Folder Set up Method

Each Character has a folder and each animating asset is on it's own layer not nested in a symbol

Get file for Folder Set Up Method

Easing

Lines, Fills, and Gradients

Adobe's guide to Strokes, fills and gradients in Animate

Color

Universal Color ratios required

Universal Color Swatches added to Animate

Symbols

Symbols can be used for a number of purposes. A symbol can be created once, and used multiple times (each time is called an "instance"). Symbols can be animated using tweens, and each symbol has its own timeline.

Create a symbol:

Select the whole asset
Choose Modify > Convert to Symbol, or hit F8 (or Function F8)

3. Name your symbol "title" and leave the type as "graphic"

See the DLC symbol tutorial for more info.

See Adobe's Guide to Symbols

Making Symbols in Animate

Types of Symbols

Adobe Animate uses three types of symbols: graphic, movie clip, and button.

Graphic - The most basic symbol. Graphic symbols can be used to group separate pieces, animate with tweens and create character rigs. Animations inside graphic symbols play with the main timeline.

1. We will mainly use graphic symbols for this character animation. Start your symbols off by turning them into graphic symbols.

Movie Clip - Movie clip symbols play independently of the main timeline, which makes them useful for containing animations, and can be used with ActionScript. They also have additional properties and color options.

1. In the post production we use movie clips to adjust color or add strokes or drop shadows.
2. We use movie clips sometimes for walk cycles or the spinning of Izzy's Cement truck barrel or anything that will always be repeating.

Button - Button symbols are used with ActionScript. Unlike other symbols, the timeline of a button has only four frames. Each frame is a different button state (up, over, down and hit). For more on button symbols, check out our Introduction to ActionScript 3.0.