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

"Excellent. The right pace, the right style- great overall!"

Goldsmiths University of London

"I just wanted to let you know that I've managed to replicate the steps you showed me in FileMaker on my organisation's database and have managed to get my invoicing layouts to work perfectly. Thank you very much! I've also been able to use some of the other things you showed me to good effect too so the course has already helped enormously. Just thought you should know :-)"

Julian Support

"First class - The trainer was extremely knowledgeable and answered all our questions."




© Transmedia . 277 Greenwich High Road London SE10 8NB  UK . 0208 269 4260
Designed by Transmedia's Web Team