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 3. Adding and Formatting Text

In spite of the old saw about a picture being worth a thousand words, often words are the right tool for the job. When you want to label a button, build a menu-based navigation system, or provide how-to instructions for a particular task—it’s time for text.

Animate is rooted in HTML5, so it gives you the same properties and text-handling features that you’d find in other web-building tools like Adobe Dreamweaver. That means you won’t have all the typographic features that you’d find in a page layout program or a more complex graphics program like Flash. As you’ll learn in this chapter, you do get your choice of fonts, and you can set the size, color, and alignment. If Animate doesn’t have the special font that you need, you can use web fonts. For example, this chapter shows how to link to Google’s web fonts. In addition, you’ll learn how to apply transforms and effects just like those used with graphics and photos. Along the way, you’ll learn how to animate your text, giving it a little bounce. Links are important to any web page. This chapter explains how to import and manage HTML text that includes links on specific words. HTML has a number of tags that are used to identify the content of text, such as block quotes from other sources and computer code used for examples. You’ll learn which tags Animate uses and how to apply those tags to text.