Introduction to Adobe Edge Animate

Duration: 1 Day


Adobe Edge Animate is a Flash alternative that allows creative professionals animate artwork using HTML5, JavaScript, and CSS3. Edge Animate uses a familiar Adobe interface, borrowing the workspace and user interface conventions of After Effects and Flash Professional. Our Fundamentals of Edge Animate class will show students how to build interactive animations that will play back in a majority of smartphone and tablet based browsers using open standards. Following the course, delegates will be able to create smooth animations with sophisticated interactivity without any complex JavaScript programming.


None other than basic IT competency.

Course includes

A comprehensive set of reference notes covering course topics, follow-up telephone support and, for training on Transmedia premises, lunch and refreshments.

Course outline

Getting Started with Edge Animate

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

Using the Edge Interface

  • Overview of Menus
  • Setting your background
  • Drawing simple shapes using div tags and CSS
  • Using the cmd/ctrl Modifier for drawing
  • Using the Properties panel
  • Using the Stage and Guides
  • Understanding the Elements panel and structural HTML
  • Identifying animated objects

Animation Using the Edge Timeline

  • Importing Assets to Edge Animate
  • Manual animation
  • Automatic animation
  • Using the Pin for Animation
  • Filtering animated and non-animated objects
  • Auto Keyframe Properties Switch
  • Hollow Keyfames
  • Zooming the Timeline

Building Out an Animation

  • Using multiple layers
  • More practice with the Pin for animation
  • Moving the Pin and Playhead
  • Using math expression in the Properties panel
  • Adding a simple Trigger using a JavaScript Snippet
  • Stopping the Timeline
  • Previewing in a Browser
  • Moving Keyframes
  • Modifying Transitions
  • Copy and Paste Animations

Timeline Actions

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

Using Events

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

Building More Interactivity

  • Using Multiple Triggers
  • Customising JavaScript Actions

Edge Animate Publishing

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

This course is available as a private or customised course. Contact us for further information and to customise this course to your exact requirements:

Phone us: 0208 269 4260Book Now

Related Courses

"The course was well structured, clear and in a comfortable setting. The tutoring was exceptional."


"The trainer's knowledge was very strong and he was able to answer all my questions. Admin staff were very friendly and helpful."


"Very clear instruction and presentation."

Hay Group

© Transmedia . 85 Tottenham Court Road, London, W1T 4TQ  UK . 0208 269 4260       Privacy Policy