www.it-ebooks.info www.it-ebooks.info Adobe Edge Animate Chris Grover Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo The book that should have been in the box® www.it-ebooks.info Adobe Edge Animate: The Missing Manual by Chris Grover Copyright © 2013 Chris Grover. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles ( http://my.safaribooksonline.com ). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com . October 2012: First Edition. Revision History for the 1st Edition: 2012-10-26 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449342258 for release details. The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing Manual logo, and “The book that should have been in the box” are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media is aware of a trademark claim, the designations are capitalized. While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it. ISBN-13: 978-1-449-34225-8 [LSI] www.it-ebooks.info III Contents The Missing Credits vii Introduction xi Part One: Working with the Stage CHAPTER 1: Introducing Adobe Edge Animate 1 Creating and Saving Edge Animate Projects 1 A Tour of the Animate Workspace 3 Building Your First Animation 6 CHAPTER 2: Creating and Animating Art 15 Setting the Stage 15 Viewing the Stage 18 Creating Art in Animate 18 Aligning, Distributing, and Arranging Elements 27 A Rectangular Animation 29 Rounded Rectangles: More than Meets the Eye 34 Adding Drop Shadows to Graphics 36 Clipping the Bits That Need Trimming 38 Importing Art 38 On/O: Another Way to Show and Hide Elements 44 CHAPTER 3: Adding and Formatting Text 47 Adding Text to Your Project 48 Changing Text-Specific Properties 49 Using Web Fonts 54 Changing Other Text Properties 57 Clipping Text Around the Edges 58 Making That Headline Drop In 58 Dealing with the Template 63 Adding Some Bounce 64 Adding Links to Text 67 HTML Tags in Animate 68 www.it-ebooks.info CONTENTS IV Part Two: Animation with Edge Animate CHAPTER 4: Learning Timeline and Transition Techniques 73 Introducing the Timeline 73 Understanding Elements’ Timeline Controls 78 Using Timeline Keyboard Shortcuts 80 Creating Transitions 82 Animating a Filmstrip 92 Dealing with Timeline Claustrophobia 95 CHAPTER 5: Triggering Actions 97 Elements, Triggers, and Actions 98 Triggering Actions in Other Elements 103 Triggers and Actions for the Stage and Timeline 105 Timeline Triggers and Tricks 110 Sliding Show Revisited 115 Non-Linear Thinking and Design 118 Timeline Button Controls 119 Triggers for iPhones and Androids 122 CHAPTER 6: Working Smart with Symbols 123 About Symbols 124 Building with Symbols 125 Nesting Symbols Within Symbols 129 Working with Symbol Timelines 130 Animating a Symbol on the Stage 134 Create a Button Symbol with Rollover Action 136 Moving Symbols Between Projects 144 Building a Drop-Down Menu System 144 Creating Text Callouts with Rollover Action 146 Part Three: Edge Animate with HTML5 and JavaScript CHAPTER 7: Working with Basic HTML and CSS 157 Reading HTML Documents 158 Reading CSS Files 160 Reading the HTML Animate Creates 164 Opening an HTML Document in Animate 165 Placing Your Composition in an HTML Document 168 Centering an Animate Composition 170 Placing Two Animate Compositions on the Same Page 172 www.it-ebooks.info CONTENTS V CHAPTER 8: Controlling Your Animations with JavaScript and jQuery 177 A Very Brief History of JavaScript and jQuery 177 Sleuthing Through the JavaScript Animate Creates 178 JavaScript and jQuery Basics 185 Natural Selection the jQuery Way 191 “this” and “sym” Are Special Words 191 CHAPTER 9: Helpful JavaScript Tricks 193 More Showing and Hiding Tricks 193 Swapping Images in Animate 201 Identifying and Changing Elements and Symbols 204 Identifying Elements Within Symbols 211 Playing a Symbol’s Timeline 214 Using Conditional Statements 216 Part Four: Publishing Your Composition CHAPTER 10: Publishing Responsive Web Pages 227 Adding Background Images to Compositions and Elements 227 Creating Responsive Designs 232 Creating a Preloader for Your Composition 235 Accommodating Older Web Browsers 237 Publishing Your Composition as a Web Page 239 Part Five: Appendixes APPENDIX A: Installation and Help 243 APPENDIX B: Menu by Menu 247 File 247 Edit 250 View 253 Modify 255 Timeline 257 Window 260 Help 262 Index 263 www.it-ebooks.info www.it-ebooks.info THE MISSING CREDITS VII The Missing Credits ABOUT THE AUTHOR Chris Grover is a veteran of the San Francisco Bay Area advertis- ing and design community, having worked for over 25 years in print, video, and electronic media. He has been using and writing about computers from the day he first fired up his Kaypro II. Chris is the owner of Bolinas Road Creative ( www.BolinasRoad.com ), an agency that helps small businesses promote their products and services. He’s also the author of Oce 2011 for Macintosh: The Missing Manual , Premiere Elements 8: The Missing Manual , Google SketchUp: The Missing Manual , Flash CS6: The Missing Manual , and Word 2007: The Missing Manual . Email: chris@ BolinasRoad.com . ABOUT THE CREATIVE TEAM Nan Barber (editor) has been working on the Missing Manual series since its incep- tion. She lives in Massachusetts with her husband and various Apple products. Email: nanbarber@oreilly.com . Carla Spoon (proofreader) is a freelance writer and copy editor. An avid runner, she works and feeds her tech gadget addiction from her home oce in the shadow of Mount Rainier. Email: carla_spoon@comcast.net . Melanie Yarbrough (production editor) lives, works, and does pretty much every - thing else in Cambridge, MA. When not ushering books through production, she’s baking and writing up whatever she can imagine. Email: myarbrough@oreilly.com . Bob Pfahler (indexer) is a freelance indexer who indexed this book on be - half of Potomac Indexing, LLC, an international indexing partnership at www.potomacindexing.com . Besides the subject of computer software, he spe- cializes in business, management, biography, and history. He can be reached at bobpfahler@hotmail.com . Jacques Surveyer (technical reviewer) is a long-time Flash developer of the Air, Swift3D, and SwishMax variety who finds Adobe’s move to HTML5 animation via Edge of keen interest. See more coverage at www.theopensourcery.com/keepopen or ask for more at jbsurv@thephotofinishes.com . Darrell Heath (technical reviewer) is a freelance designer and web developer from Newfoundland and Labrador, Canada with a background in Information Technology and visual arts. He also authors weekly tutorial content for NAPP and in his spare time is oering design related tips through his blog at www.heathrowe.com/blog . Email: darrell@heathrowe.com . www.it-ebooks.info THE MISSING CREDITS VIII ACKNOWLEDGEMENTS Thanks to all the pros and friends on the Missing Manual team who worked to get this book into your hands. A special thanks again to Nan Barber whose skill, patience and planning has guided me through many books. Thanks also to Carla Spoon for catching typos and other embarrassing goofs on my part. I’m extremely grateful to Melanie Yarbrough, the production editor, for her work in putting all the parts together. Much appreciation also goes to Jacques Surveyer and Darrell Heath who provided their technical expertise while we explored this great new design/development tool. As always, thanks and love to Joyce, my wife, who makes work and play fun. —Chris Grover THE MISSING MANUAL SERIES Missing Manuals are witty, superbly written guides to computer products that don’t come with printed manuals (which is just about all of them). Each book features a handcrafted index and cross-references to specific pages (not just chapters). Recent and upcoming titles include: Access 2010: The Missing Manual by Matthew MacDonald Buying a Home: The Missing Manual by Nancy Conner CSS: The Missing Manual, Second Edition by David Sawyer McFarland Creating a Website: The Missing Manual, Third Edition by Matthew MacDonald David Pogue’s Digital Photography: The Missing Manual by David Pogue Dreamweaver CS5.5: The Missing Manual by David Sawyer McFarland Droid 2: The Missing Manual by Preston Gralla Droid X2: The Missing Manual by Preston Gralla Excel 2010: The Missing Manual by Matthew MacDonald Facebook: The Missing Manual, Third Edition by E.A. Vander Veer FileMaker Pro 12: The Missing Manual by Susan Prosser and Stuart Gripman Flash CS6: The Missing Manual by Chris Grover Galaxy S II: The Missing Manual by Preston Gralla Galaxy Tab: The Missing Manual by Preston Gralla Google+: The Missing Manual by Kevin Purdy Google Apps: The Missing Manual by Nancy Conner Google SketchUp: The Missing Manual by Chris Grover HTML5: The Missing Manual by Matthew MacDonald iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller www.it-ebooks.info [...]... 2007: The Missing Manual by E.A Vander Veer Premiere Elements 8: The Missing Manual by Chris Grover QuickBase: The Missing Manual by Nancy Conner QuickBooks 2012: The Missing Manual by Bonnie Biafore Quicken 2009: The Missing Manual by Bonnie Biafore Switching to the Mac: The Missing Manual, Lion Edition by David Pogue Wikipedia: The Missing Manual by John Broughton Windows Vista: The Missing Manual. .. David Pogue Windows 7: The Missing Manual by David Pogue The Missing Credits www.it-ebooks.info ix Word 2007: The Missing Manual by Chris Grover Your Body: The Missing Manual by Matthew MacDonald Your Brain: The Missing Manual by Matthew MacDonald Your Money: The Missing Manual by J.D Roth For a full list of all Missing Manuals in print, go to www.missingmanuals.com/library html x The Missing Credits www.it-ebooks.info... Fire: The Missing Manual, Second Edition by Peter Meyers Living Green: The Missing Manual by Nancy Conner Mac OS X Lion: The Missing Manual by David Pogue Mac OS X Snow Leopard: The Missing Manual by David Pogue Microsoft Project 2010: The Missing Manual by Bonnie Biafore Motorola Xoom: The Missing Manual by Preston Gralla Netbooks: The Missing Manual by J.D Biersdorfer NOOK Tablet: The Missing Manual. .. Gralla Office 2010: The Missing Manual by Nancy Connor, Chris Grover, and Matthew MacDonald Office 2011 for Macintosh: The Missing Manual by Chris Grover Palm Pre: The Missing Manual by Ed Baig Personal Investing: The Missing Manual by Bonnie Biafore Photoshop CS5: The Missing Manual by Lesa Snider Photoshop Elements 10: The Missing Manual by Barbara Brundage PHP & MySQL: The Missing Manual, Second Edition...iPad 2: The Missing Manual, Third Edition by J.D Biersdorfer iPhone: The Missing Manual, Fifth Edition by David Pogue iPhone App Development: The Missing Manual by Craig Hockenberry iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider iPod: The Missing Manual, Tenth Edition by J.D Biersdorfer and David Pogue JavaScript & jQuery: The Missing Manual, Second Edition by David... other eyepleasing layout 16 Click the Toggle Pin button, then press the Home key and then press the space bar When you press Home, the playhead returns to 0:00 Pressing the space bar plays your animation so you can preview the action on the stage 17 Move the playhead back to 0:00, and then in the toolbar, click the letter T The text tool is selected, and the cursor changes to a cross 18 Click on the. .. not every one of these titles is published by Missing Manual- parent O’Reilly Media While we’re happy to mention other Missing Manuals and books in the O’Reilly family, if there’s a great book out there that doesn’t happen to be published by O’Reilly, we’ll still let you know about it Adobe Edge Animate: The Missing Manual is designed to accommodate readers at every technical level The primary discussions... “What the heck was the name of that file anyway?” Note There’s another bit of behind -the- scenes Animate magic going on here, too When you import an image, Animate automatically creates an images folder in your project It makes a copy of the image you select and puts the copy in the images folder You’ll also find your imported image listed under Assets in the Library panel 8 adobe edge animate: The Missing. .. Chapter 3 and it’s the second folder for the chapter xvi ADOBE EDGE Animate: The Missing Manual www.it-ebooks.info For many of the exercises, there are completed examples that you can use to check your own work A completed example includes the word done in the filename as in 03-3_MyExample_done Header Last Finally, so you don’t wear down your fingers typing long web addresses, the Missing CD page also... in the project folder When you imported the planet_earth.png image, Animate created an images folder and placed a copy of the graphic in the folder Your simple animation is complete You can preview it in Animate by pressing Home and then the space bar The earth rises into view, and your message fades in and then fades out (Figure 1-8) The entire animation takes 4 seconds 12 adobe edge animate: The Missing . Pogue www.it-ebooks.info THE MISSING CREDITS X Word 2007: The Missing Manual by Chris Grover Your Body: The Missing Manual by Matthew MacDonald Your Brain: The Missing Manual by Matthew MacDonald Your Money: The Missing. Gralla Google+: The Missing Manual by Kevin Purdy Google Apps: The Missing Manual by Nancy Conner Google SketchUp: The Missing Manual by Chris Grover HTML5: The Missing Manual by Matthew MacDonald iMovie. Biafore Switching to the Mac: The Missing Manual, Lion Edition by David Pogue Wikipedia: The Missing Manual by John Broughton Windows Vista: The Missing Manual by David Pogue Windows 7: The Missing Manual