adobe® edge animate on demand -...

http://www.facebook.com/share.php?u=http://www.quepublishing.com/title/9780789749369

http://twitter.com/?status=RT: download a free sample chapter http://www.quepublishing.com/title/9780789749369

https://plusone.google.com/share?url=http://www.quepublishing.com/title/9780789749369

http://www.linkedin.com/shareArticle?mini=true&url=http://www.quepublishing.com/title/9780789749369

http://www.stumbleupon.com/submit?url=http://www.quepublishing.com/title/9780789749369/Free-Sample-Chapter

Adobe®

Edge AnimateonDemand

Steve Johnson, Perspection, Inc.

Que Publishing, 800 East 96th Street, Indianapolis, IN 46240 USA

Adobe® Edge Animate on Demand

Copyright © 2013 by Perspection, Inc.

All rights reserved. No part of this book shall be reproduced, stored in aretrieval system, or transmitted by any means, electronic, mechanical, photo-copying, recording, or otherwise, without written permission from the publish-er. No patent liability is assumed with respect to the use of the informationcontained herein. Although every precaution has been taken in the prepara-tion of this book, the publisher and author assume no responsibility for errorsor omissions. Nor is any liability assumed for damages resulting from the useof the information contained herein.

Library of Congress Cataloging-in-Publication Data is on file

ISBN-13: 978-0-7897-4936-9

ISBN-10: 0-7897-4936-X

Printed and bound in the United States of AmericaFirst Printing: December 2012

15 14 13 12 4 3 2 1

Que Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales.

For information, please contact: U.S. Corporate and Government Sales

1-800-382-3419 or [email protected]

For sales outside the U.S., please contact: International Sales

1-317-428-3341 or [email protected]

TrademarksAll terms mentioned in this book that are known to be trademarks or servicemarks have been appropriately capitalized. Que cannot attest to the accuracyof this information. Use of a term in this book should not be regarded asaffecting the validity of any trademark or service mark.

Adobe, the Adobe logo, Acrobat, After Effects, AIR, Audition, Bridge, Connect,Captivate, Device Central, Dreamweaver, Edge Animate, Edge Code, EdgeInspect, Edge Reflow, Edge Web Fonts, Extension Manager, Fireworks, Flash,Flash Builder, InCopy, InDesign, Illustrator, Muse, OnLocation, Premiere Pro,Photoshop, Photoshop Elements, SoundBooth, and Typekit are registeredtrademarks of Adobe System Incorporated.

Warning and DisclaimerEvery effort has been made to make this book as complete and as accurate aspossible, but no warranty or fitness is implied. The authors and the publishersshall have neither liability nor responsibility to any person or entity withrespect to any loss or damage arising from the information contained in thisbook.

PublisherPaul Boger

Associate PublisherGreg Wiegand

Acquisitions EditorLaura Norman

Managing EditorSteve Johnson

AuthorSteve Johnson

Page LayoutJames Teyler

Interior DesignersSteve JohnsonMarian Hartsough

IndexerKristina Zeller

ProofreaderBeth Teyler

Team CoordinatorCindy Teeters

iii

Acknowledgments

a

aPerspection, Inc.Adobe Edge Animate on Demand has been created by the professional trainers andwriters at Perspection, Inc. to the standards you’ve come to expect from Que pub-lishing. Together, we are pleased to present this training book.

Perspection, Inc. is a software training company committed to providing informationand training to help people use software more effectively in order to communicate,make decisions, and solve problems. Perspection writes and produces softwaretraining books, and develops multimedia and web-based training. Since 1991, wehave written more than 120 computer books, with several bestsellers to our credit,and sold over 5 million books.

This book incorporates Perspection’s training expertise to ensure that you’ll receivethe maximum return on your time. You’ll focus on the tasks and skills that increaseproductivity while working at your own pace and convenience.

We invite you to visit the Perspection web site at:

www.perspection.com

AcknowledgmentsThe task of creating any book requires the talents of many hard-working peoplepulling together to meet impossible deadlines and untold stresses. We’d like tothank the outstanding team responsible for making this book possible: the writer,Steve Johnson; the production editor, James Teyler; proofreader, Beth Teyler; andthe indexer, Kristina Zeller.

At Que publishing, we’d like to thank Greg Wiegand and Laura Norman for theopportunity to undertake this project, Cindy Teeters for administrative support, andSandra Schroeder for your production expertise and support.

Perspection

http://www.perspection.com

iv

aa

About the AuthorSteve Johnson has written more than 80 books on a variety of computer software,including Adobe Photoshop CS6, Adobe Dreamweaver CS6, Adobe InDesign CS6,Adobe Illustrator CS6, Adobe Flash Professional CS5, Microsoft Windows 8,Microsoft Office 2010 and 2007, Microsoft Office 2008 for the Macintosh, and AppleOS X Mountain Lion. In 1991, after working for Apple Computer and Microsoft,Steve founded Perspection, Inc., which writes and produces software training. Whenhe is not staying up late writing, he enjoys coaching baseball, playing golf, garden-ing, and spending time with his wife, Holly, and three children, JP, Brett, and Han-nah. Steve and his family live in Northern California, but can also be found visitingfamily all over the western United States.

Acknowledgements v

a

We Want to Hear from You!As the reader of this book, you are our most important critic and commentator. Wevalue your opinion and want to know what we’re doing right, what we could do bet-ter, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.

As an associate publisher for Que, I welcome your comments. You can email orwrite me directly to let me know what you did or didn’t like about this book—as wellas what we can do to make our books better.

Please note that I cannot help you with technical problems related to the topic of this book. We do have a User Services group, however, where I will forward spe-cific technical questions related to the book.

When you write, please be sure to include this book’s title and author as well asyour name, email address, and phone number. I will carefully review your com-ments and share them with the author and editors who worked on the book.

Email: [email protected]

Mail: Greg WiegandQue Publishing800 East 96th StreetIndianapolis, IN 46240 USA

For more information about this book or another Que title, visit our web site atwww.quepublishing.com. Type the ISBN (excluding hyphens) or the title of a book inthe Search field to find the page you’re looking for.

http://www.quepublishing.com

This page intentionally left blank

vii

Contents

c

cIntroduction xiii

Getting Started with Edge Animate 1

Finding Out What You Can Do with Edge Animate 2Exploring Edge Animate and Edge Tools 3Starting Edge Animate 4Using the Welcome Screen 6Viewing the Edge Animate Window 8Preparing for a Project 9Creating a Project Plan 10Building an Edge Animate Project 12Creating a New Animation 14Getting Sample Animations 15Opening an Existing Animation 16Working with Multiple Animations 18Previewing an Animation in a Browser 19Saving an Animation 20Getting Online Support 22Finishing Up 24

Working Within the Edge Animate Window 25

Examining the Edge Animate Window 26Changing Stage Properties 28Working with the Stage 30Changing the Stage View 31Using the Tools Panel 32Using the Properties Panel 34Using the Elements Panel 36Using the Library Panel 38Using the Timeline Panel 40Working with Timeline Panel Controls 42Using the Code Panel 44Working with Panels 46

2

1

viii

c

Docking and Undocking Panels 48Creating and Using Workspaces 50Defining Keyboard Shortcuts 52Changing the Language 54Undoing or Redoing Changes 55

Taking In�App Lessons 57

Starting a Lesson 58Using the Lessons Panel 60Taking the Quick Start Lesson 61Taking the Create Lesson 62Taking the Animate with Keyframes Lesson 64Taking the Animate with the Pin Lesson 68Taking the Resize Lesson 70Taking the Extend Lesson 74Taking the Reuse Lesson 78

Working with Shapes and Graphics 81

Understanding Vector and Bitmap Graphics 82Gathering and Using Graphics 83Examining Import Graphic Formats 84Importing Graphics 85Adding Graphics 86Drawing Shapes 88Using Smart Guides with Elements 90Selecting Elements 92Naming Element IDs or Classes 94Changing Element Tags 95Changing Element Display 96Changing Element Overflow 97Changing Element Opacity 98Changing Element Position 99Changing Element Size 100Changing Element Adjustability 101Changing Shape Corners 102Changing Shape Borders 104Changing Shape Background Color 106Adding Shadows to Elements 107Changing Cursors Over Elements 108Modifying Image Elements 109Transforming Element Origin 110

4

3

Contents ix

c

Rotating Elements 112Skewing Elements 114Scaling Elements 116Changing Element Clipping 118Adding Accessibility to Elements 120

Working with Text 121

Creating Text Boxes 122Adding Text 123Editing Text 124Dictating Text 125Inserting Special Characters 126Examining Text Properties 127Changing Text Properties 128Getting Web Fonts 130Adding Web Fonts 132Resizing Text Boxes 134Clipping Text 135Transforming Text 136Adding Shadows to Text 138Changing Text Tag 139Adding Links to Text 140

Working with Symbols and Elements 143

Creating Symbols 144Importing Symbols 145Exporting Symbols 146Creating an Instance from a Symbol 147Modifying an Instance from a Symbol 148Editing Symbols 150Nesting Symbols within Symbols 152Copying or Duplicating Elements 154Deleting Elements 156Displaying Rulers 158Displaying Guides 159Using Guides with Elements 160Aligning and Distributing Elements 162Stacking Elements 164Hiding and Showing Elements 165Grouping Elements 166Reparenting Elements 167

6

5

x

c

Locking and Unlocking Elements 168Renaming Elements 169

Creating Motion Animations 171

Creating an Animation with the Pin 172 PrEx

Creating an Animation with Auto Keyframes 174 PrEx

Creating an Animation with Keyframes 176 PrEx

Creating an Animation with a Transition 178Playing Animations 180Making Adjustments to Animations 182Adjusting Time in an Animation 184Inserting Time in an Animation 185Making a Resizable Animation 186 PrEx

Testing a Resizable Animation 190

Creating Interactive Animation 193

