book

A Guide to Adobe Animate: Creating Your First Animations

Name: A Guide to Adobe Animate: Creating Your First Animations
Author: Jennifer Harder
ISBN: 9798868821806

by Jennifer Harder

May 2026

Beginner

1136 pages

23h 27m

English

Apress

Read now

Unlock full access

A Guide to Adobe Animate
Introduction
Application InformationInstall Your AppsOpen Your AppsResourcesPhotoshop BooksIllustrator BooksAnimate and Media EncoderLocation of Project Files
Acknowledgments
Table of Contents
About the Author
About the Technical Reviewer
1. Introduction and Setting Up the Workspace
Introduction and Thoughts/Tips on Planning Out Your AnimationA Brief History of AnimationThe Benefit of an AnimationYour Drawing Style, Skill, and Attention SpanTypes of Animation Created with AnimateHardware and Adobe Application ConsiderationsWrite Out the Story Before You Begin Your AnimationUse of Color and Text in Your AnimationThe Benefits of Animated Movement with SoundOpening the Adobe Animate ApplicationCreating a New File in Animate and Setting Up Your Canvas/Stage Depending on the Reason for the ProjectSetting Up the Stage/CanvasReasons to Use ActionScript 3.0 or HTML5 CanvasWidth, Height, and Units of MeasurementFrame RateOverview of Main Menu ItemsSetting Up Your Animate WorkspaceOverview of Tools and PanelsTool Bar (Tools)Arranging and Reviewing Your Panels Found in the WorkspaceAdding More Panels to Your WorkspaceWorking with the History PanelViewing Rulers, Grids, and GuidesHow to Convert Files to Another Format (HTML5 to ActionScript 3.0)Modifying Document SettingsSaving Your Files (.fla)Project: Opening and Editing an FLA FileSummary
2. Working with the Tools Panel: Part 1 – Shapes, Colors, and Selections
Working with Tools and the Properties PanelModifying Your Tools Panel and Viewing Tool PropertiesDocument Publishing with the Properties and Output PanelsTypes of Shapes and Primitive ToolsRectangle Tool (R)Rectangle Primitive Tool (Shift + R)Oval Tool (O)Oval Primitive Tool (Shift + O)PolyStar ToolLine Tool (N)Object Properties for Selected ShapesSelection Tool (V)Subselection Tool (A)The Selection Tool and the Properties PanelModify Menu CommandsKey Commands While Moving and Editing Objects with the Selection and Subselection ToolsMaking Selections of Parts of Shapes with Other ToolsLasso Tool (L)Polygon Tool (Shift + L)Magic WandInverting a SelectionAdding Color with Tools and PanelsColor PanelGradient Transform Tool (F)Bitmap FillsSwatches PanelPaint Bucket (K) and Ink Bottle (S) ToolsEyedropperFree Transform Tool, Transform and Alignment Panels with the Modify MenuModify Menu Transform CommandsArranging and Aligning ObjectsAlign PanelModify Menu Align and Arrange CommandsGrouping, Ungrouping, and Combining ObjectsModifying Drawing Objects and ShapesProject: Arranging and Working with Shapes on the StageSummary
3. Working with the Tools Panel: Part 2 – Pens, Brushes, and Text
Pen Tool BasicsDrawing Custom ShapesEditing with the Selection and Subselection ToolsAdding a Fill to a Stroked ShapeEditing and Deleting an Envelope DistortionWorking with the Width Tool (U) and Creating a New Variable Width ProfilePencil Tool (Shift + Y)Brush Tools and the Brush Library PanelClassic Brush Tool (B)Fluid Brush Tool (Shift + B)Paint Brush Tool (Y)Brush Library Panel and Style OptionsProject: Creating and Saving Custom BrushesEraser Tool (E)Adding and Editing Text with the Text Tool, Text Menu, and Properties PanelCharacter (Static Text)Paragraph (Static Text)Text DistortionSummary
4. Importing Graphics
Photoshop File ConsiderationsIllustrator File ConsiderationsImporting Graphics from Photoshop and Illustrator to the Stage and Animate LibraryImport to StagePhotoshop Import (.psd)Illustrator Import (.ai)Import to LibraryOverview of Animate Library PanelDragging Graphics from the Stage to the Library and OrganizingBitmap and SymbolsBitmap PropertiesWhat Are Symbols?Opening an External LibraryWorking with the CC Libraries PanelOverview of CC Libraries PanelCreate a New LibraryAssets and ElementsImport or Export a LibraryWorking with Adobe Creative Cloud and Bridge for Adding Additional Assets to a Library FileProject: Working with Graphics and Vector BrushesSummary

