Free ebooks ==> www.ebook777.com www.it-ebooks.info www.ebook777.com Free ebooks ==> www.ebook777.com www.it-ebooks.info Free ebooks ==> www.ebook777.com Adobe Edge Animate Preview The book that should have been in the box® Chris Grover Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo www.it-ebooks.info www.ebook777.com Free ebooks ==> www.ebook777.com Adobe Edge Animate Preview 7: 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 Revision History for the 1st Edition: 2011-05-26 2011-08-26 2012-04-27 2012-09-07 First release Second release (ebook only) Third release Fourth release See http://oreilly.com/catalog/errata.csp?isbn=9781449342005 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-34200-5 [LSI] www.it-ebooks.info Free ebooks ==> www.ebook777.com Contents Introduction Part One: Chapter 1: Working with the Stage Introducing Adobe Edge Animate 11 Creating and Saving Edge Animate Projects 11 A Tour of the Animate Workspace 13 Building Your First Animation 16 Chapter 2: Creating and Animating Art 25 Setting the Stage 25 Creating Art in Animate 28 Aligning, Distributing, and Arranging Elements 36 A Rectangular Animation 38 Rounded Rectangles: More than Meets the Eye 43 Adding Drop Shadows to Graphics 45 Clipping the Bits That Need Trimming 47 Importing Art 47 On/Off: Another Way to Show and Hide Elements 53 Chapter 3: Adding and Formatting Text 55 Adding Text to Your Project 56 Changing Text-Specific Properties 57 Using Web Fonts 61 Changing Other Text Properties 65 Clipping Text Around the Edges 66 Making That Headline Drop In 66 Dealing with the Template 71 Adding Some Bounce 72 Adding Links to Text 75 HTML Tags in Animate 77 iii www.it-ebooks.info www.ebook777.com Free ebooks ==> www.ebook777.com Part Two: Chapter 4: Animation with Edge Animate Learning Timeline and Transition Techniques 81 Introducing the Timeline 81 Understanding Elements’ Timeline Controls 86 Using Timeline Keyboard Shortcuts 88 Creating Transitions 90 Animating a Filmstrip 100 Dealing with Timeline Claustrophobia 103 Chapter 5: Triggering Actions 105 Elements, Triggers, and Actions 106 Triggering Actions in Other Elements 111 Triggers and Actions for the Stage and Timeline 113 Timeline Triggers and Tricks 118 Sliding Show Revisited 123 Non-Linear Thinking and Design 126 Timeline Button Controls 127 Triggers for iPhones and Androids 130 Chapter 6: Working Smart with Symbols 131 About Symbols 132 Building with Symbols 133 Nesting Symbols within Symbols 137 Working with Symbol Timelines 138 Animating a Symbol on the Stage 142 Create a Button Symbol with Rollover Action 144 Moving Symbols Between Projects 152 Building a Drop-Down Menu System 153 Creating Text Callouts with Rollover Action 154 Part Three: Chapter 7: Edge Animate with HTML5 and JavaScript Working with Basic HTML and CSS 165 Reading HTML Documents 166 Reading CSS Files 168 Reading the HTML Animate Creates 172 Opening an HTML Document in Animate 173 Placing Your Composition in an HTML Document 176 Centering an Animate Composition 178 Placing Two Animate Compositions on the Same Page 180 iv Contents www.it-ebooks.info Free ebooks ==> www.ebook777.com Chapter 8: Controlling Your Animations with JavaScript and jQuery 185 A Very Brief History of JavaScript and jQuery 185 Sleuthing Through the JavaScript Animate Creates 187 JavaScript and jQuery Basics 194 Natural Selection the jQuery Way 200 “this” and “sym” Are Special Words 200 Chapter 9: Helpful JavaScript Tricks 203 More Showing and Hiding Tricks 203 Swapping Images in Animate 211 Identifying and Changing Elements and Symbols 214 Identifying Elements within Symbols 221 Playing a Symbol’s Timeline 224 Using Conditional Statements 225 Part Four: Appendixes Appendix A: Installation and Help 235 Appendix B: Menu by Menu 239 File 239 Edit 242 View 245 Modify 247 Timeline 249 Window 252 Help 254 Index 255 Contents www.it-ebooks.info www.ebook777.com v Free ebooks ==> www.ebook777.com www.it-ebooks.info Free ebooks ==> www.ebook777.com Introduction I t may be hard to imagine, but once upon a time, pages on the World Wide Web didn’t have pictures, let alone animations, videos, and interactive graphics All these elements were added through trial, error, debate, and debunk Changes came when brave souls (like you) forged ahead and made things work with the tools at hand If a commercial product worked well and was widely adopted, it became the de facto standard Adobe’s PDF (portable document files) and Flash animation player are well-known examples However, there’s always been a problem with proprietary and patent-encumbered technologies on the Internet They’re like a toll road in the center of a major city On the other hand, authorities and standards-writing groups have been known to create “standards” that few browser and web developers follow Strictly structured XHTML pages fall into this category The solution is to create standards for the Internet that are practical, usable, and don’t stifle creativity Of course, that’s easier said than done  Tip  As Adobe Edge Animate continues to grow and change, we’ll be updating this book periodically Your purchase of this book includes free updates to the ebook edition To get your free ebook, go to http://oreil.ly/ adobe_edge_animate_prev_7 Next to the Ebook buying option, click “Add to Cart.” Enter AE7MM in the Discount Code box; click Submit; click Checkout; and then follow the onscreen instructions With HTML5, the standards-writing crowd (also known as the W3C) is working hard to give the Internet community a roadmap that takes into account where we’ve been and where we’re heading There are a number of exciting new features in HTML5, but perhaps most visible are the new ways to present and animate graphics If you’re thinking, “That sounds a lot like Adobe Flash,” you’re right One shiny new feature of HTML5 provides a non-proprietary, standard way to change graphics, color, size, www.it-ebooks.info www.ebook777.com Free ebooks ==> www.ebook777.com Why Use Adobe Edge animate? shape, and position over time The technique uses newly defined HTML tags, the power of JavaScript, and its jQuery companion library These open-source technologies are available to everyone, whether they’re designing web pages or building the next great web browser Why Use Adobe Edge Animate? If you need a compelling reason to learn yet another animation technology, here are three good ones: iPhone, iPod, and iPad In fact, if you’re a Flash designer or developer, you’re probably already dialed in to the famous debate between Apple and Adobe regarding Flash As a web designer and developer, more important than the debate is the fact that Flash content on web pages can’t be viewed by the most popular mobile devices on the planet However, if you use HTML5 and JavaScript, you can capture that Apple audience and more So why should you use an Adobe product to create HTML5 web content? It’s an understatement to say that most graphic artists view the world differently from computer programmers If you’re an artist, you may not be entirely comfortable describing each circle, color, and line in your artwork by typing out JavaScript code, even though it’s theoretically possible You’re probably more inclined to use a tool that reminds you of Adobe Illustrator, Photoshop, or Flash That’s exactly where Animate fits in Animate has a timeline like the ones in Flash and After Effects The Elements and Properties panels will remind you of your favorite drawing and photo tools If you use Animate to develop HTML5 graphics, then you can concentrate on creating and fine-tuning your artwork Animate will generate the HTML5 and JavaScript/jQuery code that’s needed for your web pages  Note  Although the “Adobe Edge Animate” is the program’s formal name, in this book you’ll often see “Animate” for short Where to Find Adobe Edge Animate If you don’t already have Adobe Edge Animate on your computer, you may be wondering where to get it At this writing, you couldn’t buy Animate from Amazon That’s because at the moment, it’s a 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 Animate Preview are free Adobe is not saying whether Animate, or a similar product, will continue to be free in the future If you want more details on how to install Animate on your computer, check out Appendix A ADOBE EDGE Animate preview 7: The Missing Manual www.it-ebooks.info Free ebooks ==> www.ebook777.com Chrome (Google) source code file registering Animate projects in, 193 viewing, 189 classes applying CSS styles to, 169–171 identifying, 200 in DOM, 199 clickable items, identifying, 207 click triggers, 106, 111 client vs host, computer, 61 Clip properties, on stage, 66 Clip tool, 47 close frames, 15 panels, 15 Close All command, in File menu, 232 Close command, in File menu, 232 tags, 77 Code panel command, in Window menu, 245 color bars, in Timeline panel, 93 color-coding of timeline elements, 20, 87 color gradients, 31 color picker about, 27 choosing background with, 17 spectrum bar in, 30 understanding, 30 color specs, understanding, 30 commenting out lines, 111 comments block, 111 in HTML, 173 line, 111 complete, timeline trigger, 113, 119 Composition ID stage property, 27 compositionReady trigger about, 113–114 using, 115 computer client vs host, 61 conditional statements about using, 225–226 Booleans as, 195 if else, 197 Javascript, 199 slideshow control using, 226–232 consistency of symbols, 132 Convert to Symbol command, 134, 221, 240 Copy command, in Edit menu, 234 copying adding text to projects by, 56 objects, 31 Courier, Courier New, monospace typefaces, 59 creating alternative elements for web browsers not HTML5 proficient, 27 animations by adding property keyframes, 40–42 rectangular, 38–44 artwork building rectangles, 28–30 using Arrange, Align and Distribute tools, 36–38 banner ad, 176–178 button symbol with rollover action, 144–147 clickable slide show, 123–126 click state to button symbol, 148–151 curved lines, 136–137 documents, 17 drop-down menus, 153 drop shadows in graphics, 45 ellipses, 45 folders, 17 HTML document, 26 hyperlinks with HTML, 167–168 ovals, 45 parallelograms, 34 positioning template, 67, 72 projects, 11–12 property keyframes, 40 sliding shows, 50–53 squares, 28 symbols, 133–135 text callouts, 154–162 to position playhead in, 66–71 transitions, 90–100 about, 90 add Easing property, 98 editing, 95–96 fine-tuning, 96–99 instant, 90–91 in Timeline, 73 setting pin for smooth, 91–93 vector graphics, 28 web page, 26 Index www.it-ebooks.info www.ebook777.com ‌C reating 259 Free ebooks ==> www.ebook777.com Creating Websites: The Missing Manual (MacDonald) Creating Websites: The Missing Manual (MacDonald), 238 CSS (Cascading Style Sheets), 168–172 about, 168 applying to tags, 169–170 comments in, 111 declaration block, 169 DOM and, 199–200 reading files, 168–171 storing styles and formats, 169–171 style sheets, 169 CSS: The Missing Manual (McFarland), 168, 178 curly braces ({}) in conditional statements, 225, 232 in CSS declaration block, 169 in JavaScript functions, 196 cursors, changing, 160 curved lines, creating, 136–137 Cut command, in Edit menu, 234 D data, types of JavaScript, 195–198 debugging tools, 220 declaration block, CSS formatting spec, 169 decorative fonts, 60 Default submenu, in Workspace menu, 244 delaying actions, 205 Delete command, in Edit menu, 236 Delete Workspace submenu, in Workspace menu, 244 deleting property keyframes, 94 symbols, 144 timeline labels, 86 triggers and actions, 115 diamond button, in Timeline window, 41 diamond shapes in corner of rectangles, 44 dimensions, as stage property, 26 displaying timelines on two monitors, 103 Distribute tool, 36–37, 239–240 tags, 77, 29 divide numbers (/) operator, 198 Document Object Model (DOM),  199–200 260 documents, creating, 17 document title, 26 DOM (Document Object Model),  199–200 dot (.) used in JavaScript, 215 used to identify classes, 200 double quotes (") tags, 167 Down-level Stage command, in View menu, 238 Down-level Stage properties, 27 downloading Edge Animate, 2 Down state, 151 drag-and-drop photos to animations, 48 drawing tools, 28–29 drop-down menus, building, 153 drop-in headlines, making, 66–71 drop shadows adding to graphics, 45 creating, 71 settings in Properties panel, 158 Duplicate command, , 31 duplicating text, 69 E EaseOutBounce tool, 74 Easing button, 74 property, 73–74, 98 ECMA-262, programming language specification, 186 Edge Animate downloading, 2 edge files, 12 getting ebooks as software updates, 1 getting help for questions about, 237 JavaScript library files with in name, 190 library files, 190 project files, 190 Edge Community Forums command, in Help menu, 245 Edge Help command, in Help menu, 245 Edge JavaScript API command, in Help menu, 245 Edit menu command descriptions, 234–237 Index www.it-ebooks.info Free ebooks ==> www.ebook777.com Edit Symbol command, in Modify menu, 240 elements adding to stage, 193–195 assigning variables to, 216–217 changing, 214–218 diagram of Web page, 200 file defining, 190 grouping, 132 hiding, 30 identifying within symbols, 221–223 naming after copy and paste technique, 31 as text boxes, 204 numbers in, 119 nesting, 223 running list of stage, 20 selecting, 199 separating using dot (.) notation, 215 timeline color-coding of, 20, 87 Expand/Collapse button, 87 location of, 82 non-animated, 19 Only Show Animated Elements button, 87 understanding controls, 86–87 triggers and actions, 106–110 Elements panel about, 13, 244 eye toggle button, 50 Lock tool button, 50 Show/Hide Element button, 48 ellipses, 45 em, size of, 57 Enable Smart Guides command, in View menu, 238 equal sign (=), as HTML assignment operator, 167 equals (==) operator, 198 Expand/Collapse All command, in Timeline menu, 86, 243 Expand/Collapse button, 87 Expand/Collapse Selected command, in Timeline menu, 86, 243 exporting images, from graphics program, 48 External Style Sheet, in CSS, 170 eyeball-icon, in the Elements panel, 53–54 eye toggle button, in Elements panel, 50 ‌Fonts F fadeIn() function, 206 fadeOut() function, 206 fadeToggle() function, 206 file formats for storing art, 49, 50 File menu command descriptions, 231–233 files created, when saving files, 190 file types edge, 12 html, 12 js, 12 filmstrips, animating, 100–103 Firebug, as debugging tool, 220 Fireworks, artwork in, 25, 47 Flash arguments from Apple about using, 2 programming language of, 186 Flip Playhead and Pin command, in Timeline menu, 242 folders, creating, 17 font-decoration button, 57, 58 font-family option, 58 Font Name box, 64 fonts Arial, sans-serif, 59 Book Antiqua, serif, 59 choosing, 57–60 Courier, Courier New, monospace, 59 decorative, 60 for headings, 68 for titles, 68 Geneva, sans-serif, 58, 59 Georgia, serif, 59 Helvetica, sans-serif, 59 italicizing, 57 Lucida Console, sans-serif, 60 Lucida Grande, sans-serif, 59 Lucida Sans Unicode, sans-serif, 59 Monaco, sans-serif, 60 mono-space, 59 MS Serif, serif, 60 New York, serif, 60 Palatino, Palatino Linotype, serif, 59 Index www.it-ebooks.info www.ebook777.com 261 Free ebooks ==> www.ebook777.com fonts fonts, continued readability of type, 61 Sans serif, 58 Tahoma, sans-serif, 59 Times New Roman, Times, serif, 59 Times, serif, 59 Trebuchet MS, sans-serif, 59 using special effects, 58 using web, 61–64 Verdana sans-serif, 58 vs typefaces, 60 fonts.com, web fonts at, 65 font settings in Properties panel, 158 font-size property, 65, 169 Fontsquirrel.com, web fonts at, 65 font-style option, 57, 58 font-unit option, 57, 58 font-weight option, 57, 58 formats of files for stored art, 48 formatting specs, in style sheets, 169 formatting, text options, 58 frames close, 15 maximize, 15 undock, 15 function, as reserve word in JavaScript, 197 functions, in JavaScript about, 196–197 alert(), 220 animate(), 208 fadeIn(), 206 fadeOut(), 206 fadeToggle(), 206 getPosition(), 225 getSymbol(), 217 hide(), 205, 209, 215 show(), 205, 209, 215 slideDown(), 206 slideToggle(), 206 slideUp(), 206 sym.getSymbol(), 223 toggle(), 205 G Geneva sans-serif typeface, 58 Geneva, sans-serif typeface, 59 Georgia, serif typeface, 59 Get Element button, 216 262 getPosition() function, 225 Get Symbol button, 216, 222, 224 getSymbol() function, 217 getSymbol() method, 217 GIF files, 49 GIMP software, 28 glow effect, creating, 72 Google Chrome source code file registering Animate projects in, 193 viewing, 189 Google web fonts, 61, 62 Go to End command, in Timeline menu, 241 Go to Next Keyframe command, in Timeline menu, 241 Go to Previous Keyframe command, in Timeline menu, 241 Go to Start command, in Timeline menu, 240 graphics adding drop shadows to, 45 Bitmap, 49 creating, 11 file formats for, 49 raster, 49 vector, 28 greater than (>) operator, 198 greater than or equal to (>=) operator, 198 grouping elements, 132 H through tags, 77 handheld devices, triggers for, 130 handles, in rectangles, 29 headings adding bounce, 72–74 animating drop-in, 65–70 choosing typeface for, 68 creating positioning template, 67, 72 heading tag (), CSS applied to, 169 Heath, Darrell, 238 “hello world” programs animation, 16–21 web page, 166 help, for Animate issues, 237–238 Help menu command descriptions, 245–246 Index www.it-ebooks.info Free ebooks ==> www.ebook777.com Helvetica, sans-serif typeface, 59 hidden option, in Overflow menu, 27 hide and show actions, 122, 203–211 hide() function, 205, 209, 215 hiding and showing elements, 30, 48 Horizontal Center submenu, in Align menu, 239 Horizontal Center submenu, in Distribute menu, 239 horizontal scroll, on timeline, 85 host vs client, computer, 61 hotspot symbols changing behavior of, 160–161 checking, 157 creating, 154–158 href (hyperlink) reference, 76 HTML about, 11 adding links to text using, 75–78 adding text to project using, 56 anchor tags, adding to text boxes, 221 built-in art and, 48 comment code, 173 comments in, 109, 111 creating hyperlinks with, 167–168 document, creating, 26 html files, 12 preloader about, 172, 177 in placing two compositions on same page, 181 tags about, 75 types of, 76–77, 166–167 using web fonts, 61–64 HTML5 browsers, 24 graphics using Animate to develop, 2 handheld devices and, 130 impact of, 186 using web fonts, 61–64 HTML5: The Missing Manual (MacDonald), 167 HTML documents centering composition in, 178–179 opening in Animate, 173–176 placing composition in, 176–178 placing two compositions on same page, 180–184 reading, 166–168 viewing source code, 166 reading Animate created, 172–173 html files, 12 HTML help, 167, 238 HTML: The Missing Manual (MacDonald), 167 HTML & XHTML The Pocket Reference (Robbins), 167 hyperlink (href) reference, 76 hyperlinks, creating with HTML,  167–168 installing Edge Animate I IDs applying CSS styles to, 169–171 as rectangle property, 28 in DOM, 199 if() conditional statements about, 225–226 Booleans as, 195 Javascript, 199 slideshow control with, 226–232 if else conditional statements, 197, 225 Illustrator, artwork in, 25, 28, 47 images See also photographs creating sliding shows, 50–53 exporting from graphics program, 48 fading in and out animations using, 206 file formats for displaying, 49 importing, 18, 47–53 swapping, 211–214 Import command, in File menu, 233 importing, art, 47–53 Include Snippet Comments, turning off, 109 indenting first line of text, 57 Inkscape software, 28 Inline Styles, in CSS, 170 Insert Label command, in Timeline menu, 85, 242 Insert Time command in Timeline menu, 242 in Timeline panel, 96 installing Edge Animate, 235–238 Index www.it-ebooks.info www.ebook777.com 263 Free ebooks ==> www.ebook777.com Instant Transition Mode command, in Timeline menu Instant Transition Mode command, in Timeline menu, 241 Internal Style Sheet, in CSS, 170 iPhones, triggers for, 130 iPhoto, artwork in, 47 J JavaScript about, 185–186 adding actions to, 110 animate() method, 210–212 arrays, as data type, 196 basics of, 194–199 Booleans, as data type, 195 built-in art and, 50 case-sensitivity of, 197 comments in, 111 conditional statements, 199 debugging tools, 220 delaying actions, 205 DOM and, 199–200 files, viewing while in Animate, 192 functions about, 196–197 alert(), 220 animate(), 208 fadeIn(), 206 fadeOut (), 206 fadeToggle(), 206 getPosition(), 225 getSymbol(), 217 hide(), 205, 209, 215 loadResources(), 188 show(), 205, 209, 215 slideDown(), 206 slideToggle(), 206 slideUp(), 206 sym.getSymbol(), 223 toggle(), 205 getSymbol() method, 217 js files, 12 keywords in, 197, 200–201 libraries, 186 numbers, as data type, 195 operators in, 197 practical application of, 203–209 preloader, 188 project translation to, 105 reading Animate-created code,  187–194 264 reserved words in, 197, 200–201 selecting elements in, 199–200 Square used in, 215 src (source attribute), 211 strings, as data type, 195 sym used in, 200–201, 215, 219, 224 this, used in, 200–201 toggle action, 205–206 types of data, 195–198 variables, 197 vs ActionScript, 186 whitespace in, 197 JavaScript and jQuery: The Missing Manual (McFarland), 194 JavaScript library, Animate file for, 190 JPG files, 49 jQuery about, 186 adding actions to, 105, 109 basics of, 194–199 debugging tools, 220 file name for, 190 identifying classes in, 200 plugin to, 190 practical application of, 203–209 selecting elements in, 200–201 viewing code in, 107 viewing source for, 190 Jscript, 186 js files, 12 K keyboard shortcuts arranging elements, 38 copying objects, 31 creating squares, 28 cutting objects, 31 Duplicate command, 31 duplicating text, 69 expand/collapse timeline elements, 86 for menu commands, 231–246 Insert Label command, 85 moving playhead to beginning of timeline, 24 pasting text, 56 playing animations, 24 playing timeline, 120 previewing projects, 114 Index www.it-ebooks.info Free ebooks ==> www.ebook777.com Save, 232 selecting objects, 31 Timeline, 88–89 toggling on and off Smart Guides, 36 Transform Tool, 33 Undo command, 144 undo triggers and actions, 115 Keyboard Shortcuts command, in Edit menu, 236 keydown trigger, 113 keyframe commands in Timeline menu, 241 on timeline, 82, 94 keyup trigger, 113 keywords, in JavaScript, 197, 200–201 L labels, timeline adding, 85–86 deleting, 86 editing, 86 moving, 86 spacing labels is slide show, 124 using code in, 120–121 Language command, Change, in Help menu, 246 launchComposition method, 192 Left submenu, in Align menu, 239 Left submenu, in Distribute menu, 239 Lessons panel about, 14 command, in Window menu, 245 less than ( www.ebook777.com pixels (px) changing to percentage, 26 size of, 57 playback controls, timeline, 83 “Play from” action, 106, 119–120, 120 playhead about, 82, 84 about two-part, 92 choosing moment in time, 83 functions, 225 moving to beginning of timeline, 24 Pin, 21, 92 play() method, 224 playPosition, 225–226 Play/Stop command, in Timeline menu, 240 play, timeline trigger, 113, 114, 119 plugin file, 190 plus button (+), adding triggers to element, 115 PNG files, 49 pointing finger as cursor moves over clickable items, 207 changing cursor on web page, 160 positioning templates, 67, 72 Poster Stage properties, 27 PowerPoint presentations, 50 preformatted () text tag, 77 preloader about, 172, 177 filenames, 188 in placing two compositions on same page, 181 in project files, 190 JavaScript, 188 stage property, 27 Preloader Stage command, in View menu, 238 previewing projects, keyboard shortcut, 114 projects adding text to, 56 adding triggers to point in time, 121– 122 Animate files in, 190 creating, 11–12 creating banner ad, 176–178 creating button symbol, 144–147 creating drop-in heading, 66–71 creating sliding show, 50–53 creating text callouts, 154–162 files created for, 190 filmstrip animations, 100–103 looping animation, 127–130 non-linear thinking and design, 126 placing two compositions in one HTML document, 180–183 practical application of JavaScript and jQuery, 203–209 previewing projects, keyboard shortcut, 114 saving, 11–12, 190 sleuthing through JavaScript,  187–194 swapping photos, 211–214 transitions, creating, 90–100 about, 90 add Easing property, 98 editing, 95–96 instant, 90–91 in timeline, 73 setting pin for smooth transitions, 91–93 trigger action, 107–112 Properties panel about, 13, 245 Add Keyframe buttons, 52 Add Keyframe for Border Radii,  43–44 Alpha channel (opacity), 31 applying HTML tags to text, 78 drop shadows controls on, 46 drop shadow settings in, 158 font settings in, 158 ID properties, 28 Location properties about, 29 repositioning text using, 56 X/Y, 65 On/Off switch, 53–54 Size properties, 29 Title box in, 107 Transform properties, 33–34 property keyframes adding and removing, 94 animating timeline using, 54 creating, 40 in Timeline window, 41 Index www.it-ebooks.info www.ebook777.com property keyframes 267 Free ebooks ==> www.ebook777.com property layers in Timeline property layers in Timeline diamond button next to, 41 expanding and collapsing, 41 Publish commands, in File menu, 233 Q questions about Animate, getting help for, 238 R radii setting, changing, 43 raster graphics, file formats for, 49 readability of type, 61 rectangles animating, 38–44 background color, 31 border color, 31 building, 28–30 changing scale of, 34 changing shape and size, 29 Element Display menu, 30 ID properties, 28 line thickness, uniform, 137 Location properties, 29 overflow control of, 30 parts of, 31 renaming, 28 rounded about, 43–44 creating curved lines with,  136–137 Size properties, 29 Tag property, 29 tools, 31, 43–44 transforming, 33–34 using Arrange, Align and Distribute tools in, 36–37 Rectangle tool, 43–44 Redo command, in Edit menu, 234 rel (relationship) attribute, 168 renaming elements, 31 rectangles using ID property, 28 symbols, 143–144 repositioning text, 56 reserved words, in JavaScript, 197, 200–201 Reset submenu, in Workspace menu, 244 resources for developers, on on browser capabilities, 24 268 Return command, in Timeline menu, 240 Revert command, in File menu, 232 Right submenu, in Align menu, 239 Right submenu, in Distribute menu, 239 Robbins, Jennifer Niederst, 167 rollover action creating button symbol with, 144–147 creating text callouts with, 154–162 rollover gallery, 212–213, 214 rollover gallery files, 212–215 Rotate properties, in rectangles,  33–34 rounded rectangles about, 43–44 creating curved lines with, 136–137 Rounded Rectangle Tool, 43–44 Rulers command, in View menu, 237 S Safari Books Online, 7 Sans serif typefaces, 58 Save All command, in File menu, 232 Save command, in File menu, 232 saving projects, 11–12, 190 scale of rectangles, changing, 34 Scale properties, 65 scripting languages, 186 links, 188 scrolling through timelines, 85 scroll option, in Overflow menu, 27 scroll trigger, 113 Search box, finding Google web fonts , 62 Select All command, in Edit menu, 235 selecting elements, 199–200 objects, 31 semicolons (;), in JavaScript, 197–198 Send Backward submenu, in Arrange menu, 238 Send to Back submenu, in Arrange menu, 239 Show All button, 82 show and hide actions, 122, 203–211 show() function, 205, 209, 215 Show/Hide button, in Timeline panel, 88 Show/Hide Element buttons, in Elements panel, 50 Index www.it-ebooks.info Free ebooks ==> www.ebook777.com single quotes (') tags, 167 Size properties about, 29 W/H, 65 Skew properties, in rectangles, 34 slashes (//), in comments, 111 slideDown() function, 206 slideshow control using conditional statements,  226–232 slideToggle() function, 206 slideUp() function, 206 sliding left and Right animations,  210–212 sliding shows about, 50 create clickable slideshows, 123–126 creating slideshows that automatically swaps images,  50–53 sliding up and down animations, 206 small type, using, 61 Smart Guides in drawings, 133 toggling on and off using command in View menu, 238 using keyboard shortcut, 36 using to align elements, 36 Snapping command, in Timeline menu, 242 Snap To command, in Timeline menu, 242 Snap To options, on Timeline panel, 84–85 snippet comments, turning off, 109 source code Google Chrome, file registering Animate projects in, 193 viewing browser, 166, 189 viewing jQuery, 190 Special Characters command (Mac only), in Edit menu, 237 spectrum bar, in color picker, 30 squares, creating, 28 Square, used in JavaScript, 215 stage about, 13, 14, 25 adding elements to, 193–195 Clip properties on, 66 file defining, 190 file in Animate, 190 list of elements appearing an, 20 Open Actions button, 113 properties of, 26–27 symbol instance on, 221, 222 triggers and actions for timeline and, 113–118 “Stop at” action, 124–125 stop() method, 224 stop, timeline trigger, 113 string literals, in JavaScript functions, 196 strings, as JavaScript data type, 195 style sheets, formatting specs in, 169 See also Cascading Style Sheets (CSS) styles, in CSS, 170 subtract numbers (-) operator, 198 SVG files, 49 swapping images, 211–214 switch() conditional statements, 232 symbol instance, on stage, 221, 222 symbols about, 131–133 animating on stage, 142–144 assigning variables, 216–217 building drop-down menus, 153 building with, 133–137 button adding click state to, 148–151 creating, 144–147 opening web page with, 151 changing, 214–218 consistency of, 132 creating text callouts, 154–162 deleting, 144 duplicating, 143–144 grouping, 132 hotspot changing behavior of, 160 checking, 157–158 creating, 154–158 identifying elements within, 221–223 nesting within, 133, 137, 223 properties of rounded rectangles vs properties of, 135 renaming, 143–144 undoing, 144 updating, 132 Index www.it-ebooks.info www.ebook777.com ‌Symbols 269 Free ebooks ==> www.ebook777.com symbol timelines symbol timelines, 138–142, 224–225 sym.getSymbol() function, 223 sym, used in JavaScript, 200–201, 215, 219, 224 system requirements, for installing Edge Animate, 235 T tablet triggers, 130 Tag property, in rectangles, 29 tags cheat sheet for HTML tags, 167 in DOM, 199 types of, 166–167 tags, HTML about, 75 types of, 76 Tahoma, sans-serif typeface, 59 templates dealing with, 71–72 positioning, 67, 72 testing timeline’s play trigger, 114 triggers and actions, 109 text, 55–77 about typefaces and fonts, 58–60 adding bounce to, 71–73 adding links to, 75–76 adding to project, 56 aligning, 57 changing size of letters, 65 containers, 56 creating drop-in heading, 66–71 choosing typeface, 68 creating positioning template, 67, 72 dialing font size by number, 57 fonts vs typefaces, 60 formatting options, 58 HTML tags, 77–78 indenting first line of, 57 italicizing, 57 location properties, 65 readability of, 61 repositioning, 56 setting letter-spacing in, 58 setting line height in, 58 size properties, 65 underlining, 57 varying distange between words, 58 270 text-align option, 57, 58 text boxes adding HTML anchor tags, 221 animating, 65 cropping, 66 linking to words in, 176 naming element, 204 text callouts animating, 157–160 creating, 154–162 text containers, 56 TextEdit, Mac text editor, 166, 188 text editors, 76, 166, 188 text-indent option, 57, 58 Text tool, 56 this, used in JavaScript, 200–201 timeline about, 81–82 bookmarking, 85 button controls, 127–130 choosing moment on, 83–84 conditional statements to position playhead in, 225–226 displaying on two monitors, 103 elements in color-coding of, 20, 87 Expand/Collapse button, 87 list of, 20 location of, 82 names of non-animated, 19 understanding controls, 86–87 expanding and collapsing property, 41 file defining, 190 inserting time on, 96 keyboard shortcuts, 88–89 labels adding, 85 deleting, 86 editing, 86 moving, 86 maximizing workspace, 103 methods for stopping and playing, 226 property keyframes in animatiing using, 40–42, 54 symbol, 138–142, 224–225 transitions, 90–100 about, 90 add Easing property, 98 Index www.it-ebooks.info Free ebooks ==> www.ebook777.com creating, 73 creating instant, 90–91 editing, 95–96 fine-tuning, 96–99 setting pin for smooth, 91–93 triggers adding to loop animation, 119–120 adding to point in time, 121–122 and actions for, 113–118 tricks and, 118–122 Timeline command, in Window menu, 244 Timeline menu about, 240–243 Expand/Collapse All command, 86 Expand/Collapse Selected command, 86 Insert Label command, 85 keyboard shortcuts with menu commands, 89 Timeline panel about, 14, 118 Auto-Keyframe Properties button, 40, 43, 52 cheat list for tasks in, 89–90 Color bars in, 93 creating Location keyframes in, 52 creating Opacity keyframes in, 52 diamond button in, 41 Generate Smooth Transitions button in, 38 horizontal scroll, 85 Insert Time command, 96 keyframes, 41, 82 Only Show Animated Elements button, 38, 87 On/Off toggle button in, 53–54 Open Actions button, 115 Playback controls, 83 Playhead about, 82 about two-part, 92 choosing moment in time, 83–84 moving to beginning of timeline, 24 Pin, 21, 92 Snap To options, 84–85 Toggle Mark command, 51 Zoom slider, 71, 82 Times New Roman, Times, serif typefaces, 59 Times, serif typeface, 59 Title box, in Properties panel, 107 toggle actions, 205–206 toggle() function, 205 Toggle Pin button, 20, 83 Toggle Pin command, in Timeline menu, 242 Toolbar, 14 tools Align, 36–37, 239 Arrange, 37–38, 238 Clip, 47 Distribute, 36–37, 239–240 EaseOutBounce, 74 Lock/Unlock in Elements panel, 50 in Timeline panel, 88 Rectangle, 31, 43–44 Show/Hide tool in Elements panel, 50 in Timeline panel, 88 Text, 56 Transform, 33, 35 Tools command, in Window menu, 245 Top submenu, in Align menu, 239 Top submenu, in Distribute menu, 239 touchend trigger, 130 touchmove trigger, 106, 130 touchscreen specific triggers, 130 touchstart trigger, 130 Transform command, in Edit menu, 236 Transform Origin about, 33 in text box, 65 point, 34 Transform properties in rectangles, 33–34 Transform tool, 33, 35, 133, 139–140 transitions, 90–100 about, 90 add Easing property, 98 creating instant, 90–91 editing, 95–96 fine-tuning, 96–99 setting pin for smooth, 91–93 Trebuchet MS, sans-serif typeface, 59 Index www.it-ebooks.info www.ebook777.com Trebuchet MS, sans-serif typeface 271 Free ebooks ==> www.ebook777.com triggers and actions 272 triggers and actions about, 105–106, 117 adding triggers to point in time,  121–122 adding trigger to loop animation, 119–120 changing properties, 214–218 click triggers, 106, 111 compositionReady trigger about, 113–114 using, 115 creating clickable slide show, 123–126 delaying, 205 deleting, 115 editing actions, 116–118 elements, 106–110 file defining, 190 for stage and timeline, 113–118 mouseover, 211 non-linear thinking and design,  126–127 Open Actions buttons, 113 show and hide actions, 122, 203–211 sliding left and right, 210–212 sliding up and down, 206 steps in building interactions, 106 testing timeline’s play trigger, 114 triggers and actions, 109 Timeline triggers and tricks, 118–122 trigger action project, 107–112 triggers for handheld devices, 130 undoing, 115 using labels in timeline code, 120–121 troubleshooting alert() function, if dialogue box never appears, 220 animating duplicated elements, 39 animations, 42–43 messages while viewing JavaScript file in Animate, handling, 192 missing keyframe, 94 typefaces Arial, sans-serif, 59 Book Antiqua, serif, 59 choosing, 57–60 Courier, Courier New, monospace, 59 decorative, 60 for headings, 68 for titles, 68 Geneva, sans-serif, 58, 59 Georgia, serif, 59 Helvetica, sans-serif, 59 Lucida Console, sans-serif, 60 Lucida Grande, sans-serif, 59 Lucida Sans Unicode, sans-serif, 59 Monaco, sans-serif, 60 MS Serif, serif, 60 New York, serif, 60 Palatino, Palatino Linotype, serif, 59 readability of type, 61 Sans serif, 58 Tahoma, sans-serif, 59 Times New Roman, Times, serif, 59 Times, serif, 59 Trebuchet MS, sans-serif, 59 using special effects, 58 using web fonts, 61–64 Verdana, sans-serif, 58 vs fonts, 60 typekit.com, web fonts at, 65 U underlining text, 57 undock panels, 15 Undo command, in Edit menu, 234 undoing symbols, 144 triggers and actions, 115 unequal (!=) operator, 198 uninstalling Edge Animate, 237 unlock frames, 15 update, timeline trigger, 113 user feedback, changing pointingfinger cursor to provide, 160–161 V values checking with alert() Dialogs, 220 in HTML, 167 in JavaScript, 216 variables, JavaScript, 197, 216, 217 vector graphics creating, 28 file formats for, 49 Verdana, sans-serif typeface, 58 Vertical Center submenu, in Align menu, 239 Vertical Center submenu, in Distribute menu, 240 Index www.it-ebooks.info Free ebooks ==> www.ebook777.com View menu command descriptions, 237–238 View Source command, from shortcut menu, 166, 189 visual effects, 11, 208–209 W web browsers battle of, 185 creating alternative elements for non-HTML5 proficient, 27 HTML5, 24 playing animations in, 24 using web fonts, 61 viewing animations in, 23–24 viewing source code, 166, 189 visibility of hidden elements in, 48, 50 web fonts sources of, 61, 65 using, 61–64 web pages See also HTML documents adding HTML anchor tags in, 221 creating, 26 diagram of elements on, 200 opening with button, 151 pointing-finger cursor on, 160 while, using in JavaScript, 197 whitespace, in JavaScript, 197 W/H size properties, 65 window control menus, 15 Window menu command descriptions, 244–245 Windows vs Macintosh versions of Animate, 4 word-spacing, setting, 58 workspace customizing, 15–16 Workspace command, in Window menu, 244 X Zoom to Fit X/Y Position properties, 65 Z Z axis, 37 Zoom In command in Timeline menu, 243 in View menu, 237 Zoom Out command in Timeline menu, 243 in View menu, 237 zoom slider, timeline, 71, 82 Zoom to Fit button, 82 command in Timeline menu, 243 Index www.it-ebooks.info www.ebook777.com 273 ... www.it-ebooks.info www.ebook 777 .com Free ebooks ==> www.ebook 777 .com Adobe Edge Animate Preview 7: The Missing Manual by Chris Grover Copyright © 2012 Chris Grover All rights reserved Printed in the United States... Chapter and it’s the second folder for the chapter ADOBE EDGE Animate preview 7: The Missing Manual www.it-ebooks.info Free ebooks ==> www.ebook 777 .com For many of the exercises, there are completed... under Assets in the Library panel 18 adobe edge animate preview 7: The Missing Manual www.it-ebooks.info Free ebooks ==> www.ebook 777 .com In the Properties panel, click the ID box at the very top