Inserting Labels 194Inserting and Editing Triggers 196Inserting and Editing Action Events 198Listing of Action Events 200Inserting Code Snippets 202Listing of Code Snippets 203Working with JavaScript Code 204Using Show and Hide Element Snippets 206Using Element Text Snippets 208Using the Open URL Snippet 210Using Get Symbol Snippets 212Using Create and Delete Symbol Snippets 214Creating a Rollover Button 216 PrEx

Creating a Shopping Cart Button 218 PrEx

Embedding and Playing a Video 220 PrEx

Adding and Playing a Sound 221 PrEx

Swapping Images in a Photo Gallery 222 PrEx

Publishing Animations 223

Publishing Considerations 224Publishing a Composition 225Publishing for the Web 226Publishing to the Web for IE 6, 7, and 8 227Publishing to the Web Using CDN 228Publishing to the Web as Static HTML 229

9

8

7

Contents xi

c

Publishing for Adobe Programs 230Publishing for iBooks Author 232Capturing a Poster Image 234Creating a Down-level Stage 236Creating a Preloader Stage 238

Working with HTML, CSS, and JavaScript 241

Examining Edge Animate Files 242Viewing the Code Behind the Scenes 244Examining the Adobe Edge Animate Runtime 246Getting to Know HTML 248Working with HTML 250Getting to Know CSS 252Working with CSS 254Putting a Composition in an HTML Document 256Adding an Animation to an HTML Document 258

Working Together with Adobe Programs 259

Opening Compositions in Adobe Dreamweaver 260Importing into Adobe Muse 262Importing into Adobe InDesign 264Working with Adobe Digital Publishing Suite 266Saving Images from Adobe Photoshop 268Saving Graphics from Adobe Fireworks 270Exporting Images from Adobe Illustrator 272Saving Artwork from Adobe Illustrator 274Exporting Animations from Adobe Flash 276

Installing Edge Animate and Edge Tools 279

Preparing for Edge Animate and Tools 280Downloading Edge Animate and Tools 282Installing Edge Animate and Tools 284Finishing the Edge Inspect Install 286

Keyboard Shortcuts 289Menu by Menu 293Index 301

A

11

10

This page intentionally left blank

xiii

Introduction

Welcome to Adobe Edge Animate on Demand, a visual quickreference book that shows you how to work efficiently withEdge Animate. This book provides complete coverage ofbasic to advanced Edge Animate skills.

How This Book WorksYou don’t have to read this book in any particular order.We’ve designed the book so that you can jump in, get theinformation you need, and jump out. However, the book doesfollow a logical progression from simple tasks to more com-plex ones. Each task is presented on no more than two facingpages, which lets you focus on a single task without havingto turn the page. To find the information that you need, justlook up the task in the table of contents or index, and turn tothe page listed. Read the task introduction, follow the step-by-step instructions in the left column along with screen illus-trations in the right column, and you’re done.

What’s NewAdobe Edge Animate 1.0 is the debut version of the product,so everything in the product is New!You can look forward tomany more new features in the next version of the product.

Keyboard ShortcutsMost menu commands have a keyboard equivalent, such asCtrl+I (Win) or A+I (Mac), as a quicker alternative to usingthe mouse. A complete list of keyboard shortcuts is availablein the back of this book.

How You’ll Learn

How This Book Works

What’s New

Keyboard Shortcuts

Step-by-Step Instructions

Real World Examples

Project Examples

Workshops

Get More on the Web

xiv

Step-by-StepInstructionsThis book provides concise step-by-step instructions that show you“how” to accomplish a task. Eachset of instructions includes illus-trations that directly correspond tothe easy-to-read steps. Alsoincluded in the text are time-savers, tables, and sidebars tohelp you work more efficiently orto teach you more in-depth infor-mation. A “Did You Know?” pro-vides tips and techniques to helpyou work smarter, while a “SeeAlso” leads you to other parts ofthe book containing related infor-mation about the task.

Real World ExamplesThis book uses real world exam-ple files to give you a context inwhich to use the task. By usingthe example files, you won’t wastetime looking for or creating sam-ple files. You get a sample file tosee how a feature works andapply what you have learned. Notevery topic needs an example file,such as changing options. Theexample files that you need forproject tasks are available on theweb at www.queondemand.comor www.perspection.com.

Real worldexamples helpyou apply whatyou’ve learnedto other tasks.

Illustrationsmatch thenumberedsteps.

Numberedsteps guideyou througheach task.

Did You Know? alertsyou to tips, techniquesand related information.

See Also points you torelated information inthe book.

Easy-to-followintroductionsfocus on asingle concept.

http://www.queondemand.com


The ProjectExamples walkyou through tasksto help you putEdge Animate towork.

Introduction xv

Project ExamplesFor some topics, this book includesproject examples that provide step-by-step tasks with specific endresults. They are like mini-work-shops. You start each project with asample file, work through thesteps, and then compare yourresults with a project results file atthe end. The project example filesare available on the web atwww.queondemand.com orwww.perspection.com. Look forthe icon: PrEx. The icon appears inthe table of contents so you canquickly and easily identify them.

WorkshopsThis book shows you how to puttogether the individual step-by-step tasks into in-depth projectswith the Workshops. You start eachproject with a sample file, workthrough the steps, and then com-pare with a results file at the end.The Workshops and associatedfiles are available on the web atwww.queondemand.com orwww.perspection.com. The Workshops

walk you throughin-depth projectsto help you putEdge Animate towork.





xvi

Get More on the WebIn addition to the information inthis book, you can also get moreinformation on the web to helpyou get up-to-speed faster withEdge Animate. Some of the infor-mation includes:

Productivity Tools◆ Keyboard Shortcuts.

Download a list of keyboardshortcuts to learn faster waysto get the job done.

More Content◆ More Content. Download

new content developed afterpublication.

You can access these additionalresources on the web atwww.queondemand.com orwww.perspection.com.

Additionalcontentis availableon the web.



Taking In-App Lessons

Introduction

From the Welcome screen or the Lessons panel, you can useIn-App Lessons to help you get started with the project inEdge Animate. The In-App Lessons provide seven step-bystep topics with the aid of the Lessons panel to walk youthrough the process of creating animations with EdgeAnimate. The lessons include Quick Start to help you getgoing, Create to teach you how to work with shapes, text andimages, Animate I: Keyframes and II: The Pin to show youhow to use keyframes and pins, Resize to learn how torespond to size changes, Extend to learn how to loop andhandle user interaction, and Reuse to show you how to cre-ate reusable elements with symbols.

If you want further help and instructional materials, youcan use links in the Welcome screen to access a list of keyfeatures and product release notes, and helpful resourcesfrom online content, including Help and Tutorials, videos onAdobe TV, community forums, and sample projects. In addi-tion, you can access Facebook and Twitter to get more infor-mation about Edge Animate. 3

3What You’ll Do

Start a Lesson

Use the Lessons Panel

Take the Quick Start Lesson

Take the Create Lesson

Take the Animate with KeyframesLesson

Take the Animate with the Pin Lesson

Take the Resize Lesson

Take the Extend Lesson

Take the Reuse Lesson

57

58 Chapter 3

Within Edge Animate you can take In-App Lessons to help you getstarted with the project. Edge Animate provides seven In App step-bystep lessons with the aid of the Lessons panel. The lessons includeQuick Start to help you get going, Create to teach you how to work withshapes, text and images, Animate I: Keyframes and II: The Pin to showyou how to use keyframes and pins, Resize to learn how to respond tosize changes, Extend to learn how to loop and handle user interaction,and Reuse to show you how to create reusable objects with symbols.You can start an In App Lesson from the Welcome screen or theLessons panel. After you start a lesson, the Lessons panel walks youthrough topic as you perform the steps in the Edge Animate window.

Starting a Lesson

Start a Lesson from theWelcome Screen

Start Adobe Edge Animate, orclose all open documents (clickthe File menu, and then clickClose All).

Click Getting Started, if necessary.

Point to a lesson tile to view abrief description.

Click a lesson tile to start it.

The Welcome screen closes, EdgeAnimate creates a new Untitledproject, and the Lessons panelopens with the selected lesson.

Read and perform the lesson stepsin the Edge Animate window asindicated in the Lessons panel.

At the bottom of the Lessonspanel, click the Next Step link.

Follow the additional steps or clicklinks to start other lessons.

After you complete the lesson, youcan save or close the Untitledproject.

To close the Lessons panel, clickthe Window menu, and then clickLessons or click the Close buttonon the panel.

8

7

6

5

4

3

2

1

4

28 3

Chapter 3 Taking In-App Lessons 59

Start a Lesson from the LessonsPanel

Click the Window menu, and thenclick Lessons to select (show) thecheck mark.

The Lessons panel opens,displaying a list of In-App Lessons.


Edge Animate creates a newUntitled project, and the Lessonspanel displays the start of theselected lesson.

Read and perform the lesson stepsin the Edge Animate window asindicated in the Lessons panel.


Follow the additional steps or clicklinks to start other lessons.

After you complete the lesson, youcan save or close the Untitledproject.


6

5

4

3

2

1

4

3

2

6Lessons panel

60 Chapter 3

After you start a lesson, you use the Lessons panel to walk you throughthe step by step instructions to complete the topic. If the Lessons paneltakes up too much room in the Edge Animate window, you can dock it toanother panel—the Properties panel is a good place to put it—orundock it as a separate window. As you work through a lesson, you canuse the navigation at the top of the Lessons panel to get around. Youcan use the Lessons button to display all the lessons or the navigationbuttons to switch between panels in the Lessons panel.

Using the LessonsPanel

Use the Lessons Panel

Click the Window menu, and thenclick Lessons to select (show) thecheck mark.

The Lessons panel opens,displaying a list of In-App Lessons.


Edge Animate creates a newUntitled project, and the Lessonspanel displays the start of theselected lesson.

Follow the lesson steps in theEdge Animate window, and thenclick the Next Step link at thebottom of the panel.

To go back and forth between theStep panels, click the Previous orNext button or click the PaneName list arrow, and then click apane name.

To display the list of lessons, clickthe Lessons button.


6

5

4

3

2

1

3

5 46 Navigation options


