Introduction to Adobe Edge Animate

William Harrel’s latest online class, Introduction to Edge Animate Launches January 2013

Until recently, Web designers relied on Adobe Flash and other application-development programs for creating animated and interactive Websites.

While this approach served us well for many years, it had its share of drawbacks and limitations—not the least of them being forcing site visitors to download huge embedded files and rely on various plugins (Flash Player, for example) to play the content. Now, by combining HTML5, CSS3 and JavaScript, we can create much of our animations and interactivity with browser-compatible code, which downloads and processes much faster than embedded animations and applications.

The problem with this approach is that, to create sophisticated animations and interactivity, you need to be fairly proficient at composing at least three types of Web programming languages. And that’s where Adobe Edge Animate comes in. Edge Animate provides a what-you-see-is-what-you-get (WYSIWIG) interface, where you layout your animations and interactivity on a stage and timeline, and Edge Animate in turn creates all the necessary code. Edge Animate eliminates a lot of the trial-and-error and research, making creating the animated and interactive sections of your pages much less time-consuming, as well as easier and less frustrating.

Week 1 – Introducing Edge Animate
• What is Edge Animate?
• How Edge Animate Makes Animation and Interactivity Easier
• WYSIWIG Design versus Hand-Coding
• What You can do with Edge Animate
• The Edge Animate Interface
• Creating Your First Edge Animation

Week 2 – Edge Animation Basics
• Creating Objects in Edge Animate
• Importing Objects into Edge Animate
• Text Objects
• The Edge Animate Timeline
• Auto Keyframes and Auto Transitions
• Revisiting Simple Animations

Week 3 – Deploying Your Edge Animate Creations
• Animating Existing Web Pages
• Inserting Edge Animations into Your Web Pages
• Deploying Your Edge Animations with Dreamweaver
• Publishing Your Edge Animations
• Testing and Tweaking

Week 4 – Creating Sophisticated Edge Animate Layouts
• Laying Out the Stage
• Animating Multiple Objects
• Reusing Content with Symbols
• What Else You can do with Symbols
• Deploying Symbols

Week 5 – Interactivity
• Understanding Edge Animate Interactivity
• What is Interactivity?
• What Kinds of Interactivity can Edge Create?
• Creating Simple Links
• Creating Simple Buttons
• Navigating the Timeline with Buttons
• Loading External Edge Animate Content

Week 6 – Edge Animate Utilities
• Coding Your Edge Creations
• Coding Individual Objects
• Adobe Edge Code Preview
• Adobe Edge Inspect
• Adobe Edge Reflow
• Adobe Edge Web Fonts
• Adobe Typekit
• Adobe Edge PhoneGap Build

Introduction to CSS3Several years ago, cascading style sheets (CSS) revolutionized Web design. CSS freed Web designers from depending on woefully inadequate HTML tables to create highly stylized Web pages. It provided us with the means to format and reformat multiple pages from one single set of styles, thereby liberating us from the tedious task of formatting one page at a time. Enter CSS3, the next generation of Web design. Special effects, animations, transitions, gradients – all the content we’ve traditionally fallen back on graphics and animation software to achieve are now at our fingertips through CSS code. CSS3, the first revision to cascading style sheets since the advent of handheld smartphones and tablets, is here, now, ready for prime time. Don’t miss William Harrel’s Introduction to CSS3 The first session starts April 16, 2012. See you there!

This is a complete, hands-on class in creating Websites with CSS3. Here’s what we’ll cover:


Week 1 – Introduction to CSS3

  • What are Styles?
  • What are Style Sheets?
  • How do Style Sheets Cascade?
  • Evolution of CSS
  • CSS and HTML
  • CSS—A  Bunch of Rules
  • The Anatomy of a CSS Rule
  • Why CSS3?

Week 2 – CSS3 and HTML5

  • What is HTML5?
  • HTML5 Page Structure
  • HTML5’s Built-In Containers
  • Create an HTML5 Page
  • CSS3 and HTML5 Working Together
  • CSS3 and Earlier Versions of HTML

Week 3 – In Depth CSS

  • Class, Type, ID and Compound Selectors
  • Inline, Internal and External Styles
  • CSS Containers
  • CSS Rules for Adapting to Display Size and Device Type
  • CSS Print Media Formatting

Week 4 – Formatting a Page with CSS3

  • CSS3 Page Sections and Includes
  • Format Boxes with CSS3
  • Format Text with CSS3
  • Format Images and other Media with CSS3

Week 5 – CSS3 Special Effects

  • CSS3 Shadow and other Text Effects
  • CSS3 Box Shadow and other Box Effects
  • CSS3 Color Gradients and Fills
  • CSS3 Menu and Navigation Formatting Effects
  • CSS3 Background Effects
  • Use WebKit, Mozilla and other Browser Extensions with CSS3

Week 6 – CSS3 Animations, Transitions and Transformations

  • Create and Animate Simple 2D Shapes
  • Create Page and Object Transitions
  • Create Object 2D and 3D Transformations
  • WebKit and other Browser Extension Transformations

Week 7 – CSS3 and Mobile Devices

  • CSS3 Formatting Based on Screen Size and Device Type
  • Integrate CSS3 and JavaScript
  • Integrate CSS3 and jQuery
  • Media Quires
  • Viewport
  • Device Orientation

Week 8 – CSS3 Advanced Techniques

  • Fluid, Multicolumn Pages
  • Stylized Links
  • Format Form Fields with CSS3
  • CSS3 Sprites
  • CSS3 Drop-Down Menus