Adobe Edge Animate by Grover, Chris -- Read -- Imperial Library of Trantor

Index

Adobe Edge Animate: The Missing Manual SPECIAL OFFER: Upgrade this ebook with O’Reilly A Note Regarding Supplemental Files The Missing Credits

About the Author About the Creative Team Acknowledgements The Missing Manual Series

Introduction

Why Use Adobe Edge Animate? Where to Find Adobe Edge Animate About This Book

Macintosh and Windows About the Outline

The Very Basics

About→These→Arrows

About the Online Resources

Missing CD Registration Feedback Errata

Safari® Books Online

1. Working with the Stage

1. Introducing Adobe Edge Animate

Creating and Saving Edge Animate Projects A Tour of the Animate Workspace

Saving a Custom Workspace

Building Your First Animation

Viewing Your Animation in a Browser

2. Creating and Animating Art

Setting the Stage Viewing the Stage Creating Art in Animate

Rectangles: Building a Basic Box Selecting and Copying Elements Transforming Your Rectangle

Aligning, Distributing, and Arranging Elements

Rulers and Manual Guides Arranging Elements: Z-Order

A Rectangular Animation

Animating by Adding Property Keyframes Reviewing and Troubleshooting Your Animation

Rounded Rectangles: More than Meets the Eye

A Circle Is a Very Rounded Rectangle

Adding Drop Shadows to Graphics Clipping the Bits That Need Trimming Importing Art

Showing and Hiding Elements The Sliding Show

On/Off: Another Way to Show and Hide Elements

3. Adding and Formatting Text

Adding Text to Your Project

About Text Containers

Changing Text-Specific Properties

About Typefaces and Fonts

Using Web Fonts

Adding Web Fonts to Your Composition

Changing Other Text Properties Clipping Text Around the Edges Making That Headline Drop In Dealing with the Template Adding Some Bounce

Creating a Bounce Manually Using Animate’s Prebuilt Bounce

Adding Links to Text HTML Tags in Animate

2. Animation with Edge Animate

4. Learning Timeline and Transition Techniques

Introducing the Timeline

Choosing a Moment in Time Adding Labels to the Timeline Editing Labels

Understanding Elements’ Timeline Controls

Showing, Hiding, and Locking Elements

Using Timeline Keyboard Shortcuts Creating Transitions

Creating Instant Transitions Setting the Pin for a Smooth Transition Manually Adding and Removing Property Keyframes Editing Transitions Adding Easing, Reversing Motion, and Fine-Tuning Transitions

Animating a Filmstrip Dealing with Timeline Claustrophobia

5. Triggering Actions

Elements, Triggers, and Actions

Trigger Your First Action

Triggering Actions in Other Elements Triggers and Actions for the Stage and Timeline

Deleting Triggers and Actions Adding Triggers to the Stage Editing an Action

Timeline Triggers and Tricks

Adding a Trigger to Loop Your Animation Using Labels in Your Timeline Code Adding Triggers to a Point in Time

Sliding Show Revisited Non-Linear Thinking and Design Timeline Button Controls Triggers for iPhones and Androids

6. Working Smart with Symbols

About Symbols Building with Symbols

Building a Multipart Leg Symbol Creating a Curved Line with a Rounded Rectangle

Nesting Symbols Within Symbols Working with Symbol Timelines Animating a Symbol on the Stage

Duplicating and Renaming Symbols Deleting or Undoing a Symbol

Create a Button Symbol with Rollover Action

Grouping Elements Without Symbols Adding a Click State to Your Button Symbol Making Your Button Open a Web Page

Moving Symbols Between Projects Building a Drop-Down Menu System Creating Text Callouts with Rollover Action

Create and Animate Your Callouts Changing the Cursor to Provide User Feedback

3. Edge Animate with HTML5 and JavaScript

7. Working with Basic HTML and CSS

Reading HTML Documents

Playing Tag the HTML Way Creating a Hyperlink with HTML

Reading CSS Files

Applying CSS Styles to Element IDs and Classes

Reading the HTML Animate Creates Opening an HTML Document in Animate Placing Your Composition in an HTML Document Centering an Animate Composition Placing Two Animate Compositions on the Same Page

8. Controlling Your Animations with JavaScript and jQuery

A Very Brief History of JavaScript and jQuery

JavaScript Versus ActionScript and Other Languages

Sleuthing Through the JavaScript Animate Creates

Adding a New Element to the Stage

JavaScript and jQuery Basics

Operators in JavaScript Conditional Statements in JavaScript Understanding the Document Object Model (DOM)

Natural Selection the jQuery Way “this” and “sym” Are Special Words

9. Helpful JavaScript Tricks

More Showing and Hiding Tricks

Delaying Action for Show, Hide, and Toggle Fading In and Out Slip Sliding Up and Down More Visual Effects with animate() What, No Slide Left and Slide Right?

Swapping Images in Animate

Photo Gallery Revisited

Other Uses for Rollovers

Identifying and Changing Elements and Symbols

Assigning Variables Using Actions to Assign Variables Checking Values with Text Boxes and Alert Dialogs

Using Alert() Dialog Boxes to Check Values

Identifying Elements Within Symbols Playing a Symbol’s Timeline

Getting the Current Playhead Position

Using Conditional Statements

Slideshow Control with the if() Conditional Using switch() to Handle Multiple Conditions

4. Publishing Your Composition

10. Publishing Responsive Web Pages

Adding Background Images to Compositions and Elements

Making the Stage Fill the Browser Window Setting Minimum and Maximum Widths for Elements

Creating Responsive Designs

Size Questions

Size Questions Position Questions

Making Graphics that Scale Size Making Graphics that Scale Position

Creating a Preloader for Your Composition Accommodating Older Web Browsers Publishing Your Composition as a Web Page

5. Appendixes

A. Installation and Help

Edge Animate System Requirements Installing Edge Animate

Installing Edge Animate for Windows Installing Edge Animate for Mac

Uninstalling Edge Animate

Uninstalling Edge Animate for Windows Uninstalling Edge Animate for Mac

Getting Help

Books for HTML, CSS, JavaScript, and jQuery Online Help

B. Menu by Menu

File

New Open Open Recent Close Close All Save Save As Revert Publish Settings Publish Preview in Browser Import

Edit

Undo Redo Cut Copy Paste Paste Special Duplicate Select All Transform Delete Keyboard Shortcuts Special Characters (Mac only)

View

Zoom In Zoom Out Actual Size Rulers Guides Snap to Guides Lock Guides Smart Guides Preloader Stage Down-level Stage

Modify

Arrange Align Distribute Convert to Symbol Edit Symbol

Timeline

Play/Stop Return Go to Start Go to End Go to Previous Keyframe Go to Next Keyframe Auto-Keyframe Mode Auto-Transition Mode Add Keyframe Insert Label Insert Trigger Create Transitions Remove Transitions Invert Transition Insert Time Toggle Pin Flip Playhead and Pin Snapping Snap To Show Grid Grid Zoom In Zoom Out Zoom to Fit Expand/Collapse Selected Expand/Collapse All

Window

Workspace Timeline Elements Library Tools Properties Code Lessons

Help

Animate Help Edge Animate JavaScript API Edge Animate Community Forums Change Language Adobe Product Improvement Program About Animate (Windows only)

Index About the Author SPECIAL OFFER: Upgrade this ebook with O’Reilly Copyright

← Prev
Back
Next →

← Prev
Back
Next →