With the Quick Start lesson, you can quickly create your first animationin Edge Animate. It’s quick and easy, but it gives you simple way to seehow an animation works. You’ll create a rectangle on the Stage andthen use the Pin button and the Playhead in the Timeline to make theshape move across the screen. After you create the animation, you’llplay it back on the Stage and in the Timeline to see how it works.

Taking the Quick StartLesson

Take the Quick Start Lesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Quick Start lessontile to start it.

The Welcome screen closes, EdgeAnimate creates a new Untitledproject, and the Lessons paneldisplays the start of the lesson.

Select the Rectangle Tool on theTools panel.

Draw a rectangle in the upper-leftcorner of the Stage.

Click the Pin button in theTimeline.

Drag the Playhead to 0:01 (1 second).

Move the rectangle to the lower-right corner of the Stage.

Click the gray color chip (diamond)in the Properties panel.

Click the Background Color box onthe Tools panel, and then select acolor from the palette.

Click the Play button or pressSpace to play back the animation.


The lesson is complete.

Click the File menu, click Save,navigate to a folder, create afolder, enter a name for thecomposition, and then click Save.

11

10

9

8

7

6

5

4

3

2

12 8

7 4

6

5

Draw the rectangle in this area3

62 Chapter 3

With the Create lesson, you’ll learn how to quickly draw and work withassets in Edge Animate. An asset is any artwork or element, such asshapes, images, buttons, and fonts, you have created or imported intoyour composition. In this lesson, you start from a sample file, and thenuse it to work create and work with elements. You’ll create a roundedrectangle, add text, add graphics from the Library panel, and organizeelements in the Elements panel.

Taking the CreateLesson

Take the Create Lesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Create lesson tileto start it.


Click the Click to open the samplelink.

The content_creation.html fileopens, displaying a blank Stage.

Click the Next Step link to createcontent (Step 2 of 5).

Select the Rounded RectangleTool on the Tools panel.

Draw a rounded rectangle in thecenter of the Stage.

In the Properties panel, click onthe link between W and H, andthen set the size of W to 220 and Hto 130.

Click the Next Step link to add text(Step 3 of 5).

Click the Text Tool on the Toolspanel.

Click in the center of the rectangleand type Hello World.

Click the Close button in the Texteditor.

Continue Next Page

10

9

8

7

6

5

4

3

2

14 56

8 11

10

9


Select the text, and then drag tocenter the text in the shape.

As you drag towards the center,Smart Guides (horizontal andvertical) appear to indicate thecenter.

Click the Next Step link to importgraphics (Step 4 of 5).

Drag the background.jpg icon fromthe Library pane onto the Stageand place it at 0,0 (the upper-leftcorner of the Stage). As you drag,the position appears on the Stage.

The background image covers allthe other elements on the Stage.

In the Elements panel, drag thebackground.jpg <div> elementbelow the RoundRect <div>element. As you drag a black barappears indicating the newlocation.

The background image moves tothe back of the Stage.

Click the Next Step link to organizeelements (Step 5 of 5).

In the Elements panel, drag theText <div> element onto theRoundRect <div> element. As youdrag on top, the destinationelement changes to gray.

The Text element is nowassociated with the RoundedRectangle element.


Click the File menu, click Save As,navigate to a folder, create afolder, enter a name for thecomposition, and then click Save.

To open a finished version of thelesson, click the Click to open thefinished sample link.

18

17

16

15

14

13

12

11

13

Drag image to (0,0)

14

Drag element here

16

Completed lesson

18

17

64 Chapter 3

With the Animate I: Keyframes lesson, you can create an animation bysetting keyframes at specific times on the Timeline and changing prop-erty values between them. The property changes from one keyframe toanother over time on the Timeline creates animation. As an indicator,when a keyframe is hollow, it means that it has different value than theprevious keyframe. Using keyframes is a little more time consuming,however, you have more control over the results. To help make it easier,you can use Auto Keyframe Mode, which automatically createskeyframes when a property is modified, and Auto Transition Mode,which automatically creates a transition as needed.

Taking the Animatewith KeyframesLesson

Take the Animate withKeyframes Lesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Animate I:Keyframes lesson tile to start it.



The keyframe_animation.html fileopens, displaying a blank Stage.

Click the Next Step link to createkeyframes (Step 2 of 7).

Move the Playhead to 0:01.

Select the E element on the Stage.

In the Properties panel, click the Ykeyframe (diamond) to add akeyframe on the Timeline.


In the Properties panel, click the Ykeyframe again.

Change the Y value to -90.


The E letter jumps to its position.

10

9

8

7

6

5

4

3

2

1

10

4

56

9 7


Click the Next Step link to add atransition (Step 3 of 7).

When two keyframes havedifferent values, you can add atransition between the two values.

Right-click (Win) or Control-click(Mac) either of the keyframes, andthen click Create Transition.

A transition appears connectingthe keyframes in the Timeline.


The E letter smoothly transitions toits position.

Click the Next Step link to specifyeasing for the transition (Step 4 of 7).

Click the transition in the Timelineto select it.

Click the Easing button in theTimeline, select Ease Out, selectBounce, and then press Enter(Win) or Return (Mac).


The E letter falls and lands with abounce to its position.

Click the Next Step link to animatethe shadow element (Step 5 of 7).

Click the Auto Keyframe Modebutton in the Timeline to select it.

This automatically createskeyframes when a property ismodified.

Click the Auto Transition Modebutton in the Timeline to select it.

This automatically adds atransition when a property ismodified.

Continue Next Page

20

19

18

17

16

15

14

13

12

11

Keyframe

12

13

16201917

15

Easing options

66 Chapter 3

Continue from Previous Page

Select the shadow element on theStage.


In the Properties panel underTransform, click the Scale X andScale Y keyframe.


In the Properties panel underTransform, set the Scale X valueto 0. Since the X and Y are linked,both values change.

This creates an automaticanimation and transition using thecurrent one (Bounce).


The shadow animates along withthe E element.

Click the Next Step link to reusekeyframes (Step 6 of 7).

Select the E element on the Stage.

Click the Time Snapping button inthe Timeline to deselect it.

Move the Playhead to where the Efirst hits bottom, around 0.364.

In the Properties panel, click theRotation keyframe.

Move the Playhead to where the Ereaches the top of the bounce,around 0.544.

In the Properties panel, set theRotate value to -10.

Move the Playhead to where the Ehits bottom again, around 0.729.

Select the first rotation keyframe,making sure that only the onekeyframe is selected.

35

34

33

32

31

30

29

28

27

26

25

24

23

22

21

22

25

23 21

2426

34

29 35

2831

33


Press Ctrl+C (Win) or A+C (Mac)to copy the keyframe, and thenpress Ctrl+V (Win) or A+V (Mac)to paste it.

Click the Next Step link to reusetransitions (Step 7 of 7).

Click the Time Snapping button inthe Timeline to select it.

In the Elements panel, click thegray dot under Visibility for G, D,and E2 to display them on theStage.

In the Timeline, select the bar ontop of the transitions for the Eanimation to select all transitions.

Press Ctrl+C (Win) or A+C (Mac)to copy it.

Select the G element on the Stage,move the Playhead to 0:01, andthen press press Ctrl+V (Win) orA+V (Mac) to paste it.

Select the D element on the Stage,and then press press Ctrl+V (Win)or A+V (Mac) to paste it.

Select the E2 element on theStage, and then press press Ctrl+V(Win) or A+V (Mac) to paste it.


Each letter bounces in, one afterthe other..The lesson is complete.

Click the File menu, click Save As,navigate to a folder, create afolder, enter a name for thecomposition, and then click Save.

To open a finished version of thelesson, click the Click to open thefinished sample link.

47

46

45

44

43

42

41

40

39

38

37

36

42

38 40

39

44

Pasted animationfor G, D, and E2

45

46

68 Chapter 3

With the Animate II: The Pin lesson, you can quickly create an animationby using the Pin to help you create keyframes. You’ll learn how to workwith the Playhead and the Pin to create an animation region. You’ll usethe completed file from the Create lesson (Hello World) and then add anentrance and exit animation to it.

Taking the Animatewith the Pin Lesson

Take the Animate with the PinLesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Animate II: The Pinlesson tile to start it.



The animation_start.html fileopens, displaying Hello World.

Click the Next Step link to addeasing (Step 2 of 5).

Click the Easing button in theTimeline, select Ease Out, selectQuad, and then press Enter (Win)or Return (Mac).

Click the Next Step link to add anentrance animation (Step 3 of 5).

Move the Playhead to 0:00.250(0.25 seconds).

Double-click the Playhead todisplay a blue pin on top.

Drag the Pin (blue) to 0:00.750 (0.75 seconds). This displays a blue region for the animation.

In the Elements panel, select theRoundRec <div> element.

Shift-drag the shape element offthe Stage to the left.

In the Properties pane, set theRotate value to 720, and then clickthe Stage.

11

10

9

8

7

6

5

4

3

2

1

64 8

910

11


Click the Next Step link to add anentrance animation (Step 4 of 5).

Drag the left Rotate keyframe rightto 0:00.500 (0.5 seconds).

Press Enter (Win) or Return (Mac)to activate the blue region.

Drag the blue region right to0:00.750 (0.75 seconds).

Select the Hello World textelement on the Stage.

In the Properties panel, set theScale X or Y value to 0, and set theOpacity value to 0.

Click the Next Step link to add anexit animation (Step 5 of 5).

Click the Easing button in theTimeline, select Ease In, selectQuad, and then press Enter (Win)or Return (Mac).

Drag the Pin (blue) to 0:01.75 (1.75 seconds).

Drag the Playhead (gold) to0:02.250 (2.25 seconds).

Select the Hello World textelement on the Stage.

In the Properties panel, set theOpacity value to 0.

Drag the Yellow region to 0:00.500(0.5 seconds) so the pin is at 0:02.

Select the RoundRect element onthe Stage, and then Shift-drag itoff the Stage to the right.

Click the Go to Start button, andthen click the Play button or pressSpace to play back the animation.



