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


  • 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