Adobe Edge Animate CC

Adobe Edge Animate represents the next step in the evolution of interactive and animated Web content development. With the growing adoption of HTML5 standards, modern browsers are now able to display rich media without the need for plug-ins, such as the Flash Player. In conjunction with CSS3 and JavaScript, Edge Animate enables users to integrate animation and complex interactivity for stunning visuals and engaging user experiences.

Who Should Attend

Web designers & animators that want to spend less time coding, and more time designing and animating.

Prerequisites

  • Practical working knowledge of Mac OS X or Windows
  • Some knowledge of HTML5, CSS3 and JavaScript is helpful, but not required.

Course Outline

Note: The curricula below comprise activities typically covered in a class at this skill level. The instructor may, at his/her discretion, adjust the lesson plan to meet the needs of the class.

Lesson 1: Getting Started

  • Starting Edge Animate
  • Getting to know the workspace
  • Working with elements
  • Understanding the Element and Timeline panels
  • Adding motion
  • Previewing the motion
  • Continuing and modifying the motion
  • Next steps

 

Lesson 2: Creating Graphics and Importing Art

  • Lesson overview
  • Understanding graphic formats
  • Working with bitmaps
  • Working with vector graphics
  • Creating HTML elements
  • Modifying rectangles
  • Working with Rulers and Guides
  • Creating text
  • Embedding custom fonts
  • Tidying up your elements
  • Organizing your elements
  • Adding special effects
  • Making rotations

 

Lesson 3: Designing Animation

  • Getting started
  • About animation
  • Understanding the project file
  • Animating position with the Pin
  • Changing pacing and timing
  • Turning the display on and off
  • Animating scale
  • Creating fades
  • Timeline panel options
  • Copying and pasting animations
  • Adding easing to refine motion
  • Editing overall timing
  • Creating Animation on a path

 

Lesson 4: Refining Animation and Adding Complexity

  • Getting started
  • About symbols
  • Creating nested animations
  • Animating symbols on the Stage
  • Creating a looping animation
  • Symbol instances
  • Playback commands
  • Editing symbols
  • Adding the characters
  • Clipping animation
  • Animating shadows
  • Working with advanced eases

 

Lesson 5: Adding Basic Interactivity

  • Getting started
  • About interactive compositions
  • Understanding JavaScript
  • Timeline triggers
  • Minding your syntax
  • Events and actions
  • Creating the buttons
  • Navigating the Code panel
  • Creating labels
  • Adding visual feedback
  • Customizing the mouse cursor
  • Controlling animated elements

 

Lesson 6: Embedding Media and Advanced Interactivity

  • Getting started
  • Embedding media
  • Showing embedded media
  • Removing media
  • Adding hyperlinks
  • Adding HTML content
  • Keyboard events
  • Handling logic with conditionals
  • Using variables
  • Coding an interactive slideshow
  • Final edits

 

Lesson 7: Publishing and Responsive Design

  • Getting started
  • Publishing your composition
  • Down-level Stage
  • Preloaders
  • Embedding your composition into HTML
  • About responsive design
  • Edge Animate resources