27

26

25

24

23

22

21

20

19

18

17

16

15

14

13

12

26

25

24

23

13

15

17

19

70 Chapter 3

With the Resize lesson, you can create an animation that is responsiveto the size of the screen. For example, when you resize your browserwindow, the composition resizes too. You can make the Stage and indi-vidual elements responsive to the screen size by changing their unitsfrom pixels (fixed) to percentage (adjustable). In addition, you canchange the relative change position to any corner of an element.Instead of testing changes to your composition in your browser, you canquickly check them on the Stage in Edge Animate.

Taking the ResizeLesson

Take the Resize Lesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Resize lesson tileto start it.



The resize_start.html file opens,displaying an animation.

Click the File menu, and then clickPreview In Browser or pressCtrl+Enter (Win) or A+Return(Mac).

Resize the browser window to seehow it responds.

The animation doesn’t respond tochanges in the windows size.

Click the Close button to exit yourbrowser.

Click the Next Step link to % resizethe Stage (Step 2 of 8).

In the Elements panel, select theStage <div> element.

In the Properties panel, point tothe units for W, and then changefrom pixels (px) to percentage (%).


9

8

7

6

5

4

3

2

1

4

78

5


Resize the browser window to seehow it responds, and then click theClose button to exit.

The Stage fills the width of thebrowser with its light bluebackground to the right of theanimation.

Click the Next Step link to % resizeon the Stage (Step 3 of 8).

Move the Stage adjustment handleon the top ruler back and forth topreview, and then return it to itsoriginal position at 800 px.

Click the Next Step link to % resizeobject’s location on the Stage(Step 4 of 8).

In the Elements panel, select theText1 <div> element.

Hold down Shift, and then selectthe Text2 <div> element.

In the Properties panel, point tothe units for X, and then changefrom pixels (px) to percentage (%).


The text boxes adjust as the Stageis resized.

Click the Next Step link to resizeobjects of the parents (Step 5 of 8).

In the Elements panel, select thered_ribbon <div> element.

In the Properties panel, point tothe units for W, and then changefrom pixels (px) to percentage (%).

Continue Next Page

20

19

18

17

16

15

14

13

12

11

10 12

1516

14

17

72 Chapter 3



Click the Next Step link to resizethe relative position of objectstheir parents (Step 6 of 8).

By default, objects are positionsrelative to the upper-left corner oftheir parent. You can change therelative position to any cornerusing the Coordinate Space Pickerin the Properties panel.

In the Elements panel, select thepanel_bg <div> element.

In the Properties panel, select theBottom Right square in theCoordinate Space Picker.

Point to the units for W, and thenchange from pixels (px) topercentage (%).

In the Elements panel, select thepanel1 <div> element.

Hold down Shift, and then selectthe panel3 <div> element.

This selects panel1, panel2, andpanel3.

In the Properties panel, select theBottom Right square in theCoordinate Space Picker.

Point to the units for W, and thenchange from pixels (px) topercentage (%).


This keeps the blue panel and theanimated text relative to the rightside of the Stage.

30

29

28

27

26

25

24

23

22

21 20

19

21

2728

26

3029

23


Click the Next Step link to applylayout presets to objects (Step 7 of 8).

In the Elements panel, select theFremontCycles <div> element.

In the Properties panel, click theLayout Presets button, click theCenter Background Image preset,and then click Apply.


This makes the element resize onboth X and Y axis while keepingthe image centered.

Click the Next Step link to setresize constraints of objects theirparents (Step 8 of 8).

In the Elements panel, select theStage <div> element.

In the Properties panel, set theMin W value to 650 px.

Click Max W, and then deselectNone.

Set the Max W value to 1280 px.


Resize the browser window to seehow it responds, and then click theClose button to exit.

This keeps the size range of thecomposition between 650 px and1280 px.



42

41

40

39

38

37

36

35

34

33

32

31

32

363437

33

39

74 Chapter 3

With the Extend lesson, you can code to your composition to extend thefunctionality of your animation. With the code you can add interactivityto animation. For example, you can add code to start an animation whenyou click a button. When you click the button, it triggers an event to takeplace. With Edge Animate, you don’t have to be a programmer to addinteractivity. It comes with Code snippets, segments of code, that youcan quickly insert to perform a task.

Taking the ExtendLesson

Take the Extend Lesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Extend lesson tileto start it.



The interactivity_start.html fileopens, displaying an animation.


The animation plays in yourbrowser.


Click the Next Step link to add atrigger (Step 2 of 7).

Move the Playhead to 0:00 in theTimeline.

Click the Timeline menu, and thenclick Insert Trigger or press Ctrl+T(Win) or A+T (Mac).

In the Snippets list, click the Stopbutton.

Click the Close button to exit.

Click the Next Step link to add anaction (Step 3 of 7).

10

9

8

7

6

5

4

3

2

14

9

8


In the Elements panel, click theOpen Actions button for the play<div> element.

Select click from the menu.

In the Snippets list, click the Playbutton.


Click the Next Step link to add alabel on the Timeline (Step 4 of 7).

Move the Playhead to 0:00.500 (0.5 seconds).

Click the Timeline menu, and thenclick Insert Label or press Ctrl+L(Win) or A+L (Mac).

Type Loop for the label, and thenpress Enter (Win) or Return (Mac).

Click the Next Step link to add atimeline action (Step 5 of 7).

In the Timeline, click the TimelineActions button to the left of theActions row.

Select complete from the menu.

In the Snippets list, click the Playbutton.

Replace 1000 with loop.



Click the Play button to start theanimation in your browser, andthen click the Close button to exit.

Click the Next Step link to openthe Code window (Step 6 of 7).

Continue Next Page

27

26

25

24

23

22

21

20

19

18

17

16

15

14

13

12

11

14

13

16 1820

11

76 Chapter 3


Click the Window menu, and thenclick Code.

The Code panel opens in aseparate window.

Click the Next Step link to create aloop counter (Step 7 of 7).

In the tree, select play.click.

Click to place the insertion pointbelow the code: sym.play();

Click the Code Snippets button todisplay the Snippets panel.

Click Set Symbol Variable from theSnippets list.

Modify the code to the following:sym.setVariable(“count”,1);

This stores a value that you’ll useto count the number of loops.

In the tree, selectTimeline.complete.

Click to place the insertion pointbefore the code: sym.play(loop);

Click Get Symbol Variable from theSnippets list.

Modify the code to the following:var count =sym.getVariable(“count”);

Click to place the insertion point onthe line after the code: var count=sym.getVariable (“count”);

Click Set Symbol Variable from theSnippets list.

Modify the code to the following:sym.setVariable (“count”, count + 1);

41

40

39

38

37

36

35

34

33

32

31

30

29

28 30

32

33

34

31

35

37

41

36 38

40


Move the Playhead to 0:00.500 in theTimeline.

Click the Timeline menu, and thenclick Insert Trigger or press Ctrl+T(Win) or A+T (Mac).

In the Snippets list, click the GetSymbol Variable button.

Modify the code to the following:var count = sym.getVariable(“count”);

This displays the count.

Click to place the insertion point onthe line after the code:sym.getVariable (“count”);

Click Set Element Text from theSnippets list.

Set Element Text uses jQuery codeto modify the text of an element.

Modify the code to the following:sym.$(“Text”).html(“” + count);



Click the Play button to start theanimation in your browser.

The animation continue to countuntil you close your browser.



Click the File menu, click Save,navigate to a folder, create a folder,enter a name for the composition,and then click Save.

53

52

51

50

49

48

47

46

45

44

43

42

44

45

47

48

46 49

78 Chapter 3

With the Reuse lesson, you can create symbols of an element so thatyou can reuse it multiple times in you composition. When you import anasset as a symbol or convert an existing element to a symbol, it’s knownas a definition. When you use the symbol definition in your animation, itbecomes an instance, which you can uniquely modify. You can add mul-tiple instances of the same symbol and animate them differently. Byusing the same symbol definition, you’re only using the asset once,which reduces time it takes to load it.

Taking the ReuseLesson

Take the Reuse Lesson

From the Welcome screen underGetting Started or the Lessonspanel, click the Reuse lesson tileto start it.



The interactivity_start.html fileopens, displaying an animation.


The animation plays in yourbrowser.


Click the Next Step link to convertan object to a symbol (Step 2 of 5).

Move the Playhead to 0:01 (1 second).

In the Elements panel, select theSpinRect <div> element.

Click the Modify menu, and thenclick Convert to Symbol.

Type Spin, and then click OK.

This creates a symbol, which youcan reuse. These are known asinstances.

9

8

7

6

5

4

3

2

14

8

7


Click the Next Step link to createinstances of a symbol (Step 3 of 5).

In the Library panel, drag the Spinicon from Symbols to the right ofthe first instance.

Alt-drag the second instance onthe Stage to create another copyto the right of it.

Click the Next Step link to convertan object to a symbol (Step 4 of 5).

Double-click one of the instanceson the Stage.

The symbol opens to in-placesymbol editing mode.

In the Properties panel, deselectthe Autoplay check box, so thesymbol doesn’t play automatically.

In the Timeline, click the TimelineActions button to the left of theActions row.

Select complete from the menu.

To loop, click the Play from buttonin the Snippets list.

Change the time of 1000 to 0. Thetime is in milliseconds.


In the Elements panel, click theOpen Actions button for the Center<div> element.

Select click from the menu.

Add the code from the illustration.


Click Back button or Stage on theEdit bar to exit symbol editingmode.

Continue Next Page

25

24

23

22

21

20

19

18

17

16

15

14

13

12

11

10

15 25

16

11

14 12

21

23

24

80 Chapter 3


Move the Playhead to 0:00 (0 seconds).

In the Timeline, click the Addbutton (+) in the Playback row forthe Spin element.

Click Play from the menu.

Move the Playhead to 0:00.750(0.75 seconds).

Click the Add button (+) in thePlayback row for the Spin2element, and then click Play.

Move the Playhead to 0:01.500 (1.5 seconds).

