Start Building HTML5 Animations Today

Create a complete Adobe Animate project from beginning to end.

Adobe Animate is a web motion design tool that allows creative professionals to animate artwork using HTML5, JavaScript, and CSS3. Animate uses a familiar Adobe interface, borrowing the workspace and user interface conventions of After Effects and the former Flash Professional.

Lodestone’s Adobe Animate class will allow student to build interactive animations that will play back in a majority of smartphone and tablet based browsers using open standards. Create smooth animations with sophisticated interactivity without any complex JavaScript programming.

Let your creativity shine with Adobe Animate.

  • Learn essential skills in just one day!
  • Hands-on exercises
  • View class recordings for up to six months
  • Instruction from eLearning experts

Time: 10 AM – 4:30 PM ET
Length: 1 Day Class
Type: Instructor-led
Materials: Handouts, templates and course assets
Location: Online via Lodestone Live

Cost: $349.00

Learn It In A Day:

Lesson 1: Getting Started with Animate

  • Understanding the Animate Workflow
  • What Does Animate Create?
  • HTML5, CSS3 and JavaScript overview
  • What is the DOM?
  • What is Webkit?
  • Planning Your Animation
  • Implementing Your Animation in Dreamweaver

Lesson 2: Using the Adobe Animate Interface

  • Overview of Edge Menus
  • Setting your background
  • Drawing a simple shapes using DIV tags and CSS
  • Using the CMD/CTRL Modifier for drawing
  • Using the Properties panel
  • Using the Stage and Guides
  • Identifying animated objects

Lesson 3: Animation Using the Animate Timeline

  • Importing Assets to Animate
  • Manual animation
  • Automatic animation
  • Auto Keyframe
  • Generate Smooth Transitions
  • Hollow Keyfames and jumps
  • Zooming the Timeline

Lesson 4: Building Out an Animation

  • Using multiple layers
  • Moving the Playhead
  • Adding a simple Trigger using a JavaScript Snippit
  • Stopping the Timeline
  • Previewing in a Browser
  • Moving Keyframes
  • Modifying Transitions
  • Copy and Paste Animations

Lesson 5: Timeline Actions

  • Adding Timeline Labels
  • Adding Timeline Actions and Triggers
  • Modifying JavaScript
  • Playing in Reverse

Lesson 6: Using Animate Events

  • Overview of Events: Mouse, Touch and jQuery Mobile
  • Adding an Event Handler to an Object
  • Setting Parameters
  • Creating Buttons
  • Changing Button Labels

Lesson 7: Building More Interactivity

  • Using Multiple Triggers
  • Customizing JavaScript Actions

Lesson 8: Animate Publishing

  • Understanding the JavaScript Includes
  • What is jQuery?
  • What is JSON?
  • The Animate Content DIV Tag
  • Placing your Animate content in a site