Cover image for Adobe Edge Animate Preview 7: The Missing Manual

Book description

Want to create animated graphics for iPhone, iPad, and the Web, using familiar Adobe features? You’ve come to the right guide. Adobe Edge Animate Preview 7: The Missing Manual shows you how to build HTML5 graphics with Adobe visual tools. No programming experience? No problem. Adobe Edge Animate writes all the code for you. With this book, you’ll be designing great-looking web elements in no time.

Table of Contents

  1. Adobe Edge Animate Preview 7: The Missing Manual
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. Introduction
    1. Why Use Adobe Edge Animate?
    2. Where to Find Adobe Edge Animate
    3. About This Book
      1. Macintosh and Windows
      2. About the Outline
    4. The Very Basics
    5. About→These→Arrows
    6. About the Online Resources
      1. Missing CD
      2. Registration
      3. Feedback
      4. Errata
    7. Safari® Books Online
  4. 1. Working with the Stage
    1. 1. Introducing Adobe Edge Animate
      1. Creating and Saving Edge Animate Projects
      2. A Tour of the Animate Workspace
        1. Saving a Custom Workspace
      3. Building Your First Animation
        1. Viewing Your Animation in a Browser
    2. 2. Creating and Animating Art
      1. Setting the Stage
      2. Creating Art in Animate
        1. Rectangles: Building a Basic Box
        2. Selecting and Copying Elements
        3. Transforming Your Rectangle
      3. Aligning, Distributing, and Arranging Elements
        1. Rulers and Manual Guides
        2. Arranging Elements: Z-Order
        3. A Rectangular Animation
        4. Animating by Adding Property Keyframes
        5. Reviewing and Troubleshooting Your Animation
      4. Rounded Rectangles: More than Meets the Eye
        1. A Circle Is a Very Rounded Rectangle
        2. Adding Drop Shadows to Graphics
        3. Clipping the Bits That Need Trimming
        4. Importing Art
        5. Showing and Hiding Elements
        6. The Sliding Show
      5. On/Off: Another Way to Show and Hide Elements
    3. 3. Adding and Formatting Text
      1. Adding Text to Your Project
        1. About Text Containers
      2. Changing Text-Specific Properties
        1. About Typefaces and Fonts
      3. Using Web Fonts
        1. Adding Web Fonts to Your Composition
      4. Changing Other Text Properties
      5. Clipping Text Around the Edges
      6. Making That Headline Drop In
      7. Dealing with the Template
      8. Adding Some Bounce
        1. Creating a Bounce Manually
        2. Using Animate’s Prebuilt Bounce
      9. Adding Links to Text
      10. HTML Tags in Animate
  5. 2. Animation with Edge Animate
    1. 4. Learning Timeline and Transition Techniques
      1. Introducing the Timeline
        1. Choosing a Moment in Time
        2. Adding Labels to the Timeline
        3. Editing Labels
      2. Understanding Elements’ Timeline Controls
        1. Showing, Hiding, and Locking Elements
      3. Using Timeline Keyboard Shortcuts
      4. Creating Transitions
        1. Creating Instant Transitions
        2. Setting the Pin for a Smooth Transition
        3. Manually Adding and Removing Property Keyframes
        4. Editing Transitions
        5. Adding Easing, Reversing Motion, and Fine-Tuning Transitions
      5. Animating a Filmstrip
      6. Dealing with Timeline Claustrophobia
    2. 5. Triggering Actions
      1. Elements, Triggers, and Actions
        1. Trigger Your First Action
      2. Triggering Actions in Other Elements
      3. Triggers and Actions for the Stage and Timeline
        1. Deleting Triggers and Actions
        2. Adding Triggers to the Stage
        3. Editing an Action
      4. Timeline Triggers and Tricks
        1. Adding a Trigger to Loop Your Animation
        2. Using Labels in Your Timeline Code
        3. Adding Triggers to a Point in Time
      5. Sliding Show Revisited
      6. Non-Linear Thinking and Design
      7. Timeline Button Controls
      8. Triggers for iPhones and Androids
    3. 6. Working Smart with Symbols
      1. About Symbols
      2. Building with Symbols
        1. Building a Multipart Leg Symbol
        2. Creating a Curved Line with a Rounded Rectangle
      3. Nesting Symbols within Symbols
      4. Working with Symbol Timelines
      5. Animating a Symbol on the Stage
        1. Duplicating and Renaming Symbols
        2. Deleting or Undoing a Symbol
      6. Create a Button Symbol with Rollover Action
        1. Grouping Elements Without Symbols
        2. Adding a Click State to Your Button Symbol
        3. Making Your Button Open a Web Page
      7. Moving Symbols Between Projects
      8. Building a Drop-Down Menu System
      9. Creating Text Callouts with Rollover Action
        1. Create and Animate Your Callouts
        2. Changing the Cursor to Provide User Feedback
  6. 3. Edge Animate with HTML5 and JavaScript
    1. 7. Working with Basic HTML and CSS
      1. Reading HTML Documents
        1. Playing Tag the HTML Way
        2. Creating a Hyperlink with HTML
      2. Reading CSS Files
        1. Applying CSS Styles to Element IDs and Classes
      3. Reading the HTML Animate Creates
      4. Opening an HTML Document in Animate
      5. Placing Your Composition in an HTML Document
      6. Centering an Animate Composition
      7. Placing Two Animate Compositions on the Same Page
    2. 8. Controlling Your Animations with JavaScript and jQuery
      1. A Very Brief History of JavaScript and jQuery
        1. JavaScript Versus ActionScript and Other Languages
      2. Sleuthing Through the JavaScript Animate Creates
        1. Adding a New Element to the Stage
      3. JavaScript and jQuery Basics
        1. Operators in JavaScript
        2. Conditional Statements in JavaScript
        3. Understanding the Document Object Model (DOM)
      4. Natural Selection the jQuery Way
      5. “this” and “sym” Are Special Words
    3. 9. Helpful JavaScript Tricks
      1. More Showing and Hiding Tricks
        1. Delaying Action for Show, Hide, and Toggle
        2. Fading In and Out
        3. Slip Sliding Up and Down
        4. More Visual Effects with Animate()
        5. What, No Slide Left and Slide Right?
      2. Swapping Images in Animate
        1. Photo Gallery Revisited
          1. Other Uses for Rollovers
      3. Identifying and Changing Elements and Symbols
        1. Assigning Variables
        2. Using Actions to Assign Variables
        3. Checking Values with Text Boxes and Alert Dialogs
          1. Using Alert() Dialog Boxes to Check Values
      4. Identifying Elements within Symbols
      5. Playing a Symbol’s Timeline
        1. Getting the Current playhead position
      6. Using Conditional Statements
        1. Slideshow Control with the if() Conditional
        2. Using switch() to Handle Multiple Conditions
  7. 4. Appendixes
    1. A. Installation and Help
      1. Edge Animate System Requirements
      2. Installing Edge Animate
        1. Installing Edge Animate for Windows
        2. Installing Edge Animate for Mac
      3. Uninstalling Edge Animate
        1. Uninstalling Edge Animate for Windows
        2. Uninstalling Edge Animate for Mac
      4. Getting Help
        1. Books for HTML, CSS, JavaScript, and jQuery
        2. Online Help
    2. B. Menu by Menu
      1. File
        1. New
        2. Open
        3. Open Recent
        4. Close
        5. Close All
        6. Save
        7. Save As
        8. Revert
        9. Publish Settings
        10. Publish
        11. Preview in Browser
        12. Import
      2. Edit
        1. Undo
        2. Redo
        3. Cut
        4. Copy
        5. Paste
        6. Paste Special
        7. Duplicate
        8. Select All
        9. Transform
        10. Delete
        11. Keyboard Shortcuts
        12. Special Characters (Mac only)
      3. View
        1. Zoom In
        2. Zoom Out
        3. Actual Size
        4. Rulers
        5. Guides
        6. Snap to Guides
        7. Lock Guides
        8. Smart Guides
        9. Preloader Stage
        10. Down-level Stage
      4. Modify
        1. Arrange
        2. Align
        3. Distribute
        4. Convert to Symbol
        5. Edit Symbol
      5. Timeline
        1. Play/Stop
        2. Return
        3. Go to Start
        4. Go to End
        5. Go to Previous Keyframe
        6. Go to Next Keyframe
        7. Auto-Keyframe Mode
        8. Instant Transition Mode
        9. Add Keyframe
        10. Insert Label
        11. Insert Time
        12. Toggle Pin
        13. Flip Playhead and Pin
        14. Snapping
        15. Snap To
        16. Zoom In
        17. Zoom Out
        18. Zoom to Fit
        19. Expand/Collapse Selected
        20. Expand/Collapse All
      6. Window
        1. Workspace
        2. Timeline
        3. Elements
        4. Library
        5. Tools
        6. Properties
        7. Code
        8. Lessons
      7. Help
        1. Animate Help
        2. Edge Animate JavaScript API
        3. Edge Animate Community Forums
        4. Change Language
        5. Adobe Product Improvement Program About Animate (Windows only)
  8. Index
  9. About the Author
  10. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  11. Copyright