Click the Add button (+) in thePlayback row for the Spin3element, and then click Play.





35

34

33

32

31

30

29

28

27

26 2826

30 31

34

27

32

301

Index

Aaccess Edge Services, 283accessibility for people with disabilities, 120accessing

nested symbols, 213online help, 205action

attaching to HTML element, 44deleting, 199editing, 199for touch-based tablets or mobile

devices, 200invoking a script with, 44

Actions icon in Elements panel, 36ActionScript 3.0 to create animated GIF, 276ActionScript, 2add

animation to an HTML document, 258CSS to JavaScript, 254font, 132graphics, 86, 87HTML to JavaScript, 250keyframe, 43links to text, 140

Add Code button, 45Add Keyframe diamond, 176-177Add Web Fonts button, 133address, text tag, 95adjust

animation size automatically, 186individual corners, 103time in an animation, 184

Adobe Cloud, accessing, 266Adobe ID for online publications, 266Adobe programs, See After Effects, AIR,

Dreamweaver, Digital PublishingSuite, Edge Animate, Fireworks,

Flash, Illustrator, InDesign, Muse,Photoshop

Adobe tools and services, See ApplicationManager, BrowserLab, ContentViewer, Creative Cloud, Edge Code,Edge Inspect, Edge Reflow, EdgeRuntime, Edge Web Fonts, PhoneGapBuild, Product Improvement Program,Setup wizard, Typekit

Adobe TV via Welcome screen, 57Adobe TV, links to, 6advanced animation, 22After Effects, 1AIR (Flash Platform), 2, 230Align commands on Modify menu, 162align

elements to each other, 163elements with Smart Guides, 162

alignment guides, 88, 90, 122Alternate Layout, create or delete in

InDesign, 265AN file extension, 5, 14, 242Android, 281, 286-287angle brackets (< >), 95

<html>, 248, 250within code, 205

animate an instance of a symbol, 148Animate Deployment Package option

(.oam), 223-225using to publish a composition, 230

Animate I and II lessons, 6Animate I: Keyframes lesson, 64-67Animate II: The Pin lesson, 68-69animate with keyframes, 64-67animated

content, creating, 280elements, filtering, 41, 181elements, showing, 181

302

animated GIFcreate as custom preloader, 276exporting, 238save image in Adobe Fireworks, 270

animationadd interactivity to, 74adding time into, 185adding to an HTML document, 258adjusting time in, 184automatically resize, 186building, 11building, 12create interactive, 193create with a transition, 178create with Auto-Keyframe Mode, 174create with keyframes, example, 177creating a new, 14creating quickly with the Pin, 172exporting from Adobe Flash, 276fade effect, 98getting samples, 15import into iBooks Author, 233make resizable example, 188-189making adjustments to, 182open existing, 16open in Adobe Dreamweaver, 260planning, 10playing, 180preview with DPS and Adobe Content

Viewer, 267previewing and testing, 13previewing in browser, 19publishing, 11, 13publishing, 223-224saving a, 20testing a resizable, 190-191three ways to create, 171understanding, 2work with HTML in Dreamweaver, 261work with in Timeline panel, 183

animation region, creating a, 68anti-alias option in Illustrator, 272-273API (Application Programming Interface),

246app, download Apple iBooks Author, 233Apple iBooks Author, 232

publishing for, 224-225

Apple iOS, 281, 286-287Apple Safari See SafariApplication Manager, 284apply external CSS to element IDs or class-

es, 255Arrange commands on Modify menu, 164arrange elements in stacking order, 164article, new tag in HTML5, 95artwork

export as PNG image from Illustrator,272

save as SVG from Illustrator, 274-275asset, defined, 62

in Library panel, 38-39, 85asterisk (*) after file name, 20, 24attach

action script to element, 198event to the Stage or Timeline, 200-201

attribute style, applying CSS using HTML,252

attributeschange in Properties panel, 35of HTML elements, 249of shapes, 88of text elements, 122

audience, defining, 10authoring environment, 25auto keyframes, create, 42-43Auto-Keyframe animation example, 175Auto-Keyframe Mode, 64-65, 172Auto-Keyframes Mode button, 174-177, 216automatically

assigned names for elements, 169create keyframes, 174resize animation, 186

Autoplay option, 234Autoplay timeline check box, 144, 152Autoplay, 29Auto-Transition Mode button, 174-178, 216Auto-Transition Mode, 64-65,172, 178auto-transitions, create, 42-43

Bbackground color

for stage, 29of shapes, changing, 106

Index 303

background image, centering, 73backward slash (\) in JavaScript code, 204bitmap graphics, 81

scaling, 85understanding, 82

blank composition, create new, 14blockquote, 95, 139Blur value

for text, 138of shadows, 107

body of an HTML tag, 248Bonjour, set up, 286border

color of shapes, changing, 105size of shapes, changing, 104

Border Radius button, 102Border Style list, 104Border Thickness value, 104bounding box, 100

image position in, 109break up a group into individual elements,

166Bring Forward, 164Bring to Front, 164BrowserLab, 19browsers, create display for, 29Build and publish phase, 9Business Catalyst, using with Muse, 262button, attach action script to, 198

CCapture Poster Image button, 234carpal tunnel syndrome, reducing, 52case sensitive JavaScript, 204CDN (Content Delivery Network), 224, 226

publishing to the web using, 228Center Background Image, 73, 101change

elementadjustability, 101clipping, 118-119corners with Transform Tool, 103display, 96opacity, 98overflow, 97

position, 99size, 100tags, 95

language, 54properties

in the Down-level Stage, 237in the Preloader Stage, 239

shapebackground color, 106border color, 105border size and style, 104corners, 102

Stage properties, 28-29text

properties, 128-129tags, 139

Change Image Source button, 109changes, undoing, 55Character accessory in Mac, 126check mark on menu, 26Choose Poster Image button, 232Chrome, Google

creating motion content to run on, 281extension, 286Frame plug-in, 226-227get, 237reading HTML documents, 249synchronize browsing in, 3, 286view animation in, 223

Chrome Frame Installer, 227Class button, 94, 255class name, 94 See also HTML and CSSclear Open Recent list, 17Click event action script, 193

attach to button, 198Clip Background Image, 101clip, remove, 119Clipboard, placing elements on, 154clipping area, 118clipping text, 135Clipping Tool, 32, 118-119, 135close a composition, 24CMS (Content Management Services)

frameworks, 2 in Dreamweaver, 260

304

codeadd and edit with Adobe Edge Code, 254change font size in script panel, 197content, view and work with in Edge

Code, 280edit, 3font size, changing, 44line numbers, show or hide, 44, 197

Code panel, 25-27opening, 202use to edit JavaScript, 244using, 44-45

Code Snippets button, 45, 76code snippets, 193

accessing in a script panel, 203inserting, 202list, 203to add links, 140working with, 45

code statements, 207Color for background and border, 33color, 11

changing, 35command, defined, 26comments, working with when inserting

snippets, 204Community Forum, 22-23

via Welcome screen, 57links to, 6

compatibility of web browser, 227composition files, extensions for, 21Composition ID, 29composition, 12

closing, 24creating a new, 14creating from scratch, 1delete elements from, 156-157open existing, 16publishing, 225-226putting in an HTML document, 256-257saving vs. publishing, 224saving, 20

composition, animationadd interactivity to, 74adding time into, 185adding to an HTML document, 258adjusting time in, 184

automatically resize, 186building, 11building, 12create interactive, 193create with a transition, 178create with Auto-Keyframe Mode, 174create with keyframes, example, 177creating a new, 14creating quickly with the Pin, 172exporting from Adobe Flash, 276fade effect, 98getting samples, 15import into iBooks Author, 233make resizable example, 188-189making adjustments to, 182open existing, 16open in Adobe Dreamweaver, 260planning, 10playing, 180preview with DPS and Adobe Content

Viewer, 267previewing and testing, 13previewing in browser, 19publishing, 11, 13publishing, 223-224saving a, 20testing a resizable, 190-191three ways to create, 171understanding, 2work with HTML in Dreamweaver, 261work with in Timeline panel, 183

compound, defining formatting for tags,253

compressing graphics, 12, 81, 84compression

method, selecting in Illustrator, 272-273lossless and lossy, 84

Constrain Horizontal or Vertical, 111Constrain/Unconstrain, 100, 109, 134content

developing, 10order of in Timeline, 180

Content Viewer, preview animation with,267

contiguous (sequential order), 93convert an element to a symbol, 144Convert Guide to Percentage, 161

Index 305

Convert Guide to Pixels, 161Convert to Symbol command, 78, 152Convert to Symbol on Modify Menu, 216Coordinate Space Picker, 101copy and paste a trigger, 197copying elements, 154copyright rules, 83Corner Radius button, 102corners

adjust individual, 89change element, 103

CPU (central processing unit), 11create

animation with keyframes, example, 177animations, three ways to, 171CSS styles, 252Down-level Stage, 236instance from a symbol, 147interactive animations, 193interactive content with DPS, 266label in the Timeline, 194multi-touch book for iPad tablets, 232new animation, 14payment buttons for website, 218Preloader Stage, 238 See also Flashproject folder, 9project plan, 10resizable animation, 186, 188rollover button, 216-217symbol, 214symbols, 144text boxes, 122

Create Button command, 218Create lesson, 6, 62-63Create New link, 6, 14Create Symbol snippet, 212, 214Creative Cloud services, 3, 281-282, 284

access samples from, 15crosshatch pattern on the Stage, 96CSS (Cascading Style Sheet), 34

add to JavaScript, 254code, 95

editing, 244using, 205

create external files, 254edit with Dreamweaver, 260

getting to know, 252layouts, 2preview, 3programming for Edge Code, 280style

applying to multiple elements, 94using ID to apply, 94

tag styles, 252-253text properties, 121, 127-128vs. HTML, 252working with, 254

CSS3 code, working with, 241curly brackets ({ })

adding multiple attributes with, 205in CSS, 252

cursorchanging when it hovers over a button,

216over elements, changing, 108

