Adobe Edge Animate: The Missing Manual

Adobe Edge Animate: The Missing Manual

by Chris Grover
Released November 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449357238

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

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from O’Reilly and nearly 200 trusted publishing partners.

Start your free trial

Book description

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

The important stuff you need to know:

  • Jump into animation. Master Animate’s elements, properties, and timeline panels.
  • Create and import graphics. Make drawings with Animate’s tools, or use art you’ve created in other programs.
  • Work with text. Build menus, label buttons, provide instructions, and perform other tasks.
  • Make it interactive. Use triggers and actions to give users control over their web experience.
  • Dig into JavaScript. Customize your projects by tweaking your code.
  • Look great at any size. Publish responsive web pages that adjust to any display, tablet, or smartphone.

Table of contents

  1. Adobe Edge Animate: The Missing Manual
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. A Note Regarding Supplemental Files
  4. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgements
    4. The Missing Manual Series
  5. 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
      1. About→These→Arrows
    5. About the Online Resources
      1. Missing CD
      2. Registration
      3. Feedback
      4. Errata
    6. Safari® Books Online
  6. 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. Viewing the Stage
      3. Creating Art in Animate
        1. Rectangles: Building a Basic Box
        2. Selecting and Copying Elements
        3. Transforming Your Rectangle
      4. Aligning, Distributing, and Arranging Elements
        1. Rulers and Manual Guides
        2. Arranging Elements: Z-Order
      5. A Rectangular Animation
        1. Animating by Adding Property Keyframes
        2. Reviewing and Troubleshooting Your Animation
      6. Rounded Rectangles: More than Meets the Eye
        1. A Circle Is a Very Rounded Rectangle
      7. Adding Drop Shadows to Graphics
      8. Clipping the Bits That Need Trimming
      9. Importing Art
        1. Showing and Hiding Elements
        2. The Sliding Show
      10. 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
  7. 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
  8. 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
  9. 4. Publishing Your Composition
    1. 10. Publishing Responsive Web Pages
      1. Adding Background Images to Compositions and Elements
        1. Making the Stage Fill the Browser Window
        2. Setting Minimum and Maximum Widths for Elements
      2. Creating Responsive Designs
        1. Size Questions
          1. Size Questions
          2. Position Questions
        2. Making Graphics that Scale Size
        3. Making Graphics that Scale Position
      3. Creating a Preloader for Your Composition
      4. Accommodating Older Web Browsers
      5. Publishing Your Composition as a Web Page
  10. 5. 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. Auto-Transition Mode
        9. Add Keyframe
        10. Insert Label
        11. Insert Trigger
        12. Create Transitions
        13. Remove Transitions
        14. Invert Transition
        15. Insert Time
        16. Toggle Pin
        17. Flip Playhead and Pin
        18. Snapping
        19. Snap To
        20. Show Grid
        21. Grid
        22. Zoom In
        23. Zoom Out
        24. Zoom to Fit
        25. Expand/Collapse Selected
        26. 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)
  11. Index
  12. About the Author
  13. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  14. Copyright

Product information

  • Title: Adobe Edge Animate: The Missing Manual
  • Author(s): Chris Grover
  • Release date: November 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449357238