Edge Animate CC

$1,195.00


  • Classroom

  • Onsite

← Continue Searching

Duration: 2 Days

Adobe Edge Animate provides 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. With CSS3 and JavaScript, Edge Animate integrates animation and complex interactivity for stunning visuals and engaging user experiences.

What You Will Learn

  • The Edge Animate environment
  • The various graphic formats that Edge Animate uses
  • Embedding custom fonts and adding special effects
  • Various types of animations including symbols, nested animations, and clipping animations
  • Adding interactive events and actions
  • Embedding media
  • Adding additional HTML and JavaScript coding
  • Publishing and responsive designs

Audience

Web designers and animators who want to spend less time coding and more time designing and animating

Prerequistes

Knowledge of HTML5, CSS3, and JavaScript is helpful but not required

Course Outline

Day 1

1. Getting Started

  • Getting to know the workspace
  • Elements
  • Adding motion
  • Previewing
  • Modifying motion

2. Creating Graphics and Importing Art

  • 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
  • Rotations

3. Designing Animation

  • About animation
  • Automating 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

4. Refining Animation and Adding Complexity

  • 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

Day 2

5. Adding Basic Interactivity

  • About interactive compositions
  • Understanding JavaScript
  • Timeline triggers
  • Syntax rules
  • Events and actions
  • Creating the buttons
  • Navigating the Code panel
  • Creating labels
  • Adding visual feedback
  • Customizing the mouse cursor
  • Controlling animated elements

6. Embedding Media and Advanced Interactivity

  • 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

7. Publishing and Responsive Design

  • Publishing the composition
  • Down-level Stage
  • Embedding the composition into HTML
  • Understanding responsive design
  • Edge Animate resources

Course Labs