Cursor button, 108, 140, 210, 216-217, 219custom workspaces, 25

creating, 50cut and paste elements, 154

Ddash displayed on Properties panel, 34, 92Dashboard Widget (.wdgt), 224-225declaration blocks in CSS, 252default workspace, 25Define phase, 9define

element with an HTML tag, 95purpose and audience, 10

definition, symbol known as, 144delete

action, 199elements, 156-157label, 195poster image, 235symbols, 145trigger, 197web font, 133

Delete Symbol snippet, 212, 214using, 215

Deployment Package (.oam), 13Design phase, 9

306

design, developing, 10desktop browsers

create animations for, 227create motion content to run on, 281

determine HTML5 browser compatibility,244

developcontent and structure, 10layout and design, 10

devicesinspecting web designs, 286-287update, 3

diamondrepresenting keyframe, 34Add Keyframe in Properties panel, 176

dictating text, 125Digital Publishing Suite (DPS), 230, 264

publish a composition for use with, 230publish animation in, 223-225working with, 266

dimension markers, 90disable a feature, 26display

elements in Timeline panel, 41tooltip, 178

Display property, 96distribute elements, 163Distribution commands on Modify menu,

162-163DIV tags, defining elements with, 95division tag (DIV), 250dock a panel, 48dock, adding icon to, on Macintosh, 5Document Object Model (DOM), 247Document tab arrow, 8

to switch files, 18documents, create new via Welcome

screen, 4dollar sign ($), jQuery selector, 204 dot (.), separator in code, 204Down-level Stage See also preloader

change properties, 237creating, 236defining optional use of, 223-225edit, 234

downloadDPS tools, 266

Edge Animate, 281-282Edge Tools, 281, 283-284iBooks Author app, 233sample animations, 15

DPS, accessing, 266drawing

shapes, 88tools, 88

Dreamweaver, 1-2modify source code with, 244open animations in, 260transferring files to web server with, 13work with HTML for an animation in, 261

Drop Shadow button, 107duplicating elements, 154-155dynamic media, 12

EEasing button, 43, 69, 178easy access links via Welcome screen, 4Edge Animate

about, 1, 280AN files, 16

examining, 242open from Windows or the Finder, 17saving, 224

application icon, 5Community Forum, 22-23composition files, 21download, 282exit, 24exploring, 3find version number, 4folder, 5Help, 22installing, 279, 284introduction, 1JavaScript API, 22-23launching, 5prepare system for, 280starting in Macintosh, 5starting in Windows, 4using with browsers and mobile devices,

1what you can do with, 2window, 25-26

Index 307

viewing, 8Edge Animate Runtime, 241

DOM elements in, 247in head section of HTML code, 260

Edge Codeabout, 3, 280 add HTML links to text with, 141copy and paste HTML code with, 256downloading, 245, 283installing, 284HTML editor, 132modify source code with, 244-245

Edge Inspect, 1about, 3, 280Chrome extension, 286downloading, 283installing, 284, 286-287

Edge Reflow, 3, 280Edge Tools & Services, 1

download, 282exploring, 3installing, 279, 285prepare system for, 280

Edge Web Fonts, 1, 121, 130, 132, 280, 283about, 3

edge_includes folder, 242-243, 256edit

action event, 198-199code in Edge Code, 280code snippet, 202Down-level Stage, 234symbol without Stage elements, 150text, 123-124trigger, 197

Edit Symbol command, 151electronic Copyright Office (eCO), 83elements

action events, 200add accessibility, 120adding shadows to, 107adjustability, change, 101aligning, 162-163appearing in Timeline, 93attaching action script to, 198automatic names assigned to, 169 class, apply CSS style to, 254-255

clipping, 118-119copying or duplicating, 154corners, change, 103deleting, 156-157display in Timeline panel, 41display, changing, 96grouping, 166hiding and showing, 165ID, apply CSS style to, 254-255lock or unlock, 36, 41, 168modifying instances, 212naming, 94origin, transform, 110-111overflow, changing, 97position, change, 99positioning on Stage, 12renaming, 169render using HTML, 229reparenting, 167resizing, 90rotating, 112scaling, 116, 187selecting, 92sequencing in Timeline, 12set adjustability, 187show or hide, 36size, change, 100skewing in Properties panel, 114snap to guides, 161stacking, 164tags, changing, 95using guides with, 160working with, 37, 143

Elements panel, 8, 25-27arranging elements on, 164inserting an action, 198Lock column in, 168saving text and shapes in, 32using, 36working with, 37

Ellipse tool, 32, 88-89, 91embed

and play a YouTube video, 220code for fonts, 130-131

Embed ICC Profile in Illustrator, 273Embed option in Illustrator, 275

308

enable a feature, 26events, executing on the Stage or Timeline,

201examine

Adobe Edge Animate Runtime, 246Edge Animate files, 242Edge Animate window, 26import graphic formats, 84JavaScript code in snippets, 204

example projectsAuto-Keyframe animation, 175create animation with keyframes, 177Pin method animation, 173resizable animation, 188-189

exit Edge Animate, 24export See also importing graphics

animated GIF from Flash, 277artwork as JPEG image from Illustrator,

273HTML file into Edge Animate, 271symbol, 39, 146

Extend lesson, 6, 74-77extension, locating for graphic, 87external

CSS files, 254-255style sheets in CSS, 252-253

Eye icon in Elements panel, 36, 165

FFacebook icon, 6fade animation effect, 98Fade Element code, 207FAQs on community forum, 23feathering shadow edges, 138federal regulations, 83file

descriptions for Edge Animate, 243extension, AN, 5extensions, 21extensions, showing or hiding in Mac

OS X, 5open a recently opened, 17open from Windows/File Explorer or

Finder, 17opening, 5path, locating for graphic, 87type, identifying, 5

file and folder structure, 13filtering animated elements, 41finishing a composition, 24Firefox

creating motion content to run on, 281reading HTML documents, 249viewing animation in, 223

Fireworks, 2bitmap graphics in, 81create graphics for Edge Animate, 1-2exporting HTML document and images

rom, 271save graphics from, 270

Flash Professional, 1- 2export animated GIF from, 238, 277exporting animations from, 276technologies used, 276

flattened PNG, import into Edge Animate,270

Flex, 2Flip Playhead and the Pin, 173flowchart sample, 11folder location, creating, 20Folio Overlays panel in DPS, create interac-

tive content with, 266Folio Preview Settings in DPS, 267Folio Producer tools, downloading, 266Folio publication, create in Adobe InDesign,

264fonts, 3, 11

browse commercial in Typekit, 280characteristics, 127family, 127-128for web pages, 132 resources, 121, 126

font, weblibrary, free from Adobe, 280providers, 132adding, 38, 121, 131-133deleting, 39, 133getting, 130-131

Fonts.com, 121, 130, 132Fontsquirrel.com, 121, 130, 132Format popup, Mac, 21formatting

rules of web page (styles), 254text, 128-129

Index 309

forum for Edge Animate users, 22-23frame, undock, 49Frameworks via CDN, 226, 228FTP (File Transfer Protocol), 2, 13

in Dreamweaver, 260Full Code button, 45function command within code, 204functionality, add to web page, 193

GGet Element snippet, 208Get Symbol snippet, 212-214Get Symbol Variable snippet, 215getting started, 6GIF (Graphics Interchange Format)

about, 84convert Photoshop document to, 268create simple animated as custom pre-

loader, 276export animation from Flash, 277files, 232importing, 85-87in compositions, 1-2save image in Adobe Fireworks, 270

Go To Asset, (locating OAM animation), 263Go To Conflict command, 52-53Google Chrome

creating motion content to run on, 281extension, 286Frame plug-in, 226-227get, 237reading HTML documents, 249synchronize browsing in, 3, 286view animation in, 223

Google web fonts, 131-133graphics

adding, 86, 87bitmap, 82compressing, 12, 81, 84extension, locating, 87file path, locating, 87ID name, 94importing, 85name, locating, 87save from Adobe Fireworks, 270using, 83

vector, 82working with, 81

grey dotin Elements panel, 168in Timeline panel, 168in Visibility column, 165

Grid Size button, 40Group Elements in DIV command, 166group elements, 37group/ungroup elements, 166guides

change type, 161displaying, 159 horizontal and vertical, 90locking and unlocking on the Stage, 160snap elements to, 161view position, 161working with, 160

Hh1-h6, HTML headings, 95hardware requirements, 11head of an HTML tag, 248header bars on panels, 46heading tags, 95Help and Tutorials, 6

via Welcome screen, 57help for Edge Animate JavaScript API, 247Help menu, 22-23

accessing, 205Hex value or hex triplet, 105-106hide and show

elements, 165guides, 159rulers, 158

Hide Element snippet, 206hollow keyframes, 176, 178HTML (Hyper Text Markup Language), 1-2,

241adding to JavaScript, 250attribute style, using to apply CSS, 252edit with Dreamweaver, 260publish content as static, 226, 229understanding, 248-249using to create URL links, 210-211using, 205

310

HTML (continued)viewing and editing, 244working with animation in

Dreamweaver, 261working with, 241, 250-251

HTML division (DIV) tags, 95, 139HTML document

add animation to, 258put a composition into an, 256-257

HTML editor, Edge Code, 132HTML element, attaching action to, 44HTML files

creating, 225editing, 243export into Edge Animate, 271numbering, 14opening multiple, 16quickly close, 18save in Adobe Fireworks, 270saving, 224, 242web page file, open, 16

HTML ID name, 250HTML links, add to text, 141HTML source code, viewing, 249HTML tags

assigning to text, 139defining elements with, 95integrating in code, 208

HTML vs. CSS, 252HTML5, 2

audio, 221browser compatibility, determining, 244in Dreamweaver, 260pagination options, 265technology in Edge Animate, 227, 241

IiBooks Author

app, download, 233publishing for, 232

iBooks/OS XDashboard Widget (.wdgt), 13publishing a composition, 232publishing option, 223-225

ID names within code, 205Illustrator editing capabilities, preserving

for revisions, 275 Illustrator

