book

Adobe Edge Animate: The Missing Manual

by Chris Grover

November 2012

Intermediate to advanced

306 pages

9h 17m

English

O'Reilly Media, Inc.

Read now

Unlock full access

About the AuthorAbout the Creative TeamAcknowledgementsThe Missing Manual Series
Why Use Adobe Edge Animate?Where to Find Adobe Edge AnimateAbout This BookMacintosh and WindowsAbout the OutlineThe Very BasicsAbout→These→ArrowsAbout the Online ResourcesMissing CDRegistrationFeedbackErrataSafari® Books Online
Creating and Saving Edge Animate ProjectsA Tour of the Animate WorkspaceSaving a Custom WorkspaceBuilding Your First AnimationViewing Your Animation in a Browser
Setting the StageViewing the StageCreating Art in AnimateRectangles: Building a Basic BoxSelecting and Copying ElementsTransforming Your RectangleAligning, Distributing, and Arranging ElementsRulers and Manual GuidesArranging Elements: Z-OrderA Rectangular AnimationAnimating by Adding Property KeyframesReviewing and Troubleshooting Your AnimationRounded Rectangles: More than Meets the EyeA Circle Is a Very Rounded RectangleAdding Drop Shadows to GraphicsClipping the Bits That Need TrimmingImporting ArtShowing and Hiding ElementsThe Sliding ShowOn/Off: Another Way to Show and Hide Elements
Adding Text to Your ProjectAbout Text ContainersChanging Text-Specific PropertiesAbout Typefaces and FontsUsing Web FontsAdding Web Fonts to Your CompositionChanging Other Text PropertiesClipping Text Around the EdgesMaking That Headline Drop InDealing with the TemplateAdding Some BounceCreating a Bounce ManuallyUsing Animate’s Prebuilt BounceAdding Links to TextHTML Tags in Animate

