www.it-ebooks.info www.it-ebooks.info Adobe Edge Preview 5 The book that should have been in the box® www.it-ebooks.info www.it-ebooks.info Adobe Edge Preview 5 Chris Grover Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo The book that should have been in the box® www.it-ebooks.info Adobe Edge Preview 5: The Missing Manual by Chris Grover Copyright © 2012 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 . May 2011: First Edition. December 2011: Second Edition. April 2012: Third Edition. Revision History for the 3rd Edition: 2011-05-26 First release 2011-08-26 Second release (ebook only) 2012-04-27 Third release See http://oreilly.com/catalog/errata.csp?isbn=9781449330309 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-33030-9 www.it-ebooks.info V Contents Introduction 1 Part One: Working with the Stage CHAPTER 1: Introducing Adobe Edge 11 Creating and Saving Edge Projects 11 A Tour of the Edge Workspace 13 Building Your First Edge Animation 16 CHAPTER 2: Creating and Animating Art 25 Setting the Stage 25 Creating Art in Edge 27 Aligning, Distributing, and Arranging Elements 33 A Rectangular Animation 34 Rounded Rectangles: More than Meets the Eye 40 Importing Art 42 On/O: Another Way to Show and Hide Elements 46 CHAPTER 3: Adding and Formatting Text 49 Adding Text to Your Project 50 Changing Text-Specific Properties 51 Using Web Fonts 55 Changing Other Text Properties 58 Clipping Text Around the Edges 59 Making That Headline Drop In 59 Dealing with the Template 64 Adding Some Bounce 65 Adding Links to Text 68 HTML Tags in Edge 69 www.it-ebooks.info CONTENTS VI Animation with Edge CHAPTER 4: Learning Timeline and Transition Techniques 73 Introducing the Timeline 73 Understanding Elements’ Timeline Controls 77 Using Timeline Keyboard Shortcuts 79 Creating Transitions 80 Dealing with Timeline Claustrophobia 90 CHAPTER 5: Triggering Actions 93 Elements, Triggers, and Actions 94 Triggering Actions in Other Elements 99 Triggers and Actions for the Stage and Timeline 100 Timeline Triggers and Tricks 105 Sliding Show Revisited 110 Non-Linear Thinking and Design 113 Triggers for iPhones and Androids 114 Edge with HTML5 and JavaScript CHAPTER 6: Working Smart with Symbols 119 About Symbols 119 Building with Symbols 121 Nesting Symbols within Symbols 125 Working with Symbol Timelines 126 Animating a Symbol on the Stage 130 Create a Button Symbol with Rollover Action 131 Building a Drop-Down Menu System 135 CHAPTER 7: Working with Basic HTML and CSS 137 Reading HTML Documents 138 Reading CSS Files 140 Reading the HTML Edge Creates 144 Opening an HTML Document in Edge 145 Placing Your Composition in an HTML Document 148 Placing Two Edge Compositions on the Same Page 150 www.it-ebooks.info CONTENTS VII CHAPTER 8: Controlling Your Animations with JavaScript and jQuery 155 A Very Brief History of JavaScript and jQuery 155 Sleuthing Through the JavaScript Edge Creates 157 JavaScript and jQuery Basics 164 Natural Selection the jQuery Way 169 “this” and “sym” are Special Words 170 CHAPTER 9: Helpful JavaScript Tricks 171 More Showing and Hiding Tricks 171 Swapping Images in Edge 178 Identifying and Changing Elements and Symbols 181 Identifying Elements within Symbols 186 Playing a Symbol’s Timeline 188 Using Conditional Statements 190 Appendix APPENDIX: Installation and Help 195 Index 199 www.it-ebooks.info www.it-ebooks.info [...]... clicking the diamond next to Location in the Properties panel, you manually recorded the World’s location on the stage As a result, the World stays in the same X/Y position for the first second of the animation 18 adobe edge preview 5: The Missing Manual www.it-ebooks.info NOTE  Edge automatically assigns a reference color to each element in your project The color appears in the Timeline next to the name,... Home moves the playhead to the beginning of the timeline Space plays the animation in Edge Ctrl+Enter (cReturn) plays the animation in your web browser The P shortcut toggles the playhead’s pin, making it easy to mark two points in the timeline 22 adobe edge preview 5: The Missing Manual www.it-ebooks.info Building Your First Edge Animation Up To Speed HTML5 Browsers on the Leading Edge The industry... to save each Edge project in its own folder because Edge creates several files and an edge_ includes folder when you first save a project  Tip  A quick look at the Edge window tells whether your most recent work has been saved If your work is unsaved, Edge shows an asterisk next to the filename at the top of the window 16 adobe edge preview 5: The Missing Manual www.it-ebooks.info 3 In the Properties... arrangement You can resize the panels within the workspace, or you can drag panels out so that they float independently Want to make the Timeline bigger? To resize it while it’s grouped snugly with the others, drag one of its edges As it changes size, the surrounding panels change to accommodate the new arrangement Want 14 adobe edge preview 5: The Missing Manual www.it-ebooks.info to move the Properties panel... toggle the pin, then drag the playhead to the 0:03 mark Now you’re ready to create another transition 20 adobe edge preview 5: The Missing Manual www.it-ebooks.info 24 With the HelloWorld text box selected, set its opacity to 100 Edge creates a transition so that the text gradually changes from 0 to 100 percent opacity between 0:02 and 0:03 in your animation Building Your First Edge Animation 25 Drag 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 Preview 5: The Missing Manual is designed to accommodate readers at every technical level The primary discussions... buy Edge from Amazon That’s because at the moment, it’s free preview software from Adobe Labs To download the program, go to http://labs .adobe. com/technologies /edge/ Click the Download Now button If you don’t have an Adobe account, you’ll need to create one before you can download the software You know the drill: name, email, password Both the account and Edge are free Adobe is not saying whether Edge, ... Pressing the space bar plays your animation so you can preview the action on the stage Chapter 1: Introducing Adobe Edge www.it-ebooks.info 19 Building Your First Edge Animation 15 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 16 Click on the stage and type Hello World The words “Hello World” appear on the stage,... Chapter 3 and it’s the second folder for the chapter For many of the exercises, there are completed examples that you can use to check 6 ADOBE EDGE preview 5: The Missing Manual www.it-ebooks.info your own work A completed example includes the word done in the filename as in 03-3_MyExample_done Safari® Books Online Finally, so you don’t wear down your fingers typing long web addresses, the Missing CD page... tasks that are necessary for all Edge projects Open the folder that’s named edge_ includes, and you’ll find more JavaScript files These are libraries of JavaScript code One is specific to Edge; the others are standard JavaScript libraries These libraries are referenced by the code in the HTML page that Edge created They serve as the engine behind your Edge project In short, they make things move Unlike . pressing the Ctrl key; while it’s down, type the letter L; and then release both keys. www.it-ebooks.info ADOBE EDGE PREVIEW 5: THE MISSING MANUAL 6 ABOUT THE ONLINE RESOURCES About➝These➝Arrows Throughout. Introduction www.it-ebooks.info ADOBE EDGE PREVIEW 5: THE MISSING MANUAL 2 WHY USE ADOBE EDGE? shape, and position over time. The technique uses newly defined HTML tags, the power of JavaScript, and. Clinic. They oer more technical tips, tricks, and shortcuts for the experienced computer fan. www.it-ebooks.info ADOBE EDGE PREVIEW 5: THE MISSING MANUAL 4 ABOUT THIS BOOK Macintosh and Windows Edge