Foundation Adobe Edge Animate: for HTML5, CSS3, and JavaScript Development

Foundation Adobe Edge Animate: for HTML5, CSS3, and JavaScript Development

Released December 2012
Publisher(s): friends of ED
ISBN: 9781430243502

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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

    Product information

    • Title: Foundation Adobe Edge Animate: for HTML5, CSS3, and JavaScript Development
    • Author(s):
    • Release date: December 2012
    • Publisher(s): friends of ED
    • ISBN: 9781430243502