You are previewing Foundation Adobe Edge Animate: for HTML5, CSS3, and JavaScript Development.
O'Reilly logo
Foundation Adobe Edge Animate: for HTML5, CSS3, and JavaScript Development

Book Description

Foundation Adobe Edge Animate is a project-oriented book that will walk you through the features of Edge Animate - Adobe's exciting new motion and interaction tool for web standards development. Edge Animate is an application that allows web designers and developers to make full use of many of the features of CSS3, JavaScript, and HTML5.

Edge Animate enables you to animate graphics without the need to hand code everything using canvas or SVG. It exports well-formed, standards-compliant code that you can either use to create new web products, or add directly into existing projects. It also features full JavaScript and DOM manipulation, enabling you to get under the hood and create fantastic interactive experiences.

Using a unique project-oriented focus you will be creating carefully developed projects designed to give you the skills and confidence necessary to undertake interactive and web design experiences aimed at devices ranging from smart phones to the TV set in your living room. Along the way you will discover how many of the tools in the Adobe Web Design CS6 collection can be fully utilized to create expressive and engaging web applications. This includes:

  • Building interactive projects using the Edge Animate timeline and coding tools.

  • Learning how Fireworks, Photoshop, and Illustrator are used for Edge Animate content creation.

  • Discovering how pages created in Dreamweaver and Muse can become fully interactive and contain motion graphics in Edge Animate.

What you'll learn

  • Use Edge Animate to create web sites and applications

  • Create web graphics without the need to hand code in canvas

  • Add JavaScript animation and interactivity to your projects

  • Integrate Edge Animate content with your own HTML5 projects

  • Easily handle DOM events

  • Combine Edge Animate with Dreamweaver and Muse

Who this book is for

Web standards developers needing a simple tool to create interactive experiences in HTML5, CSS3, and JavaScript.

Flash developers transitioning over to web standards development will also find this book invaluable.

Table of Contents

  1. Titlepage
  2. Dedication
  3. Contents at a Glance
  4. Contents
  5. About the Authors
  6. About the Technical Reviewer(s)
  7. About the Cover Image Designer
  8. Acknowledgments
  9. Foreword
  10. Introduction
    1. Book Structure and Flow
    2. Layout Conventions
  11. Chapter 1: Learning the Edge Animate Interface
    1. Getting Started
    2. You Have Learned
  12. Chapter 2: Creating Timeline Animations: Part 1
    1. Auto-Keyframing
    2. Adding Transitions to an Element
    3. Creating Anticipation
    4. Animating with the Pin
    5. Clipping Elements in Edge Animate
    6. Using Transitions to Swap Images
    7. Swapping Assets
    8. “Recycling” Edge Animate Transitions
    9. Animating with Eases
    10. Curved Paths in Edge Animate
    11. You Have Learned
  13. Chapter 3: Creating Timeline Animations: Part 2
    1. Shape Tweens
    2. Shadows and Gradients
    3. Nesting Elements
    4. Symbols in Edge Animate
  14. Chapter 4: Creating Graphics for Edge Animate
    1. Understanding Graphic Formats
    2. Choosing the Right Format
    3. Adobe Edge Animate and Photoshop
    4. Creating Graphics in Illustrator
    5. From Illustrator to Adobe Edge Animate
    6. Fireworks and Adobe Edge Animate
    7. Preparing Flash Animations for Use in Edge Animate
    8. Creating a Sprite Sheet in Flash Professional CS6
  15. Chapter 5: Working with Type in Edge Animate
    1. Fonts and Typefaces
    2. Meet Your New Best Friend: Web Fonts
    3. You Have Learned
  16. Chapter 6: Adding Interactivity in Edge Animate
    1. Edge Animate and Code
    2. The Fundamentals of JavaScript
    3. Understanding the Document Object Model
  17. Chapter 7: Edge Animate and the Web
    1. Edge Animate’s Web Publishing Options
    2. The Purpose of the Files Edge Animate Creates
    3. Edge Animate Compositions and Dreamweaver CS6
    4. Adding Edge Animate Compositions to Adobe Muse
    5. Preparing Content for Older Browsers
    6. Adding Preloaders to Edge Animate Compositions
    7. Edge Animate and HTML/CSS Overflow
    8. Beyond the DIV Tag
    9. You Have Learned
  18. Chapter 8: Adding a Bit of “Wow”
    1. Project 1: Falling Letters
    2. Project 2: Attracted to Detail
    3. Project 3: Create a Starfield
    4. Project 4: Create a Flash Preloader
    5. Project 5: Creating a Pop-Down Menu in Edge Animate
    6. You Have Learned
  19. Chapter 9: Edge Animate and Digital Publications
    1. Understanding Print vs. Screen Models and Resolution
    2. Digital Publication Formats
    3. Edge Animate’s Formats for Digital Publishing
    4. Adding Edge Animate Content with Adobe InDesign
    5. Using Folio Builder to Create a Simple Folio
    6. You Have Learned
  20. Chapter 10: Edge Animate Goes Mobile
    1. The Modern Mobile Web
    2. Phones, Tablets, and Phablets
    3. Creating a Mobile App with Edge Animate and PhoneGap
    4. Using Edge Inspect with Edge Animate
    5. Responsive Design with Edge Animate
    6. You Have Learned
  21. Index