create graphics for Edge Animate, 1-2export artwork as JPEG image, 273export images from, 272prepare vector graphics in, 81save artwork from, 274-275

imagesedit with Adobe Fireworks, 270elements, modifying, 109exporting from Adobe Illustrator, 272locating, 39position in bounding box, 109resolution, specifying in Illustrator,

272-273saving from Adobe Photoshop, 268 swapping in a photo gallery, 222

image, graphicsadding, 86, 87bitmap, 82compressing, 12, 81, 84extension, locating, 87file path, locating, 87ID name, 94importing, 85name, locating, 87save from Adobe Fireworks, 270using, 83vector, 82working with, 81

img, graphic tag, 95Import Symbols command, 145imported OAM file, working with, 263importing

animation in iBooks Author, 233graphics, 85into Adobe Muse, 262package into Adobe InDesign CS6, 264package into Adobe program, 231symbols, 145

In-App lessons, panelabout, 6starting, 58topics, 57using, 7via Welcome screen, 4

Index 311

In-App lessons to takeAnimate I and II, 6Animate I: Keyframes, 64-67Animate II: The Pin, 68-69Create, 62-63Extend, 74-77Keyframes, 64-67Quick Start, 61Resize, 70-73Reuse, 78-80

Include Snippet Comments, 197incompatible web browsers, 234, 235InDesign

publish a composition for use with, 230importing into, 264publish animation in, 223-225

indexing on the web, improving, 229individual corners, adjusting, 103information, getting detailed, 22insert

code snippet, 202action event, 198 time in animation, 185

Insert Label button, 43, 194, 216Insert Shadow button, 107Insert Time command, 185Insert Trigger button, 196, 202-203, 250, 254install

Edge Animate, 284Edge Inspect, 286-287Edge Tools, 284-285

instanceadding multiple, 144change properties of, 148-149creating from symbol, 147of a symbol, 143, 147of element, modifying, 212

interaction, adding to an HTML document,258

interactiveanimations, create, 193content, creating, 280

interactivityadd to animation, 74adding, 12

interim versions of compositions, 20

interlaced images in Illustrator, 272Internet Explorer

creating motion content to run on, 281publishing to the web for, 227reading HTML documents, 249view animation in, 223

iPad and iPhone, create interactive docu-ments for, 264

iPad tabletscreating multi-touch books for, 224publishing to with DPS, 266

JJavaScript API

get help for, 247in Edge Animate, 246website, 23

JavaScript, 193add CSS to, 254adding HTML to, 250edit in Code panel, 244edit with Dreamweaver, 260examining in snippets, 204example code for, 205files, 1-2, 14

(.js) files, saving, 224creating, 225 editing, 243

in Dreamweaver, 260inserting, 202libraries, 241programming for Edge Code, 280reference material, 6reserved keywords in, 204using to create symbols, 214using to show and hide elements, 206working with, 241

JPG/JPEG (Joint Photographic ExpertsGroup), 84-87

convert Photoshop document to, 268-269export Illustrator artwork as, 273file format for the web, 272-273in compositions, 1-2save image in Adobe Fireworks, 270

jQueryabout, 241, 243

312

jQuery (continued)documentation for, 242library files, 228selector within code, 204

JS extension, 193JSON (JavaScript Object Notation), 2, 242-

243jump between keyframes, 178

KKey Features, 6Keyboard Shortcut

changing a, 53creating, 52removing conflicts, 52-53

keyframes, 34add manually, 176create animation using, 171, 174, 176deleting, 182go to previous, 182hollow, 176, 178in Timeline, 42lesson, animate with, 64-67values, 178working with in Timeline panel, 182

Kindle, 281, 286-287

Llabel

insert in Timeline, 194use to create a loop, 194working with in Timeline, 195

languages, 281changing, 54

launching Edge Animate, 5layers

extending, 184working with in Timeline panel, 182-184

layout defaults, setting, 33Layout Preset button, 73, 101, 187layout preset, applying, 101layouts

create responsive in Edge Reflow, 280developing, 10-11leverage content for multiple, 264-265split window to compare, 265

lessonsabout In-App, 6In-App, via Welcome screen, 4starting a, 58-59topics, 57use an In-App, 7

Lessons panel, 6, 25-27using, 60

lessons to takeAnimate I and II, 6Animate I: Keyframes, 64-67Animate II: The Pin, 68-69Create, 62-63Extend, 74-77Keyframes, 64-67Quick Start, 61Resize, 70-73Reuse, 78-80

letter spacing, 127, 129library of commercial web fonts, 121Library panel, 8, 25-27

add graphic asset from, 87assets in, 85edit a symbol in, 150using, 38-39

line height, 127, 129line indent, 127, 129Link option in Illustrator, 275 links

add to text, 140Create New, 6Open File, 6to target URL, 237

Liquid Layout options, applying, 264-265List of Action Events, 200listing of code snippets, 203Live Code button, 261Live Code view, 260 See HTML codeLive view, preview animation in, 260locate

graphic file path, 87graphic name, 87graphic extension, 87

Lock Guide command on View menu, 160Lock icon in Elements panel, 36, 168lock or unlock

Index 313

elements, 41, 168guides, 160

loping, 79create using a label, 194learn how to, 6

lossless compression, 84lossy compression, 84

MMac App Store, 224, 232Macintosh

OS X Lion and Mountain Lion, 5starting in, 5system requirements, 281

main folder, 9manually

adding keyframes, 176creating transition, 178-179

markup language, HTML, 248media elements

assembling, 12organizing, 36

menu, defined, 26minimum system requirements, 281mobile apps, build, 3, 280mobile devices

create animations for web browsers on,227

create interactive documents for, 264preview web designs for, 286-287using action events with, 200

modify elements, 37Modify menu

Align commands on, 162-163Arrange commands on, 164Distribution commands on, 162edit a symbol in, 150Smart Guides on, 88-90

modifying image elements, 109monitor resolution, 11monospace fonts, 127motion

animations, creating, 171effects, adding, 12

movelabel, 195

panel, 47playhead, 42trigger, 197

multiple actions, attach to an element, 198multiple animations, working with, 18multiple compositions, putting in HTML

document, 256-257Muse, 230

importing into, 262publish a composition for use with, 230publish animation in, 223-225work with animation in, 263

Nname

element IDs or classes, 94locating for graphic, 87

navigation, 11 options in Lessons panel, 60adding, 12

nest a symbol within a symbol, 152nested symbol

accessing, 213working with, 153

New Folder button, 21, 146new folder, creating a, 9non-contiguous (not in sequential order), 93non-HTML5 browsers, create display for, 29Notification icon on the Stage, 30

OOAM (Deployment Package)

files, creating, 225, 230-231importing into InDesign document, 264placing into an open Muse web site, 262publish animation as,13view imported, 263

one-step pin animations, 42online help, accessing, 205Only Show Animated Elements button, 93Opacity property, 98opacity, changing element, 98open a URL with HTML code, 211Open Actions button, 43, 140, 198-199, 203,

206-207, 209-215, 217, 219-220, 222,250, 254

314

open and close panels, 46open Edge Animate composition in

Dreamweaver, 260Open File link, 6Open Recent list, clearing, 17Open URL button, 140Open URL snippet button, 203Open URL snippet, 218

using, 210optimizing graphics, 81orange keyframes, 182origin point of element, transform, 110-111OS X Lion and Mountain Lion, 5OS X Mountain Lion, dictating text with,

125Overflow, 29

options in Properties panel, 97

Pp, tag for paragraph, 95panels

defined, 27docking and undocking, 48-49working with, 46-47

parent/child relationship in the Stage, 167Paste Special submenu on Edit menu, 155path, locating for graphic file, 87PayPal

create shopping cart button, 219get embed code for, 218

percentage, change to pixels, 70percentage-based guides, 161period (.), class names begin with, 253phases

Build, 9Define, 9Design, 9Structure, 9

PhoneGap Build, 2about, 3, 280, 283in Dreamweaver, 260

photo gallery, swapping images in, 222Photoshop, 2

bitmap graphics in, 81create graphics for Edge Animate, 1, 2save an image in a web format, 268

saving images from, 268Pin button, 61Pin method

example, 173to create animation, 171-173

pixel-based guides, 161pixels

change to percentage, 70defined, 82

play animation, 42, 180Play From button, 79Play/Pause button, 42Playback Actions button, 149Playback commands

modify an instance with, 149set for instances, 148

Playheadand the Pin, flip positions, 173commands, 180in Timeline panel, 42learn to use, 61working with, 180

PNG (Portable Network Graphic), 84, 85-87convert Photoshop document to, 268-269file for poster image, 234file format for the web, 272image, export Illustrator artwork as, 272import files into Edge Animate, 270in compositions, 1-2save image in Adobe Fireworks, 270

