About this Course

Adobe® Edge Level 1 is designed for the web designer who needs to create a more engaging, interactive, online experience for their clients. In this two day instructor-led class students will learn to create interactive and animated content that runs seamlessly across desktops, smart phones, and tablets. Adobe Edge Animate creates Web-Standards compliant graphics with animation and interactivity using HTML5.

Audience Profile

This class is for students who want to learn to develop animations for their web sites.

At Course Completion

Upon successful completion of this course, the student will have covered the following topics:

• Get to know the Edge workspace
• Work with the timeline
• Work with bitmaps and vector graphics
• Use special effects
• Create Edge project files
• Add easing, pacing and timing to the annimation
• Nested animations
• Create and edit symbols
• Looping an animation
• Add interactivity with javascript and built-in code snippets
• Embed media file
• Create preloaders
• Publish your composition

Prerequisites

Before taking this course, students should be familiar with the basic functions of their computer’s operating system such as creating folders, launching programs and working with windows. HTML and Javascript knowledge is helpful but not a requirement. 

Course Outline

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

• 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

• 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

Lesson 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

Lesson 5: Adding Basic Interactivity

• 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

• Embedding Media
• Showing Embedded Media
• Removing Media
• Adding Hyperlinks
• Adding HTML Content
• Keyboard Events
• Handling Logic with Conditionals
• Using Variables
• Coding the Interactive Slideshow
• Final Edits

Lesson 7: Publishing and Responsive Design

• Publishing your Composition
• Down-Level Stage
• Preloaders
• Embedding your Composition into HTML
• About Responsive Design
• Edge Animate Resources