Introducing the TimelineChoosing a Moment in TimeAdding Labels to the TimelineEditing LabelsUnderstanding Elements’ Timeline ControlsShowing, Hiding, and Locking ElementsUsing Timeline Keyboard ShortcutsCreating TransitionsCreating Instant TransitionsSetting the Pin for a Smooth TransitionManually Adding and Removing Property KeyframesEditing TransitionsAdding Easing, Reversing Motion, and Fine-Tuning TransitionsAnimating a FilmstripDealing with Timeline Claustrophobia
Elements, Triggers, and ActionsTrigger Your First ActionTriggering Actions in Other ElementsTriggers and Actions for the Stage and TimelineDeleting Triggers and ActionsAdding Triggers to the StageEditing an ActionTimeline Triggers and TricksAdding a Trigger to Loop Your AnimationUsing Labels in Your Timeline CodeAdding Triggers to a Point in TimeSliding Show RevisitedNon-Linear Thinking and DesignTimeline Button ControlsTriggers for iPhones and Androids
About SymbolsBuilding with SymbolsBuilding a Multipart Leg SymbolCreating a Curved Line with a Rounded RectangleNesting Symbols Within SymbolsWorking with Symbol TimelinesAnimating a Symbol on the StageDuplicating and Renaming SymbolsDeleting or Undoing a SymbolCreate a Button Symbol with Rollover ActionGrouping Elements Without SymbolsAdding a Click State to Your Button SymbolMaking Your Button Open a Web PageMoving Symbols Between ProjectsBuilding a Drop-Down Menu SystemCreating Text Callouts with Rollover ActionCreate and Animate Your CalloutsChanging the Cursor to Provide User Feedback
Reading HTML DocumentsPlaying Tag the HTML WayCreating a Hyperlink with HTMLReading CSS FilesApplying CSS Styles to Element IDs and ClassesReading the HTML Animate CreatesOpening an HTML Document in AnimatePlacing Your Composition in an HTML DocumentCentering an Animate CompositionPlacing Two Animate Compositions on the Same Page
A Very Brief History of JavaScript and jQueryJavaScript Versus ActionScript and Other LanguagesSleuthing Through the JavaScript Animate CreatesAdding a New Element to the StageJavaScript and jQuery BasicsOperators in JavaScriptConditional Statements in JavaScriptUnderstanding the Document Object Model (DOM)Natural Selection the jQuery Way“this” and “sym” Are Special Words
More Showing and Hiding TricksDelaying Action for Show, Hide, and ToggleFading In and OutSlip Sliding Up and DownMore Visual Effects with animate()What, No Slide Left and Slide Right?Swapping Images in AnimatePhoto Gallery RevisitedOther Uses for RolloversIdentifying and Changing Elements and SymbolsAssigning VariablesUsing Actions to Assign VariablesChecking Values with Text Boxes and Alert DialogsUsing Alert() Dialog Boxes to Check ValuesIdentifying Elements Within SymbolsPlaying a Symbol’s TimelineGetting the Current Playhead PositionUsing Conditional StatementsSlideshow Control with the if() ConditionalUsing switch() to Handle Multiple Conditions
Adding Background Images to Compositions and ElementsMaking the Stage Fill the Browser WindowSetting Minimum and Maximum Widths for ElementsCreating Responsive DesignsSize QuestionsSize QuestionsPosition QuestionsMaking Graphics that Scale SizeMaking Graphics that Scale PositionCreating a Preloader for Your CompositionAccommodating Older Web BrowsersPublishing Your Composition as a Web Page
Edge Animate System RequirementsInstalling Edge AnimateInstalling Edge Animate for WindowsInstalling Edge Animate for MacUninstalling Edge AnimateUninstalling Edge Animate for WindowsUninstalling Edge Animate for MacGetting HelpBooks for HTML, CSS, JavaScript, and jQueryOnline Help
FileNewOpenOpen RecentCloseClose AllSaveSave AsRevertPublish SettingsPublishPreview in BrowserImportEditUndoRedoCutCopyPastePaste SpecialDuplicateSelect AllTransformDeleteKeyboard ShortcutsSpecial Characters (Mac only)ViewZoom InZoom OutActual SizeRulersGuidesSnap to GuidesLock GuidesSmart GuidesPreloader StageDown-level StageModifyArrangeAlignDistributeConvert to SymbolEdit SymbolTimelinePlay/StopReturnGo to StartGo to EndGo to Previous KeyframeGo to Next KeyframeAuto-Keyframe ModeAuto-Transition ModeAdd KeyframeInsert LabelInsert TriggerCreate TransitionsRemove TransitionsInvert TransitionInsert TimeToggle PinFlip Playhead and PinSnappingSnap ToShow GridGridZoom InZoom OutZoom to FitExpand/Collapse SelectedExpand/Collapse AllWindowWorkspaceTimelineElementsLibraryToolsPropertiesCodeLessonsHelpAnimate HelpEdge Animate JavaScript APIEdge Animate Community ForumsChange LanguageAdobe Product Improvement Program About Animate (Windows only)

Overview

Want to create animated graphics for iPhone, iPad, and the Web, using familiar Adobe features? You’ve come to the right book. Adobe Edge Animate: The Missing Manual shows you how to build HTML5 graphics with Adobe visual tools. No programming experience? No problem. Adobe Edge Animate writes all of the code for you. With this book, you’ll be designing great-looking web elements in no time. (Note: This book does not cover Adobe Edge Animate CC and later versions.)

The important stuff you need to know:

Jump into animation. Master Animate’s elements, properties, and timeline panels.
Create and import graphics. Make drawings with Animate’s tools, or use art you’ve created in other programs.
Work with text. Build menus, label buttons, provide instructions, and perform other tasks.
Make it interactive. Use triggers and actions to give users control over their web experience.
Dig into JavaScript. Customize your projects by tweaking your code.
Look great at any size. Publish responsive web pages that adjust to any display, tablet, or smartphone.