The University of Texas at El Paso

Adobe Edge Animate: Advanced

Course Name

Adobe Edge Animate: Advanced

Contact Hours: 24 (an estimated time frame devoted to a course of study from start to finish that can vary from student to student)

Course Description

With Adobe Edge Animate: Advanced you'll learn skills and techniques for creating more advanced animated and interactive content employing standard HTML, JavaScript and CSS technologies that will play back on all devices.

By the time a user is done with this training series he or she will know and be proficient in advanced animation techniques, working with symbols, creating responsive animations, adding interactivity to animations with JavaScript actions, and much, much more.

This course can be completed as quickly as you care to progress through it. As a benefit, the e-learner is provided 1 year post course completion access to this course including any updates that are made to the curriculum from the time of official enrollment.

Outcome

You will learn how to:

  • Import content from Adobe Illustrator
  • Use Custom Web Fonts
  • Animate image fade-in and fade-out transitions
  • Create animated buttons
  • Create nested and looping animations

Assessment


This course allows for self-directed work and does not require that you take a test. Apply what you have learned to your own projects.

Outline

Lesson 1: Working with Assets

  • Importing Content from Adobe Illustrator
  • Importing Content from Adobe Photoshop & Flash
  • Exporting & Importing Symbol Libraries
  • Using Adobe Web Fonts
  • Using Custom Web Fonts
  • Adding Web Fonts to Your Composition
  • Making Text Elements Scale in Position
  • Making Shape Elements Scale in Position

Lesson 2: Advanced Animation Techniques

  • Copying & Pasting Properties in the Timeline
  • Using the Paste Special Options
  • Scaling Animations in Size & Position
  • Animating a Filmstrip Slideshow
  • Looking at Advanced Slideshow Elements
  • Adding Button Controls to a Slideshow
  • Previewing the Slideshow Transitions Project
  • Adding Transitions & Interactivity to the Slideshow

Lesson 3: Adding Interactivity with JavaScript Actions

  • About JavaScript
  • How JavaScript Works within Edge Animate
  • Edge Animate Actions, Triggers & Events
  • Survey of Important Edge Events
  • JavaScript Syntax
  • Script Comments
  • Linking to Other Web Pages
  • Changing the Mouse Cursor
  • Creating an Animated Button Rollover
  • Creating Animated Button Symbols

Lesson 4: Advanced Symbol Techniques

  • Previewing the Project
  • Nesting & Looping Animations
  • Controlling Animated Symbols with ActionScript

Lesson 5: Preloaders, Responsive Design & Integration

  • Adding a Preloader
  • Creating Responsive Background Images
  • Setting Min W & Max W
  • Integrating with Dreamweaver CC
  • Integrating with Dreamweaver CS6
  • Closing Credits