pointing finger for URLs, 210poster image, capture, 234pound sign (#), ID names begin with, 253pre, tag for preformatted text, 95Preloader Stage, 29

change properties in, 239create progress bar, 223-224create simple animated GIF for, 276creating, 238 define optional use of, 225export animated GIF from Flash, 277

prepare for project management, 9preview an animation in a web page, 19Preview in Browser command, 19, 70, 140,

190-191Preview Mode button, 262

Index 315

Product Improvement Program, participat-ing in, 22

product release notes, links to, 6Professional ActionScript IDE, 2programs See also Adobe programs

importing a package into, 231publishing for, 224

progress barcreate in Preloader Stage, 238creating, 223-224

projectbuilding a, 12folder, create, 9management, 9plan, 9-10preparing for, 9

project, examplesAuto-Keyframe animation, 175create animation with keyframes, 177Pin method animation, 173resizable animation, 188-189

Properties panel, 8, 25-28, 87-88change attributes, 35change element clipping in, 118-119changing shape corners in, 102coordinates in, 99Image settings in, 109inserting an action, 198modify an instance, 148Overflow options in, 97pixels or percentage in, 100scaling elements in, 116Shadow header bar in, 107skewing elements in, 114transforming element origin point, 110-

111using, 34

property group, collapse or expand, 41Publish in Browser command, 13Publish Settings command, 13, 225-227publishing

a composition, 224-226animations, 223-224content as static HTML, 226folder, 224-226for Adobe programs, 230for Apple iBooks/OS X, 232

to the web, as static HTML, 229to the web, using Frameworks via CDN,

228purpose, defining, 10put a composition in an HTML document,

256-257

QQuick Start lesson, 6, 61quit Edge Animate, 24

RRAM (system memory), 11, 14recent file, open quickly from Start menu,

17Recent Files link, 6recent items

open via Welcome screen, 4recently saved version, reverting to, 21Rectangle tool, 32, 88-89, 91red line, indicating Timeline position, 180Redo and Undo commands, 55regulations, federal, 83relative position of elements, 101relink OAM file, 263remote inspection of mobile devices, 286Remove Clip command, 119, 135remove poster image, 235rename

composition, 21element, 37, 169label, 195symbols, 145

reparent elements, 167reset a workspace, 50resizable animation

example, 188-189testing, 190-191

resizeanimation, 186elements with Smart Guides, 91handles, 92, 100panels, 46-47text box, 134

Resize lesson, 70-73resolution, selecting in Illustrator, 272-273

316

resource links on Welcome screen, 57resources, 6

finding, 22responsive layouts, create, 3restore a panel, 47reusable objects and symbols, learn how to

create, 6Reuse lesson, 6, 78-80reusing elements, 143-144revert to recently saved version, 21RGB color, 105-106

selecting, 35Rich Internet Applications (RIAs), 2rollover button, creating, 216-217Rotate value in degrees, 112rotate, 110, 112-113, 136-137Rounded Rectangle Tool, 32, 62, 88-89, 91rulers

adjustment handle (pin), 101and guides, using to place elements, 143displaying, 158on the Stage, 30

Runtimeabout, 241DOM elements within, 247examining, 246libraries, 228

SSafari

creating motion content to run on, 281reading HTML documents, 249view animation in, 223

sampleanimations, download, 15click link to open, 70, 78projects via Welcome screen, 57projects, links to, 6

sans serif fonts, 127Save As Type list arrow (Win), 21Save vs. Save As, 21saving

animation, 20composition, 224

Scale Background Image, 101scale elements, 187

Scale Position, 101preset, 188

Scale Size, 101Scale X and Scale Y keyframes, 66scale, 110, 116-117, 136-137screenshots, capture, 3script panels, 193

working with code, 197scripting, 12, 13scroll bars on the Stage, 30Scrub check box, 149scrubbing, 180

across Timeline, 42searchability on the web, improving, 229 Section 508 rules, 83select

label, 195trigger, 197elements, 37, 92

Select Image button, 237, 239Selection Tool, 32, 91-94semicolon (;), end of code statement, 204Send Backward/Send to Back, 164serif fonts, 127set an element ID or Class, 255 See also

CSSSet Element Text command, 209Set Element Text snippet, 208-209Set Symbol Variable snippet, 215Set Symbol Variable, 76Setup wizard, 279Shadow header bar in Properties panel, 107shadows

adding to elements, 107adding to text, 138

shape elements, default settings, 104shape tools, 32shape, ID name, 94shapes

attributes of, 88changing background color, 106create, 90drawing, 88working with, 81

shopping cart buttons, creating, 218shortcut keys, 27

Index 317

shortcut, create on Macintosh, 5show and hide

elements, 165guides, 159rulers, 158

Show Element snippet, 206Show Grid button, 40show/hide snippet comments, 204size changes, learn how to respond to, 6size of folder, reducing, 11skew, 110, 114-115, 136-137Slide Element code, 207Smart Guides on Modify menu, 88-90, 100,

122aligning elements with, 162drawing shapes with, 91resizing elements with, 91

snap elements to guides, 161Snap To options in Timeline menu, 41snippet comments

include or not, 197including, 44

snippets, 13changing text as part of action, 208-209examining JavaScript code in, 204open URL with, 140

social media, accessing, 6software requirements, 11 sound, adding to HTML, 221sound hardware, 11source code, view from web browser, 244,

249special characters, inserting, 126special commands, pasting, 155Split button, 261Spread value of shadows, 107stack elements, 37, 164Stage elements, edit symbol without, 150Stage properties, 12

changing, 28-29edit a symbol, 151view, changing, 31

Stage, 8, 25-27attaching an event to, 200-201set properties, 30working with, 30

Start Dictation command, 125starting Edge Animate, 4Static Background Image, 101Stop snippet code, 196storyboard and script sample, 11straight HTML code, working with, 251string data in JavaScript, 204Structure phase, 9structure, developing, 10style types, 253support, getting online, 22supported graphics files, 81SVG (Scalable Vector Graphics), 84, 85-87

in Illustrator, 274in compositions, 1-2

SVG Code, viewing in browser, 275SVN (Subversion), 2

in Dreamweaver, 260swap an image in a photo gallery, 222switch

between multiple animations, 18to a workspace, 51

Symbol File format (.ansym), 145-146symbols

creating an instance from, 147creating, 144defined, 143-144definition, 78definitions in compositions, 144deleting, 145duplicating, 152editing, 150-151, 153exporting and modifying, 39importing, 145in Library panel, 38-39modifying an instance from, 148nesting within a symbol, 152renaming, 145using JavaScript to access nested, 213working with nested, 153working with, 143

systemrequirements for Windows and

Macintosh, 281prepare for installation, 279

318

Ttablet devices

create animations for web browsers on,227

publishing to with DPS, 266using action events with, 200

Tag Style method for CSS, 252-253tags

common HTML, 248defined, 95redefining current style, 253within HTML code, 205

test a resizable animation, 190-191text, 11

align, 127add HTML links to, 141add links to, 140adding, 123box

add shadows to, 138edit contents, 122-123creating, 122resizing, 134

clipping, 135 creating, 90editing, 124elements, attributes, 122inside angle brackets <html>, 248-249properties

changing, 128-129examining, 127

specific tags, 121tags, changing, 139transforming, 136

working with, 121Text tool, 33

intro to, 121Text_Animate <div>, 188Time Snapping button, 66-67time

adding to animation, 184inserting in animation, 185

timecode, zoom in or out, 40Timeline Actions button, 79Timeline effects, built-in, 13

Timeline grid, 40Timeline panel, 8, 25-27

display elements in, 41inserting an action, 198Lock column in, 168using, 181using, 40work with controls, 42-43working with animations, 183working with keyframes, 182working with labels in, 195working with layers, 182-183

Timeline Snapping button, 41, 181Timeline, 12, 171

attaching a trigger to, 196attaching an event to, 200-201commands, 180

Toggle Display of Code Snippets button,202-203

Toggle Element code, 207Toggle Pin button, 43, 174, 176-177Tools & Services, installing, 279Tools panel, 8, 25-27, 88

specify border color in, 104Text Tool, 122using, 32

tooltip, displaying, 178transform origin point, 110-111Transform Origin X or Y values, 110, 112,

114, 116-117transform origin, 92transform text boxes, 136-137Transform Tool for text, 136-137Transform Tool, 32, 89, 110-111

change element corners with, 103rotating elements with, 112-113scaling elements with, 117skewing elements with, 115

transforming text, 121transitions, 11

between keyframes, 178create manually, 178-179creating, 172working with, 179

Transparent box, 35Trigger panel, opening, 202

Index 319

triggersinserting and editing in Timeline, 196working with in Timeline, 197

troubleshootingdictating text, 125web page doesn’t open, 19

Twitter icon, 6two forward slashes (//) in JavaScript, 204Typekit, 121, 130, 132, 280, 283

about, 3using with Muse, 262

types of styles, 253

UU.S. Copyright Office, 83Undo and Redo commands, 55undock a frame or panel, 49ungroup elements, 37, 166unlock or lock

guides, 160elements, 168

unparent elements with Ungroup, 167unsaved Edge Animate composition, 20update a device, 3Update Asset (OAM file), 263updates from Adobe, 279URL

adding a link to an element, 210open with HTML code, 211

useCreate Symbol snippet, 214Get Element snippet, 208Get Symbol snippets, 212

user interactionhandling, 6learn how to handle, 6

usingShow and Hide Element snippets, 206Code panel, 44Elements panel, 36Tools panel, 32

Vvalues

changing, 35

keyframe, 178variables, working with when inserting

snippets, 204vectors

based format graphics (SVG), 274defined, 81drawing tools, 81graphics, 81-82shapes, 88

videoembed and play YouTube, 220hardware, 11

viewimported OAM file, 263source code from a web browser, 244

View menu, 31View scrub, 31

WWDGT files, 233

importing, 232creating, 225publish animation as, 13

web browserand markup tags, 249displaying content in, 241testing resizable animation in, 191view animation in, 223viewing HTML markup language, 249

Web Content Accessibility Guidelines(WCAG), 83

web designspreview for mobile devices, 280, 286-287previewing, 3

web fontlibrary, free from Adobe, 280providers, 132adding, 38, 121, 131-133deleting, 39, 133getting, 130-131

web graphics, 1-2web pages

add functionality to, 193use of heading tags by search engines,

95web publishing options, 223-226

320

web, publish composition for use on, 224WebKit, 281Welcome screen, 4

using, 6whitespace, ignoring in JavaScript code,

204window, viewing the Edge Animate, 8Windows, system requirements, 281wizard, Adobe Setup, 279word spacing, 127, 129working with

Alternate and Liquid Layouts, 265animation in Muse, 263comments and variables when inserting

snippets, 204CSS, 254Digital Publishing Suite (DPS), 266HTML, 250-251

straight HTML code, 251symbols and elements, 143transitions, 179

workspacescreating and using, 50deleting, 51switch to a, 51

Workspaces submenu, 50World Wide Web Consortium (W3C), 83

X-ZX and Y coordinates, 99YouTube, embedding and playing videos,

220Zoom in and out commands, 31Zoom slider, 40Zoom Timeline to Fit button, 40

adobe® edge animate on demand -...

Documents