You are previewing Adobe Edge Animate.
O'Reilly logo
Adobe Edge Animate

Book Description

Until now, Adobe Flash dominated the motion world of the web. But proprietary systems are out and open web standards are in - the current trend steadily moves toward HTML and CSS. This is where Adobe Edge Animate comes in. With Edge, Adobe has created a new tool that allows web designers to create interactive and animated HTML content designed to work with any standard browser.

This book shows users what is possible with Edge. It covers every step of the Edge workflow from creation to publication, including how results are implemented into websites and how they are expanded with JavaScript/jQuery. Author Simon Widjaja discusses the basics of working with the Adobe Edge Animate interface and tools, and reveals countless insider tips and tricks, including smart add-ons and extensions that go beyond the official functional range of the program, such as EdgeCommons with SoundJS, CMS, Parallax, and Logging.

With this book as your guide, you will learn how to expand the possibilities of Adobe Edge Animate.

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright Page
  4. Foreword
  5. Contents
  6. 1 Introduction
    1. 1.1 What This Book Is About
    2. 1.2 Moving Target: Open Web Standards
    3. 1.3 Web Animations: Status Quo
  7. 2 Authoring Tool Adobe Edge Animate
    1. 2.1 User Groups
      1. 2.1.1 (Web) Motion Designers, Interface/Interaction Designers, Web Designers, Former Flash Designers
      2. 2.1.2 Graphic/Print Designers Who Want to Expand Their Web Design Services
      3. 2.1.3 E-Publication Producers
      4. 2.1.4 Web Designers and Developers
    2. 2.2 Applications and Workflows
      1. 2.2.1 Edge Animate Banners
      2. 2.2.2 Edge Animate for Storytelling
      3. 2.2.3 Edge Animate on Mobile Devices
      4. 2.2.4 Edge Animate and DPS
      5. 2.2.5 Embedding Edge Animate in Other Pages or CMS
    3. 2.3 Download and Installation
    4. 2.4 User Interface
      1. 2.4.1 Getting Started Panel
      2. 2.4.2 Tools Panel
      3. 2.4.3 The Stage
      4. 2.4.4 Property Panel
      5. 2.4.5 Elements Panel
      6. 2.4.6 Library Panel
      7. 2.4.7 The Timeline
      8. 2.4.8 Workspace
      9. 2.4.9 Keyboard Shortcuts
    5. 2.5 Hello Edge Animate!
    6. 2.6 Edge Animate Runtime Basics
      1. 2.6.1 System Requirements
      2. 2.6.2 HTML & Co.
      3. 2.6.3 A Solid Foundation: jQuery
      4. 2.6.4 The Result and Runtime
      5. 2.6.5 How Code Behaves in Edge Animate
    7. 2.7 Supplementary Tools
      1. 2.7.1 Design Tools and Image Editing
      2. 2.7.2 Code Editors and IDEs
  8. 3 Creation
    1. 3.1 Starting From Scratch (Blank Document)
    2. 3.2 Elements and the Library
    3. 3.3 Starting With an HTML Document
      1. 3.3.1 Animating in Edge Animate
    4. 3.4 Basic Properties
      1. 3.4.1 Position, Size, and Opacity
      2. 3.4.2 Changing Properties With Control Points
      3. 3.4.3 Display Property
      4. 3.4.4 Overflow
      5. 3.4.5 Cursor
      6. 3.4.6 Shadows
      7. 3.4.7 CSS Filters
      8. 3.4.8 Clipping
      9. 3.4.9 Gradients
    5. 3.5 Nesting and Symbols
    6. 3.6 Exporting and Reusing Symbols
      1. 3.6.1 Templates
    7. 3.7 Additional Element Properties
      1. 3.7.1 Stage
      2. 3.7.2 Basic Shapes
      3. 3.7.3 Text
      4. 3.7.4 Image
      5. 3.7.5 Symbol
    8. 3.8 Custom Fonts
      1. 3.8.1 Google Fonts
      2. 3.8.2 Adobe Typekit
      3. 3.8.3 Embedding Fonts in Edge Animate
    9. 3.9 Flexible Layouts
      1. 3.9.1 Relative Values (Percentages)
      2. 3.9.2 Minimum and Maximum Width
      3. 3.9.3 Arranging Elements Flexibly
      4. 3.9.4 Presets for Flexible Layouts
    10. 3.10 Lessons
      1. 3.10.1 Flexible Banners for Different Resolutions
      2. 3.10.2 Independent Layouts for Different Screen Sizes
  9. 4 Animation
    1. 4.1 The Timeline
      1. 4.1.1 Keyframes
      2. 4.1.2 Other Timeline Functions
      3. 4.1.3 Playback
      4. 4.1.4 Modifying Already-Created Animations
    2. 4.2 Non-Linear Animation—Easing
    3. 4.3 Path Animations
    4. 4.4 Symbols and Their Timelines
      1. 4.4.1 Symbols
      2. 4.4.2 Reusing Symbols
      3. 4.4.3 Independent Timelines
      4. 4.4.4 Controlling Timelines With Playback Actions
      5. 4.4.5 Controlling Timelines With Script Statements
    5. 4.5 Lessons
      1. 4.5.1 Banner Animation
      2. 4.5.2 Asynchronous Animation and Playback Actions
      3. 4.5.3 Symbols and Control Through Script
      4. 4.5.4 Character Animation With Sprite Sheets
  10. 5 Interactivity and Scripting
    1. 5.1 Simple Logging
    2. 5.2 Events
      1. 5.2.1 Responding to Events
      2. 5.2.2 User Events
      3. 5.2.3 Composition Events
      4. 5.2.4 Timeline Events
      5. 5.2.5 Symbol Events
      6. 5.2.6 System Events
    3. 5.3 Context of Events
    4. 5.4 Symbols and Elements
    5. 5.5 Actions
      1. 5.5.1 Code Snippets
      2. 5.5.2 Controlling the Timeline
      3. 5.5.3 Calling a URL
      4. 5.5.4 Accessing Symbols
      5. 5.5.5 Accessing Elements
      6. 5.5.6 Modifying Elements
      7. 5.5.7 Dynamically Creating and Deleting Symbols
      8. 5.5.8 Working with Symbol Variables
      9. 5.5.9 The sym Argument
    6. 5.6 Code Panels
    7. 5.7 Edge Code and Brackets
    8. 5.8 Lessons
      1. 5.8.1 Buttons
      2. 5.8.2 Interval Updates Without Timeline (Edge Clock)
  11. 6 Publishing
    1. 6.1 Preparations
      1. 6.1.1 Posters
      2. 6.1.2 Down-Level Stage
      3. 6.1.3 Preloader
    2. 6.2 Export and Settings
      1. 6.2.1 Web Profile
      2. 6.2.2 Animate Deployment Package Profile
      3. 6.2.3 iBooks / OS X Profile
    3. 6.3 Lessons
      1. 6.3.1 Publishing Compositions With FTP
      2. 6.3.2 Embedding Compositions in an HTML Website
      3. 6.3.3 Edge Animate and DPS
      4. 6.3.4 InDesign (DPS)
  12. 7 For Advanced Users
    1. 7.1 External Components
      1. 7.1.1 yepnope.js
      2. 7.1.2 Google Maps
      3. 7.1.3 Videos (YouTube)
      4. 7.1.4 jQuery UI Components
    2. 7.2 Wiring Multiple Compositions on One Page
    3. 7.3 Reusable Components
    4. 7.4 Edge Commons
      1. 7.4.1 Edge Docks
      2. 7.4.2 Loading Edge Commons
      3. 7.4.3 Logging
      4. 7.4.4 Spotlight Overlay (YouTube)
      5. 7.4.5 Parallax Scrolling
      6. 7.4.6 Composition Loader
      7. 7.4.7 Sound
      8. 7.4.8 Data Injection
    5. 7.5 Gaming
      1. 7.5.1 Edge Animate Project
      2. 7.5.2 Game Assets
      3. 7.5.3 Character Control
      4. 7.5.4 Hotspots
      5. 7.5.5 Game Logic
      6. 7.5.6 Conclusion
  13. Index