book

Adobe Edge Animate Preview 7: The Missing Manual

by Chris Grover

September 2012

Intermediate to advanced

282 pages

8h 19m

English

O'Reilly Media, Inc.

Read now

Unlock full access

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 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
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 ModeInstant Transition ModeAdd KeyframeInsert LabelInsert TimeToggle PinFlip Playhead and PinSnappingSnap ToZoom 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 guide. Adobe Edge Animate Preview 7: The Missing Manual shows you how to build HTML5 graphics with Adobe visual tools. No programming experience? No problem. Adobe Edge Animate writes all the code for you. With this book, you’ll be designing great-looking web elements in no time.