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

Chapter 2. Creating and Animating Art

As the name implies, Animate is an animation management tool. Using Edge Animate, you determine what elements show on the stage, their position, and their appearance. You can create text and simple visual elements within Animate, but it’s likely that you’ll create more complicated artwork in some other program like Illustrator, Photoshop, or Fireworks.

This chapter examines what types of graphics you can and can’t create within Animate. It starts off by defining the stage and the ways you can modify it. You’ll learn about all the properties of the rectangle and rounded rectangle. With creativity, you can also create some distinctly non-rectangular shapes. Along the way, you’ll learn how to quickly align and arrange objects on the stage and test-drive the transform and clipping tools. But you’re not stuck in Animate: You’ll also learn how to import artwork from your other favorite applications, such as Illustrator or Fireworks (and you’ll get some tips about the best free graphics programs you can find on the Web).

Setting the Stage

As the Bard said a few hundred years ago, “All the world’s a stage.” That’s certainly true in Edge Animate. As explained in Chapter 1, when you place an element on the stage, it’s visible to your audience. There are a couple of ways to hide or remove elements from the stage. If you have the stage Overflow properties set to hidden, then you can exit stage right, left, top, or bottom by moving the element off stage. At ...