Adobe Animate Training

Adobe Animate (formerly Edge Animate) is a new tool that provides a comprehensive authoring environment for creating animated, and/or interactive media-rich content for the web. Animate can be used to build animated banner ads, entire dynamically animated websites, and even interactive games. With no need for any supporting plug-ins, Adobe Animate creations run seamlessly across desktops, smartphones, and tablets. Adobe Animate outputs HTML, CSS and JavaScript and will run on all modern browsers.

Flash Professional users will feel at home with a familiar timeline-based interface. Coders at all levels of experience can add interactivity with the built-in code snippets or with JavaScript. No knowledge of HTML, CSS or JavaScript is required prior to taking the class.

Introduction and the Adobe Animate Interface

Take a tour of the Animate interface to understand and get familiar wih some of the basic tools and their features. Users of other Adobe products, especially Adobe Flash, will find some striking simlarities. Specifically in this session we will:

Create a new composition in Animate

Understand Animate's file organization and dependent files

Adjust stage settings and document properties

Create simple elements

Move and reposition elements on the stage

Organize overlapping elements

Use the lock and hide options

Add keyframes to create basic motion

Move keyframes to change the pacing and timing

Understand the playhead and the timeline's playback functions

Creating Graphics and Importing Art

Importing and/or creating artwork in Animate, creating and styling text with custom fonts and special effects, and continuing to work with various transformation tools.

Working with bitmap images

Creating and modifying vector shapes

Creating HTML elements

Working with rulers and guides

Creating text

Embedding custom fonts

Organizing your elements

Adding special effects

Making rotations with the properties panel versus the transform tool

Undo mistakes

Designing Animation

In this section we go further with the concept of animation including:

Animate various properties of elements

Use the pin and the playhead

Animate with auto-keyframe and auto-transition modes

Edit keyframes to change pacing and timing

Lengthen or shorten an animation

Create fade-in and fade-out transitions by animating opacity

Copy and paste animation

Reverse an animation

Create abrupt visual changes

Use placeholder assets and swap assets

Apply easing curves to an animation

Add a web font

Refining Animation and Adding Complexity

In this section you'll learn about creating more sophisticated animated effects including the following:

Create symbol

Use symbols for nested animations

Editing symbols

Add a trigger to create a looping animation

Understanding symbol instances

Creating a looping animation

Insert different playback commands for instance

Animate with the clip property

Incorporate drop shadows

Animating shadows

Understanding "easing" and how and why to apply them to animations

Adding Basic Interactivity

In this section, you'll learn how to incorporate basic interactivity with the following techniques:

Understanding interactivity in Animate

Understanding how JavaScript works and work with the JavaScript syntax

Differentiate between triggers, events, and actions

Add triggers to the timeline

Create labels

Create buttons that respond to events

Edit script in the code panel

Adding visual feedback for buttons

Controlling animated elements

Customize the cursor

Embedding Media and Advanced Interactivity

In this lesson, we'll show you how to add Google Maps and YouTube videos to your Animate project and start working with more sophisticated forms of interactivity.

Add events to the stage

Embed a YouTube video in your composition

Embed a Google map in your composition

Dynamically remove elements from the stage

Add hyperlinks

Replace text

Render HTML text

Respond to keyboard presses

Understand key codes to identify specific keys

Handle logic with conditional statements

Use variables

Understand concatenation

Program loops for repeated actions

Publishing and Responsive Design

After creating and finishing an Animate composition, the next is to publish it to the web. In this section, we'll look at various publishing options including a fallback option for older browsers, embedding the Animate project in a HTML page and a look at making your Animate project "esponsive" so that it can respond to different sizes of the browser window.

Explore the various publishing options

Publish your composition for the web

Add a down-level stage for unsupported browsers

Capture a poster image for a down-level stage

Incorporate a preloader

Set the overflow options for your stage

Embed your composition into an existing HTML page

Responsive Design

Apply responsive design techniques to make your layouts adapt to a variety of screen and device resolutions for the most optimal experience including:

Make the Stage resizable

Restrict the dimensions of the stage resizing

Apply percent-based layouts

Use layout presets

Prerequisites:

A solid understanding of Windows file management, the concepts of right-clicking and selecting object properties

Familiarity with the Adobe common interface: palettes, windows, and properties