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)

Content preview from Adobe Edge Animate: The Missing Manual

A Note Regarding Supplemental Files

Supplemental files and examples for this book can be found at http://examples.oreilly.com/0636920027553/. Please use a standard desktop web browser to access these files, as they may not be accessible from all ereader devices.

All code files or examples referenced in the book will be available online. For physical books that ship with an accompanying disc, whenever possible, we’ve posted all CD/DVD content. Note that while we provide as much of the media content as we are able via free download, we are sometimes limited by licensing restrictions. Please direct any questions or concerns to booktech@oreilly.com.