Animation & Interactivity for the Web

Learn to build animations and interactivity for the web that will work on iPhones, iPads, tablets and desktop computers alike. With an intuitive interface, that will be familiar to Flash and After Effects users, Adobe Edge Animate offers design tools for text, images, animation and interaction. Edge seamlessly produces the necessary HTML, JavaScript and CSS, compatible with all current browsers and playable on all kinds of contemporary devices.

Important information about the future of Adobe Edge Animate
As of November 2015, Adobe ceased development of the Edge suite of products, including Edge Animate. This means that although you can carry on using the program, there will be no future updates. Here’s an explanation on the Adobe website.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Free course refreshers for public courses

Professional training environment with Macs and PCs

Book a Course

  • Price: $ 995.00
    Time: 9:00am – 4:30pm
  • Price: From $995 +GST per day
  • This course is provided as a custom training session only, please call us on 1300 441 891 or make an enquiry below to schedule your training

Course outline - WHAT you’ll learn

General topics

  • How Edge works, and what it can do
  • Exploring the workspace – Properties, Library, Elements, Timeline
  • Stage settings – dimensions, background colour
  • File and folder structure Saving & managing the project files
  • Previewing in a browser

Drawing & text

  • Creating simple shapes
  • Setting elements properties
  • Applying colours, strokes and gradients
  • Creating text
  • Using standard fonts and fallbacks
  • Formatting text
  • Using the Edge external font libraries
  • Duplicating an object
  • Managing elements – show, hide, lock
  • Smart Guides for layout
  • Arranging & aligning elements

Working with images and video

  • JPEG, PNG, GIF – when and how to use
  • Exporting and working with SVG files
  • Image format, size and resolution
  • Importing HTML5 video
  • Video playback options


  • All about the Timeline
  • Building keyframe animations
  • Generating keyframes and transitions automatically
  • X/Y transitions and motion paths
  • Animating CSS properties – movement, scale, rotation, colour, opacity and more
  • Realistic animation and effects with Ease curves
  • Using the Pin for a faster workflow


  • Reusable elements with Symbols
  • Nesting symbols for more complex animations
  • Working with multiple timelines

Responsive design

  • Setting responsive scaling options
  • Centering the stage


  • Introduction to code snippets
  • Dynamically changing text
  • Timeline labels
  • Looping an animation
  • Timeline triggers


  • Publishing your project for the web
  • Publishing your project for other Adobe software
  • Creating a preloader
  • Creating a poster image
  • Setting a down-level stage

  • Contact Us