5. Working with the Timeline Panel and Adding Layers
Timeline Panel and LayersOverview of the Timeline PanelLayer Naming ConventionsLayer PropertiesDelete or Remove Layers or FolderWorking with Layers in the TimelineViewing LayersOrganize and Move Layers and FolderSelect More Than One Layer or FolderAdditional Edit Timeline TasksTimeline Panel Advanced OptionsWorking with FramesTypes of Frames and KeyframesAdding Keyframes and FramesKeyframe and Frame ExpansionFrames and Frame SpansSpan-Based SelectionExpanding Frames on Multiple LayersOnion Skins and Working with Multiple FramesPlayback and Viewing OptionsCopying, Cutting, and Pasting FramesRemoving and Clearing FramesReversing FramesEditing and Working with Settings in the Properties PanelThe Modify and Control MenuTools Panel Navigation AssistsProject: Creating a short Photo GallerySummary
6. Symbol Animation and the Timeline Panel: Part 1
Working with Symbols and FramesCreating a Symbol for AnimationIllustrator Settings When Creating a Symbol and Importing a SymbolCommon File Issues and Fixes During ImportIllustrator Graphic Concerns and FixesNaming Convention Errors and the Output Panel When Files Are Imported.Symbol Creation in AnimateTypes of Symbols and Overview of Symbol PropertiesGraphic and Movie Clip Symbol DifferencesConvert to Symbol Advanced SettingsEditing Symbols in the LibraryCreating Duplicate SymbolsTransforming Symbols on the Stage or CanvasReviewing Symbol Objects in the Properties PanelColor Effects, Blends, and Filters/Effects for SymbolsColor EffectsBlendsFiltersProperties Panel LoopingDifferences in Options Between HTML5 Canvas and ActionScript 3.0Summary
7. Symbol Animation and the Timeline Panel: Part 2
Using Symbols with Keyframes on the Canvas to Create MovementTypes of Tween Motions and Their PropertiesFrame by FrameShape TweenShape HintsReverse FramesClassic TweenAdding a Guide LayerProperties PanelReverse FramesMotion TweenEditing Motion Points and PropertiesReverse MotionAdding Tweens Inside of Other Symbols Using the Timeline PanelApplying Masks Layer for a TweenReason for Conversion to Frame-by-Frame of a Tween AnimationFrame Properties (Review Color Effects, Blends, and Filters)Advanced Properties Settings and EasingShape Tweening PropertiesClassic Tweening PropertiesMotion Properties and Timeline Panel settingsAdjusting Various Motion Points and PropertiesApply the Motion EaseTweening PropertiesApplication of EasesLooping Frames Review and Properties for Looping Graphic SymbolsProject: Creating Basic Symbol TweensThe Photo GalleryWorking with Bitmaps on LayersWorking with Text on Layers with SymbolsThe Sailing BoatSymbols, Effects, and States for Keyframes Created in IllustratorWorking with Layers, Symbols, and Tweens in AnimateCombining Frames into SymbolsAdditional Ideas You Can TrySummary
8. Working with Motion Presets, Camera, and Layer Depth
Applying Motion Presets to Frames and Layers with SymbolsAdding a Default Motion Preset to a SymbolAdding and Editing Custom Presets OptionsDeleting a Preset from the PanelImport and Export Motion PresetsMotion Commands Menu OptionsRemoving Motion Presets from the Frame3D Tools: Rotation and Translation3D Rotation Tool (Shift+W)The 3D Translation Tool (G)3D in Motion Tweens and Presets with Movie ClipsProjects: Working with Motion PresetsCat and Ball of Yarn ProjectSwap Your Animation with a New SymbolCreate a New Motion Preset AnimationIllustrator Tip: Create and Animate Your Own 3D-Like GraphicsBasic Camera Animation with the Timeline PanelCamera Tool PropertiesCamera SettingsColor EffectsFiltersCreating Camera TweensTroubleshooting Classic and Motion Tween Camera Color Effects and FiltersOn-Screen ControlsParallaxes and Camera Interaction with the Layer Depth PanelLayer DepthLayer Depth Adjustments and Frames Maintaining SizeAdjusting DepthMaintain SizeAttach to Camera InteractionSave FilesProjects Ideas with Camera and Layer DepthAdding a New Character to Your Layer Depth ProjectAdding a Camera Layer to the Previous Sailing Boat ProjectCreate a New Layer Depth AnimationSummary
9. Working with Assets and Advanced Features: Animating Characters: Part 1
Overview of the Assets Panel for Beginner AnimatorsAdding Assets from the Panel to the StageExporting and Adding Assets to your Custom Tab via the Library PanelWhat Is Layer Parenting?File Support for Layer ParentingAdapting an Asset to Study Layer ParentingParent–Child HierarchyHow to Control Layer Parenting with Graphic Symbols on the TimelineAdjust Layer Parenting ConnectionsAltering Registration (Center) and Transformation PointsDesign ConsiderationsBuilding the Classic Tween for Layer ParentingTroubleshooting MovementFrame Classic Tween PropertiesCreating the Parent Graphic SymbolAdding Movement to the SymbolProject: Working with Layer Parenting Animation to Create the Circus SceneAdding a Shadow and a Layer MaskLooping Frames with the Frame Picker Panel for Character’s Facial Expressions or Lip SyncingFrame Picker Panel PropertiesLip Syncing FramesCreating Mouth VisemesLocating the Audio Layers for the VisemesFrame LabelsProject: Working with Frame Picker and Lip Sync AnimationSummary
10. Working with Assets and Advanced Features: Animating Characters: Part 2
Puppet Warp with Asset Warp ToolCreating Warped Bitmap and Shape ObjectsAdjusting PreferencesTroubleshooting in IllustratorTips on Asset Warp EditingStart Creating a Bone with the Asset Warp ToolAsset Warp Options in the Properties Panel for Tool and Object TabsAnimating the Asset WarpAdditional Tools to Edit Your Asset Warp AnimationAdding and Removing Pins in the TimelineJoining JointsEdit the Rig (Rig Edit Mode)Returning to Asset Warp Editing Mode to TroubleshootAdding the Asset Warp Inside a Graphic Parent SymbolRig Mapping and BonesWorking with Inverse Kinematics (IK)Work with a Graphic or Movie Clip Symbol?Working with Rig Mapping Panel and Assets PanelCorrecting Auto Map for a Custom Character with the Rig Mapping Panel with Movie Clip SymbolsArmature (Pose Layers) and BonesCopy and Paste a PoseSymbol Order ArrangementTest the AnimationAdding Your Armature to a SymbolEditing and Building a Custom Armature LayerWorking with the Bone (M) to Create a Flexible Tail IK Shape (Inverse Kinematics)Attaching the IK Shape As a Symbol to the RigAdditional Tips to Remember If Building a Custom Rig with Only the Bone Tool and Then Other ToolsDelete Bones and Remove ArmaturesAdjust the Position of Your Movie Clip Symbol Instance or Bone with the Free Transform or Selection ToolCreating Custom IK SymbolsBind Tool (Shift+M) and IK Shapes Created with the Bone ToolArmature IK PropertiesObject Properties (Symbol and Shape)Movie Clip Symbol Node PropertiesArmature Properties for the FrameEasingOptionsEditing Pose Movement on the Stage and on the Armature LayerOther Asset Complex ExamplesProject: The Circus CelebrationProject Idea: The Asset Warp SpiderSummary
11. Adding Sounds and Basic Actions to the Timeline
Importing and Adding Sounds in Various FormatsAnimate Assets and Kinds of Audio FormatsMedia EncoderReviewing Acquiring Sound Using Bridge and CC LibraryAdobe AuditionAdding Sounds to a Frame and Editing and Modifying the Audio from the Properties PanelThe Audio Differences Between ActionScript 3.0 and HTML5 CanvasProject: Reviewing Looping and Lip Syncing with Frame Picker Panel with the AudioProject Idea: Adding Music and Sound EffectsInteractivity with Basic Actions for HTML5 CanvasLocation of Actions in the Timeline PanelDebug Menu and Panels OverviewProject Idea: Stop and Then Start a Movie Clip Symbol with a ButtonAdding Play and Stop ActionsStop ActionsOverview of Additional Panel and Menu OptionsWhen Are Multiple Scenes Used in Action Script 3.0?What Are Commands?Summary
12. Publishing Your Animation in Various Formats and Next Steps
Publish Settings and FormatsHTML5 Canvas (JavaScript/HTML)BasicHTML/JSImage SettingsHTML5 Canvas – Other FormatsActionScript 3.0ActionScript 3.0 Other FormatsExport Settings and FormatsExport ImageImage SizeColor TableSaving the FileExport Animated GIFSaving the AnimationExport Image (Legacy)Export Movie ImagesExport Video/MediaExport Scene As an AssetQuick Share and PublishExporting Assets and Animations to the CC Libraries Panel and BridgeCheck Output Panel and Basic DebuggingProject: Publish Your AnimationsAdditional Suggested Uses for Animate FilesAdditional Adobe Applications for Continuing Your ProjectsDreamweaverInDesignCharacter AnimatorVideo ClipsMixamoAcquiring Additional Items from the Creative Cloud for AnimateSummary
Index

Content preview from A Guide to Adobe Animate: Creating Your First Animations

J. HarderA Guide to Adobe Animatehttps://doi.org/10.1007/979-8-8688-2180-6_11

11. Adding Sounds and Basic Actions to the Timeline

Jennifer Harder¹

Jennifer Harder

Email: harderjl@telus.net

In this chapter, we will look at how to add or import sound or audio music to your Backgrounds as well as Speech to a Character. We will review the Lip-Syncing panel option from Chapter 9. Then we will learn how to add some basic actions with a play button for further options for interactivity in your animation. This chapter contains two projects to review these related steps.

Note that the Projects for this chapter can be found in the Chapter 11 folder. Refer to the download link in the Introduction.

To start, practice ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Tips for Designing Effective Presentation Slide Decks

Publisher Resources

ISBN: 9798868821806Purchase Link Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

A Guide to Adobe Animate: Creating Your First Animations

by Jennifer Harder

11. Adding Sounds and Basic Actions to the Timeline

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.