Animation with Adobe Edge

Scheduled Dates

To find scheduled course dates or book securely click below


RRP: £295.00
Web Special: £295.00

Multi Place Discounts

Looking to book more than one course, or for more than one person? Our Multi Place Discounts allow you to save 10% when you book 2 places or 15% if you book 3 or more places. Call us free on 0800 156 0777.

Animation with Adobe Edge is a one day training course which takes you through the basics of using the new Adobe Edge package to create animated web content using standards like HTML5, CSS3 and JavaScript.

The course covers topics such as the Adobe Edge interface, working with the timeline, importing graphics, creating animations, creating realistic motion, using animation within your webpages and more.

This course focuses on the Adobe Edge application and does not cover the actual HTML5 syntax / code,  which is covered in our HTML5 Getting Started and Advanced HTML5 courses.

Audience

This course is aimed at web designers who want to be able to create animations on their web pages without the use of Flash or other plugins.

Prerequisites

Before attending this course you should have attended the Intro to HTML and CSS courses or have an equivalent level of ability.

Course Overview

  • Animation on the web - the role of JavaScript and CSS
  • What is Adobe Edge
  • Why use Adobe Edge

The Adobe Edge Interface

  • Tools
  • Shapes
  • Text
  • The Stage
  • The Elements panel
  • The Properties panel
  • The Timeline panel
  • Workspaces

Creating animations with Adobe Edge

  • The basics of animation
  • Animation concepts
  • Frame-based animation
  • Auto-generation

Animating your Adobe Edge objects

  • Creating a project
  • Setting up your project
  • Creating objects
  • Object properties
  • Using the timeline

The Adobe Edge Timeline

  • Adding movement
  • Reversing movement
  • Transitions
  • Keyframes
  • Playing your animations

Text

  • Text and the web
  • Adding text
  • Text properties
  • Animating text
  • Rotating text

Importing graphics into Adobe Edge

  • Graphic file types
  • Using svg files
  • Using gifs
  • Using jpgs
  • Using pngs
  • Animating your imports

More animation with Adobe Edge

  • Creating realistic motion
  • Easing
  • Targeted transitions

Using your animation within your web page

  • Preview your animation 
  • Looking at the source files created
  • Inserting your animation into an already existing web page
  • Looping
  • Animating web pages
  • Repeating actions
  • Creating HTML menus