Adobe Animate Classroom in a Book® 2022 release

The official training workbook from Adobe

Russell Chun

Adobe Animate Classroom in a Book® (2022 release)

© 2022 Adobe. All rights reserved.

Adobe Press is an imprint of Pearson Education, Inc. For the latest on Adobe Press books, go to adobepress. com. To report errors, please send a note to errata@peachpit.com. For information regarding permissions, request forms, and the appropriate contacts within the Pearson Education Global Rights & Permissions department, please visit www.pearson.com/permissions.

If this guide is distributed with software that includes an end user license agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.

The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as commitment by Adobe. Adobe assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.

Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.

Any references to company names in sample files are for demonstration purposes only and are not intended to refer to any actual organization.

Adobe, the Adobe logo, Adobe AIR, Adobe Animate, Flash, Flash Player, ActionScript, Adobe Fonts, Illustrator, Photoshop, Creative Cloud Libraries, Adobe Press, and Classroom in a Book are either registered trademarks or trademarks of Adobe in the United States and/or other countries. Adobe product screenshots reprinted with permission from Adobe.

Apple, iOS, iPad, iPhone, iPod, macOS, Macintosh, Safari, and Xcode are trademarks of Apple, registered in the U.S. and other countries. Android, Google, and YouTube are registered trademarks of Google Inc. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All other trademarks are the property of their respective owners.

Unless otherwise indicated herein, any third-party trademarks that may appear in this work are the property of their respective owners and any references to third party trademarks, logos or other trade dress are for demonstrative or descriptive purposes only. Such references are not intended to imply any sponsorship, endorsement, authorization, or promotion of Pearson Education, Inc. products by the owners of such marks, or any relationship between the owner and Pearson Education, Inc. or its affiliates, authors, licensees or distributors.

Adobe Inc., 345 Park Avenue, San Jose, California 95110-2704, USA.

Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Inc., 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

Chapter 10 Asset Credits

Running shoes_62402566 © Robert Babczynski/Shutterstock

Sports runners situated in a shoe box_109846007 © Kitch Bain/Shutterstock

Sport and healthy lifestyle_1117120196 © RomarioIen/Shutterstock

Executive Editor: Laura Norman

Senior Production Editor: Tracey Croom

Development Editor: Stephen Nathans-Kelly

Project Editor: Maureen Forys, Happenstance Type-O-Rama

Copy Editor: Susan Berge

Proofreader: James Fraleigh

Technical Reviewer: Joseph Labrecque

Keystroker: Megan Ahearn

Compositor: Cody Gates, Happenstance Type-O-Rama

Indexer: Valerie Perry

Cover Illustration: Charlie Davis

Interior Designer: Mimi Heft

ISBN-13: 978-0-13-762358-7

ISBN-10: 0-13-762358-5

ScoutAutomatedPrintCode

Where are the Lesson Files?

Purchase of this Classroom in a Book in any format gives you access to the lesson files you’ll need to complete the exercises in the book.

Go to www.adobepress.com/AnimateCIB2022.

Sign in or create a new account.

Click Submit.

Note

If you encounter problems registering your product or accessing the lesson files or web edition, go to www.adobepress.com/support for assistance.

Answer the question as proof of purchase.

The lesson files can be accessed through the Registered Products tab on your Account page.

Note

If you purchased a digital product directly from adobepress.com or peachpit.com, your product will already be registered. However, you still need to follow the registration steps and answer the proof of purchase question before the Access Bonus Content link will appear under the product on your Registered Products tab.

Click the Access Bonus Content link below the title of your product to proceed to the download page. Click the lesson file links to download them to your computer.

Contents at a glance

Getting Started

1 Getting Acquainted

2 Creating Graphics and Text

3 Animating Symbols with Motion Tweens

4 Advanced Motion Tweening

5 Layer Parenting and Classic Tweens

6 Puppet Warping

7 Inverse Kinematics with Bones

8 Animating the Camera

9 Animating Shapes and Using Masks

10 Creating Interactive Navigation

BONUS LESSON Working with Sound and Video online

Index

Contents

Getting Started

1 Getting Acquainted

Starting Adobe Animate and opening a file

Understanding document types and creating a new document

Getting to know the workspace

Working with the Library panel

Understanding the Timeline panel

Organizing layers in a timeline

Using the Properties panel

Using the Tools panel

Adding layer effects

Undoing steps in Animate

Previewing and exporting your movie

Modifying the content and Stage

Saving your movie

2 Creating Graphics and Text

Getting started

Understanding strokes and fills

Creating shapes

Making selections

Editing shapes

Using variable-width strokes

Organizing your drawing

Creating curves

Using brushes

Using gradient fills

Using transparency to create depth

About symbols

Creating symbols

Managing symbol instances

Applying filters for special effects

Creating and editing text

Aligning and distributing objects

Sharing your final project

Collaborating with the Assets panel

3 Animating Symbols with Motion Tweens

Getting started

About animation

Understanding the project file

Animating position

Changing the pacing and timing

Animating transparency

Animating filters

Animating transformations

Editing multiple frames

Changing the path of the motion

Swapping tween targets

Creating nested animations

Easing

Frame-by-frame animation

Animating 3D motion

Exporting your final movie

4 Advanced Motion Tweening

Getting started

About the Motion Editor

Understanding the project file

Adding motion tweens

Editing property curves

Viewing options for the Motion Editor

Copying and pasting curves

Adding complex eases

5 Layer Parenting and Classic Tweens

Getting started

Layer parenting

Using classic tweens

Graphic symbols for lip-syncing dialogue

6 Puppet Warping

Getting started

What is puppet warping?

Using the Asset Warp tool

Editing your rig

Animating your rig

Rigs with branching joints

Warp options

Propagating rig edits

Single joints

7 Inverse Kinematics with Bones

Getting started

Character animation with inverse kinematics

Creating the pedaling cycle

Disabling and constraining joints

Adding poses

Inverse kinematics with shapes

Simulating physics with springiness

Tweening automatic rotations

Rig mapping

8 Animating the Camera

Animating camera moves

Getting started

Using the camera

Attaching layers to the camera for fixed graphics

Exporting your final movie

9 Animating Shapes and Using Masks

Getting started

Animating shapes

Understanding the project file

Creating a shape tween

Changing the pace

Adding more shape tweens

Creating a looping animation

Using shape hints

Previewing animations with onion skinning

Animating color

Creating and using masks

Animating the mask and masked layers

Easing a shape tween

10 Creating Interactive Navigation

Getting started

About interactive movies

ActionScript and JavaScript

Creating buttons

Preparing the timeline

Creating destination keyframes

Navigating the Actions panel

Adding JavaScript interactivity with the Actions panel wizard

Creating the “Shop now” button

Playing animation at the destination

Animated buttons

Next steps

Index

BONUS LESSON Working with Sound and Video online

Getting Started

The 2022 release of Adobe Animate provides a comprehensive authoring environment for creating sophisticated animations and interactive, media-rich applications that you can publish to a variety of platforms. Animate is widely used in the creative industry to develop engaging projects that integrate video, sound, graphics, and animation. You can create original content in Animate or import assets from other Adobe applications such as Photoshop or Illustrator, quickly design animation and multimedia, and use code to integrate sophisticated interactivity.

Use Animate to generate graphics and animation assets, to publish broadcast-quality animation, to build innovative and immersive websites, to create stand-alone applications for the desktop, or to create apps to distribute to mobile devices running on the Android or iOS system.

With extensive controls for animation, intuitive and flexible drawing tools, and output options for HD video, HTML5, WebGL, SVG, mobile apps, and desktop applications, Adobe Animate is a robust multimedia authoring environment that enables your imagination to become reality.

About Classroom in a Book

Adobe Animate Classroom in a Book (2022 release) is part of the official training series for Adobe graphics and publishing software developed with the support of Adobe product experts. The lessons are designed so you can learn at your own pace. If you’re new to Animate, you’ll learn the fundamental concepts and features you’ll need to use the program. Classroom in a Book also teaches many advanced features, including tips and techniques for using the latest version of this application.

Although each lesson provides step-by-step instructions for creating a specific project, there’s room for exploration and experimentation. You can follow the book from start to finish or do only the lessons that correspond to your interests and needs. Each lesson concludes with review questions to reinforce what you’ve learned.

What’s new

The 2022 release of Adobe Animate provides significant new controls for animation with puppet warping, improvements to layer parenting, and enhancements to paint brush preferences and symbol options.

The lessons in this book provide opportunities to use some of the updated features and improvements in Animate, including the following:

A modern rigging process that allows you to create bones inside of bitmap images and shapes with the Asset Warp tool

Improved layer parenting, which now fully supports scale transformations

A more robust set of playback options for graphic symbols that includes reverse looping and settings for the first and last frames

Refinements to the Paint Brush tool for more precise handling with the addition of a Paint Fills Only mode

Automatic scaling of your Paint Brush tip size when editing symbols

Prerequisites

Before you begin using Adobe Animate Classroom in a Book (2022 release), make sure your system is set up correctly and that you’ve installed the required software. You should have a working knowledge of your computer and operating system. You should know how to use the mouse and standard menus and commands and also how to open, save, and close files. If you need to review these techniques, see the printed or online documentation included with your macOS or Microsoft Windows software.

In addition, you should also install the latest version of Adobe Media Encoder, the accompanying stand-alone application from Creative Cloud, to publish videos from and for Animate projects.

Installing Animate

You must purchase the Adobe Animate application as part of Adobe Creative Cloud. The following specifications are the minimum required system configurations.

macOS

Multicore Intel™ processor with 64-bit support operating system

macOS version 10.15 (Catalina), version 11.0 (Big Sur), version 12 (Monterey)

2 GB of RAM (8 GB recommended)

1024x900 display (1280x1024 recommended) GPU

QuickTime 10.x software recommended

4 GB of available hard-disk space for installation; more free space required during installation (cannot install on a volume that uses a case-sensitive file system or on removable flash storage devices)

OpenGL version 3.3 or higher (Metal Support recommended)

Broadband internet connection and registration necessary for required software activation, validation of subscriptions, and access to online services

Windows

Intel Pentium® 4, Intel Centrino®, Intel Xeon®, or Intel Core™ Duo (or compatible) processor (2GHz or faster processor)

Microsoft™ Windows™ 10 64-bit v2004, v20H2, or v21H1

2 GB of RAM (8 GB recommended)

1024x900 display (1280x1024 recommended)

4 GB of available hard-disk space for installation; more free space required during installation (cannot install on removable flash storage devices)

OpenGL™ version 3.3 or higher (DirectX® 12 with feature level 12_0 or above recommended)

Broadband internet connection and registration necessary for required software activation, validation of subscriptions, and access to online services

For updates on system requirements and complete instructions for installing the software, visit helpx.adobe.com/animate/system-requirements.html.

Install Animate from Adobe Creative Cloud at creative.adobe.com and make sure that you have your login and password accessible.

Online content

Your purchase of this Classroom in a Book includes online materials provided by way of your Account page on adobepress.com. These include the following:

Lesson files

To work through the projects in this book, you will need to download the lesson files by following the instructions below.

Bonus Lesson

A PDF of the Bonus Lesson: Working with Sound and Video is available along with the Lesson files.

Web Edition

The Web Edition is an online interactive version of the book providing an enhanced learning experience. Your Web Edition can be accessed from any device with a connection to the internet, and it contains the following:

The complete text of the book

Bonus Lesson: Working with Sound and Video

Hours of instructional video keyed to the text

Interactive quizzes

Note

If you encounter problems registering your product or accessing the lesson files or Web Edition, go to www.adobepress.com/support for assistance.

Accessing the lesson files and Web Edition

You must register your purchase on adobepress.com in order to access the online content:

Go to www.adobepress.com/AnimateCIB2022.

Sign in or create a new account.

Click Submit.

Answer the question as proof of purchase.

The lesson files can be accessed from the Registered Products tab on your Account page. Click the Access Bonus Content link below the title of your product to proceed to the download page. Click the lesson file link(s) to download them to your computer.

The Web Edition can be accessed from the Digital Purchases tab on your Account page. Click the Launch link to access the product.

Note

If you purchased a digital product directly from www.adobepress.com or www.peachpit.com, your product will already be registered. However, you still need to follow the registration steps and answer the proof of purchase question before the Access Bonus Content link will appear under the product on your Registered Products tab.

How to use the lessons

Each lesson in this book provides step-by-step instructions for creating one or more specific elements of a real-world project. Some lessons build on projects created in preceding lessons; most stand alone. All the lessons build on one another in terms of concepts and skills, so the best way to learn from this book is to proceed through the lessons in sequential order. In this book, some techniques and processes are explained and described in detail only the first few times you perform them.

You will create and publish a variety of final project files, such as animated GIFs, HTML files, or videos, in the lessons in this book. The files in the End folders (01End, 02End, and so on) within the Lesson folders are samples of completed projects for each lesson. Use these files for reference if you want to compare your work in progress with the project files used to generate the sample projects.

The organization of the lessons is also project oriented rather than feature oriented. That means, for example, that you’ll work with symbols on real-world design projects over several lessons rather than in just one lesson.

Additional resources

Adobe Animate Classroom in a Book (2022 release) is not meant to replace documentation that comes with the program or to be a comprehensive reference for every feature. Only the commands and options used in the lessons are explained in this book. For comprehensive information about program features and tutorials, refer to these resources, which you can reach by choosing commands on the Help menu or by clicking links in the Start screen:

Adobe Animate Learn & Support: You’ll find and browse Help and Support content at helpx.adobe.com/animate.html. You can also reach that page by choosing Help > Animate Help or by pressing F1. On the Learn & Support page, click User Guide for documentation on individual features, or visit helpx.adobe.com/animate/topics.html.

Animate in-app tutorials: For a range of interactive tutorials on Animate, choose the Learn tab from the Start screen, or choose Help > Hands-on Tutorial. The short tutorials let you follow step-by-step instructions in the app itself so you can quickly learn how to animate with graphics already provided for you.

Animate web tutorials: Explore the extensive list of video tutorials on the web by choosing the Learn tab from the Start screen. The video tutorials appear below the hands-on in-app tutorials. You can also choose Help > Online Tutorial. You can sort the tutorials by Beginner or Experienced, and sample files are provided for you to practice with.

Adobe Creative Cloud tutorials: For inspiration, key techniques, cross-product workflows, and updates on new features, go to the Creative Cloud tutorials page, helpx.adobe.com/creative-cloud/tutorials.html. Available to all.

Adobe Animate Assets panel: The new Assets panel comes loaded with finished animations using a variety of techniques, such as frame-by-frame animation, tweens, or inverse kinematics with the Bone tool. Simply drag the asset from the Assets panel onto your Stage. Take your time to explore how the animation is put together, customize it, and feel free to use it in your own projects. Studying other artists’ work is a great way to learn as well as to get inspired. New assets are always being added, so check the Download Assets icon at the bottom of the panel for updated content.

Adobe forums: Tap into peer-to-peer discussions, questions, and answers on Adobe products at forums.adobe.com. The Adobe Animate forum is accessible by choosing Help > Animate Community Forum.

Adobe Create: The online magazine Create offers thoughtful articles on design and design issues, a gallery showcasing the work of top-notch designers, tutorials, and more. Check it out at create.adobe.com.

Resources for educators: www.adobe.com/education and edex.adobe.com offer a treasure trove of information for instructors who teach classes on Adobe software. Find solutions for education at all levels, including free curricula that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certified Professional exams.

Also check out these useful sites:

Adobe Extensions: https://exchange.adobe.com/creativecloud.html is a central resource for finding tools, services, extensions, code samples, and more to supplement and extend your Adobe products.

Adobe Animate product home page: www.adobe.com/products/animate.html.

Adobe Authorized Training Centers

Adobe Authorized Training Centers offer instructor-led courses and training on Adobe products. A directory of AATCs is available at training.adobe.com/trainingpartners.®

About the Author

Russell Chun is an associate professor at the Lawrence Herbert School of Communication at Hofstra University, where he teaches multimedia storytelling, data journalism, and information design. His research examines effective visual communication and has been published in Visual Communication Quarterly, Proceedings of the New York State Communication Association, and Journal of Visual Literacy, where he serves as an associate editor. He has been writing books on Adobe Animate and its predecessor, Flash, since 2001.

1. Getting Acquainted

Lesson overview

In this lesson, you’ll learn how to do the following:

Create a new file in Adobe Animate.

Understand the different Adobe Animate document types.

Adjust Stage settings and document properties and customize your workspace.

Add layers using the Timeline panel.

Understand and manage keyframes in the timeline.

Work with imported images in the Library panel.

Move and reposition objects on the Stage.

Add filters and color effects to keyframes.

Open and work with panels.

Select and use tools in the Tools panel.

Preview and publish your animation.

Save your file.

This lesson will take less than 1 hour to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

In Animate, the Stage is where you lay out all your visual elements, the Timeline panel is where you organize frames and layers, and other panels let you edit and control your creation.

Starting Adobe Animate and opening a file

The first time you start Adobe Animate you’ll see the homescreen, which also serves as a place to create a new document or open a saved document. It displays the kinds of projects you can build along with any recently opened files.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page on peachpit.com, make sure to do so now. See “Getting Started” at the beginning of the book.

Tip

You can also start Animate by double-clicking an Animate file (*.fla or *.xfl), such as the 01End.fla file that is provided to show you the completed project.

In this lesson, you’ll create a simple slideshow-type animation to showcase a few vacation snapshots. You’ll add a background, photos, and some decorative elements, and in the process you’ll learn about positioning elements on the Stage and placing them along the timeline of the animation so that they appear one at a time, in sequence. You’ll begin learning how to use the Stage to organize your visual elements spatially and how to use the Timeline panel to organize your elements temporally.

Start Animate. In Windows, choose Start > Programs > Adobe Animate. In macOS, double-click Adobe Animate 2022 in the Adobe Animate 2022 folder in the Applications folder.

Choose the Open button or choose File > Open (Command+O/Ctrl+O). In the Open dialog box, select the 01End.fla file in the Lesson01/01End folder and click Open to see the final project.

Choose the Test Movie button in the upper-right corner of the application interface, or choose Control > Test.

Animate exports the project and opens it in a new window.

An animation plays. During the animation, several overlapping photos appear one by one, with stars appearing at the end. As the new photos appear, the previous photos become blurry, receding into the background.

Close the preview window and the FLA file.

Understanding document types and creating a new document

Animate is an animation and multimedia authoring tool that creates media for multiple platforms and playback technologies. Knowing where your final animation will play determines what type of document you’ll choose when you create a new file.

Note

Not all features are supported across all document types. For example, HTML5 Canvas documents don’t support the 3D Rotation or 3D Translation tools. Tools that are not supported by the current document type are dimmed in the Animate interface.

Playback environment

The playback, or runtime, environment is the technology that your final published files use to play. Your animation could play in a browser with HTML5 and JavaScript. Perhaps your animation will be exported as a video to be uploaded to YouTube or an animated GIF on Twitter. Or your project could play as an app on a mobile device or even as a virtual reality immersive experience. You should make that decision first so you can choose the appropriate document type.

Document types

There are nine types of documents, but you’ll likely work with only two or three of them, as they are the most common. The nine documents target different playback environments that determine some of the animation and interactivity features. Your choices for Animate documents are the following:

Choose ActionScript 3.0 to create animation to export to video or to export graphics and animation assets, such as spritesheets or PNG sequences. ActionScript refers to the native scripting language in Animate, which is similar to JavaScript, but choosing an ActionScript 3.0 document doesn’t mean you have to include ActionScript code.

Choose HTML5 Canvas to create animated assets that play back in a modern browser using HTML5 and JavaScript. You can add interactivity by inserting JavaScript within Animate or adding it to the final published files.

Note

The ActionScript 3.0 document also supports publishing content as a projector for either Windows or macOS. A projector plays as a stand-alone application on the desktop, without needing a browser.

Choose WebGL-glTF-Extended or -Standard for interactive animated assets to take advantage of hardware-accelerated support of graphics, or for supported 3D graphics.

Choose AIR for Desktop to create animation and interactivity that plays as an application on Windows or macOS desktops, without needing a browser. You can add interactivity in an AIR document using ActionScript 3.0.

Choose AIR for Android or AIR for iOS to publish an app for an Android or Apple mobile device. You can add interactivity for your mobile app using ActionScript 3.0.

Choose VR Panorama or VR 360 to publish a virtual reality project for the web browser that lets your audience look in all directions. You can add animation or interactivity to your immersive environments.

Tip

You can easily switch from one document type to another. For example, you can convert an ActionScript 3.0 document into an HTML5 Canvas document if you have an old Flash banner ad animation that you want to update. Choose File > Convert To > [new document type]. Some functionality and features may be lost in the conversion, however. For example, conversion to an HTML5 Canvas document will comment out ActionScript code.

Regardless of the playback environment and document type, all documents are saved as FLA or XFL (Animate) files. The difference is that each document type is configured to export different final published files.

Creating a new document

You’ll create the simple animation that you previewed earlier by starting a new document.

Start at the Home screen in Animate, which is the default workspace when you launch the application. You can also get to the Home screen by pressing the Home button at the top left of the interface.

The Home screen displays preset options for different playback environments and layout sizes.

For example, when you select More Presets and choose the Full HD option under Character Animation, Animate creates a new ActionScript 3.0 document meant to export video at 1920 pixels by 1080 pixels. The Square option under Ads creates a new HTML Canvas document at 250 pixels by 250 pixels meant for playback in a browser.

Choose More Presets or choose Create New (File > New).

The New Document dialog box appears. The row at the top contains six categories of intended uses; click a category to display the preset size layouts it contains in the center of the dialog box. You can either use the presets as given or fine-tune their settings using the Details section on the right side of the dialog box.

Select the Advanced category at the far right.

The center of the dialog box now displays all the available platforms. You can select a document type and type your document’s dimensions into the Width and Height boxes.

In the Platforms area in the center of the dialog box, select ActionScript 3.0. In the Details area on the right side of the dialog box, choose the dimensions of the Stage by entering new pixel values for the Width and Height. Enter 800 for Width and 600 for Height.

Click Create.

Animate creates a new ActionScript 3.0 document with the specified Stage dimensions.

Choose File > Save. Name the file 01_workingcopy.fla, and from the File Format/Save As Type menu, choose Animate Document (*.fla). Although the software application is called Animate, be aware that the file extension is .fla or .xfl, both of which preserve echoes of the name of the ancestor of Animate: Flash. Navigate to the 01Start folder and click Save.

Note

If you save your Animate document as an Animate Uncompressed Document (.xfl), your document is saved as a collection of files in folders and not as a single document. This exposes the contents of your document to you and to other developers to swap assets easily. The XFL format is a more advanced saved document that you won’t be using in this book.

Saving your file right away is a good working habit that ensures your work won’t be lost if the application or your computer crashes. You should always save your Animate file with the extension .fla (or .xfl if you save it as an Animate Uncompressed Document) to identify it as the Animate source file.

Getting to know the workspace

The first time you run Animate, you’ll be asked what kind of user you are—beginner or expert, for example. Your answer will determine how the interface is configured. Don’t worry about your choice, as you can customize your workspace to however makes you comfortable. You will also learn to configure the workspace to match how it appears in this book.

The Animate work area includes the command menus at the top of the screen and a variety of tools and panels for editing and adding elements to your movie. You can create all the objects for your animation in Animate, or you can import elements you’ve created in Adobe Illustrator, Adobe Photoshop, Adobe After Effects, or other compatible applications.

There are many different interface configurations, but in the Essentials workspace, Animate displays the menu bar, Timeline panel, Stage, Tools panel, Properties panel, and Edit bar, along with a few other panels. As you work in Animate, you can open, close, group, ungroup, dock, undock, and move panels around the screen to fit your work style or your screen resolution.

Choosing a new workspace

Animate also provides a few preset panel arrangements (“workspaces”) that may better suit the needs of particular users. Use the Window > Workspaces submenu or the workspace switcher at the top right of the interface to choose a different workspace or to save a new one.

Click the workspace switcher and choose a new workspace.

The various panels are rearranged and resized according to their importance in the chosen workspace. For example, the Animator and Designer workspaces put the Timeline panel at the top of the work area for easy and frequent access.

Select the Essentials workspace.

This book shows the step-by-step lessons in the Essentials workspace. It provides a good balance of access to the Stage and the most commonly used panels.

If you have moved some of the panels around and want to return to one of the prearranged workspaces, choose Window > Workspaces > Reset [preset name] and click Yes in the confirmation dialog box. Or choose the reset icon in front of the workspace name from the workspace switcher.

Note

The default workspace is Basic if you state that you are a new user; otherwise, the default workspace is Essentials.

Saving your workspace

If you find an arrangement of panels that suits your style of work, you can save it as a custom workspace and return to it at a later date.

Open the workspace switcher and enter a name for your new workspace in the field below New Workspace.

Click the Save Workspace icon next to the new name.

Animate saves the current arrangement of panels and adds it to the options in the Workspace menu, which you can access at any time.

By default, the Animate interface is dark gray. However, you can change the interface to a lighter gray if you prefer. Choose Animate > Preferences > Edit Preferences (macOS) or Edit > Preferences (Windows), and in the General preferences category, choose a different level of gray.

Tip

If you want to save and share your workspace preferences (in addition to other customizations), you can export them into an ANP file. Choose Animate > Preferences > Export Preferences to save a file that others can import.

In this book, the screenshots are shown in the Dark mode.

About the Stage

The big white rectangle in the middle of your screen is called the Stage. As with a theater stage, the Stage in Animate is the area that viewers see when a movie is playing. It contains the text, images, and video that appear on the screen. Move elements on and off the Stage to place them in and out of view. You can use the rulers (View > Rulers) or grids (View > Grid > Show Grid) to help you position items on the Stage.

Additional positioning aids include guides (pulled from the top or side rulers; View > Guides) and the Align panel, among others. You’ll learn about these tools in later lessons in this book.

By default, you’ll see the gray area off the Stage where you can place elements that won’t be visible to your audience. The gray area is called the pasteboard. To see only the Stage, choose View > Magnification > Clip To Stage to select the option. For now, leave Clip To Stage deselected, allowing the pasteboard to remain in view.

You can also click the Clip Content Outside The Stage button to crop the graphic elements that fall beyond the Stage area to see how your audience will view your final project.

Tip

You can view the Stage in full-screen mode without the distraction of the various panels by choosing View > Screen Mode > Full Screen Mode. Press F4 to toggle the panels, and press the Esc key to return to Standard Screen Mode.

To scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit In Window. You can also choose different magnification view options from the menu just above the Stage.

Changing the Stage properties

Now you’ll change the color of the Stage. The Stage color, along with document properties such as the Stage dimensions and frame rate, is available in the Properties panel, which is the vertical panel just to the right of the Stage.

In the Document Settings section of the Properties panel, note that the dimensions of the current Stage (the Size parameters) are set at 800x600 pixels, which you chose when you created the new document.

Also in the Properties panel, click the Background Color box next to Stage and choose a new color from the color palette. Choose dark gray (#333333).

Your Stage is now a different color. You can change the Stage properties at any time.

Working with the Library panel

The Library panel is accessible from a tab just to the right of the Properties panel. The Library panel displays the contents of your document’s library, which is where you store and organize symbols created in Animate, as well as imported files, including bitmaps, graphics, sound files, and certain video clips. Symbols are graphics used frequently for animation and for interactivity.

Note

You’ll learn much more about symbols in Lesson 2.

About the Library panel

The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type. You can also create folders in your Library panel to help group items. When you import items into Animate, you can import them directly onto the Stage or into the library. However, any item you import onto the Stage is also added to the library, as are any symbols you create. You can then easily access the items to add them to the Stage again, edit them, or see their properties.

Tip

You can also save assets in the Assets panel (Window > Assets) or save them to share across Adobe products by storing them in your Creative Cloud account by clicking the CC Libraries icon (Window > CC Libraries).

To display the Library panel, choose Window > Library, or press Command+L/Ctrl+L.

Importing an item to the Library panel

Often, you’ll create graphics directly with the drawing tools in Animate and save them as symbols, which are stored in the library. Other times you’ll import media such as JPEG images or MP3 sound files, which are also stored in the library. In this lesson, you’ll import several images into the library to be used in the animation.

Tip

If the Enable menu isn’t visible, click the Options button to activate it.

Choose File > Import > Import To Library. In the Import To Library dialog box, select the background.png file in the Lesson01/01Start folder and click Open. Choose All Files (*.*) from the Enable menu if the image files are dimmed.

Animate imports the selected PNG image and places it in the Library panel.

Continue importing photo1.jpg, photo2.jpg, and photo3.jpg from the 01Start folder.

You can also hold down the Shift key to select multiple files and import all of the images at once.

The Library panel lists the filenames of all the imported images and provides a thumbnail preview of any selected file. These images are now available to be used in your Animate document.

Adding an item from the Library panel to the Stage

To use an imported image, simply drag it from the Library panel onto the Stage.

Tip

You can also choose File > Import > Import To Stage, or press Command+R/Ctrl+R, to import an image file to the library and put it on the Stage all in one step.

Choose Window > Library to open the Library panel if it isn’t already open.

Drag the background.png item onto the Stage and place it approximately in the center of the Stage.

Understanding the Timeline panel

In the Essentials workspace, the Timeline panel is located below the Stage. The Timeline panel contains playback controls for your animation as well as the timeline itself, which displays the sequence of events in the animation from left to right. An Animate movie measures time in frames, just as in a filmstrip. As the movie plays, the playhead, shown as a blue vertical line, advances through the frames shown in the timeline. You can change the content on the Stage for different frames. To display a frame’s content on the Stage for any particular time, move the playhead to that frame in the timeline.

At the top of the Timeline panel, Animate indicates the selected frame number and the current frame rate (how many frames play per second).

The timeline portion of the Timeline panel also displays layers, which help you organize the artwork in your document. At the moment, your project has only one layer, which is called Layer_1. Think of layers as multiple filmstrips stacked on top of one another. Each layer can contain a different image that appears on the Stage, and you can draw and edit objects on one layer without affecting objects on another layer. The layers are stacked in the order in which they overlap each other so that objects on the bottom layer in the timeline are on the bottom of the stack on the Stage. You can hide, lock, or show the contents of layers as outlines by clicking the dots or square in the layer under the layer option icons.

If you have multiple layers, you can use the View Only Active Layer option above the timeline to show only the currently selected layer.

Changing the appearance of the timeline

You can adjust the timeline’s appearance to accommodate your workflow. When you want to see more layers, choose Short from the Frame View menu in the upper-right corner of the Timeline panel. The Short option decreases the height of frame cell rows. The Preview and Preview In Context options display thumbnail versions of the contents of your keyframes in the timeline.

For finer control over the timeline frame sizes, drag the Resize Timeline View slider. The slider adjusts the size of the frames so you can see more or less of the timeline. Click the Reset Timeline Zoom To The Default Level button to revert the timeline view to its normal size.

To position different animation options on your timeline for quick access, click the options menu at the corner of the timeline and choose Customize Timeline Tools. The Customize Timeline pop-up appears, which contains all the available tools you can choose to display or to hide. The highlighted icons are those that are, by default, on the top of the timeline.

Click to add or remove a tool. Click the Reset Timeline Controls button to reset the timeline to its original appearance.

Renaming a layer

It’s a good idea to separate your content on different layers and name each layer to indicate its contents so that you can easily find the layer you need later.

Double-click the name of the existing layer, Layer_1, to rename it, and type background.

Click outside the name box to apply the new name.

Click below the lock icon to lock the layer. Locking a layer prevents you from accidentally moving or making changes to whatever is inside that layer.

A lock icon appears in the layer. The lock icon indicates that you can’t make edits to the layer because it is locked.

Adding a layer

A new Animate document contains only one layer, but you can add as many layers as you need. Objects in the top layers will overlap objects in the bottom layers, unless you change the layer depth with the Layer Depth panel. You’ll learn more about this option in Lesson 8, “Animating the Camera.”

Select the background layer in the timeline.

Choose Insert > Timeline > Layer. You can also click the New Layer button above the timeline.

A new layer appears above the background layer.

Double-click the new layer to rename it, and type photo1. Click outside the name box to apply the new name.

Your timeline now has two layers. The background layer contains the background photo, and the newly created photo1 layer above it is empty.

Select the top layer, called photo1.

Choose Window > Library to open the Library panel if it isn’t already open.

Drag the library item called photo1.jpg from the library onto the Stage.

Note

As you add more layers and your overlapping graphics become more complicated, click the dot below the eye icon in any layer to hide its contents. Alternatively, hold Shift and click the dot below the eye icon to make the layer partially transparent so that you can see what’s below it. Hiding or making a layer transparent affects only how you see your project in Animate—it doesn’t affect your final exported project. Double-click the Layer icon to modify the level of transparency in the Layer Properties dialog box.

The photo1 JPEG appears on the Stage and overlaps the background image.

Choose Insert > Timeline > Layer, or click the New Layer button above the timeline, to add a third layer.

Rename the third layer photo2.

Working with layers

If you don’t want a layer, you can easily delete it by selecting it and then clicking the Delete button above the timeline.

If you want to rearrange your layers and change how your graphics overlap each other, simply drag any layer up or down to move it to a new position in the layer stack.

Inserting frames

So far, you have a background photo and another overlapping photo on the Stage, but your entire animation exists for only a single frame, which is only a fraction of a second. To create more time on the timeline and make this animation run for a longer duration, you must add additional frames.

Select frame 48 in the background layer. Use the Resize Timeline View slider at the upper-right corner of the Timeline panel to expand the timeline frames to make it easier to identify frame 48.

Choose Insert > Timeline > Frame (F5). You can also choose Frame from the pull-down menu above the timeline or right-click frame 48 and choose Insert Frame from the context menu that appears.

Animate adds frames in the background layer up to the selected frame, frame 48.

Select frame 48 in the photo1 layer.

Choose Insert > Timeline > Frame (F5), choose Insert Frame above the timeline, or right-click and choose Insert Frame to add frames in the photo1 layer up to frame 48.

Select frame 48 in the photo2 layer and insert frames on this layer.

You now have three layers, all with 48 frames on the timeline. Since the frame rate of your Animate document is 24 frames per second, your current animation lasts two seconds.

Selecting multiple frames

Just as you can hold down the Shift key to select multiple files on your desktop, you can hold down Shift to select multiple frames on the Animate timeline. If you have several layers and want to insert frames into all of them, select a frame in the first layer and then Shift-click the same frame in the last layer to select all the frames in the layers in between, or drag to select multiple layers. Then choose Insert > Timeline > Frame.

Creating a keyframe

A keyframe indicates a change in content on the Stage. Keyframes are indicated on the timeline as a circle. An empty circle means there is nothing in that particular layer at that particular time. A filled-in black circle means there is something in that layer at that time. The background layer, for example, contains a filled keyframe (black circle) in the first frame. The photo1 layer also contains a filled keyframe in its first frame. Both layers contain photos. The photo2 layer, however, contains an empty keyframe in the first frame, indicating that it is currently empty.

There are two modes for creating keyframes. The Auto Keyframe option above your timeline can be either enabled or disabled. If it is enabled (the keyframe icon displays a letter “A”), then adding or editing content on the Stage automatically creates a new keyframe at that point in time. If it is disabled, then you create keyframes manually, as described in this task.

You’ll insert a keyframe in the photo2 layer at the point in time when you want the next photo to appear.

Make sure the Auto Keyframe option is off. Select frame 24 on the photo2 layer. The frame number of a selected frame is displayed above the left end of the timeline.

Choose Insert Keyframe from the menu above the timeline, or choose Insert > Timeline > Keyframe (F6).

A new keyframe, indicated by an empty circle, appears in the photo2 layer in frame 24.

Drag photo2.jpg from your library onto the Stage.

The empty circle at frame 24 becomes filled, indicating that there is now content in the photo2 layer. When your animation plays, your photo appears on the Stage at frame 24. You can drag the blue playhead along the top of the timeline to “scrub,” or show what’s happening on the Stage, at any point along the timeline. You’ll see that the background photo and photo1 remain on the Stage throughout the timeline but that photo2 appears only at frame 24.

Understanding frames and keyframes is essential for mastering Animate. Be sure you understand how the photo2 layer contains 48 frames with two keyframes—an empty keyframe at frame 1 and a filled keyframe at frame 24.

Moving a keyframe

If you want photo2.jpg to appear later or earlier in time, you need to move the keyframe in which it appears closer to or farther from the right on the timeline. You can easily move any keyframe by simply dragging it to a new position.

Select the keyframe in frame 24 on the photo2 layer.

Drag the keyframe to frame 12 in the photo2 layer. As you drag, you’ll see a box icon appear under your cursor, indicating that you are repositioning the keyframe.

The photo2.jpg file now appears on the Stage much earlier in the animation.

Removing keyframes

If you want to remove a keyframe, do not press the Delete/Backspace key! Doing so will delete the contents of that keyframe on the Stage, leaving you with an empty keyframe. Instead, select the keyframe and choose Modify > Timeline > Clear Keyframe (Shift+F6). Your keyframe (and its contents) will be removed from the timeline.

Organizing layers in a timeline

At this point, your working Animate file has only three layers: a background layer, a photo1 layer, and a photo2 layer. You’ll be adding more layers for this project, and as in most other projects, you’ll end up having to manage multiple layers. Layer folders help you group related layers to keep your timeline organized and manageable, just as you make folders for related documents on your desktop. Although it may take some time to create the folders, you’ll save time later because you’ll know exactly where to look for a specific layer.

Creating layer folders

For this project, you’ll continue to add layers for additional photos, and you’ll place those layers in a layer folder.

Select the photo2 layer and click the New Layer button above the timeline.

Name the layer photo3.

Insert a keyframe at frame 24.

Drag photo3.jpg from the library onto the Stage.

You now have four layers. The top three contain photos of scenes from Coney Island that appear at different keyframes.

Select the photo3 layer and click the New Folder icon at the top of the Timeline panel.

A new layer folder appears above the photo3 layer.

Name the folder photos.

Adding layers to layer folders

Now you’ll add the photo layers to the photos folder. As you arrange layers, remember that Animate displays the content in the layers in the order in which they appear in the timeline, with the top layer’s content at the front and the bottom layer’s content at the back.

Drag the photo1 layer into the photos folder.

Notice how the bold line indicates the destination of your layer. When you place a layer inside a folder, Animate indents the layer name.

Drag the layers photo2 and photo3 into the photos folder.

All three photo layers should be in the photos folder, in the same stacking order as they were in outside the folder.

You can collapse the folder by clicking the arrow just to the left of the folder name. Expand the folder by clicking the arrow again. Be aware that if you delete a layer folder, you delete all the layers inside that folder as well.

Layer highlighting

Sometimes it’s useful to highlight certain layers as you’re working on a project to indicate that something is important in that layer.

Click the dot in the layer below the Highlight Layers indicator.

The selected layer becomes highlighted in color—the same color that is used for outlines and bounding boxes for the Show Layers As Outlines option.

Cut, copy, paste, and duplicate layers

When managing multiple layers and layer folders, you can rely on cut, copy, paste, and duplicate layer commands to make your workflow easier and more efficient. All the properties of the selected layer are copied and pasted, including its frames, its keyframes, any animation, and even the layer name and type. You can also copy and paste layer folders and their contents.

To cut or copy any layer or layer folder, simply select the layer, right-click the layer name, and choose Cut Layers or Copy Layers.

Right-click the timeline again and choose Paste Layers. The layer or layers that you cut or copied are pasted into the timeline. Use Duplicate Layers to copy and paste in one operation.

You can also cut, copy, paste, or duplicate layers from the application menu bar. Choose Edit > Timeline, and then choose Cut Layers, Copy Layers, Paste Layers, or Duplicate Layers.

Using the Properties panel

The Properties panel gives you quick access to the attributes you’re most likely to need to modify as you create your animation. What appears in the Properties panel depends on what you’ve selected. For example, if nothing is selected, the Properties panel includes options for the general Animate document, including changing the Stage color or dimensions. If you’ve selected an object on the Stage, the Properties panel shows its x and y coordinates and its width and height, among other information. If you’ve selected a frame or keyframe on the timeline, as shown in the following figure, the Properties panel shows attributes of that keyframe, such as its label or whether it contains any sound. Different attributes are divided into sections that can be collapsed or expanded.

You can also quickly change the focus of the selection from the keyframe to objects on the Stage with the Properties panel. For example, selecting the Object tab at the top of the Properties panel switches the display from the attributes of the keyframe to the attributes of the selected item on the Stage in that keyframe.

You’ll use the Properties panel to move your photos on the Stage.

Positioning an object on the Stage

You’ll begin by using the Properties panel to move the photos. You’ll also use the Transform panel to rotate the photos.

Tip

If the Properties panel is not open, choose Window > Properties, or press Command+F3/Ctrl+F3.

Move the playhead to frame 1 of the timeline, and select the photo1.jpg image that you dragged onto the Stage in the photo1 layer. A very narrow blue outline indicates that the object is selected.

In the Properties panel, type 50 for the X value and 50 for the Y value. Press Return/Enter to apply the values. You can also drag over the X and Y values to change their values. The photo moves to the left side of the Stage.

The X and Y values are measured on the Stage from the upper-left corner. X begins at 0 and increases to the right, and Y begins at 0 and increases downward. The registration point (the point from which Animate makes measurements) for imported photos is at the upper-left corner.

Choose Window > Transform to open the Transform panel. The Transform window is also accessible from the column of icons on the side of the Properties panel.

In the Transform panel, select Rotate and type –12 in the Rotate box, or drag over the value to change the rotation. Press Return/Enter to apply the value.

The selected photo on the Stage rotates 12 degrees counterclockwise.

Select frame 12 of the photo2 layer. Now click photo2.jpg on the Stage to select it.

Use the Properties panel and Transform panel to position and rotate the second photo in an interesting way. Use X=200, Y=40, and a Rotate value of 6 to give it some contrast with the first photo.

Select frame 24 in the photo3 layer. Now click photo3.jpg on the Stage to select it.

Use the Properties panel and Transform panel to position and rotate the third photo in an interesting way. Use X=360, Y=65, and a Rotate of –2 so that all your photos have visual variety.

Note

When images are scaled or rotated in Animate, they may appear jagged. You can use the Bitmap Properties dialog box to smooth each image. Double-click the bitmap icon or the image thumbnail in the Library panel to open the dialog box, and select the Allow Smoothing option.

Working with panels

Just about everything you do in Animate involves a panel. In this lesson, you use the Library panel, Tools panel, Properties panel, Transform panel, History panel, and Timeline panel. In later lessons, you’ll learn to use other panels to control various aspects of your project. Because panels are such an integral part of the Animate workspace, it pays to know how to manage them.

To open any panel in Animate, choose its name from the Window menu.

Individual panels float freely, and they can be combined in docks, groups, or stacks.

A dock is a collection of panels or panel groups in a vertical column. Docks stick to the left or right edges of the user interface.

A group is a collection of panels that can be placed within a dock or that can float freely.

A stack is similar to a dock but can be placed anywhere in the interface.

In the Essentials workspace, most of the panels are organized in three docks on the right side of the screen. The Timeline and Output panels are grouped at the bottom, and the Stage is on the top. However, you can move a panel to any position that is convenient for you.

To move a panel, drag it by its tab to a new location.

To move a panel group or stack, drag it by the area next to the tabs.

As the panel, group, or stack passes over other panels, groups, docks, or stacks, a blue highlighted drop zone will appear. If you release the mouse button while a drop zone is visible, the panel will be added to the group, dock, or stack.

To dock a panel, drag it by its tab into a new position at the left or right edge of the screen. If you drag it over the top or bottom of an existing dock, a horizontal drop zone will show you the panel’s new location. If a vertical drop zone appears, dropping the panel will create a new dock.

To group a panel, drag its tab onto the tab of another panel or the drop zone at the top of an existing group.

To create a stack, drag a group out of a dock or an existing stack so it floats freely. Alternatively, drag one free-floating panel onto the tab of another floating panel.

You also have the option of displaying most of the panels as icons to save space but still maintain quick access. Click the double arrowheads in the upper-right corner of a dock or stack to collapse the panels to icons. Click the double arrowheads again to expand the icons into panels.

Using the Tools panel

The Tools panel—the long, narrow panel on the far left side of the Essentials work area—contains selection tools, drawing and type tools, painting and editing tools, navigation tools, and tool options. You’ll use the Tools panel frequently to switch to tools designed for the task at hand. Most often, you’ll use the Selection tool, which is the black arrow tool at the top of the Tools panel, for selecting and clicking items on the Stage or the timeline.

Selecting and using a tool

When you select a tool, the options available at the bottom of the Tools panel and the Properties panel change. For example, when you select the Rectangle tool, the Object Drawing Mode option appears. When you select the Zoom tool, the Enlarge and Reduce options appear.

The Tools panel contains too many tools to display all at once. Some tools are arranged in hidden groups in the Tools panel; only the tool you last selected from a group is displayed. A small triangle in the lower-right corner of the tool’s button indicates that there are other tools in the group. Press and hold the icon for the visible tool to see the other tools available, and then select one from the menu.

Tearing off tools

You can customize the Tools panel to display only the tools you need or the tools you use the most often. You can also arrange the tools to your liking.

Click the Edit Toolbar option at the bottom of the Tools panel.

Note

You cannot select a tool for use from the Drag And Drop Tools menu. You must add a tool to the Toolbar, and then it becomes available to be used.

Additional tools appear in an adjacent Drag And Drop Tools panel. Drag the tools that you want into the Tools panel.

You can add spacers (horizontal separators) to create groups of tools, which can be torn off from the main Tools panel to create a floating panel.

Choose the options from the upper-right corner to reset the Toolbar to its default workspace configuration, select a different size icon for the tools, or close the Drag And Drop Tools menu.

Note

If you’re working with a smaller display, the bottom of the Tools panel may be cut off. That makes some of the tools and buttons invisible. But there’s an easy way to fix the problem: drag the left edge of the Tools panel to widen it so that it can show multiple columns of tools.

Adding graphics

You’ll use the PolyStar tool to add a little decoration to your short animation.

Select the folder in the timeline, and then click the New Layer button.

Name the new layer stars.

Lock the other layers below it so that you don’t accidentally move anything into them.

In the timeline, move the playhead to frame 36 and select frame 36 in the stars layer.

Choose the Insert Keyframe button above the timeline, or choose Insert > Timeline > Keyframe (F6), to insert a new keyframe at frame 36 in the stars layer.

You will create star shapes to appear at frame 36 in this layer.

In the Tools panel, select the PolyStar tool, hidden under the Rectangle tool and indicated by the hexagon shape.

In the Properties panel, click the colored square next to the Stroke option, which indicates the color of the outline, and select the red diagonal line if it isn’t selected already.

The red diagonal line represents a color of None for the stroke.

Click the colored square next to the Fill option, which indicates the color of the inside of the shape, and select a bright, cheery color such as yellow. You can click the color wheel at the upper right to access the Adobe Color Picker, or you can change the Alpha percentage, which determines the level of opacity, also at the upper right.

In the Properties panel, under the Tool Options section, choose Star from the Style menu. For Number Of Sides, enter 5, and for Star Point Size, enter 0.5. These options define the shape of your star.

Make sure the empty keyframe in frame 36 of the stars layer is selected. Start dragging on the Stage where you want to add a star, and continue dragging to change the width of your star. Without releasing the drag, move your cursor around the center of the star to rotate it. Make multiple stars of different sizes and with different angles of rotation.

Exit the PolyStar tool by selecting the Selection tool.

Use the Properties panel or the Transform panel to reposition or rotate selected stars on the Stage, if desired. Or select the Selection tool and simply click to select a star and drag it to a new position on the Stage. The X and Y values in the Properties panel update as you drag the star around the Stage.

Adding layer effects

You can add interesting visual effects that change the appearance of objects in a particular layer. These layer effects include color effects and filters, both available in the Properties panel when a keyframe is selected.

The options on the Style menu in the Color Effects section include Brightness, Tint, and Alpha. Brightness controls the relative darkness or lightness of the layer. Tint controls how much color is added to the layer. Alpha controls the transparency of the layer. A fourth option, Advanced, allows you to vary brightness, tint, and alpha together all at once.

Filters are special effects that change or distort the appearance in more dramatic ways, such as adding a drop shadow or adding a blur.

Adding layer effects to a keyframe

Layer effects are keyframe based. That is, a single layer can have different layer effects in different keyframes. You’ll add a filter and a color effect to different keyframes in your layers to help add some depth to the slideshow and to help new images stand out as they’re added.

Move the playhead to frame 12 on the timeline, and select frame 12 in both the photo1 layer and the background layer by pressing Shift as you click each frame. Frame 12 is the point at which photo2 appears in the slideshow.

Choose the Insert Keyframe button above the timeline (F6).

A keyframe appears in frame 12 in both layers.

While the two keyframes are still selected, click the Add Filter button in the Properties panel and choose Blur to add a blur filter to the two selected keyframes.

Increase the Blur X and Blur Y values to 8 px.

The background photo and the first photo become blurry, which accentuates the new photo that appears in the photo2 layer.

The keyframes on your timeline become colored white, indicating that there is a layer effect applied.

Select frame 24 in the photo2 layer; this is the moment when photo3 appears.

Choose Insert Keyframe from above the timeline (F6). This keyframe allows you to add a filter to the layer to change its appearance at that point in time.

Click Add Filter in the Properties panel and choose Blur. Increase Blur X and Blur Y to 8 px.

The photo in the photo2 layer becomes blurry, helping your audience focus on the new photo that appears in the photo3 layer.

Select frame 36 in the photo1, photo2, photo3, and background layers and insert a keyframe (F6).

In the Color Effects section of the Properties panel, choose Brightness from the Style menu and drag the Bright value to –30%.

The selected layers become slightly darker, which adds drama to the bright yellow stars that appear at that moment in the stars layer.

Note

You can also apply color effects and filters to individual symbol instances on the Stage, which you’ll learn about later in this book.

Undoing steps in Animate

In a perfect world, everything would go according to plan. But sometimes you need to move back a step or two and start over. You can undo steps in Animate using the Undo command or the History panel.

To undo a single step in Animate, choose Edit > Undo or press Command+Z/Ctrl+Z. To redo a step you’ve undone, choose Edit > Redo.

The easiest way to undo multiple steps in Animate is to use the History panel, which displays a list of the last 100 steps you’ve performed. Closing a document clears its history. To access the History panel, choose Window > History.

For example, if you aren’t satisfied with the newly added stars, you can undo your work and return your Animate document to a previous state.

Choose Edit > Undo to undo the last action you made. You can choose the Undo command multiple times to move backward as many steps as are listed in the History panel. You can change the maximum number of Undo commands by choosing Animate > Preferences (macOS) or Edit > Preferences (Windows).

Note

If you remove steps from the History panel and then perform additional steps, the removed steps will no longer be available.

Choose Window > History to open the History panel.

Drag the History panel slider up to the step just before your mistake. Steps below that point are dimmed in the History panel and are removed from the project.

To add a step back, move the slider back down.

Finish by returning the History panel slider to its original position next to the bottom step in the panel.

Previewing and exporting your movie

As you work on a project, it’s a good idea to preview it frequently to ensure that you’re achieving the desired effect.

Testing your movie

To quickly see your animation, choose Control > Play, or simply press the Return/Enter key.

To see how an animation or movie will appear to a viewer, choose the Test Movie button at the upper-right corner of the Animate workspace, or choose Control > Test. You can also press Command+Return/Ctrl+Enter to preview your movie.

Choose Control > Test or the Test Movie button at the upper-right corner of the Animate workspace.

Animate opens and plays the animation in a new panel.

Animate automatically loops your movie in this preview mode.

Close the Test Movie panel.

Using Quick Share and Publish

When you are done with your project, export and share it quickly and easily to your favorite social media platforms. Adobe provides a seamless workflow from Animate straight to Twitter, YouTube, video, and animated GIFs.

In the upper-right corner of Animate, click Quick Share And Publish, and choose Social Share.

Choose Twitter or YouTube as your target platform. In this lesson, we’ll show you how Quick Share works with Twitter.

The preview window displays the first frame of your project to show how it would appear on Twitter. Add a description. You can keep, edit, or remove the suggested hashtags.

The number above the description indicates the number of characters left for your tweet.

Click Share.

Adobe Media Encoder automatically opens to convert your project to the compatible media format. If you’re not signed in to Twitter, Adobe Animate will ask for authorization to access Twitter to post your exported animation. You will be required to sign in using your Twitter handle and password.

Once authorized, you can post tweets directly from Animate.

Navigate to Twitter to check out your tweet and accompanying animation.

Note

Keep an eye on the Quick Share and Publish options because Adobe will continue to add more social media channels.

Modifying the content and Stage

When you first started this lesson, you created a new file with the Stage set at 800 pixels by 600 pixels. However, your client may later tell you that they want the animation in several different sizes to accommodate different layouts. For example, they’d like to create a smaller version with a different aspect ratio for a banner ad. Or they may want to create a version that will run on AIR for Android devices, which require specific dimensions.

Fortunately, you can modify the Stage even after all your content is put in place. When you change the Stage dimensions, Animate provides the option of scaling the content with the Stage, automatically shrinking or enlarging all your content proportionally.

Stage resizing and content scaling

You’ll create another version of this animated project with different Stage dimensions. Choose File > Save to save the work you’ve done so far.

In the Document Settings section of the Properties panel, note that the dimensions of the current Stage are set at 800x600 pixels. Click the More Settings button to open the Document Settings dialog box.

In the Width and Height boxes, enter new pixel dimensions. Enter 400 for Width and 300 for Height.

You can click the link icon between the Width and Height fields to constrain the proportions of the Stage. With the link icon selected, changing one dimension will automatically change the other proportionately.

Select the Scale Content option. Leave the Anchor option as is.

The Anchor option lets you choose the origin from which your content is resized, if the proportions of the new Stage are different.

Click OK.

Animate modifies the dimensions of the Stage and automatically resizes all the content. If your new dimensions are not proportional to the original size, Animate will resize everything to maximize the content to fit. This means that if your new Stage size is wider than the original, there’ll be extra Stage space to the right. If your new Stage size is taller than the original, there’ll be extra Stage space on the bottom.

Choose File > Save As.

In the Save dialog box, choose Animate Document (*.fla) from the File Format menu, and name the file 01_workingcopy_resized.fla. Save the file.

You now have two Animate files, identical in content but with different Stage dimensions. Close this file and reopen 01_workingcopy.fla to continue this lesson.

Saving your movie

A mantra in multimedia production is “Save early, save often.” Applications, operating systems, and hardware crash more often than anyone wants, and at unexpected and inconvenient times. You should always save your movie at regular intervals to ensure that if a crash does happen, you won’t have lost too much of your time.

Note

If you have unsaved changes in your open document, Animate adds an asterisk to the end of its filename at the top of the document window as a friendly reminder.

Animate can help alleviate much of the worry over lost work. The Auto-Recovery feature creates a backup file in case of a crash.

Using Auto-Recovery to create a backup

The Auto-Recovery feature is a preference setting that applies to all Animate documents. It saves a backup file, so in case of a crash, you have an alternate file to return to.

Choose Animate > Preferences > Edit Preferences (macOS) or Edit > Preferences (Windows).

The Preferences dialog box appears.

Select the General category from the left column.

Select the Auto-Recovery option, if it’s not already selected, and enter a time (in minutes) for the interval at which Animate creates a backup file.

Note

To find out how to keep your copy of Animate up to date and to learn about the many sources of help available to you within Animate, see the Getting Started section at the beginning of this book.

Click OK.

If you make changes to your file but do not save it within the Auto-Recovery interval, Animate creates a new file in the same location as your FLA with RECOVER_ added to the beginning of the filename. The file remains as long as the document is open. When you close the document or when you quit Animate safely, the file is deleted.

Review questions

1 What is the Stage?

2 What is the difference between a frame and a keyframe?

3 How do you access hidden tools?

4 Name two methods to undo steps in Animate, and describe them.

5 What document type would be best for playing back animation in a modern browser?

6 What are layer effects, and how do you add them?

Review answers

1 The Stage is the rectangular area viewers see when a movie is playing. It contains the text, images, and video that appear on the screen. Objects that you store on the pasteboard outside the Stage do not appear in the movie.

2 A frame is used to measure time on the timeline. A keyframe is represented on the timeline with a circle and indicates a change in content on the Stage.

3 Because there are too many tools to display at once in the Tools panel, some tools are grouped, and only one tool in the group is displayed. (The tool you most recently used is the one shown.) Small triangles appear on tool icons to indicate that hidden tools are available. To select a hidden tool, press and hold the tool icon for the tool that is shown, and then select the hidden tool from the menu. Other tools are hidden in the drag-and-drop panel accessible from the Options button at the bottom of the Tools panel. Drag a tool into the Toolbar to make it available for use.

4 You can undo steps in Animate using the Undo command or the History panel. To undo a single step at a time, choose Edit > Undo. To undo multiple steps at once, drag the slider up in the History panel.

5 An HTML5 Canvas document targets modern browsers for playback of animation and interactive content. HTML5 Canvas exports HTML, JavaScript, and all the assets required to play in a browser.

6 Layer effects are filters or color effects that you can add to a keyframe on the timeline that change the appearance of the contents of the keyframe. Layer effects are added by selecting a keyframe and choosing a style or a filter from the Color Effects or Filters section of the Properties panel.

2. Creating Graphics and Text

Lesson overview

In this lesson, you’ll learn how to do the following:

Draw rectangles, ovals, and other shapes.

Modify the shape, color, and size of drawn objects.

Understand fill and stroke settings.

Create and edit curves and variable-width strokes.

Apply gradients and transparencies.

Use the different paint brushes for expressive drawing.

Create and edit text, and use web fonts.

Distribute objects on the Stage.

Create and edit symbols.

Understand symbols and instances.

Apply filters to symbol instances.

This lesson will take about 3 hours to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

You can use rectangles, ovals, lines, and custom brushes to create interesting, complex graphics and save them as symbols, which will be displayed in your Library panel. Combine gradients, transparencies, text, and filters for even greater expressive possibilities.

Getting started

Start by viewing the finished project to see what you’ll be creating in this lesson.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 02End.html file in the Lesson02/02End folder to view the final project in a browser.

The project is a simple static illustration of an octopus character with a joke. In this lesson, you’ll draw the shapes, modify them, and learn to combine simple elements to create more complex visuals. You won’t create any animation just yet. After all, you must learn to walk before you can run! And learning to create and modify graphics is an important step before doing any animation with Adobe Animate.

In the Animate homescreen, select More Presets or click Create New.

The New Document dialog box opens.

Choose Advanced from the top row of categories. In the Platforms section, choose HTML5 Canvas. In the Details section, make the Stage size 1200 pixels by 800 pixels, and click Create.

Choose File > Save. Name the file 02_workingcopy.fla and save it in the 02Start folder. Saving your file right away is a good working habit (even if you’ve enabled the Auto-Recovery feature). It ensures that you won’t lose your work if the application or your computer crashes.

Understanding strokes and fills

Every graphic created within Animate starts with a shape. A shape consists of two components: the fill, or the insides of the shape, and the stroke, or the outlines of the shape. If you always keep these two components in mind, you’ll be well on your way to creating beautiful and complicated visuals.

The fill and the stroke function independently of each other, so you can modify or delete either without affecting the other. For example, you can create a rectangle with a blue fill and a red stroke and then later change the fill to purple and delete the red stroke entirely. You’ll be left with a purple rectangle without an outline. You can also move the fill or stroke independently, so if you want to move the entire shape, make sure that you select both its fill and its stroke.

Creating shapes

Animate includes several drawing tools, which work in different drawing modes. Many of your creations will begin with simple shapes such as rectangles and ovals, so it’s important that you’re comfortable drawing them, modifying their appearance, and applying fills and strokes.

Note

In Animate, as well as in HTML documents and in web design and development in general, colors are often specified by hexadecimal numbers. The six digits after the # sign represent the red, green, and blue contributions to the color.

You’ll begin by drawing the face of our octopus.

Using the Oval tool

The eyes of the octopus are essentially a series of ovals overlapping each other. To make the eyes look angry, there is a diagonal line that cuts the oval at a slant. You’ll start by drawing the ovals. It’s useful to break down complicated objects into their component parts to make drawing them easier.

Rename the layer octopus.

In the Tools panel, select the Oval tool, which is hidden under the Rectangle tool. Hold down on the Rectangle tool to access the Oval tool underneath. Make sure the Object Drawing mode button at the bottom of the Tools panel or in the Properties panel is not selected.

Choose a stroke color and a fill color from the bottom of the Tools panel. Choose #CCCCCC (light gray) for the fill and #000000 (black) for the stroke.

On the Stage, draw an oval that is a little taller than it is wide.

Select the Selection tool.

Drag the Selection tool around the entire oval to select its stroke and its fill. When a shape is selected, Animate displays it with white dots. You can also double-click a shape, and Animate will select both the stroke and fill of the shape.

In the Properties panel, in the Position And Size section, enter 60 for the width and 100 for the height. Press Return (macOS) or Enter (Windows) to apply the values.

Adding the inside of the eye

Now you’ll create the inside of the eye and the white highlight.

In the Tools panel, select the Oval tool.

Choose a stroke color and a fill color from the bottom of the Tools panel. Choose #000000 (black) for the fill and #000000 (black) for the stroke.

Draw a smaller black oval inside the larger oval on the Stage.

Choose #FFFFFF (white) as the fill for your Oval tool.

Draw a third oval at the top of your black oval, which will be the highlight.

Note

The last fill and stroke you used are applied to the next objects you create, unless you change the settings before you draw.

Note

Hold down the Shift key as you draw to constrain your shapes. Holding the Shift key with the Oval tool creates perfect circles, much as holding the Shift key with the Rectangle tool creates perfect squares.

Animate drawing modes

Animate provides three drawing modes that determine how objects interact with one another on the Stage and how you can edit them. By default, Animate uses Merge Drawing mode, but you can enable Object Drawing mode or use the Rectangle Primitive or Oval Primitive tool to use Primitive Drawing mode.

Merge Drawing mode

In this mode, Animate merges drawn shapes, such as rectangles and ovals, where they overlap, so that multiple shapes appear to be a single shape. If you move or delete a shape that has been merged with another, the overlapping portion is permanently removed.

Object Drawing mode

In this mode, Animate does not merge drawn objects; they remain distinct and separate, even when they overlap. To enable Object Drawing mode, select the drawing tool you want to use, and then click the Object Drawing button at the bottom of the Tools panel.

To convert an object to shapes (Merge Drawing mode), select it and choose Modify > Break Apart (Command+B/Ctrl+B). To convert a shape to an object (Object Drawing mode), select it and choose Modify > Combine Objects > Union. The current shape becomes an object, but keep in mind that it doesn’t restore the shape to how it was originally drawn.

Primitive Drawing mode

When you use the Rectangle Primitive tool or the Oval Primitive tool, Animate draws your rectangles or ovals as independent objects that maintain some editable features. Unlike with regular objects, you can modify the corner radius and start and end angle of rectangle primitives, and adjust the inner radius of oval primitives using the Properties panel.

Making selections

To modify an object, you must first be able to select different parts of it. In Animate, you can make selections using the Selection, Subselection, or Lasso tool. Typically, you use the Selection tool to select an entire object or a section of an object. The Subselection tool lets you select a specific point or line in an object. With the Lasso tool, you can make a free-form selection.

Selecting strokes and fills

Now you’ll refine the ovals to look more like an eye. You’ll use the Selection tool to delete unwanted strokes and fills.

In the Tools panel, select the Selection tool.

Double-click the stroke around the white oval.

The strokes around the white oval and the black oval become selected.

Press the Delete/Backspace key.

The stroke is deleted, leaving behind a white oval as the highlight.

Choose the Line tool, and choose #000000 (black) as the stroke color.

Draw a diagonal line that cuts through the top of the eyeball.

The straight line creates intersecting shapes in the eyeball so they can be separately selected.

Choose the Selection tool and click the half-dome gray shape at the tip of the eye.

Press the Delete/Backspace key.

The gray fill is deleted.

Choose the curved stroke above the straight line and delete it.

One eye is finished!

Editing shapes

When drawing in Animate, you’ll often start with simple primitive shapes like rectangles, ovals, and lines. But to create more complex graphics, you’ll use other tools to modify those base shapes. The Free Transform tool, the Copy and Paste commands, and the Selection tool can help speed up your workflow.

Using Copy and Paste

Use the Copy and Paste commands to easily duplicate shapes on the Stage. Your octopus needs two eyes, so copying and pasting will come in handy.

Select the Selection tool, and drag it around the entire drawing of your eye.

Choose Edit > Copy (Command+C/Ctrl+C). The eye is copied.

Choose Edit > Paste (Command+V/Ctrl+V).

A duplicate eye appears on the Stage. The duplicate remains selected.

Move the duplicate eye close to your original eye.

Tip

Use Paste In Place (Shift+Command+V/Shift+Ctrl+V) if you want to paste the copied graphic in the exact same place where you copied it from.

Using Free Transform

The duplicate eye needs to be flipped to make it look right. You’ll use the Free Transform tool to make it a mirror image of itself. You can also use the Free Transform tool to change an object’s scale, rotation, or skew (the way it is slanted) or to distort an object by dragging control points around a bounding box.

Choose Modify > Transform > Flip Horizontal.

The object flips so you now have a right eye and a left eye.

Choose the Free Transform tool from the Tools panel.

Transformation handles appear on the eye.

Drag a corner point inward to make the left eye a little smaller. Hold down the Shift key while dragging to constrain the proportions so the eye maintains the same aspect ratio.

Have fun with making the second eye a little crazy. You can drag the corner points to squash or stretch an object or to rotate the object. You can also drag the sides of the bounding box to skew the object so that it appears slanted.

Tip

If you press the Option or Alt key while moving one of the control points, Animate scales the selected object relative to its transformation point, represented by the circle icon. You can move the transformation point anywhere, even outside the object. Press Shift to constrain the object proportions. Hold Command/Ctrl to distort the object from a single control point.

Tip

Hold the Command/Ctrl key to drag a single control point to distort the eyeball. If you press and hold Shift+Command/Shift+Ctrl as you drag a corner point, you can move both corners the same distance simultaneously.

Changing shape contours

With the Selection tool, you can push and pull lines and corners to change the overall contours of any shape. It’s a fast and intuitive way of working with shapes. You’ll use this technique to create the organic shape of the octopus head.

In the Tools panel, select the Oval tool. Choose a purple color for the fill and no color for the stroke.

Create a large oval off to the side of your eyes.

In the Tools panel, select the Selection tool.

Click a blank area on the Stage to make sure that the large oval is not selected.

Move your mouse cursor close to one of the sides of the oval.

A curved line appears near your cursor, indicating that you can change the curvature of the stroke.

Drag the stroke outward.

The side of the oval bends, giving the octopus head a slight bulge.

Drag the contours of the oval to create the big bulbous head for your octopus.

Tip

Hold down the Option/Alt key while dragging the sides of a shape to add a new corner point.

Changing strokes and fills

If you want to change the properties of any stroke or fill, you can use the Ink Bottle tool or the Paint Bucket tool. The Ink Bottle tool changes stroke colors; the Paint Bucket tool changes fill colors.

Select the Paint Bucket tool and choose a new fill color in the Properties panel. Click a fill to change its color.

Select the Ink Bottle tool (hidden under the Paint Bucket tool) and choose a new stroke color in the Properties panel. You can also choose the thickness and style of the stroke. Click a stroke to change its properties.

You can also simply select a stroke or a fill on the Stage and change its properties by using the Properties panel.

Tip

If your Paint Bucket tool changes the fill in surrounding areas, there may be a small gap in the shape outline that allows the fill to spill over. Close the gap manually, or use the Gap Size menu at the bottom of the Tools panel to choose the gap size that Animate will close automatically.

Using variable-width strokes

You can make many different styles of lines for your strokes. In addition to a solid line, you can choose dotted, dashed, or ragged, or even customize your own. In addition, you can create lines with variable widths and edit the variations with the Width tool.

Adding variable-width lines

Now you’ll give the octopus a little more character by adding variable-width strokes to its eyebrows.

Hold down the Shift key and click the three line segments of one of the eyebrows.

In the Properties panel, change the Stroke Size to 10.

Change the Width to Width Profile 1.

The straight line turns into a thicker line that is skinny on the ends and fatter in the middle, giving it a little more personality.

Tip

Edit variable-width lines as you would any other stroke. Use the Selection or Subselection tool to bend the curves or move the anchor points.

Editing the width of lines

You can finesse the size of the bulges in your line and where those bulges appear. Use the Width tool to make those edits.

Click the three dots at the bottom of the Tools panel to edit the Toolbar.

Drag the Width tool from the Drag And Drop Tools to your Tools panel so you can use it. Click off the Tools panel or press the Esc key to collapse it.

Move your mouse pointer over one of your variable-width strokes.

Anchor points appear along the line to show you where the thick and thin portions of the line are located.

Tip

To delete an anchor point of a variable-width line, click to select the anchor point, and press Delete/Backspace.

Drag the handles at any anchor point to change the width of the line. Exaggerate some of the restrictions and bulges.

Drag an anchor point along the stroke to move its location.

Drag anywhere along the stroke to add a new anchor point and define the width at that location. Animate displays a small plus (+) sign next to your pointer to indicate that you can add an anchor point.

Modify both eyebrows of your octopus as you see fit.

Tip

Hold down Option/Alt when you want to modify only one side of a variable-width line.

Organizing your drawing

Now that you’ve finished creating your eyes and the head, you’ll want to start organizing the different parts of drawings. You can organize different shapes by putting them in separate layers (as you did with photos in the previous lesson), or you can use groups to keep them organized.

Grouping objects

A group holds together a collection of shapes and other graphics to preserve their integrity. When the elements that compose the eyes are grouped, you can move them as a unit without worrying that the eyes might merge and intersect with underlying shapes.

Select the Selection tool.

Select all the shapes that make up both eyes, including the eyebrows.

Choose Modify > Group.

The two eyes are now a single group. When you select it, a blue-green outline indicates its bounding box.

Tip

To change a group back into its component shapes, choose Modify > Ungroup (Shift+Command+G/Shift+Ctrl+G).

If you want to change any part of the eyes, double-click the group to edit it.

Notice that all the other elements on the Stage dim, and the Edit bar above the Stage displays Scene 1 Group. This indicates that you are now in a particular group and can edit its contents.

Click the Scene 1 icon in the Edit bar at the top of the Stage, or double-click an empty part of the Stage, and return to the main scene.

With the Selection tool, move the newly grouped eyes on top of the head. Remember you can resize the head or eyes with the Free Transform tool to get your graphics just right.

Creating curves

You’ve used the Selection tool to push and pull on the edges of shapes to intuitively make curves. For more precise control, you can use the Pen tool.

Using the Pen tool

What would an octopus be without its arms? Now, you’ll create the curvy, sinewy tentacles for your octopus.

In the Tools panel, select the Pen tool. If it’s not in the Tools panel, you must add it by choosing Edit Toolbar at the bottom of the panel and dragging it from the drag-and-drop panel.

Set the stroke color to a black. Choose Hairline from the Style menu and Uniform from the Width menu.

Begin your shape by clicking your mouse button down on the Stage (away from the octopus head) to establish the first anchor point.

Move the mouse pointer to a new location and press—but don’t release!—the mouse button to place the next anchor point. Keep holding the mouse button and drag in the direction you want the line to continue. You will drag out a direction line from the new anchor point. When you release the mouse button, you will have created a smooth curve between the two anchor points.

To learn more about drawing with the Pen tool, see the sidebar “Creating paths with the Pen tool.”

Continue to add curves to create a tentacle that moves up and down in an S-like shape, pressing and dragging out direction lines to build the outline of the tentacle.

Don’t worry if your curves aren’t completely smooth. You can always edit them later.

When you get to the tip of the tentacle, click the anchor point itself.

One half of each pair of anchor-point handles disappears, creating a corner point and allowing you to change directions.

Continue drawing wavy lines parallel to the first curved line.

Close your shape by clicking the first anchor point.

Select the Paint Bucket tool.

Set the fill color to the same color as your octopus head (you can use the Eyedropper tool to sample the fill of the octopus head and apply it to your tentacle).

Click inside the outline you just created to fill it with color.

Select the Selection tool and double-click the outline to select all of it. Press the Delete key to remove the stroke.

Note

Don’t worry about making all the curves perfect. It takes practice to get used to the Pen tool. You’ll also have a chance to refine your curves in the next part of the lesson.

Editing curves with the Selection and Subselection tools

Your first try at creating smooth waves probably won’t be very good. Use the Selection tool or the Subselection tool to refine your curves.

Select the Selection tool.

Hover over a line segment and look at the arced line segment that appears near your pointer. This indicates that you can edit the curve.

If a right-angle segment appears near your cursor, this indicates that you can edit the corner point.

Drag the curve to edit its shape.

In the Tools panel, select the Subselection tool (hidden under the Selection tool).

Click the outline of the shape.

Drag the anchor points to new locations or move the handles to refine the overall shape. Lengthening the handles makes the curve flatter. Tilting the handles changes the direction of the curve.

Deleting or adding anchor points

Use the hidden tools under the Pen tool to delete or add anchor points as needed.

Click and hold the Pen tool to access the hidden tools under it.

Select the Delete Anchor Point tool.

Click an anchor point on the outline of the shape to delete it.

Select the Add Anchor Point tool.

Click the curve to add an anchor point.

Creating paths with the Pen tool

You can use the Pen tool to create paths that are straight or curved, open or closed. If you’re unfamiliar with the Pen tool, it can be confusing to use at first. Understanding the elements of a path and how to create those elements with the Pen tool makes paths much easier to draw.

To create a straight path, click the mouse button. The first time you click, you set the starting point. Each time that you click thereafter, a straight line is drawn between the previous point and the current point. To draw complex straight-segment paths with the Pen tool, simply continue to add points.

Creating a curved line.

To create a curved path, start by pressing the mouse button to place an anchor point, then drag to create a direction line for that point and release the mouse button. Then move the mouse to place the next anchor point and drag out another set of direction lines. At the end of each direction line is a direction point; the positions of direction lines and points determine the size and shape of the curved segment. Moving the direction lines and points reshapes the curves in a path.

Creating a straight line.

A. Curved line segment

B. Direction point

C. Direction line

D. Selected anchor point

E. Unselected anchor point

Smooth curves are connected by anchor points called smooth points. Sharply curved paths are connected by corner points. When you move a direction line on a smooth point, the curved segments on both sides of the point adjust simultaneously, but when you move a direction line on a corner point, only the curve on the same side of the point as the direction line is adjusted.

Path segments and anchor points can be moved after they’re drawn, either individually or as a group. When a path contains more than one segment, you can drag individual anchor points to adjust individual segments of the path, or select all of the anchor points in a path to edit the entire path. Use the Subselection tool to select and adjust an anchor point, a path segment, or an entire path.

Creating a closed path.

Closed paths differ from open paths in the way that you end each one. To end an open path, select the Selection tool or press Escape. To create a closed path, position the Pen tool pointer over the starting point (a small º will appear by the pointer) and click. Closing a path automatically ends the path. After the path closes, the Pen tool pointer appears with a small *, indicating that your next click will start a new path.

Excerpted with permission from Adobe Photoshop CC Classroom in a Book. © 2017 Adobe Systems Incorporated and its licensors. All rights reserved.

Using brushes

Although the Pen tool excels at making precision curves like the tentacles, it’s not very good for creating spontaneous, expressive marks.

For a more painterly approach, use the Paint Brush or the Fluid Brush tool.

The Paint Brush tool allows you to make shapes that are more organic and free-form as well as shapes with regularly repeating patterns for borders and decorations. Choose from dozens of different brushes, and if you don’t find something you can use, you can customize the brushes or even create your own.

The Fluid Brush tool also makes more painterly marks, but it is designed to respond to pressure from a graphics tablet or the speed at which you draw.

The other difference between the two brushes is that the Paint Brush produces strokes (by default), while the Fluid Brush produces fills.

Using the Fluid Brush

You’ll use the Fluid Brush to create the suckers at the bottom edge of your tentacle.

Select the Fluid Brush tool.

In the Properties panel, choose a nice dark pink fill color. In the Fluid Brush Options section, change the Size to about 20.

At the top of the Properties panel, select the option for Brush Mode to Paint Fills Only.

With this option enabled, the brush will affect only the fills of your shapes.

Begin painting a little circle at the bottom edge of the tentacle to represent a sucker. Don’t worry about going over the outline of the tentacle. Release your mouse button.

The paint from the Fluid Brush tool affects only the inside fill of the tentacle.

Continue adding additional suckers along the bottom edge of your tentacle.

Note

If you have a drawing tablet, then the Fluid Brush can be a source of endless fun, as you can customize the brush in countless ways to respond to both pressure and velocity.

Brush modes

There are five available brush modes for your paint brushes: Paint Normal, Paint Fills Only, Paint Behind, Paint Selection, and Paint Inside. Each one works slightly differently from the other, and mastering them can make drawing in Animate more efficient.

Paint Normal applies color over everything on the Stage in the active layer, covering strokes and fills.

Paint Fills Only applies color only in areas of fill.

Paint Behind affects only empty areas of the Stage, keeping existing strokes and fills intact on the active layer.

Paint Selection applies color only on selected fills or strokes.

Paint Inside applies color only in the fill of the shape in which you started.

Exploring the Brush Library for the Paint Brush

You’ll add a little seaweed for the octopus to hide in by using some of the brushes from the Brush Library.

In the timeline, add a new layer on top of your other layers and rename it seaweed.

Drag the Paint Brush tool from the Drag And Drop Tools into the Tools panel if it is not there already.

Select the Paint Brush tool. In the Properties panel, choose a green stroke color.

In the Color And Style section, enter 50 for the stroke size.

This will give you a good thickness for the seaweed stalks.

Now, to choose your brush style, click Style Options next to the Style menu and choose Brush Library.

The Brush Library panel opens. Animate organizes all the brushes in large categories in the left column: Arrows, Artistic, Decorative, Line Art, Pattern Brushes, and Vector Pack.

Select a category to see the subcategories, and select a subcategory to view the individual brushes. For this task, select Decorative > Elegant Curl And Floral Brush Set and double-click Floral Brush 8. Close the panel.

The Floral Brush 8 brush is added to the Style menu in the Properties panel, and it becomes the currently active brush style.

Now for the fun. Draw long wisps from the bottom of your Stage upward.

Your wavy lines become floral-appearing curves.

The curves look very complex, but they’re controlled by a simple vector line. You can use the Subselection tool to edit the vector path of the paintbrush mark.

Push and pull on the stroke, move it, or edit it with the Transform tool just as you would any other vector shape. Create several seaweed stalks to give your octopus a place to hang out.

Note

You can also choose to create fills, rather than strokes, with the Paint Brush. In the Properties panel, select the Draw As Fill option. The resulting mark will be a grouped fill.

Editing and creating your own Art or Pattern brush

You might not find a brush to your liking in the Brush Library, or you may need something very specific for your project. In either case, you can edit an existing brush or you can create an entirely new one. Pattern brushes repeat a shape over the length of a stroke, whereas Art brushes stretch the base art over the length of the stroke.

To edit a brush, click the Edit Stroke Style button next to the Style menu in the Properties panel.

The Paint Brush Options dialog box appears, with multiple controls for refining how the brush applies the base shapes.

Art brushes and Pattern brushes have different options. Experiment with different spacing, how the shapes repeat or stretch to fit, or how corners and overlaps are handled. When you’re satisfied with your new brush, click Add to add your customized brush to the Style menu.

To create an entirely new brush, first create some shapes on the Stage that you want to base your brush on. For example, if you want to create a train track, create the base art that repeats for a Pattern brush.

Select the artwork on the Stage and then click the Create New Paint Brush icon at the top of the Properties panel.

The Paint Brush Options dialog box appears. From the Type menu, you can choose either Art Brush or Pattern Brush and then refine the brush options. The preview window shows you the results of your chosen options.

Enter a name for your new brush and click Add. Your new brush will be added to your Style menu and available for you to use.

Managing paint brushes

If you’ve created a new brush or customized an existing one, you can save it to the Brush Library.

Click the Manage Paint Brushes button in the Properties panel.

The Manage Document Paint Brushes dialog box appears, displaying the current paint brushes that you’ve added to the Style menu. It shows you which ones are currently in use on the Stage and which ones aren’t.

Note

Animate supports input from pressure-sensitive tablets, such as the Wacom graphics tablets, to control variable-width strokes or the Art or Pattern brushes. Pressing harder with the stylus creates fatter strokes, whereas pressing lightly results in thinner strokes. You can adjust the tilt or sensitivity percentages in the Paint Brush Options dialog box to modify the range of thicknesses in the shapes you create. Try drawing with a stylus on a tablet with variable-width strokes enabled for a natural, intuitive way of creating vector images.

Select the brushes you want to delete or save to your Brush Library. You cannot delete a brush that is currently in use.

If you save a brush to your Brush Library, it’ll appear in the Brush Library in the category called My Brushes.

Rotating the Stage for easier drawing

When you draw on regular paper, it’s often easier to rotate the page to get a better angle to draw or to write something. In Animate, you can do the same thing with the Stage using the Rotation tool.

The Rotation tool is grouped under the Hand tool in the Tools panel and is also accessible above the Stage.

Select the Rotation tool and click the Stage to specify the pivot point, indicated by a crosshair. Once the pivot point has been established, drag the Stage to rotate it to your desired angle.

Click the Center Stage button at the top of the Stage to reset the Stage to its normal orientation.

Using gradient fills

So far, you have used solid colors as fills, but you can also use a gradient as a fill for a more interesting effect.

In a gradient, one color gradually changes into another. Animate can create linear gradients, which change color horizontally, vertically, or diagonally, or radial gradients, which change color moving outward from a central focal point.

For this lesson, you’ll use a linear gradient fill to add an ocean background.

Creating gradient transitions

You’ll use the Color panel to define the colors to use in your gradient. By default, a linear gradient moves from one color to a second color, but you can use up to 15 color transitions in a gradient in Animate. A color pointer determines where each color is defined, and smooth color changes happen between each of the pointers. Add color pointers beneath the gradient definition bar in the Color panel to add more colors and, hence, more gradients.

You’ll create a gradient that moves from light blue to dark blue to create the appearance of the deep ocean.

Create a new layer and name it background. Move the layer to the bottom of the layers.

Open the Color panel (Window > Color). In the Color panel, click the Fill Color button and choose Linear Gradient from the Color Type menu.

In the Color panel, select the color pointer at the left end of the color gradient definition bar (the triangle above it turns black when selected), and then type 66CCFF in the hex value field to specify a light blue color. Press Return/Enter to apply the color. You can also select a color from the Color Picker or double-click the color pointer to select a color from the color swatches.

Select the far-right color pointer, and then enter 000066 for a dark blue color. Press Return/Enter to apply the color.

Choose the Rectangle tool.

Tip

To delete a color pointer from the gradient definition bar, simply drag it off the bar.

In the Properties panel, note that the Fill has the gradient you defined in the Color panel. Choose no color for the stroke (the empty color chip with the diagonal red line through it).

Draw a large rectangle that covers the entire Stage.

The large square is filled with a color that gradually blends from light blue to dark blue.

Using the Gradient Transform tool

In addition to choosing colors and positioning the color pointers for a gradient, you can adjust the size, direction, or center of a gradient fill. To change where the colors in your gradient begin to change in your ocean background, you’ll use the Gradient Transform tool.

Select the Gradient Transform tool. (The Gradient Transform tool is grouped with the Free Transform tool.)

Click the rectangle fill in your background layer. Transformation handles appear.

Drag the square handle on the right side of the bounding box inward to squeeze the gradient tighter. Drag the round handle in the corner to rotate the gradient so the lighter blue appears at the upper-left corner and the darker blue appears at the lower-right corner.

Tip

Move the center circle to change the center of the gradient, drag the round handle to rotate the gradient, or drag the square handle to stretch or compress the gradient.

Using transparency to create depth

Transparency is measured as a percentage and is referred to as Alpha. An Alpha value of 100% indicates that a color is totally opaque, whereas an Alpha value of 0% indicates that a color is totally transparent.

Modifying the Alpha value of a fill

You’ll add small transparent bubbles to your scene to provide some interesting details. We know octopuses don’t make bubbles, but they don’t have mean eyes either, right?

Select the seaweed layer.

Choose the Oval tool.

In the Properties panel, choose white for the Fill and the Stroke color, and change the stroke Style to Hairline and the Width profile to Uniform.

Change the Alpha value for the Fill to 60%.

The color swatch in the Properties panel previews your newly selected color. Transparency is indicated by the gray grid that you can see through the transparent color swatch.

Hold down the Shift key and drag out circles of varying sizes across your octopus.

The bubbles are slightly transparent, allowing you to see the graphics in the layers behind them.

Tip

You can also change the transparency of a shape from the Properties panel by clicking the Fill Color icon and changing the Alpha value in the pop-up color picker.

Tip

You can create gradients with different Alpha values as well.

Using swatches and tagged swatches

Swatches are predefined samples of color. Access them via the Swatches panel (Window > Swatches, or Command+F9/Ctrl+F9). You can save colors that you’ve used in your graphics as new swatches so you always have them to refer to.

Tagged swatches are specially marked swatches that are linked to the graphics on your Stage that are using them. To create a tagged swatch, choose Convert To A Tagged Swatch at the bottom of the Swatches panel, and you can name your tagged swatch. A tagged swatch is indicated by the white triangle in the lower-right corner of the color.

The real power of tagged swatches is apparent when you have to make updates to your project. Suppose the art director or your client doesn’t like the color of the white transparent bubbles. If you use a tagged swatch for the bubbles, you can simply update the color of the tagged swatch and all graphics using that tagged swatch will update.

About symbols

You might be wondering why your octopus has only one tentacle. You could create seven more, but there’s an easier way—using symbols. Symbols are reusable assets that you create and store in the Library panel.

Symbols are also used for special effects, animation, and interactivity. Animate uses three kinds of symbols: graphic, button, and movie clip. You can use a symbol countless times in a project, but Animate includes its data only once. Symbols also make editing easier. If you have eight tentacles on the Stage all based on a single symbol, you only have to make edits once.

Symbols are saved in the Library panel. When you drag a symbol to the Stage, Animate creates an instance of the symbol, leaving the original in the library. An instance is a copy of a symbol that has been placed on the Stage. You can think of the symbol as an original photographic negative and the instances on the Stage as prints of the negative. From a single negative, you can create multiple prints.

Note

In spite of its name, a movie clip symbol isn’t necessarily animated.

It’s also helpful to think of symbols as containers for content. A symbol can contain a JPEG image, an imported Illustrator drawing, or a drawing that you created in Animate. At any time, you can go inside your symbol and edit it, which means editing or replacing its contents. Changing the contents of a symbol also causes all the symbol’s instances to change.

Three types of symbols

Each of the three kinds of symbols in Animate is used for a specific purpose. You can tell whether a symbol is a graphic, button, or movie clip by looking at the icon next to it in the Library panel. Throughout this book, you’ll encounter and learn to use all three symbols.

Movie clip symbols

The movie clip is one of the most versatile types of symbol. When you create animation, you will typically use movie clip symbols. You can apply filters, color settings, and blending modes to a movie clip instance to enhance its appearance with special effects.

A movie clip symbol also contains its own independent timeline. You can have an animation inside a movie clip symbol just as easily as you can have an animation on the main timeline. This makes very complex animations possible; for example, a butterfly flying across the Stage can move from left to right as well as have its wings flapping independently of its movement.

You can also control movie clips with code to make them respond to the user’s input. For example, you can control a movie clip’s position or rotation to create arcade-style games. Or a movie clip can have drag-and-drop behavior, which comes in handy when building a jigsaw puzzle.

Button symbols

Button symbols are used for interactivity. They contain four unique keyframes that describe how they appear when the mouse pointer is interacting with them. However, buttons need code to make them do something.

You can also apply filters, blending modes, and color settings to buttons. You’ll learn more about buttons in Lesson 10 when you create a nonlinear navigation scheme to allow the user to choose what an animation displays.

Graphic symbols

Often you use graphic symbols to build more complex movie clip symbols. They do not support interactivity, and you can’t apply filters or blending modes to a graphic symbol.

Graphic symbols are useful when you have multiple versions of a drawing that you want to easily switch between—for example, when synchronizing lips to sound, keeping all the different mouth positions in individual keyframes of a graphic symbol makes voice syncing easy. Graphic symbols also are used when you need to synchronize an animation inside a symbol to the main timeline.

Creating symbols

There are two main ways of creating a symbol. Both methods are valid; the one you use depends on your preferred way of working.

The first method is to start with nothing selected on the Stage and then to choose Insert > New Symbol. Animate will put you in symbol-editing mode, where you can begin drawing or importing graphics for your symbol.

The second method is to select existing artwork on the Stage and then convert the artwork to symbols. Whatever is selected will automatically be placed inside your new symbol.

Note

When you use the command Convert To Symbol, you aren’t actually “converting” anything; rather, you’re placing whatever you’ve selected inside a symbol.

Many designers prefer to use the second method because they can create all their graphics on the Stage and see them together before making the individual components into symbols.

Converting artwork on the Stage into a symbol

For this task, you’ll select your tentacle and then convert it to a movie clip symbol.

On the Stage, select only the tentacle.

Choose Modify > Convert To Symbol (F8).

The Convert To Symbol dialog box opens.

Name the symbol tentacle and choose Movie Clip from the Type menu.

Leave all other settings as they are. The Registration grid indicates the registration point (x=0, y=0) of your symbol. This is the point around which all transformations (for example, rotations or scalings) are centered and the point that Animate uses to measure its position on the Stage. Leave the registration at the upper-left corner.

Click OK. The tentacle symbol appears in the Library panel.

You now have a symbol in your library, and an instance of that symbol is on the Stage.

Managing symbol instances

Having a symbol saved in your library allows you to use multiple copies, or instances, of that asset in your project without increasing your file size. Most importantly, every instance doesn’t have to be an exact duplicate of every other instance. Instances can vary slightly from their original master symbol—they can vary in position on the Stage and in size, rotation, and even color, transparency, or applied filters.

Next, you’ll add seven more instances of your tentacle symbol and change each of them slightly to give some variation to the octopus pose.

Adding another symbol instance

Additional symbol instances are added to the Stage by dragging them from the Library panel.

Select the octopus layer.

Drag the tentacle movie clip symbol from the Library panel to the Stage.

A duplicate of your tentacle graphic appears on the Stage in the octopus layer. You now have two instances of the tentacle symbol on the Stage.

Drag six more tentacle symbols onto the Stage.

Changing size, position, and overlapping of an instance

You’ll now use the Free Transform tool to make each tentacle a little different from one another.

Select the Free Transform tool and click one of the tentacle instances.

Rotate, skew, or scale the instance to make it slightly different from the original.

Create variations for each tentacle. Put four on one side of the octopus’s body, and four on the other side by flipping them horizontally.

To change the stacking order of your tentacle instances (how they overlap each other), right-click an instance, choose Arrange, and select Bring To Front to move the instance to the top so it overlaps all the other instances, or Bring Forward to move it one higher in the stacking order. Select Send To Back to move the instance to the bottom so all other instances overlap it, or Send Backward to move it one lower in the stacking order.

Note

When using the Free Transform tool on a symbol instance, you cannot make distortions by holding down the Command/Ctrl key to move only one corner point.

Changing the color effect of an instance

Each instance can have its own value for transparency, color tint, or brightness. The controls for these settings are in the Color Effects section in the Properties panel.

Using the Selection tool, select the tentacles that are behind all the others.

In the Properties panel, in the Color Effects section, choose Brightness from the Style menu.

Drag the Bright slider to −20%.

The tentacle instance on the Stage becomes darker and appears to recede into the distance.

Tip

Choosing Advanced from the Style menu allows you to change the tint, transparency, and brightness of an instance at the same time by adjusting the individual color components (RGB) together with the Alpha percentage.

Tip

To reset the color effect of any instance, choose None from the Style menu.

Editing a symbol from the library

You can also edit any symbol at any time. If you decide you want to change the shape of the tentacle, for example, you can easily go into symbol-editing mode and make that change. You can edit symbols directly from the Library panel whether or not they’ve been used on the Stage.

What’s important to remember is that when you edit a symbol, you’re making changes to the “master,” so those edits will be reflected in all the individual instances of that symbol on the Stage.

Double-click the tentacle movie clip symbol icon in the Library panel.

Animate puts you in symbol-editing mode. In this mode, you can see the contents of your symbol—in this case, the tentacle on the Stage. Notice that the Edit bar at the top of the Stage tells you that you are no longer in Scene 1 but are inside the symbol called tentacle.

Using the Paint Bucket tool in the Tools panel, change the color of the suckers to a light orange.

Click the left-facing arrow on the Edit bar above the Stage to exit symbol-editing mode and to return to the main timeline.

The thumbnail of the movie clip symbol in the Library panel reflects the changes you made. The same is true of all instances on the Stage. All instances of a symbol change if you edit the symbol.

Tip

You can quickly and easily duplicate symbols in the Library panel. Select the symbol, right-click, and choose Duplicate. Or choose Duplicate from the Library panel menu (in the upper-right corner of the panel). Animate will open a dialog box to give you an opportunity to create an exact copy of the selected symbol in your library.

Editing a symbol in place

You may want to edit a symbol in context with the other objects on the Stage. You can do so by double-clicking an instance on the Stage. You’ll enter symbol-editing mode, but you’ll also be able to see the symbol’s surroundings. This editing mode is called editing in place.

Using the Selection tool, double-click the tentacle movie clip instance on the Stage.

All other objects on the Stage are dimmed and you are put into symbol-editing mode. Notice that the Edit bar shows that you are no longer in Scene 1 but are inside the symbol called tentacle.

With the Selection tool active, push or pull on the contours of the tentacle.

As you edit the symbol, notice that the changes ripple through all the instances of that symbol on the Stage.

Click Scene 1 on the Edit bar above the Stage to return to the main timeline. You can also just double-click any part of the Stage outside the graphic with the Selection tool to return to the next-higher group level.

Note

When you edit a symbol in place with the Fluid Brush or the Classic Brush tool, note that there is an option in the Properties panel called “Scale size with symbol instance,” which is selected by default. This option automatically adjusts the size of your brush so that edits are proportional to instances on the Stage that may have been shrunken or enlarged.

Breaking apart a symbol instance

If you no longer want an object on the Stage to be a symbol instance, you can use the Break Apart command to return it to its original form.

Use the Selection tool to select one of the tentacle instances on the Stage.

Choose Modify > Break Apart.

Animate breaks apart the movie clip instance. What’s left on the Stage are the contents of the movie clip symbol, which is the shape.

Choose Edit > Undo to return your tentacle to a symbol instance.

Applying filters for special effects

In the previous lesson, you applied filters to keyframes on the timeline. You can also apply filters to symbol instances on the Stage. Use filters to create special effects such as blurs, glows, or drop shadows. Several filters are available in the Filters section of the Properties panel. Each filter has different options that can refine the effect.

Applying the Blur filter

You’ll apply the Blur filter to the furthest tentacle instances to help give the scene a greater sense of depth.

Select the two instances of the tentacles that are already dimmed.

In the Properties panel, expand the Filters section.

Click Add Filter and choose Blur from the menu.

Properties and values for the Blur filter are displayed.

If the link icons next to the Blur X and Blur Y values aren’t already selected, click one of them to constrain the blur effect in both directions.

Leave Blur X and Blur Y at their default values (4 pixels).

The instance on the Stage becomes blurry, helping to give an atmospheric perspective to this scene.

Note

It’s best to choose Low from the Quality menu for filters. Higher settings are processor intensive and can bog down performance, especially if you’ve applied multiple filters.

More filter options

The Options menu at the upper-right corner of the Filters section lists commands that help you manage and apply multiple filters.

Save As Preset lets you save a particular filter and its settings so that you can apply it to another instance. Copy Selected Filter and Copy All Filters let you copy one or more filters, and Paste Filters lets you paste the selected filter(s) to other instances. The Reset Filter command resets the values for the selected filter to the defaults. The Enable Or Disable Filter button (the eyeball icon at the head of the Value column) lets you see your instance with or without the filter applied.

Creating and editing text

Now let’s add text to this illustration. Various options are available for text depending on what kind of document you’re working on. For an HTML5 Canvas document like the one in this lesson, you can use static text or dynamic text.

Use static text for simple display text that uses fonts available on your (the designer’s) computer. When you create static text on the Stage and publish to an HTML5 project, Animate automatically converts fonts into outlines. That means you don’t have to worry about your audience having the required fonts to see the text as you intended it. The downside is that too much text can bloat your file size.

Use dynamic text to leverage web fonts available through either Adobe Fonts (formerly Typekit) or Google Fonts. Thousands of high-quality fonts are available to you through your Creative Cloud subscription, and the fonts are hosted by Adobe and accessible directly through the Properties panel within Animate. High-quality open-source fonts are available through Google Fonts, which are hosted on Google servers.

In the next task, you’ll create the accompanying joke for your criminal octopus. You’ll choose an appropriate web font and add the text.

Using the Text tool to add dynamic text

You’ll create your text with the Text tool.

Select the top layer.

Choose Insert > Timeline > Layer, and name the new layer text.

Select the Text tool.

Choose Dynamic Text from the Text Type menu in the Properties panel.

Select a font and color, but don’t worry too much about your choice because you will replace it with an Adobe font from the web. Your font choices may not match the ones in this book.

Choose the Align Center option for the paragraph.

Drag out a text box next to your octopus.

Begin typing. Enter Why do octopuses make the best criminals?

The text may not fit, or it might not be the size or font that you want. Don’t worry—you’ll select a web font for your text box in the next task.

Exit the Text tool by selecting the Selection tool.

Add the punchline on the Stage in the same layer below the first piece of text: Because they’re well armed.

Adding a web font

Now you’ll link a web font to your project. Make sure you have an internet connection because Animate retrieves the list of available fonts from the web. The processes for adding an Adobe Font and a Google Font are very similar. In this task, you’ll add an Adobe Font.

Select the first piece of text and click Add Web Fonts (its icon is a globe) in the Properties panel, in the Character section. Choose Adobe Fonts from the menu that appears.

Animate displays the Add Adobe Fonts dialog box. The list of fonts can be very slow to load. Be patient!

Choose Name from the Sort By menu.

The list of Adobe fonts on the right is displayed alphabetically. You can choose to sort by date, by popularity, or by other criteria.

The Adobe Fonts are listed with a sample AaBbCcDd string of characters. You can scroll through the font families with the scroll bar on the right. You can also search for specific fonts or use the Category menu to narrow your search.

For now, peruse the range of typefaces and pick one that you think would suit this banner ad. Click the name of your preferred font under the sample text. Adobe Fonts displays the style variations of that font.

Click Select and then OK.

Your selected Adobe font is added to the list of fonts available. Web fonts appear at the top of the menu.

Select your text and apply the new Adobe font. Choose a color that works nicely with the composition. Adjust the font size and/or the line spacing (the space between lines) in the Properties panel (line spacing is in the Paragraph section) to get all the text to fit comfortably in the space.

Select the other piece of text and apply the same font.

Don’t worry if the text in your illustration looks a little different from the one printed in this book. Use your own discretion to pick a font that appeals to you!

Removing a web font

If you change your mind, you can easily remove an Adobe web font and choose a different one.

Select all the text that uses the web font you want to remove.

Deselect the font by choosing a different one.

Click the Add Web Fonts button and choose Adobe Fonts to open the Add Adobe Fonts dialog box.

Click the Selected Fonts tab.

Animate displays all the fonts, indicated by a blue checkmark, that have been selected for your project. In this example, Adobe Nueva Std is selected because it was previously added to our project.

If the font has a gray checkmark, that means you’re still using it in some text on the Stage. You must deselect a font from every bit of text before removing it from your project.

Deselect the font by clicking it.

Now, no fonts are displayed in the Selected Fonts area.

Click OK.

The Add Web Fonts dialog box closes. The web font is removed from the Family menu in the Properties panel.

Aligning and distributing objects

You’ll tidy up the text so that the layout is organized. Although you can use rulers (View > Rulers) and grids (View > Grid > Show Grid) to help position objects, here you’ll use the Align panel, which is more effective when you’re dealing with multiple objects. You’ll also rely on the smart guides that appear when you move objects around the Stage.

Aligning objects

The Align panel, as you might guess, aligns any number of selected objects horizontally or vertically. It can also distribute objects evenly.

Select the Selection tool.

Shift-click both pieces of text to select them.

Open the Align panel (Window > Align).

Deselect the Align To Stage option, if it is selected. Click the Align Horizontal Center button.

Animate aligns the text along their center lines.

Tip

You might have to lock the lower layers so you don’t accidentally select the shapes in the lower layers.

Using rulers and guides

You may want to be more precise in your placement of your graphics. In Lesson 1, you learned how to use the x and y coordinates in the Properties panel to position individual objects. Here, you’ve learned to use the Align panel to align several objects to each other.

Another way to position objects on the Stage is to use rulers and guides. Rulers appear on the top and left edge of the pasteboard to provide measurement along the horizontal and vertical axes. Guides are vertical or horizontal lines that appear on the Stage but that do not appear in the final published movie.

To use rulers, choose View > Rulers (Option+Shift+Command+R/Alt+Shift+Ctrl+R). Horizontal and vertical rulers measured in pixels appear along the top and left edges of the pasteboard. As you move objects on the Stage, tick marks indicate the positions of their bounding boxes on the rulers. The x=0 and y=0 points begin at the upper-left corner of the Stage, with the X values increasing to the right and the Y values increasing going down. Move your mouse pointer over the top horizontal ruler or the left vertical ruler and drag a guide onto the Stage. A colored line appears on the Stage that you can use as a guide for alignment.

Double-click any guide with the Selection tool to call up the Move Guide dialog box to enter pixel values for precise guide positioning.

Choose View > Snapping and make sure Snap To Guides is selected. Objects will now snap to any guides on the Stage.

Choose View > Guides > Lock Guides to lock your guides. This prevents you from accidentally moving them. Remove all guides by choosing View > Guides > Clear Guides. Change the color of the guides and the snapping accuracy by choosing View > Guides > Edit Guides.

Sharing your final project

There are many different ways you can share your final illustration. Animate exports to several different formats and platforms. In addition to the Quick Share And Publish option you learned in the previous lesson, Animate has options for virtually every graphic file format.

Exporting art as PNG, JPEG, or GIF

If you want a simple image file in a format such as a PNG, JPEG, or GIF, use the Export Image panel to choose your format and fine-tune the compression for optimal web download performance.

Choose File > Export > Export Image.

The Export Image dialog box opens.

The figure shows the dialog box with GIF chosen from the Optimized File Format menu, but the pull-down menu contains other graphic formats you can choose. The dialog box will look different with other settings.

Note

To learn more about optimization options for images and different image file formats, check out the Animate User Guide under Workspace and Workflow, “Optimization Options for Images and Animated GIFs.” Instructions for accessing the User Guide are provided in the Getting Started section near the start of this book, under “Additional resources.”

Note

If your Animate document contains multiple frames, you can also choose to export it as an animated GIF.

Choose the appropriate file format, select the amount of compression, select a color palette, and even compare different settings to weigh image quality and file size. You can also resize the image.

Note

Vector art—especially art with complex curves and many shapes and different line styles—can put heavy demands on CPU resources. This can be a problem on mobile devices, whose less powerful processors struggle to render complex artwork. Use the Modify > Convert To Bitmap command to turn selected artwork on the Stage into a single bitmap, which can be less taxing on the processor. Once you’ve converted the object to a bitmap, you can move it without worrying about it merging with underlying shapes. However, the graphics are no longer editable with Animate’s editing tools.

Note

Another option to improve performance when you have complex vector art is to use the Export As Bitmap command (available only for ActionScript 3.0 documents). This command renders the vector art as a bitmap when you publish your project but keeps the selection as editable vector graphics in the FLA file so that you can still make modifications. Export As Bitmap is accessed from the Render menu in the Display section of the Properties panel.

Exporting art as SVG

Scalable Vector Graphics (SVG) is a common XML-based format for displaying vector graphics in a browser. You can export your final composition from Animate as SVG, with the choice of embedding or linking any bitmap images. The exported SVG produces a static image of your project. However, SVG supports only static text.

Choose File > Export > Export Image (Legacy).

From the File Format menu, choose SVG Image (*.svg) and click Save.

In the ExportSVG dialog box that appears, select Embed for Image Location.

The Image Location options determine whether your bitmap images are encoded into the SVG file or kept as separate files and linked to your SVG. Embedding images creates larger SVG files, whereas linking allows you to swap and edit the images easily.

Click OK.

Animate exports an SVG file with any image data encoded in the text file. An SVG document is a text file marked up much like an HTML document. All the visual information, including corner points, curves, text, and color information, is encoded in a compact form.

When you open an SVG file in your browser, it renders the image, and all the vector information is preserved. Curves remain sharp even up close, and any static text in your composition is selectable.

Collaborating with the Assets panel

You may be working with many other designers and animators on large projects, and sharing art and other assets can be essential for collaboration. Animate’s new Assets panel can make those collaborations easy. Save static or animated assets, use keywords for efficient searching, and export assets as an ANA file for others to use.

Saving art to the Assets panel

The Assets panel has two tabs, a Default tab for Adobe-provided animated and static assets for you to examine and use in your projects, and a Custom tab where you can store your own assets.

In the Library panel, right-click your tentacle movie clip symbol and choose Save As Asset.

The Save As dialog box opens.

Enter a name for your asset. In this case, tentacle would be an apt description.

In the Tags field, enter keywords separated by commas. Keywords will help you search for the asset in the Assets panel. You can use descriptive terms, project names, author names, or any other identifiers.

Click Save.

The asset is saved to the Custom tab of the Assets panel. Your assets will be available to you across different Animate files.

Exporting and importing assets

If you want to share an asset with another user, export an ANA file.

In the Library panel, right-click your tentacle movie clip symbol and choose Export Asset.

The Export Asset dialog box opens.

In the Tags field, enter (optional) keywords separated by commas.

Click Export.

Animate asks you where to save the ANA file. Save it to your computer.

To import an asset, in the Assets panel, click the options menu in the upper-right corner and choose Import.

Navigate to the ANA file you wish to import and choose Open.

The asset is imported into the Custom tab of your Assets panel. To use the asset in your Animate file, drag it to your Stage, and it will be added as a symbol in your Library panel.

Review questions

1 What are the three drawing modes in Animate, and how do they differ?

2 When would you use each of the selection tools in Animate?

3 What can you do with the Width tool?

4 What is the difference between an Art brush and a Pattern brush?

5 What are web fonts, and how are they used in HTML5 Canvas documents?

6 What is a symbol, and how does it differ from an instance?

7 What are the two ways to edit symbols?

8 How can you change the transparency of an instance in Animate?

Review answers

1 The three drawing modes are Merge Drawing mode, Object Drawing mode, and Primitive Drawing mode.

In Merge Drawing mode, shapes drawn on the Stage merge to become a single shape.

In Object Drawing mode, each object is distinct and remains separate, even when it overlaps another object.

In Primitive Drawing mode, you can modify the angles, radius, or corner radius of an object.

2 Animate includes three selection tools: the Selection tool, the Subselection tool, and the Lasso tool.

Use the Selection tool to select an entire shape or object.

Use the Subselection tool to select a specific point or line in an object.

Use the Lasso tool to draw a free-form selection area.

3 Use the Width tool to edit the variable widths of a stroke. You can drag the handle bars of any anchor point to expand or narrow the width, add or delete anchor points, or move anchor points along the stroke.

4 An Art brush uses a base shape and stretches it to fit a vector stroke to simulate an expressive, creative, and often painterly mark. A Pattern brush uses a base shape that repeats to create decorative patterns.

5 Web fonts are fonts specifically created for online viewing that are hosted on a server. Animate offers two kinds of web fonts for inclusion in HTML5 Canvas documents: Adobe Fonts and Google Fonts.

6 A symbol is a graphic, button, or movie clip that you create once in Animate and can then reuse throughout your document or in other documents. All symbols are stored in your Library panel. An instance is a copy of a symbol located on the Stage.

7 To edit a symbol, either double-click the symbol in the library to enter symbol-editing mode, or double-click the instance on the Stage to edit it in place. Editing a symbol in place lets you see the other objects around the instance.

8 The transparency of an instance is determined by its Alpha value. To change the transparency, select Alpha from the Color Effects menu in the Properties panel and then change the alpha percentage.

3. Animating Symbols with Motion Tweens

Lesson overview

In this lesson, you’ll learn how to do the following:

Animate the position, scale, and rotation of objects using motion tweening.

Adjust the pacing and timing of your animation.

Animate transparency and filters.

Change the path of an object’s motion.

Create a nested animation.

Split a motion tween.

Change the easing of an object’s motion.

Animate in 3D space.

This lesson will take about 2 hours to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

Use Adobe Animate to change almost any aspect of an object—position, color, transparency, size, rotation, and more—over time. Motion tweening is a basic technique for creating animation with symbol instances.

Getting started

Start by viewing the finished movie file to see the animated title page that you’ll create in this lesson.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 03End.mp4 file in the Lesson03/03End folder to play the final animation, which was exported as a high-definition video file.

The project is an animated opener that would be placed on a website for an imaginary soon-to-be-released motion picture. In this lesson, you’ll use motion tweens to animate several components on the page: the cityscape, the main actors, several old-fashioned cars, and the main title.

Close the 03End.mp4 file.

Double-click the 03Start.fla file in the Lesson03/03Start folder to open the initial project file in Animate. This file is an ActionScript 3.0 document that is partially completed and already contains many of the graphic elements imported into the library for you to use. You’ll use all the animation functionality available in an ActionScript 3.0 document and then export an MP4 video file.

From the view options above the Stage, choose Fit In Window, or choose View > Magnification > Fit In Window, so that you can see the entire Stage on your computer screen.

Choose File > Save As. Name the file 03_workingcopy.fla, and save it in the 03Start folder.

Saving a working copy ensures that the original start file will be available if you want to start over.

About animation

Animation is the change of an object’s appearance over time. Animation can be as simple as moving a ball across the Stage, which is a change in the object’s position. It can also be much more complex. As you’ll see in this lesson, you can animate many different properties of an object. In addition to an object’s position, you can change its color or transparency, change its size or rotation, or even animate the filters that you saw in the previous lesson. You also have control over an object’s path of motion and even its easing, which is the way an object accelerates or decelerates its property changes.

In Animate, the basic workflow for animation goes like this: Select an object on the Stage and choose Create Motion Tween. Move the playhead to a different point in time and move the object to a new position or change one of its properties. Animate takes care of the rest by smoothly interpolating the changes between the two points in time.

Motion tweens create animation for changes in position on the Stage and for changes in size, color, or other attributes. Motion tweens require you to use a symbol instance. If the object you’ve selected is not a symbol instance, Animate will automatically ask to convert the selection to a symbol.

Animate also automatically separates motion tweens onto their own layers, which are called tween layers. There can be only one motion tween per layer, and there can be no other element on the layer. Tween layers allow you to change various attributes of your instance at different key points over time. For example, a spaceship could be very small on the left side of the Stage at the beginning keyframe and much larger at the far-right side of the Stage at an ending keyframe, and the resulting tween would make the spaceship both fly across the Stage and slowly grow in size.

Note

The term “tween” comes from the world of classic animation. Senior animators would be responsible for drawing the beginning and ending poses for their characters. The beginning and ending poses were the keyframes of the animation. Junior animators would then come in and draw the “in-between” frames, or do the “in-betweening.” Hence, “tweening” refers to the smooth transitions between keyframes.

Understanding the project file

The 03Start.fla file contains a few of the animated elements already or partially completed. Each of the six layers—man, woman, Middle_car, Right_car, footer, and ground—contains an animation. The man and woman layers are in a folder called actors, and the Middle_car and Right_car layers are in a folder called cars.

You’ll be adding more layers to create an animated cityscape, refining the animation of one of the actors and adding a third car and a 3D title. All the necessary graphic elements have been imported into the library. The Stage is set at a standard HD size, 1280 pixels by 720 pixels, and the Stage color is black. You might need to choose a different view option to see the entire Stage.

Animating position

You’ll start this project by animating the cityscape. It will begin slightly lower than the top edge of the Stage and then rise slowly until its top is aligned with the top of the Stage.

Lock all the existing layers so you don’t accidentally modify them. Create a new layer above the footer layer and rename it city.

Drag the bitmap image called cityBG.jpg from the bitmaps folder in the Library panel to the Stage in frame 1 of the city layer.

In the Properties panel, set the value of X to 0 and the value of Y to 90.

This positions the cityscape image just slightly below the top edge of the Stage.

Select the cityscape image and choose Create Motion Tween above the timeline, or right-click and choose Create Motion Tween, or choose Insert > Create Motion Tween.

Tip

Although in this task you had Animate automatically convert your object into a symbol for tweening, it’s best practice to do it yourself before animating. That way, you control the naming and choice of the symbol yourself and have a better understanding of all your assets in your library.

A dialog box appears warning you that your selected object is not a symbol. Motion tweens require symbols. Animate asks if you want to convert the selection to a symbol so that it can proceed with the motion tween. Click OK.

Animate automatically converts your selection to a symbol, with the default name Symbol 1, and stores it in your library. Animate also converts the current layer to a tween layer so that you can begin to animate the instance. Tween layers are distinguished by a special icon in front of the layer name, and the frames are tinted gold in the timeline. The range of frames covered by the tween is the tween span. The tween span is represented by all the colored frames from the first keyframe to the last keyframe. Tween layers are reserved for motion tweens; hence, no drawing is allowed on a tween layer.

Move the blue playhead to the end of the tween span, at frame 191.

Select the instance of the cityscape on the Stage, and while holding down the Shift key, move the instance up the Stage.

Holding down the Shift key constrains the movement to the vertical or horizontal direction.

For more precision, set the value of Y to 0.0 in the Properties panel.

A small black diamond appears in frame 191 at the end of the tween span. This indicates a keyframe at the end of the tween.

Tip

Temporarily hide all the other layers to isolate the cityscape and to better see the results of the motion tween.

Animate smoothly interpolates the change in position from frame 1 to frame 191 and represents that motion with a motion path on the Stage.

Drag the playhead back and forth at the top of the timeline to see the smooth motion. You can also choose Control > Play (or press Return/Enter) to make Animate play the animation.

Tip

Remove a motion tween by selecting the tween and clicking Remove Tween in the Frame tab of the Properties panel. You can also right-click the motion tween on the timeline or the Stage and choose Remove Motion Tween.

Animating changes in position is simple because Animate automatically creates keyframes at the points where you move your instance to new positions. If you want to have an object move to many different points, simply move the playhead to the desired frame and then move the object to its new position. Animate takes care of the rest.

Previewing the animation

Integrated into the Timeline panel is a set of playback controls. These controls allow you to play, rewind, loop, or go step by step backward or forward through your timeline to review your animation in a controlled manner. You can also use the playback commands on the Control menu.

Click any of the playback buttons on the controller above the timeline to play, stop, or step forward or backward one frame. Hold the Step Forward or Step Backward button to move the playhead to the last or first frame.

Select the Loop button (to the left of the controller), and then click the Play button.

Tip

You can also use the Time Scrub tool (hidden under the Hand tool) to move back and forth on the timeline to preview your animation. Select the Time Scrub tool (or hold down Spacebar+T) and drag left and right on the Stage.

The playhead loops, allowing you to see the animation over and over for careful analysis.

Move the start or end markers in the timeline header to define the range of frames that you want to see looped.

The playhead loops within the marked frames. Click the Loop button again to turn it off.

Changing the pacing and timing

You can change the duration of the entire tween span or change the timing of the animation by dragging keyframes on the timeline.

Changing the animation duration

If you want the animation to proceed at a slower pace (and thus take up a much longer period of time), you need to lengthen the entire tween span between the beginning and end keyframes. If you want to shorten the animation, you need to decrease the tween span. Lengthen or shorten a motion tween by dragging its ends on the timeline.

Move your mouse pointer close to the end of the tween span in the city layer.

Your pointer changes to a double-headed arrow, indicating that you can lengthen or shorten the tween span.

Drag the end of the tween span back to frame 60.

Your motion tween shortens to 60 frames, reducing the time it takes the cityscape to move.

Move your pointer close to the beginning of the tween span (at frame 1).

Drag the beginning of the tween span forward to frame 10.

Your motion tween begins at a later time, so it now plays only from frame 10 to frame 60.

Note

If you have multiple keyframes in a tween, changing the length of the tween span by dragging one end or the other will distribute all your keyframes uniformly. The relative timing of events in your animation remains the same; only the length changes.

Adding frames

You’ll want the last keyframe of your motion tween to hold for the remainder of the animation. Add frames by Shift-dragging the end of a tween span.

Move your pointer close to the end of the tween span.

Hold down the Shift key and drag the end of the tween span forward to frame 191. Make sure that your tween span is not selected.

Tip

You can also add individual frames by choosing Insert > Timeline > Frame (F5) or remove individual frames by choosing Edit > Timeline > Remove Frames (Shift+F5).

The last keyframe in the motion tween remains at frame 60, but Animate adds frames through frame 191.

Moving keyframes

If you want to change the pacing of an animation, you can select individual keyframes and then drag them to new positions.

Click the keyframe at frame 60.

The keyframe at frame 60 is selected. Begin dragging the keyframe. A tiny box appears next to your mouse pointer, indicating that you can move the keyframe.

Drag the keyframe to frame 40.

Now, because the last keyframe in the motion tween is reached earlier in the animation, the motion of the cityscape proceeds more quickly.

Span-based vs. frame-based selection

By default, Animate uses frame-based selection, which means you can select individual frames within a motion tween. However, if you prefer to click a motion tween and have the entire span (the beginning and end keyframes and all the frames in between) be selected, you can enable Span Based Selection from the Frame View menu in the upper-right corner of the Timeline panel (or you can Shift-click to select the entire span).

With Span Based Selection enabled, you can click anywhere within the motion tween to select it, and move the whole animation backward or forward along the timeline as a single unit.

If you want to select individual keyframes while Span Based Selection is enabled, hold down Command/Ctrl and click a keyframe.

Moving keyframes vs. changing time in tween spans

Managing the timing of your animation by moving keyframes and stretching or squashing tween spans can sometimes be frustrating because you will get different outcomes depending on what you’ve selected on the timeline and how you drag those selections.

If you want to simply move the location of a keyframe within a tween span, make sure that only a single keyframe is selected and that the tiny box appears next to your pointer as you begin dragging the keyframe to a new location.

If you want to select individual keyframes while Span Based Selection is enabled, hold down the Command/Ctrl key and click a keyframe.

Consider the following animation, where a ball moves from the left side of the Stage to the bottom edge and then to the right side, making a figure “V.” On the timeline, three keyframes mark the three positions of the ball.

Moving the middle keyframe changes the timing of when the ball hits the bottom of the Stage.

When you select a span of frames within a tween, you can compress or expand its duration by dragging the selection when the double-headed arrow appears near the right edge of the selection. A black flag appears indicating when the amount of compression or expansion is a multiple of the original length (x0.5, x2, x4, etc.).

Understanding frame rate

The speed of your animation is tied to the frame rate of your document (shown in the Properties section of the Properties panel with the Document tab selected), but do not modify the frame rate to change the speed or duration of your animation.

The frame rate determines how many frames on the timeline make up 1 second of time. The default is either 30 or 24 frames per second (fps). The seconds are marked on the timeline. Frame rate is a measure of how smooth an animation appears—the higher the frame rate, the more frames there are to show the action. Animations at slower frame rates appear choppy because there are fewer frames to show the action. Slow-motion videography depends on very high frame rates to capture action that happens very quickly, such as a speeding bullet or a falling water droplet.

If you want to modify the overall duration or speed of your animation, don’t change the frame rate. Instead, add frames to, or delete frames from, your timeline.

If you want to change the frame rate but keep the overall duration constant, select the Scale Spans option in the Properties panel before you modify the frame rate.

Animating transparency

In the previous lesson, you learned how to change the color effect of any symbol instance to change the transparency, tint, or brightness. You can change the color effect of an instance in one keyframe and change the value of the color effect in another keyframe, and Animate will automatically display a smooth change, just as it does with changes in position.

You’ll change the cityscape in the beginning keyframe to be totally transparent but keep the cityscape in the ending keyframe opaque. Animate will create a smooth fade-in effect.

Move the playhead to the first keyframe of the motion tween (frame 10).

Select the cityscape instance on the Stage.

In the Color Effects section of the Properties panel, choose Alpha from the Style menu.

Set the Alpha value to 0%.

The cityscape instance on the Stage becomes totally transparent, but you can still see the blue bounding box around it.

Move the playhead to the last keyframe of the motion tween (frame 40).

Make sure that the cityscape instance on the Stage is still selected.

In the Properties panel, in the Color Effects section, set the Alpha value to 100%.

The cityscape instance on the Stage becomes totally opaque.

Preview the effect by choosing Control > Play (or pressing Return/Enter).

Animate interpolates the changes in both position and transparency between the two keyframes.

Animating filters

Filters, which give instances special effects such as blurs and drop shadows, can also be animated. You’ll next refine the motion tween of the actors by applying a blur filter to one of them to make it appear as if the camera changes focus. Animating filters is no different from animating changes in position or changes in color effect. You simply set the values for a filter at one keyframe and set different values for the filter at another keyframe, and Animate creates a smooth transition.

Note

Filters can be applied, but not animated, in an HTML5 Canvas document.

Make sure that the actors layer folder on the timeline is visible.

Unlock the woman layer.

Move the playhead to the beginning keyframe of the motion tween in the woman layer, at frame 23.

Select the instance of the woman on the Stage. You won’t be able to see her because she has an alpha value of 0% (totally transparent). Click the upper-right side of the Stage to select the transparent instance. Or click frame 23 in the woman layer in the timeline to highlight it, then click the Object tab in the Properties panel.

In the Properties panel, click the Add Filter (+) button in the Filters section, and choose Blur from the menu to add a blur to the instance.

In the Filters section of the Properties panel, select the link icon to apply equal values to the x and y directions if it isn’t already selected. Set the Blur X value to 20 pixels.

The Blur Y value also changes to 20 pixels.

Move the playhead along the entire timeline to preview the animation.

The woman instance is blurred throughout the motion tween.

Select frame 140 in the woman layer and choose Insert Keyframe above the timeline.

Animate establishes a keyframe at frame 140.

Select frame 160 of the woman layer and choose Insert Keyframe above the timeline to add another keyframe.

Select the Object tab of the Properties panel.

In the Properties panel, change the value of the Blur filter to X=0 and Y=0.

Tip

Click the Enable or Disable Filter button in the Filters section of the Properties panel to toggle the visibility of the filter effect on your animation to make your work easier. The Enable or Disable Filter option doesn’t affect the final exported animation, however.

Tip

You can add more than one filter to an animation. Drag the filters to rearrange the order in which they appear in the Properties panel, or collapse each filter to save space in the panel.

The Blur filter changes from the keyframe at frame 140 to the keyframe at 160. Animate creates a smooth transition from a blurry instance to an in-focus instance.

Understanding property keyframes

Changes in properties are independent of one another and do not need to be tied to the same keyframes. That is, you can have a keyframe for position, a different keyframe for the color effect, and yet another keyframe for a filter. Managing many different kinds of keyframes can become overwhelming, especially if you want different properties to change at different times during the motion tween. Fortunately, Animate provides a few helpful tools for keyframe management.

When viewing the tween span, you can choose to view the keyframes of only certain properties. For example, you can choose to view only the Position keyframes so that you can see when your object moves. Or you can choose to view only the Filter keyframes so that you can see when a filter changes. Right-click a motion tween in the timeline, choose View Keyframes, and then choose the desired property from the list. You can also choose All or None to see all the properties or none of the properties.

When inserting a keyframe, you can also insert a keyframe specific to the property you want to change. Right-click a motion tween in the timeline, choose Insert Keyframe, and then select the desired property.

You can also view an advanced panel, called the Motion Editor, to see and edit how the different properties of your object change over the course of the motion tween. You’ll learn more about the Motion Editor in the next lesson.

Animating transformations

Now you’ll learn how to animate changes in scale or rotation. These kinds of changes are made with the Free Transform tool or with the Transform panel. You’ll add a third car to the project. The car will start small and then become larger as it appears to move forward toward the viewer.

Lock all the layers on the timeline.

Insert a new layer inside the cars folder, and rename it Left_car.

Select frame 75 and insert a new keyframe (F6 or Insert Keyframe button).

Drag the movie clip symbol called carLeft from the Library panel to the Stage at frame 75.

Select the Free Transform tool.

The transformation handles appear around the instance on the Stage.

While holding down the Shift key, drag a corner handle inward to make the car smaller.

In the Properties panel, make sure that the width of the graphic is about 400 pixels.

Alternatively, you can use the Transform panel (Window > Transform) and change the scale of the car to about 29.4%.

Move the car to its starting position at about X=710 and Y=488.

In the Properties panel, in the Color Effects section, choose Alpha from the Style menu.

Set the Alpha value to 0%.

The car becomes totally transparent.

Choose Create Motion Tween from the button above the timeline.

The current layer becomes a tween layer.

Move the playhead to frame 100.

Make sure the transparent instance of the car on the Stage is selected, and in the Properties panel, change the Alpha value to 100%.

A new keyframe is automatically inserted at frame 100 to indicate the change in transparency.

While holding down the Shift key, drag a corner handle outward to make the car larger. For more precision, use the Properties panel and set the dimensions of the car to width=1380 pixels and height=445.05 pixels.

Position the car at X=607 and Y=545.

You have used Animate to tween the change in position and the change in scale as well as the change in transparency from frame 75 to frame 100.

Move the Left_car layer in between the Middle_car and Right_car layers so that the car in the center overlaps the cars on the side.

Tip

Holding down the Option/Alt key while dragging one corner handle of the bounding box causes the box to resize relative to the opposite corner rather than relative to the object’s transformation point (usually the center).

Save your progress so far in this document, 03_workingcopy.fla.

Editing multiple frames

If you need to make the same change across multiple keyframes, you can use the Edit Multiple Frames option above the timeline. The option allows you to make edits that affect many keyframes in the same layer or even across many different layers.

For example, imagine that you liked the animation of the cars in this project, but you wanted to move the animation to a different location on the Stage. Instead of moving every instance at each keyframe of the animation, the Edit Multiple Frames option lets you do one move for all of them at once.

Moving the animation of the cars

You will move the animation of the cars so that they are centered on the Stage.

Lock all the layers except the layers in the cars folder.

Select and hold the Edit Multiple Frames option above the timeline and choose All Frames.

Brackets appear on the timeline indicating the span of frames that will be editable. The All Frames option automatically puts the brackets at the beginning and end to encompass all the frames of the timeline.

Choose Selected Range if you want to select only a span of frames. With the Selected Range option, you can move the beginning or end bracket.

Choose Edit > Select All (Command+A/Ctrl+A).

All the frames in the layers of the cars folder become selected.

While holding down the Shift key, drag the selected group of cars to the left of the Stage. Move the group so that they are generally centered on the Stage.

You are actually moving multiple instances in multiple keyframes across all three layers at the same time.

Deselect Edit Multiple Frames.

Scrub the timeline from frames 70 to 191.

The three cars remain animated with changes in size, color effect, and position, but they have been moved to the center of the Stage.

Save your work. In the next section, you’ll work with a different file.

Changing the path of the motion

The motion tween of the left car that you animated shows a colored line with dots indicating the path of the motion. You can easily edit the path of the motion to make the car travel in a curve, or you can move, scale, or rotate the path just like any other object on the Stage.

To better demonstrate how you can edit the path of the motion, open the sample file 03MotionPath.fla in the Lesson03/03Start folder. The file contains a single tween layer with a rocket ship moving from the top left of the Stage toward the bottom right.

Moving the path of the motion

You will move the path of the motion so that the relative movement of the rocket ship remains the same but its starting and ending positions change.

Select the Selection tool.

Click the path of the motion to select it.

The path of the motion becomes highlighted.

Drag the motion path to move it to a different place on the Stage.

The relative motion and timing of the animation remain the same, but the starting and ending positions are relocated.

Changing the scale or rotation of the path

You can also manipulate the path of the object’s motion using the Free Transform tool.

Select the path of the motion.

Select the Free Transform tool.

Transformation handles appear around the path of the motion.

Scale or rotate the path of the motion as desired. You can make the path smaller or larger or rotate the path so that the rocket ship starts from the bottom left of the Stage and ends at the top right.

Editing the path of the motion

Making your objects travel on a curved path is a simple matter. You can edit the path with Bezier precision using anchor point handles, or you can edit the path in a more intuitive manner with the Selection tool.

Select the Convert Anchor Point tool, which is hidden under the Pen tool.

Tip

You can also directly manipulate the path of the motion with the Selection tool. Select the Selection tool and make sure the path is deselected. Move your pointer close to the path of the motion. A curved icon appears next to your pointer, indicating that you can edit the path. Drag the path of the motion to change its curvature. Choose the spots where you drag carefully! Each drag breaks the path into smaller segments, making it harder to achieve a smooth curve. Mastery will come with practice.

Drag from the starting point and the ending point of the motion path on the Stage to pull control handles out from each anchor point.

The handles on the anchor points control the curvature of the path.

Select the Subselection tool.

Drag the handles at either end of the path to edit its curve. Make the rocket ship travel in a wide curve.

Orienting objects to the path

Sometimes the orientation of the object traveling along the path is important. In the motion picture promotional project, the orientation of the car is constant as it moves forward. However, in the rocket ship example, the rocket ship should follow the path with its nose pointed in the direction in which it is heading. Orient To Path in the Properties panel gives you this option.

Select the motion tween on the timeline (Shift-click to select the whole tween).

In the Properties panel, under the Tweening section, select the Orient To Path option.

Tip

To direct the nose of the rocket ship, or any other object, along the path of its motion, you must orient its position so that it is facing in the direction that you want it to travel. Use the Free Transform tool to rotate its initial position so that it is oriented correctly.

Animate inserts keyframes for rotation along the motion tween to orient the nose of the rocket ship to the path of the motion.

Swapping tween targets

The motion tween model in Animate is object based. This means that an object and its motion are independent of each other, and you can easily swap out the target of a motion tween. If, for example, you’d rather see an alien than a rocket ship moving around the Stage, you can replace the target of the motion tween with an alien symbol from your Library panel and still preserve the animation. This is especially useful when you want to work out the motion of a character before the design is final. You can create the animation with placeholder graphics and easily swap them in the end with the final versions.

Note

You can also use the Properties panel to swap instances. Select the object that you want to swap on the Stage. In the Properties panel, click the Swap button. In the dialog box that appears, choose a new symbol and click OK. Animate will swap the target of the motion tween.

Drag the movie clip symbol of the alien from the Library panel onto the rocket ship.

Animate asks if you want to replace the existing tween target object with a new object.

Click OK.

Animate replaces the rocket ship with the alien. The motion remains the same, but the target of the motion tween has changed.

Note

If your symbol instance disappears from view after the symbol swap, choose View > Magnification > Show All (Command+3/Ctrl+3) to change the zoom level to show all objects on the Stage.

Creating nested animations

Often, an object that is animated on the Stage will have its own internal animation. For example, the wings of a butterfly moving across the Stage may flap as the butterfly moves. Or the alien that you swapped with the rocket ship could be waving his arms. These kinds of animations are called nested animations because they are contained inside the movie clip symbols. Movie clip symbols have their own timeline that is independent of the main timeline.

In this example, you’ll give the alien his own independent movement so he can wave as he flies across the Stage.

Creating animations inside movie clip symbols

We’ll animate some of the symbols that make up the alien’s body to allow him to wave.

In the Library panel, double-click the alien movie clip symbol icon.

You are now in symbol-editing mode for the alien movie clip symbol. The alien appears in the middle of the Stage. In the timeline, the parts of the alien are separated in layers.

Select the Selection tool.

Select the alien’s left arm and choose Create Motion Tween.

Animate converts the current layer into a tween layer and inserts 1 second’s worth of frames so that you can begin to animate the instance.

Select the Free Transform tool.

Move the mouse pointer near the corner transformation handle until the pointer changes to the rotation icon. Drag the corner handle near the hand to rotate the arm upward to the alien’s shoulder height.

A keyframe is inserted at the end of the motion tween. The left arm rotates smoothly from the resting position to the outstretched position.

Move the playhead back to frame 1.

Create a motion tween for the alien’s other arm. Select his right arm and choose Create Motion Tween.

Animate converts the current layer into a tween layer and inserts 1 second’s worth of frames.

Select the Free Transform tool if it’s not selected already.

As you did for the left arm, drag the corner transformation handle near the right hand to rotate the arm upward to the alien’s shoulder height.

Animate inserts a keyframe at the end of the motion tween. The arm rotates smoothly from the resting position to the outstretched position.

Select the last frame in all the other layers and insert frames (F5) so that the head, body, and feet all remain on the Stage for the same amount of time as the moving arms.

Note

Animations inside movie clip symbols won’t play on the main timeline. Choose Control > Test to preview nested animations, or use the Test Movie button at the upper-right corner of the interface.

Click the Scene 1 button in the Edit bar at the top of the Stage to exit symbol-editing mode.

Your animation of the alien raising his arms is complete. Wherever you use the movie clip symbol, the alien’s nested animation will continue to play.

Preview the animation by choosing Control > Test, or use the Test Movie button in the upper-right corner of the Animate interface.

Note

Animations inside movie clip symbols will loop automatically. To prevent the looping, you need to add code to tell the movie clip timeline to stop on its last frame. You’ll learn to control those timelines with ActionScript or JavaScript in later lessons.

Animate opens a window showing the exported animation. The alien moves along the motion path while the nested animation of his arms moving plays and loops.

Save your project and close it. You’ll return to your previous animation in the next section.

Tip

Quickly build nested animations with a workflow shortcut, Convert Layers To Symbols. If you have an animation on the main timeline, simply select the layers, right-click, and choose Convert Layers To Symbol. Animate will put the selected layers into a symbol of your choosing and leave an instance of the symbol on the Stage.

Easing

Easing refers to the way in which a motion tween proceeds. You can think of easing for changes in position as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, build up speed, and then stop suddenly. Or the object can start off quickly and then gradually slow to a halt. Your keyframes indicate the beginning and end points of the motion, but the easing determines how your object gets from one keyframe to the next.

A simple way to apply easing to a motion tween is to use the Properties panel. Easing values range from −100 to 100. A negative value creates a more gradual change from the starting position (known as an ease-in). A positive value creates a gradual slowdown (known as an ease-out).

A more advanced way of applying eases to a motion tween is to use the Motion Editor, which you’ll learn about in the next lesson.

Splitting a motion tween

Easing affects the entire span of a motion tween. If you want the easing to affect only frames between keyframes of a longer motion tween, you should split the motion tween. For example, return to the 03_workingcopy.fla file of the cinematic animation. The motion tween of the car in the Left_car layer begins at frame 75 and ends at frame 191, at the very end of the timeline. However, the actual movement of the car starts at frame 75 and ends at frame 100. You’ll split the motion tween so that you can apply an ease to the tween just from frame 75 to frame 100.

In the Left_car layer, select frame 101, which is the frame just after the second keyframe, where the car ends its movement.

Right-click frame 101 and choose Split Motion.

The motion tween is cut into two separate tween spans. The end of the first tween is identical to the beginning of the second tween.

In the Middle_car layer, select frame 94, right-click, and choose Split Motion to cut the motion tween into two separate tween spans.

In the Right_car layer, select frame 107, right-click, and choose Split Motion to cut the motion tween into two spans.

The motion tweens of all three cars have now been split.

Applying eases to motion tweens

You’ll apply an ease-in to the motion tweens of the approaching cars to give them a sense of weight and to make them decelerate, as real cars would.

In the Middle_car layer, select any frame between the first and second keyframes of the first motion tween (frame 70 to frame 93).

In the Tweening section of the Properties panel, enter 100 for the Ease value.

This applies an ease-out to the motion tween.

In the Left_car layer, select any frame between the first and second keyframes of the first motion tween (frame 75 to frame 100).

In the Properties panel, enter 100 for the Ease value to apply an ease-out to the motion tween.

In the Right_car layer, select any frame between the first and second keyframes of the first motion tween (frame 78 to frame 106).

In the Properties panel, enter 100 for the Ease value to apply an ease-out to the motion tween.

Select Loop at the top of the Timeline panel and move the start and end markers in the timeline header to frames 60 and 115, respectively.

Click Play (Return/Enter).

Animate plays the timeline in a loop between frames 60 and 115 so that you can examine the ease-out motion of the three cars. The three cars slow down as they approach their final keyframes, giving them a sense of weight and realism.

Frame-by-frame animation

Frame-by-frame animation is a technique that creates the illusion of movement by making incremental changes between every keyframe. Frame-by-frame animation in Animate is similar to traditional hand-drawn cel animation, where each drawing is on a separate sheet of paper. It’s also just as tedious, but the results can be very creative.

Frame-by-frame animations increase your file size rapidly because Animate has to store the contents for each keyframe. Use frame-by-frame animation sparingly.

In the next section, you’ll insert a frame-by-frame animation inside the carLeft movie clip symbol to make it move up and down in a jittery fashion. When the movie clip loops, the car will rumble slightly to simulate the idle of the motor.

Inserting a new keyframe

The frame-by-frame animations inside the carMiddle and carRight movie clip symbols have already been done. You’ll finish the animation for the carLeft symbol.

In the Library panel, double-click the carRight movie clip symbol to examine its completed frame-by-frame animation.

Inside the carRight movie clip, three keyframes establish three different positions for the car and its headlights. The keyframes are spaced unevenly to provide the unpredictable up and down motion.

In the Library panel, double-click the carLeft movie clip symbol.

You enter symbol-editing mode for the carLeft symbol.

Select frame 2 in both the lights layer and the smallRumble layer.

Choose Insert Keyframe (or F6).

Animate inserts a keyframe in frame 2 of the lights layer and the smallRumble layer. The contents of the previous keyframes are copied into the new keyframes.

Tip

If the image of the car isn’t visible, select Fit In Window from the Zoom menu in the upper-right corner of the Stage.

Changing the graphics

In the new keyframe, change the appearance of the contents to create the animation.

In frame 2, select all three graphics (the car and its two headlights) on the Stage (Edit > Select All, or Command+A/Ctrl+A) and move them down the Stage by 1 pixel. Use the Properties panel to decrease the Y-position value by 1 pixel, or press the Down Arrow key to nudge the graphics by 1 pixel.

The car and its headlights move down slightly.

Repeat the process of inserting keyframes and changing the graphics. For a random motion like an idling car, using at least three keyframes is ideal.

Select frame 4 in both the lights layer and the smallRumble layer.

Choose Insert Keyframe (or F6).

Keyframes are inserted into frame 4 of the lights and smallRumble layers. The contents of the previous keyframes are copied into the new keyframes.

Select all three graphics on the Stage (Edit > Select All, or Command+A/Ctrl+A) and move them up the Stage by 2 pixels. You can use the Properties panel or press the Up Arrow key twice to nudge the graphics by 2 pixels.

The car and its headlights move up slightly.

You now have three keyframes for both layers inside the movie clip.

Tip

You can navigate quickly between multiple keyframes by choosing Control > Step Forward To Next Keyframe (Alt/Option+.) or Control > Step Backward To Previous Keyframe (Alt/Option+,). You can also click the forward-pointing or backward-pointing arrow to the left of the playback controls at the top of the Timeline panel to move to the next or previous keyframe, respectively.

Note

In this section, you created the car’s idling motion by manually moving the car’s position frame by frame. In the next lesson, you’ll learn to use the Refine Motion Tween panel, which can automatically modify your motion tween to simulate natural movements such as bounces or random jitters (as in the idling of a car).

Test the idling motion by enabling the Loop option at the top of the Timeline panel and clicking Play (Return/Enter). Choose Control > Test to preview the entire animation.

Animating 3D motion

Finally, you’ll add a title and animate it in 3D space. Animating in 3D presents the added complication of a third axis (z). When you choose the 3D Rotation or 3D Translation tool, you need to be aware of the Global Transform option at the bottom of the Tools panel (see the sidebar “Global vs. local transformations”). Global Transform toggles between a Global option (when you select the button) and a Local option (when you deselect the button). Moving an object in Global mode makes the transformation relative to the global coordinate system, whereas moving an object in Local mode makes the transformation relative to itself.

Global vs. local transformations

When you select the 3D Rotation or 3D Translation tool, be aware of the Global Transform toggle button found at the bottom of the Tools panel when one of the 3D tools is selected. When the button is toggled on (and highlighted), Global mode is engaged and the rotation and positioning of 3D objects are relative to the global, or Stage, coordinate system. The 3D display over the object that you’re moving shows the three axes in constant position, no matter how the object is rotated or moved. Notice in the following image how the 3D display is perpendicular to the Stage.

However, when the Global Transform option is turned off (the button is not highlighted), Local mode is in force and rotation and positioning are relative to the object. The 3D display shows the three axes oriented relative to the object, not to the Stage. For example, in the following image, notice that the 3D Rotation tool shows the rotation relative to the object, not to the Stage.

Click Scene 1 in the Edit bar to return to the main timeline. Insert a new layer at the top of the layer stack and rename it title.

Lock all the other layers.

Insert a new keyframe at frame 120.

Drag the movie clip symbol called movietitle from the Library panel onto the Stage.

The movietitle instance appears in your new layer in the keyframe at frame 120.

Position the title in the empty sky at X=180 and Y=90.

With the movie title selected, choose Create Motion Tween.

Animate converts the current layer to a tween layer so that you can begin to animate the instance.

Move the playhead to frame 140.

Select the 3D Rotation tool. The 3D Rotation tool is hidden in the additional tear-off tools at the bottom of the Toolbar (you’ll have to add it to your Toolbar to use it).

The 3D rotation control appears on the selected movie clip.

Deselect the Global Transform button at the bottom of the Tools panel to put the 3D Rotation tool into Local mode.

Drag the left arm of the green Y control to rotate the title around the y axis to angle it so that it seems to recede into the distance. Its angle is at about −50 degrees. You can check the rotation values in the Transform panel (Window > Transform).

Move the playhead to the first keyframe, at frame 120.

Drag upward on the right arm of the Y control to rotate the title around the y axis in the opposite direction so that the instance looks like just a sliver.

Note

Animating the 3D rotation or translation of a symbol is not currently supported in HTML5 Canvas documents.

The change in the 3D rotation becomes a motion tween, so the title appears to swing in three dimensions.

Exporting your final movie

You can quickly preview your animation by “scrubbing” the playhead back and forth on the timeline, by choosing Control > Play, or by using the Time Scrub tool from the Tools panel. You can also use the integrated controller at the top of the Timeline panel. But to create your final project as a movie, you must export it.

Use the Quick Share And Publish option to create an MP4 movie file. Your animation is converted in Adobe Media Encoder, a freestanding application that is part of Adobe Creative Cloud (you’ll learn more about Media Encoder in the Bonus Lesson in the Web edition of this book).

Choose Quick Share And Publish > Publish > Video (.mp4). Click Publish.

Adobe Media Encoder automatically launches, and your project is exported and added to the Queue panel for processing.

The encoding process will begin automatically. If it doesn’t, click the Start Queue button (the green triangle) or press Return/Enter to begin the encoding process.

Media Encoder converts your project file into an H.264-formatted video with the standard .mp4 extension and notifies you when the process is finished.

Congratulations—you’re done! The final file can be uploaded to your favorite video-sharing sites or put up on a promotional website for the fictional cinematic release.

Note

You can also publish an MP4 movie by choosing File > Export > Export Video/Media. If you choose this route, you will have an opportunity to tinker with the options in Adobe Media Encoder and change audio/video encodings, cropping, trimming, and other properties of your video.

Review questions

1 What are two requirements of a motion tween?

2 What kinds of properties can a motion tween change in an ActionScript 3.0 document?

3 What are property keyframes, and why are they important?

4 How can you edit the path of an object’s motion?

5 What does easing do to a motion tween?

Review answers

1 A motion tween requires a symbol instance on the Stage and its own layer, which is called a tween layer. No other tween or drawing object can exist on the tween layer.

2 A motion tween creates between different keyframes smooth transitions of an object’s location, scale, rotation, transparency, brightness, tint, filter values, or 3D rotation or translation.

3 A keyframe marks a change in one or more properties of an object. Keyframes are specific to each property, so a motion tween can have keyframes for position that are different from keyframes for transparency.

4 To edit the path of an object’s motion, choose the Selection tool and drag directly on the path to bend it. You can also choose the Convert Anchor Point tool and Subselection tool to pull out handles at the anchor points. The handles control the curvature of the path.

5 Easing changes the rate of change in a motion tween. Without easing, a motion tween proceeds linearly, where the same amount of change happens over time. An ease-in makes an object begin its animation slowly, and an ease-out makes an object end its animation slowly.

4. Advanced Motion Tweening

Lesson overview

In this lesson, you’ll learn how to do the following:

Use the Motion Editor to refine and create complex motion tweens.

Understand when to use the Motion Editor.

Change the Motion Editor view.

Edit a property curve.

Copy and paste a property curve.

Use eases to create more realistic motion.

Add different eases to individual property curves.

Modify or remove an ease.

Understand the difference between a property curve and an ease curve.

This lesson will take about 1 hour to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

The advanced Motion Editor in Adobe Animate makes creating complicated animation with motion tweens fast and easy. Use the Motion Editor to view how the properties of your motion tween change over time, and apply eases for sophisticated effects.

Getting started

Start by viewing the finished movie file to see the animated infographic that you’ll create in this lesson.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 04End.html file in the Lesson04/04End folder to play the animation in a browser.

The project is a short, animated infographic illustrating the idea of China as an emerging economic threat to the highest-traded currencies in the world. The animation is something you might see accompanying a story in the business and economy section of a news site. In the animation, blocks with the American, European Union, and Japanese flags, representing the Dollar, the Euro, and the Yen, respectively, stack themselves up. A moment later, a large hand with the Chinese flag bumps the stack, sending them tumbling down. In this lesson, you’ll use the Motion Editor to make refinements in the motion tweening of the blocks, including the bouncing movements as they fall.

Close the 04End.html file.

Double-click the 04Start.fla file in the Lesson04/04Start folder to open the initial project file in Animate. This file is an HTML5 Canvas document that already contains all the graphics created for you, with movie clip symbols saved in the library. Each of the graphics has its own layer, and instances of the symbols have been placed on the Stage in their initial positions.

Choose View > Magnification > Clip To Stage to deselect the option (or deselect the Clip Content Outside The Stage button above the Stage) to enable the pasteboard so that you can see all the graphics positioned just off the Stage.

Choose File > Save As. Name the file 04_workingcopy.fla, and save it in the 04Start folder.

Saving a working copy ensures that the original start file will be available if you want to start over.

About the Motion Editor

You don’t have to use the Motion Editor at all to create your animations. However, if you’re dealing with a motion tween that contains multiple properties that change at different times through the animation (for example, a rocket that fades and rotates at the same time as it moves across the Stage), or if you’re handling animation that mimics real-world physics (like bounces and springs), then the Motion Editor can make your task much simpler.

The Motion Editor is an advanced panel that is integrated into the timeline and accessible only when editing a motion tween. The panel shows you how the properties of your animation change over the course of the tween as lines on a graph. It takes some time to become familiar with the meaning of the lines and how the curves translate to visual changes on the Stage. But once you recognize how the curves reflect changes in your animation, you have a powerful tool at your disposal. You can modify the curves on the graph, called property curves, by adding or deleting anchor points, and change their curvature with Bezier precision. You can copy property curves and apply them to other properties or other motion tweens.

Note

The Motion Editor is available only for motion tweens (and not classic tweens, shape tweens, inverse kinematics with the Bone tool, or frame-by-frame animations).

The Motion Editor also allows you to apply sophisticated eases to your animation similar to the easing options in the Properties panel. However, the Motion Editor visually shows you how your ease affects a property curve. You can even apply different eases to the curves for each of the properties of a tween.

Understanding the project file

The 04Start.fla file has five layers. The background layer contains background elements that will not be animated. The China layer contains the movie clip instance of the hand and Chinese flag representing China. Each of the middle three layers (US, Euro, and Yen) contains a corresponding movie clip instance of a block representing those currencies.

The Stage is set at 500 pixels by 600 pixels, and the color of the Stage is gray.

For this lesson, you’ll add motion tweens in the top four layers and refine the movements of the blocks with the Motion Editor.

Adding motion tweens

You’ll start this project by animating the three boxes representing the US Dollar, the Euro, and the Japanese Yen. The three boxes will start below the Stage and rise up.

Select all three blocks (the ones with the US flag, the European Union flag, and the Japanese flag).

Right-click the multiple selection and choose Create Motion Tween.

Animate creates motion tweens for all three movie clip instances and extends the timeline for those three layers to frame 24, representing 1 second of time.

Move the blue playhead to frame 24.

Add additional frames to the other two layers so they extend to frame 24.

Select all three blocks and, while holding down the Shift key, move them up onto the Stage. Drag the blocks high enough onto the Stage so that they’ll have room to fall down and tumble over. The Yen block should be positioned at about Y=160.

Ending keyframes are added to all three instances.

Press Return/Enter to preview your animation.

The three blocks move upward onto the Stage, sticking together.

Editing property curves

The motion tween of the three blocks positions them on the Stage for the viewer to see, but the movement is sluggish and not very interesting. To create a more dynamic animation that gives some life and snappiness to the blocks, you’ll modify the curve for their Y-properties in the Motion Editor.

Double-click the motion tween in the US layer on the timeline, or right-click and choose Refine Motion Tween.

The motion tween expands to reveal the Motion Editor panel. The Motion Editor contains two straight red lines. One represents the change in the X-position, and the other represents the change in the Y-position. For both properties, the horizontal axis represents time; the vertical lines correspond to the selected property values (in this case, they are the X and Y position in pixels). Both the X- and Y-properties are grouped under the Location property group.

Click the disclosure triangle next to Location (if it is not opened) to reveal the properties it contains, and then click the X-property to select it.

The horizontal red line becomes bold, and the downward diagonal line fades. The horizontal red line represents the value of the block’s X-position, which remains unchanged over the span of the motion tween. Note that the scale on the vertical axis of the graph is limited to a range from 238 to 240.

Now, select the Y-property.

The downward diagonal line becomes bold, and the horizontal line fades. The diagonal line represents the value of the block’s Y-position, which decreases over the course of the tween (the block moves upward on the Stage). Because of the change in Y-property values, the vertical scale now expands to encompass a wider range.

Understanding the Motion Editor values

The vertical axis of the Motion Editor represents the values of the selected property measured in pixels. For example, when you select the Y-property, Animate shows the value (in pixels) of the Y-position of the motion tween.

The initial value of the curve appears to be greater than 560, and the final value of the curve appears to be about 200. However, those values don’t seem to match the initial Y values when you look at the position of the US movie clip in the Properties panel. Why the discrepancy?

The Motion Editor measures from the transformation point of your object. Since the transformation point of your object is in the center, the Motion Editor vertical values show the Y-property values as the initial position plus half of the movie clip’s height.

Adding anchor points

You want to create a nonlinear property curve for the first block that moves on the Stage—that is, you want the block to move a different distance during each interval of time. An object on a linear property curve moves the same distance during each interval of time, which is represented by a straight line in the Motion Editor. A nonlinear path is curved.

To change the shape of the property curve, you add anchor points. At each anchor point you can change the curvature or direction of the curve.

Select Add Anchor Point On Graph at the bottom of the Motion Editor.

Make sure the Y-property curve is still selected, and move your mouse pointer over the property curve.

Your cursor changes to the Pen tool icon with a plus sign, indicating that you can add an anchor point to the curve.

Use your mouse to drag the curve downward at frame 21, and release the mouse button when the anchor point is at about the 200-pixel mark (the graph will scroll to follow your pointer).

This adds a new anchor point to the curve, and a new keyframe is added at frame 21.

The added anchor point allows you to change the motion of your animation. The new curve overshoots the final Y value of the motion tween just before the final keyframe. The resulting motion makes the movie clip move rapidly up then fall back to its final Y-position value. You can see the motion by pressing the Return/Enter key.

Tip

Remember that you can turn off the visibility of the other layers to make it easier to focus on just the motion of the US block.

Select Add Anchor Point On Graph again.

Add a new anchor point at frame 5 and drag it to the right to about frame 8.

Adding another anchor point to the graph also adds a new keyframe to the motion tween. The new curve looks like a broad, lazy “S” shape, with a smooth flattened slope at the beginning, a steep section in the middle, and the bump at the end.

Tip

You can also double-click a location on a property curve to add a new anchor point.

Test your new motion by pressing Return/Enter.

Your playhead moves through the motion tween. Your new curve makes your movie clip slowly accelerate into its motion, rapidly shoot past its destination, and then fall back to its ending value.

Changing the curvature

Each new anchor point comes with direction handles on either side that allow you to change the curvature at that point. The anchor points and direction handles work just like the ones created by the Pen tool when drawing paths.

Click the anchor point on the Y-property curve at the keyframe at frame 21.

The direction handles at the selected anchor point appear.

Move the anchor point downward until the Y value reaches about 150. Drag the left handle downward so that the direction handles are horizontal.

The property curve flattens out at frame 21, which makes the movie clip remain at that Y-position for just a split second before moving again. That slight hang time gives the movie clip a more realistic physics-based motion, just as a ball that you throw up in the air stays still for a moment before falling back to the ground.

Test your new motion by pressing Return/Enter.

Your playhead moves through the motion tween. Your new curve makes the motion of your movie clip more realistic.

Note

Some anchor points (for example, the first and last anchor points of a property curve) do not have direction handles by default. Select the anchor point you want to add direction handles to, and then hold down the Option/Alt key, pull out a direction handle, and edit the curvature.

Moving anchor points

You can move any anchor point, including the ones at the first and last keyframes, to new property values along the vertical axis. You can also move any of the anchor points (except the first one) to new times along the motion tween. In effect, when you move anchor points to new times, you move the keyframes within the tween span.

Tip

Option/Alt-click an anchor point to remove its direction handles, converting it to a corner point without smooth curves.

Tip

Hold down Option/Alt as you move a direction handle of an anchor point to change the angle of that direction handle independently of the other handle. You can adjust the length of each direction handle without holding Option/Alt. If you adjust the length or angle of one side of a direction handle independently of the other, you can create more dramatic changes to the property curve.

Select the anchor point at frame 8.

The handle bars at the selected anchor point appear.

Drag the anchor point slightly to the right.

The keyframe at frame 8 has now moved a few frames over, to frame 10. The property curve flattens out even more, creating a more extended ease-in effect.

Test your new motion by pressing Return/Enter.

The final motion is more interesting than a linear one, with your motion tween rising up and falling back down as if somebody had tossed it up in the air.

Tip

Hold down Shift to constrain the dragging motion to a vertical or horizontal direction.

Deleting anchor points

If you’ve added too many anchor points, you can always remove them (except for the first and last anchor points). Removing an anchor point has the same effect as removing a keyframe of the motion tween.

Tip

You can use the arrow keys to nudge a selected anchor point for precise control. Press the Up or Down Arrow key to move the anchor point 1 property unit up or down, or Shift-Up or Shift-Down to move the anchor point 10 property units up or down.

Hold down the Command/Ctrl key.

Your cursor turns into the Pen icon with a minus sign when you hover over any anchor point. Click any anchor point (except the first or last).

Animate removes the anchor point from the property curve. Do not remove any anchor points from your project at this point in the lesson. If you do so inadvertently, press Command+Z/Ctrl+Z to undo the operation.

Deleting property curves

If you want to delete a curve, click Remove Tween For Selected Property (the trash can icon) at the bottom of the Motion Editor to delete a tween for a selected property curve.

At the moment, your animation has a tween for only one property—the Y-property—so deleting the curve would remove the property changes in your tween. Use the Remove Tween option if you want to delete the animation of a particular property when you have multiple properties changing.

Viewing options for the Motion Editor

Animate provides different viewing options for the Motion Editor so you can refine your property curves with greater accuracy.

Note

You can enter a custom magnification level for the Motion Editor, but the minimum value is 100% and the maximum value is 400%.

Tip

You can also hold down the Command/Ctrl key and scroll inside the Motion Editor to change the magnification.

Use the menu at the bottom of the Motion Editor to change the zoom level.

The vertical axis expands to show a more granular level of property values. Scroll up or down to see the top or bottom of the curve.

Click Zoom 100% to reset the Motion Editor to its default view.

Click Fit To View to expand the Motion Editor to fill the existing space on the timeline. Click the icon again (its name is now Restore View) to return to the default view.

Copying and pasting curves

You’ve spent a lot of effort creating a custom property curve for the motion of the first movie clip. Fortunately, you don’t have to work through the same steps for the other movie clips. Animate provides quick and easy ways to duplicate individual property curves or entire motion tweens.

In the following section, you’ll duplicate the motion of the US block to the European Union and Japanese blocks.

In the Motion Editor of the motion tween for the US movie clip, select the Y-property under Location.

Right-click the Y-property curve and choose Copy.

Animate copies the curve for the Y-property.

Double-click the motion tween in the Euro layer.

The Motion Editor in the US layer collapses, and the Motion Editor in the Euro layer expands. Both the X-property and Y-property curves of the motion tween in the Euro layer are straight, each representing linear motion.

Select the Y-property under Location.

Right-click the Y-property curve and choose Paste To Fit Current Range.

The property curve data copied from the US clip is applied to the Euro clip, but it is adjusted to fit the range of Y-position values for the Euro clip’s motion.

The final pasted curve has the correct shape and anchor point curvatures, but it is squeezed to fit the beginning and ending points of the Euro motion tween. That means its ending point is lower on the Stage than you want.

Hold down the Shift key and drag the final anchor point down so that its property value is identical to the previous anchor point. (The final anchor point should be at a point where the Euro block sits immediately under the US block with no space between them.)

Hold down the Shift key and drag the anchor point at frame 21 to about Y=200 in the Motion Editor to re-create the gentle slope in the original curve.

Tip

In the Motion Editor, you can use Command+C/Ctrl+C to copy a selected property curve and Command+V/Ctrl+V to paste a curve.

Test your new motion by pressing Return/Enter.

Both the US and the European Union blocks slowly ease in to their motion, fly up high, and then settle back down in the middle of the Stage.

Paste vs. Paste To Fit Current Range

When you paste a copied property curve, you have the choice between two commands: Paste and Paste To Fit Current Range. In the previous task, you used Paste To Fit Current Range, which mapped the beginning and end points of the copied curve onto the beginning and end points of its destination.

The simple Paste command will paste the exact property curve—both the shape of the curve and its original values. If you were to choose Paste for your Euro movie clip property curve, it would follow the exact motion on the y axis as the copied curve (the US motion tween). The end result would be the Euro movie clip hiding under the US movie clip.

Duplicating entire motion tweens

Copying and pasting individual curves in the Motion Editor allows you to duplicate the animation of individual properties. For example, you could duplicate the Y-motion of a tween, but not its rotation.

In this project, since you want to duplicate the motion tween of blocks you’ve already finished (which consists of change only along the Y-property), you can use the commands Edit > Timeline > Copy Motion and Edit > Timeline > Paste Motion.

You’ll use Copy Motion and Paste Motion to copy the motion tween of the European Union movie clip and paste it into the Yen movie clip.

Double-click the motion tween in the Euro layer to collapse the Motion Editor.

Shift-click the motion tween in the Euro layer.

The entire motion tween span is selected.

Right-click and choose Copy Motion, or choose Edit > Timeline > Copy Motion.

The entire Euro layer motion tween is copied.

Shift-click to select the motion tween in the Yen layer.

Right-click and choose Paste Motion, or choose Edit > Timeline > Paste Motion.

The property curves of the Yen motion tween now are identical to that of the Euro motion tween, with different beginning and ending values. Paste Motion duplicates the copied tween but applies it to the object’s starting position.

If you want to refine the motion of the Yen block further, open its Motion Editor. Select the Y-position property and lower the height to which it rises (by dragging the anchor point in frame 21 up slightly) before falling back down. Doing so will create a slight separation between the Yen block and the Euro block. Make minor adjustments to the positions of the property curve keyframes until you’re satisfied with the overall motion.

Wrap things up by closing the Motion Editor.

Adding complex eases

Now that your three blocks representing the US, European Union, and Japanese currencies are animated, it’s time to animate the hand that pushes them. The hand will move horizontally onto the Stage and give the stack of blocks a shove, sending them toppling.

The motion of the hand easing into the Stage and the toppling motion can be quite complex. As the blocks topple, they bounce up and down, decreasing in height after each bounce. The Motion Editor, fortunately, makes much of the motion quick and easy to edit.

Adding the next motion tween

The next motion tween will be applied to the hand of China. The movie clip is positioned just off the left of the Stage, in the layer called China.

Select frame 90 for all the layers, and press F5 (Insert > Timeline > Frame).

Animate adds frames to all the layers up to frame 90. This establishes the span of time for the hand to enter and knock over the blocks.

Select frame 40 in the China layer and insert a new keyframe (F6) to define the moment when the hand starts to move.

The movie clip instance from the previous keyframe is copied into the new keyframe.

Right-click the China movie clip instance just off the Stage and choose Create Motion Tween.

Move the playhead to frame 55, the point where we want the hand to make contact with the blocks.

Move the hand straight across the Stage so that its palm butts up against the stack of blocks. (Use the Right Arrow key to keep the movie clip’s motion restricted to a horizontal direction.) The X-position of the instance should be at about 2. Make sure that the Y-position remains at Y=210 in the ending keyframe, as in the beginning keyframe.

The China movie clip instance is now animated, and it moves straight across the Stage from left to right and stops at frame 55. The movie clip stays at its ending position from frame 55 to frame 90.

Select frame 56 of the China layer.

Right-click and choose Split Motion.

The motion tween in the China layer is split into two motion tweens—one that begins at frame 40 and another that begins at frame 56.

At frame 56, right-click and choose Remove Motion Tween.

The motion tween at frame 56 is deleted, leaving the movie clip instance as a static graphic from frame 56 to the last frame of the animation. The motion tween from frame 40 to frame 56 is now ready for an ease.

Adding an ease-in

The Motion Editor provides a host of different ease types that can give a simple motion, like the China movie clip’s shove, a more interesting effect.

Double-click the motion tween in the China layer, or right-click and choose Refine Motion Tween.

The Motion Editor opens to reveal property curves for both the X- and Y-properties. The X-property curve is angled upward, whereas the Y-property curve is relatively flat.

Select the X-property curve.

Click the Add Ease button at the bottom of the Motion Editor.

The Ease panel opens, listing the different ease presets grouped by category, from No Ease at the top to Custom at the bottom. The different ease presets change the way the motion tween proceeds from the first keyframe to the last.

Tip

You can use the Up, Down, Left, and Right Arrow keys to navigate the ease types in the Ease panel of the Motion Editor.

Note

After you’ve chosen an ease preset, the label on the Add Ease button changes to the name of the preset.

Double-click the Simple category.

The category opens, revealing Slow, Medium, Fast, and Fastest presets. The eases in the Simple category affect one side of the motion tween (either the beginning or the end). The eases in the Stop and Start categories affect both sides of the motion tween. The eases in the other categories are more complex ease types.

Select the Fast ease preset.

The Fast ease curve is displayed, showing graphically the intensity of the ease. Slower eases are fairly shallow and closer to a straight line, whereas faster eases have progressively greater curvature.

Double-click the Easing value and change it to −60; then press Tab or Return/Enter to exit the entry field and confirm the value. You can also drag on the Easing value to change it (drag left or down to decrease the value; drag right or up to increase it).

The Easing value determines the strength of the ease for each ease preset and the direction of the ease. A positive number represents an ease-out, and a negative number represents an ease-in.

Click off the Ease panel to dismiss it, or press the Esc key.

A dotted line appears in the Motion Editor superimposed on the original property curve. This is the “resultant curve” because it shows the effect of the ease on the tween.

Close the Motion Editor and test your new motion by pressing Return/Enter.

The motion tween of the China block proceeds slowly, gaining momentum until it finally collides with the stack of smaller blocks in the middle of the Stage.

If the motion tween is selected, its motion tween path on the Stage shows the position of the instance at each frame. The clustering of the dots on the left side of the tween path means that the object doesn’t move very far in the beginning of its motion but gradually speeds up.

Removing an ease

Eases can be deleted as quickly as you’ve added them.

Double-click the motion tween in the China layer, or right-click and choose Refine Tween.

Click the Ease button at the bottom of the Motion Editor, which now bears the label Simple (Fast).

Animate opens the Ease panel, displaying the currently selected ease.

Select No Ease to remove the ease preset, and press Esc to close the Ease panel.

Press Command+Z/Ctrl+Z to undo the removal of the ease. You’ll keep the ease in place for this project.

Double-click the China motion tween to close the Motion Editor.

Property curves vs. ease curves

When you apply an ease to a motion tween with the Motion Editor, the original property curve is not altered permanently. In the first section of this lesson, you altered the property curves of a motion tween directly by adding anchor points and changing its curvature. Applying eases is akin to applying a filter that influences the outcome of an original property. Like a filter, the ease can be edited or removed altogether.

It is possible to both modify a property curve and add an ease, but the combined result can be unpredictable.

Animating bounces

As soon as the hand graphic hits the stack of blocks, you’ll want to animate the blocks tumbling down. You’ll create a motion tween with multiple complex eases to create the bouncing effect.

Drag to select frame 55 in the US, Euro, and Yen layers. (If you are using span-based selection, hold down Command/Ctrl while you drag.)

Right-click and choose Split Motion.

New motion tweens begin at frame 55 in all three layers.

Move the playhead to frame 90.

Move the US movie clip instance to the right of the bottom of the Stage at X=500 and Y=530.

Using the Free Transform tool, rotate it 180 degrees clockwise so that it appears upside down.

Move the Euro movie clip instance to the bottom just off the Stage in the same manner and use the Free Transform tool to rotate it 90 degrees clockwise. You may have to hide the US layer above it so that you can grab the Euro graphic.

Move the Yen movie clip instance to the bottom just off the Stage and use the Free Transform tool to rotate it 180 degrees clockwise. Hide the Euro layer so that the Yen graphic is easier to work with.

Test your new motion by pressing Return/Enter. The three blocks fall gracefully in a diagonal direction, rotating as they fall. You’ll want a more violent, realistic tumble, so the next step is to add some eases.

Using the BounceIn ease

One of the presets in the Ease panel is BounceIn, which simulates a bouncing motion. The distance to the final property value gradually decreases as the motion tween approaches its ending keyframe.

Double-click the last motion tween in the US layer to open the Motion Editor.

Animate expands the motion tween in the US layer, revealing the Motion Editor panel. The Motion Editor contains property curves for both the X- and Y-properties for Location as well as the Z-property for Transform > Rotation.

Select the Y-property under Location.

Click Add Ease at the bottom of the Motion Editor to open the Ease panel.

Double-click the Bounce And Spring category to reveal the presets within.

Select the BounceIn ease preset and enter 5 for the Easing value.

The BounceIn ease simulates a bounce that slowly decays as the motion tween approaches its end. The Easing value for the BounceIn ease determines the number of bounces.

Press Tab to confirm the Easing value and press Esc to close the Ease panel.

Test your new motion by pressing Return/Enter.

The US instance bounces (only in the Y-direction) as it falls to the ground. Note the path of the bounce on the Stage defined by the dots.

Collapse the Motion Editor for the US layer, and expand the Motion Editor for the Euro layer.

Apply a BounceIn ease to the Euro instance, and change the Easing value to 4 if it’s not set to 4 already.

Collapse the Motion Editor for the Euro layer, and expand the Motion Editor for the Yen layer.

Apply a BounceIn ease to the Yen instance, and change the Easing value to 3.

Test your new motion by pressing Return/Enter.

Note

If you’re encountering strange, unpredictable behaviors, check to make sure that you’ve applied the BounceIn ease only to the Y-property curve. You want the bouncing motion to affect only the vertical motion and not the horizontal motion or the rotation. When the three blocks fall, each tumbles with a different number of bounces. The top block bounces the most with five bounces, the middle bounces four times, and the bottom block bounces three times.

Applying a second ease to a different property curve

The Motion Editor is powerful because it enables you to treat each property curve of one motion tween independently. For example, you can apply one ease for the Y-property and a different ease for the X-property. This is exactly what you’ll do next. You’ll add an ease-out for the horizontal motion of each instance, while maintaining the BounceIn ease for the vertical motion.

Expand the Motion Editor for the US layer.

Select the X-property under Location.

Click Add Ease at the bottom of the Motion Editor to open the Ease panel.

Double-click the Simple category.

Select the Fast ease preset and enter 50 for the Easing value if it’s not set to 50 already.

The Easing value of 50 represents a strong ease-out motion.

Apply Fast eases with an Easing value of 50 for the X-property curves of the other two motion tweens (the Euro and the Yen instances).

Test your new motion by pressing Return/Enter.

As the three blocks bounce to the ground in the Y-direction, their forward momentum gradually slows down, creating a more realistic animation in the X-direction.

Review questions

1 How do you access the Motion Editor for a motion tween?

2 What’s the difference between a property curve and an ease curve?

3 What does the Easing value do to an ease?

4 How do you change the curvature of a property curve?

Review answers

1 To open the Motion Editor panel, double-click a motion tween span on the timeline, or right-click a motion tween span and choose Refine Motion Tween.

2 A property curve is the graphical representation of how a property of a motion tween changes values over time. An ease curve represents a different rate of change that you can apply to an individual property curve. Animate displays the effects of an ease curve on a property curve as a dotted line.

3 The Easing value changes the strength and direction of an ease. Easing values affect eases differently, depending on the type of ease selected. For example, the Easing value for BounceIn eases determines the number of bounces, whereas the Easing value for a Simple Fast ease determines whether the ease is an ease-in or ease-out, and the strength of the ease.

4 To change the curvature of a property curve, select the property in the Motion Editor and select Add Anchor Point On Graph. Click the curve to add a new anchor point and move the direction handles to change the shape of the curve at that point. You can move the anchor points up or down to change the property value, or you can move the anchor points left or right to change the position of the keyframe within the motion tween.

5. Layer Parenting and Classic Tweens

Lesson overview

In this lesson, you’ll learn how to do the following:

Understand the differences between motion tweening and classic tweening.

Animate characters with classic tweening.

Create and edit object hierarchies with layer parenting.

Swap symbol instances.

Automatically synchronize dialogue with graphic symbols.

This lesson will take about 90 minutes to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

Classic tweening, an older method favored among character animators, provides an easy way to animate symbol instances when you don’t need the subtle or advanced controls of motion tweens. Combine classic tweening with layer parenting and automatic lip-syncing to bring your characters to life.

Getting started

Start by viewing the finished project to see the short animation that you’ll create in this lesson.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 05End.mp4 file in the Lesson05/05End folder to play the finished video.

Note

Monkey character design by Chris Georgenes (www.keyframer.com) used with permission.

The project is an animation of a monkey who waves to you and then recites some of Hamlet’s famous “To be or not to be” soliloquy while an annoying fly buzzes around.

Close the 05End.mp4 file.

As you complete this project, you’ll learn how to animate with classic tweens, create object hierarchies with layer parenting, and synchronize dialogue for character animation.

Layer parenting

Animating characters depends a lot on object hierarchies, which describe how one object is connected to another object. For example, your hand is connected to your forearm, which is connected to your upper arm, which in turn is connected to your torso. When you move your upper arm, your forearm and hand must follow. When you move your torso, all the pieces connected to your torso also move.

Defining how objects are linked creates a hierarchy, which we often describe in terms of relationships: the torso is the parent to the upper arm and the upper arm is the child of the torso.

In Adobe Animate, you create hierarchies for your layers using the Parenting View option in the timeline. In Parenting View, you connect the child layer to the parent layer. A colored line in between the layers shows the relationship. When objects in the parent layer move, rotate, or grow smaller or larger, so do the objects in the child layer.

The figure at right shows the Parenting View option in the timeline for this finished project. The colored lines connecting the layers indicate the various relationships between the objects in those layers.

Connecting the monkey parts in Parenting View

To begin animating the monkey character, you need to establish the relationships between the various parts of his body.

Open the 05Start.fla file and then save it as 05_workingcopy.fla.

The file contains all the completed graphics and symbols saved in the library. Symbol instances have been placed and arranged on the Stage. Each instance is separated on its own layer.

On the main timeline, click the Show Parenting View button.

The button remains depressed, indicating that Parenting View is enabled. The space after the layer names expands.

Drag from the colored rectangle in the monkey_mouth layer to the colored rectangle in the monkey_head layer.

A curvy line connects the monkey_mouth layer to the monkey_head layer. The monkey_mouth is now the child to the monkey_head.

Drag from the colored rectangle in the monkey_head layer to the monkey_body layer.

A curvy line connects the monkey_head layer to the monkey_body. You now have three layers that are connected: the body is connected to the head, which is connected to the mouth. It’s important that your layer names are accurate so that you can easily understand the object relationships on the Stage.

Connect the parts of the right arm by dragging from monkey_handR to monkey_forearmR, then from monkey_forearmR to monkey_armR, and then finally from monkey_armR to monkey_body.

You’re always connecting child to parent (not the other way around).

The monkey’s right arm is now connected to the body. Notice that a single layer—in this case, monkey_body—can have more than one child. However, a child layer cannot have more than one parent.

Connect the parts of the left arm by dragging from monkey_handL to monkey_forearmL, then from monkey_forearmL to monkey_armL, and then finally from monkey_armL to monkey_body.

Your Parenting View diagram should look similar to this figure. All layers are connected to the monkey_body except for the monkey_legs layers.

Editing layer parenting

If you make a mistake, you can easily change a layer’s parent or remove a parent.

Note

The connections between layers in Parenting View are keyframe based, which means they can be broken and changed in new keyframes.

To remove a layer’s parent, click the dark gray area to the right of the layer’s name in Parenting View and choose Remove Parent.

To change a layer’s parent, click the layer in the Parenting View section of the timeline and choose Change Parent, and then select a different layer.

To change a layer’s parent, you can also simply drag from a layer’s colored rectangle to a new layer.

Note

When you change a layer’s parent, that layer’s children will follow.

Editing layer stacking

Keep in mind that connecting layers in Parenting View is independent from how your layers overlap each other. The order in which your layers appear in the timeline determines how the objects in your layers overlap each other on the Stage.

You can reorder layers to change how objects overlap and still maintain the parent–child connections.

Drag the monkey_forearmL layer below monkey_armL, and then drag the monkey_handL layer below monkey_forearmL.

The stacking order of the monkey’s left arm changes so that the hair at the monkey’s wrist more naturally overlaps the monkey’s arm. The parent–child relationships do not change, however.

Rearrange the monkey’s right arm parts so that his hand is below his forearm, and his forearm is below his arm.

Using classic tweens

Now you’re ready to animate our monkey. You’ll start by making it wave to us.

In Lesson 3, you learned to animate a symbol instance with motion tweening, and in Lesson 4, you applied sophisticated eases to tweens for complex motions. In this lesson, you’ll learn to animate objects with classic tweens, an older, but still popular, way of creating animations. Classic tweens are similar to and a bit simpler than motion tweens. Both approaches use symbol instances, and both animate changes in symbol instance properties between two keyframes. For example, classic tweens can animate a symbol instance’s position, rotation, transformation, color effect, or filter, just as motion tweens can. So why use one over the other?

Classic tweens have retained their popularity with many animators, especially character animators, primarily because of the simplicity of the process. Classic tweens animate only instance properties between keyframes, and there is no Motion Editor to worry about. No motion path is displayed on the Stage. (Editing the path requires a separate layer in classic tweens. See the later section “Adding motion guides for classic tweens.”)

The key differences between classic tweens and motion tweens are as follows:

Classic tweens require a separate motion guide layer to animate along a path.

Classic tweens are not supported in the Motion Editor.

Classic tweens don’t support 3D rotations or translations.

Classic tweens—not motion tweens—are used for puppet warping with the Asset Warp tool.

Classic tweens are not separated onto their own tween layer. However, classic and motion tweens share the same restriction that no other object can exist in the same layer as the tween.

Classic tweens are timeline based and not object based, meaning you add, remove, or swap the tween or the instance on the timeline and not on the Stage.

Learning to create animation with classic tweens will help you understand the full scope of the animator’s toolkit and better prepare you to choose the right approach for any project.

Creating beginning and end keyframes

Classic tweens require a beginning and an end keyframe. Whether your Auto Keyframe mode is enabled or disabled, you will manually create your keyframes (F6) in these tasks.

Select frame 72 in all your layers and add frames (F5) so that you have about three seconds in your timeline to work with this animation.

Select frame 8 in the monkey_forearmR layer.

Choose the Insert Keyframe option from above the timeline (F6).

A new keyframe appears in frame 8. This will establish the start of the motion to raise the monkey’s arm.

Select frame 15 in the monkey_forearmR layer and insert another keyframe.

You now have an ending keyframe.

Select the monkey’s right forearm on the Stage.

Select the Free Transform tool and drag a corner point to rotate the monkey’s forearm upward as if to wave.

As you rotate the forearm, the hand that’s connected to it automatically follows. You now have a beginning keyframe where the forearm is at the monkey’s hips and an ending keyframe where the forearm is raised.

Applying a classic tween

A classic tween interpolates the changes in a symbol instance between two keyframes.

Select any frame in between the beginning keyframe (frame 8) and the frame just before the last keyframe.

Choose Create Classic Tween from the Create Tween menu above the timeline.

Animate creates a classic tween between your two keyframes, resulting in the monkey raising its arm and the arm’s child (the hand). Even though only the forearm layer contains keyframes and a tween, the child layer also moves.

Finishing the arm wave

You’ll insert additional tweens to complete the animation.

In the monkey_handR layer, insert keyframes (F6) at frames 15, 18, 22, 25, and 29.

These keyframes will represent the different up and down positions of the hand for the waving motion.

At frame 18, select the hand on the Stage and choose the Free Transform tool to swivel the monkey’s hand downward.

At frame 25, do the same to lower the monkey’s hand.

The resulting keyframes show the hand in alternating up and down positions.

Select the span of frames between the first keyframe up to a frame before the last keyframe.

Choose Create Classic Tween above the timeline.

Tweens are applied across all the keyframes. The monkey raises his arm and waves. Notice that moving a child layer does not affect the parent layer.

Insert keyframes (F6) at frames 29 and 35 in the monkey_forearmR layer.

In frame 35, select the forearm and select the Free Transform tool. Rotate the forearm downward to bring the attached hand back to the monkey’s hip.

Note

While changing an instance’s position, rotation, or scale in a parent layer affects all the objects in a child layer, the same is not true for color effects or filters. Changes in color effects or filters are not inherited by the objects in the children layers. So if you changed the transparency of the monkey’s forearm, its hand would still remain opaque.

Note

If you do not want scale changes in the parent tween to affect its children, you can deselect the Scale option in the Tweening section of the Properties panel. When the Scale option is deselected, changes in scale will be disabled in the parent and child tweens.

Select the first keyframe (or any frame between the two keyframes) and choose Create Classic Tween.

After the monkey waves, his arm lowers to the original position.

Tweening the parent layer

When you tween parent layers, all their children are affected as well. Next, you’ll bend the monkey’s body slightly, and all the connected parts—even those that are animated—will follow.

In the monkey_body layer, insert keyframes at frames 20 and 35.

At frame 20, select the monkey body on the Stage and select the Free Transform tool.

Rotate the body counterclockwise just slightly to give some overall sway.

Select the span of frames between frame 1 and frame 34.

Choose Create Classic Tween above the timeline.

As the monkey sways back and forth slowly between frames 1 and 35, all the connected parts, including its waving right arm, move along with the rotation, maintaining the integrity of the whole character.

Swapping instances

For the animation to be complete, the monkey needs to reach behind his back and pull out a skull to ponder life and death before his soliloquy. You’ll animate his left arm for the motion and then swap his hand instance with another that includes a skull.

In the monkey_armL layer, insert keyframes at frames 35, 45, and 55.

At frame 45 (the middle keyframe), select the monkey’s left upper arm on the Stage.

Use the Free Transform tool and rotate the upper arm clockwise so that his hand disappears behind his back.

Select the span of frames between frames 35 and 54 and click Create Classic Tween above the timeline.

In the monkey_forearmL layer, insert keyframes at frames 55 and 59.

At frame 59, select the monkey’s left forearm on the Stage.

Use the Free Transform tool to rotate the forearm counterclockwise so that his arm is extended all the way horizontally.

Select the span of frames between frames 55 and 58 and choose Create Classic Tween above the timeline.

Insert a keyframe in the monkey_handL layer at frame 45, where the hand is behind the back.

Now you’ll need to swap the hand instances so that when the monkey pulls his hand from behind his back, a skull appears. At frame 45, select the hand on the Stage. You’ll have to hide or lock all the layers above the monkey_handL layer to select it.

In the Object tab of the Properties panel, click the Swap Symbol icon.

The Swap Symbol dialog box appears, showing you all the symbols in your library. The current symbol has a dot in front of it.

Select the symbol monkey_hand skull down and click OK.

The instance of the plain hand is swapped with one that shows a hand holding a skull.

Unlock or unhide all the layers.

Insert keyframes at 55 and 59 in the monkey_handL layer and rotate the monkey’s hand in the last keyframe so that it is level with its arm.

Apply a classic tween between the keyframes at 55 and 59.

As the monkey pulls the skull from behind his back, his hand rotates so that his arm, forearm, and hand are all level.

Insert a keyframe at frame 60 in the monkey_handL layer.

Select the hand instance on the Stage and swap it with the monkey_hand skull up symbol.

The swapped instances work with the tweens to create a smooth, integrated animation.

Note

Any classic tween can have an ease applied to it. In the Properties panel, choose Classic Ease for a simple ease-in or ease-out, or choose the options under Classic Ease to create complex and even customized ease curves similar to the ones you learned about in Lesson 4. Later in this lesson, you’ll apply some eases to classic tweens.

Adding motion guides for classic tweens

In the next step, you’ll animate the annoying fly that buzzes around our monkey character. The fly moves along a very loopy and convoluted path. To move an object along a specific path, classic tweens require that you draw the path in a separate layer called a motion guide.

A motion guide tells an object in a classic tween how to move from its position in the first keyframe to its position in the last keyframe. Without a motion guide, a classic tween will animate an object’s position in a straight line from the first to the last keyframe. You draw the path in the motion guide. The path can curve, zigzag, or make all sorts of detours as long as it doesn’t cross itself. The path itself should be a stroke (and not a fill).

Create a new layer above all the existing layers and name it fly.

Drag the little fly symbol from the Library panel onto the Stage.

Insert a keyframe (F6) at frame 72 in the fly layer.

Select the first keyframe or any frame before the last keyframe and choose Create Classic Tween above the timeline.

A classic tween is applied between the first and last keyframes, but since the fly is in the same position in both keyframes, there is no motion yet.

Right-click near the layer name and choose Add Classic Motion Guide.

A new layer, called a classic motion guide, is added above the layer containing your classic tween. The classic tween layer becomes indented under the classic motion guide, indicating that it will follow any path drawn in the classic motion guide layer.

Select the Pencil tool and choose the Smooth option in the Tool tab of the Properties panel. You may need to add the Pencil tool to the Tools panel if it’s not added already.

Select the motion guide layer and then start drawing on the Stage. Draw a path for the fly to move on that has many curves but does not cross itself. End the path near the start of the path.

Switch to the Selection tool and make sure that Snap To Objects is selected (the magnet icon is depressed) in the Properties panel.

The Snap To Objects option makes sure that objects align with each other, and it will help position the fly’s registration point on the path.

Move the playhead to the first keyframe (frame 1). Drag the fly so that it snaps to the starting point of the path.

Move the fly in the last keyframe so that it snaps to the end of the path.

Press Return/Enter to test the effect of the motion guide on the classic tween.

The fly buzzes around the Stage, following the path that is drawn in the classic motion guide.

Note

You can edit the path in the classic motion guide with any of the editing tools, such as the Selection tool, Subselection tool, or Pen tool. Any change you make to the path will immediately change the object’s motion as long as the object remains snapped to the path in both the beginning and ending keyframes.

Note

You can have more than one tween follow the same classic motion guide. Simply drag your tween layer under a classic motion guide layer so that all the tween layers are indented.

Using Convert Layers to Symbol to create a nested animation

Your fly now moves around the Stage but will stop once it reaches the end of the timeline. In order to have the fly continuously buzz, you’ll create a movie clip symbol of the fly animation. As you recall, a movie clip’s timeline runs independently of the main timeline, so by putting an instance of a movie clip with its own animation on the Stage, you can create a nested animation.

Select both the fly layer and its classic motion guide above it.

Right-click near the layer names.

The Convert Layers To Symbol dialog box appears.

Enter fly_animation for the name and make sure to select Movie Clip for Type. Click OK.

Animate creates a new movie clip symbol and puts the two selected layers inside it. On the main timeline, the two selected layers are replaced with a layer called fly_animation with an instance of the movie clip.

In the Library, the fly_animation movie clip symbol contains the classic tween with its classic motion guide. Double-click the newly created symbol to enter symbol-editing mode to see it.

Click the Test Movie button in the upper-right corner of the Animate interface. In the preview window that opens, the monkey waves while the fly follows the motion guide to buzz around him. Click Control > Loop Playback to deselect the loop option. When loop playback is deselected, the main timeline plays only once, so the monkey waves only one time, but the fly buzzes continuously.

Close the Test Movie window.

Note

When you test or publish your final animation, the path drawn in the motion guide is not displayed.

Advanced easing for classic tweens

For advanced control over easing for classic tweens, choose a different ease in the Effect pull-down menu. Animate provides several easing profiles with varying intensities of ease-ins and ease-outs. You can even apply Bounce and Elastic eases that simulate physics-based motion.

To customize the eases, click the Edit Easing button in the Properties panel. The Custom Ease dialog box will appear, showing you the ease profile for the animation. This profile is identical to the ease profiles that you learned about in Lesson 4.

The graph shows you how a property value changes from the first keyframe to the last keyframe. In this example, the curved line means that, in the beginning, the change is fast, but near the end, the changes in value slow down. You can edit the ease profile in any frame by simply clicking the graph to add an anchor point. Move the handles to change the curve of the graph to change the ease.

Graphic symbols for lip-syncing dialogue

So far, you’ve been using movie clip symbols for your animation, and you’ve seen that they allow for independent nested animations. The fly buzzes around independently on its own timeline while everything else is happening. But you can also have nested animations and graphics inside graphic symbols, although they work a little differently.

An animation inside a graphic symbol doesn’t play independently the same way it does in a movie clip symbol. It will play only if there are sufficient frames on the main timeline where the instance is placed. In other words, the two timelines are synchronized. And while you can control the internal playhead of a movie clip timeline with code, you can control the playhead of a graphic symbol only from the Properties panel (see the sidebar “Looping options for graphic symbols”). Because of the ease with which you can choose what frames appear inside graphic symbols, they are ideal for lip-syncing or other character variations.

Looping options for graphic symbols

The Looping section of the Properties panel provides many powerful options for playback control of graphic symbols.

By default, a graphic symbol will play from its first frame to its last and then repeat as often as there are frames on the main timeline. You can change this behavior, however, if you want only a single frame of the graphic symbol’s timeline to show (as demonstrated with the Frame Picker in the next task). You can also play the graphic symbol’s timeline only once, pick the first frame and last frame to play, play it in reverse, or even loop it in reverse. Select the graphic symbol instance on the Stage and choose the option for the desired looping behavior.

Using the Frame Picker and lip-syncing

When animated characters talk, their mouths should be synchronized with their words. Each sound, or phoneme, is produced by a different mouth shape. For example, an explosive “p” or “b” sound is made by closing the lips, and an “o” sound is made by a rounded open mouth. Animators draw a collection of these mouth positions, called visemes, to synchronize to the soundtrack.

You can store each mouth position as a keyframe in a graphic symbol. The Frame Picker panel (accessed from the Properties panel) lets you choose the frame on graphic symbols’ timelines that matches each sound.

Animate also includes a powerful feature that analyzes any imported voice recording to detect individual phonemes and then automatically applies the correct viseme from a graphic symbol to create lip-syncing animation.

In this exercise, you’ll use the Frame Picker panel and the Lip Syncing feature to animate the mouth of the monkey to match imported dialogue.

Create a new layer at the top of all the other layers and rename it audio.

Insert a new keyframe (F6) at frame 72, three seconds into the animation and just after the animation of the monkey holding the skull finishes.

Drag the sound file called To_Be_or_Not.wav from the Library panel onto the Stage. The audio file is a recording of Hamlet’s famous soliloquy pondering life and death.

The sound file gets added to the audio layer in the keyframe at frame 72. A tiny waveform representing the audio file is displayed in the keyframe.

With frame 72 selected, in the Sound area of the Properties panel in the Frame tab, choose Stream from the Sync menu.

The Stream option ties the audio to the timeline so that you can synchronize animation to it.

Extend the timeline for all your layers to frame 938—enough frames so that the entire audio file can play to the end. When you’ve added the frames, you’ll see the end of the sound file represented in the audio layer.

In the Library panel, double-click the graphic symbol mouth_positions to examine it.

Animate takes you to symbol-editing mode for the mouth_positions symbol. Notice that in the bottom layer, there are 12 individual keyframes, each containing a different graphic corresponding to a mouth position for a specific sound.

In the top layer, individual keyframes are labeled (indicated by red flags). In the Properties panel each label has a different name corresponding to the phoneme.

The first keyframe is labeled “neutral” because the mouth position is closed in a resting state. The second keyframe is labeled “Ah” because the mouth position is open in a way that produces that particular sound.

When you create your own lip-synced animation, you’ll want to set up a graphic symbol similar to this one, where you draw 12 different mouth positions in 12 different keyframes.

Exit symbol-editing mode.

Select the mouth_positions symbol instance on the Stage in the monkey_mouth layer.

In the Properties panel, click the Lip Syncing button.

The Lip Syncing dialog box opens. The first step is to set up the visemes. A grid of 12 visemes is displayed, each associated with a specific phoneme. At first, all of the visemes are set to the same graphic. You’ll change that next.

Click the first viseme marked as “neutral.”

A menu opens allowing you to choose one of your frames from the mouth_positions graphic symbol. The labeled keyframes from your graphic symbol correspond to the required visemes, making the matching process simple. Select the 1 neutral keyframe.

Click the second viseme marked as “Ah,” and in the menu that opens, select the second keyframe from your graphic symbol labeled 2 Ah.

Animate matches the second keyframe from your graphic symbol to the “Ah” viseme.

Continue setting all 12 visemes by matching them with the corresponding keyframes from your graphic symbol.

Now move on to step 2 in the Lip Syncing dialog box. Choose the layer named audio from the menu, if it is not already chosen. This is the sound file that Animate will use to match the visemes.

Click Done.

Now sit back and watch the magic happen!

Animate will process the selected audio file and then automatically create labeled keyframes in the monkey_mouth layer with the correct keyframe from your graphic symbol to synchronize the dialogue.

Press Return/Enter to play the animation.

As the sound file plays, the graphic symbol switches from one of its keyframes to another, matching the sound to the correct mouth position.

If you want to make any adjustments to a particular mouth position at any keyframe, select the instance on the Stage and choose Frame Picker in the Properties panel.

In the Frame Picker panel that appears, you can manually choose a different keyframe from your graphic symbol.

Adding head motion

Whenever characters talk, there is usually other motion besides their mouths opening and closing. There may be times when the head may tilt or shake, a nose may wrinkle, or an eyebrow may rise. These are all important movements that contribute to an animation’s overall naturalness. The monkey_head movie clip symbol already includes a few keyframes to make occasional blinks and eye movements, but you’ll add slight head tilts as well.

Insert keyframes in the monkey_head layer at frames 89, 94, 102, and 109.

In the keyframe at frame 94, select the monkey head instance and choose the Free Transform tool.

Rotate the head slightly clockwise about nine degrees to give some head tilt just as the monkey begins to speak. Make the same rotation in frame 102.

Since the monkey_head layer is a parent to the monkey_mouth layer, the rotation also affects the monkey mouth.

Select any frame between frames 89 and 94, and choose Create Classic Tween above the timeline.

The slight head tilt is animated.

Select any frame between frames 102 and 109, and choose Create Classic Tween above the timeline.

The monkey’s head animates back to its normal position.

Experiment with adding little head bobs and tilts along the timeline for emphasis to the dialogue and to give some visual variety to the animation. Have fun with giving your character some attitude and making it come to life!

As you did in Lesson 3, export your finished project as an MP4 video using the Adobe Media Encoder (File > Export > Export Video/Media), or use the Quick Share And Publish button to publish to video.

Review questions

1 What are two ways in which classic tweening and motion tweening are similar?

2 What are three ways in which you can edit a parent–child relationship between layers?

3 Why is the Snap To Objects option in the Tools panel important when adding a motion guide to a classic tween?

4 How can you edit the path of an object’s motion?

5 How is a graphic symbol different from a movie clip symbol?

6 What are the 12 visemes, and what is required for lip-syncing animation to dialogue?

Review answers

1 Both a motion tween and a classic tween require a symbol instance on the Stage. Another way in which they are similar is that they require their own layer; no other tween or drawing object can exist on the tween layer.

2 You can edit a parent–child relationship between layers by dragging the child layer to a new parent; clicking the child layer and choosing Remove Parent; or clicking the child layer, choosing Change Parent, and selecting a new layer for its parent.

3 The Snap To Objects option forces an object to snap to other nearby objects. For an object to travel along a path in a motion guide, the object must be attached to the path in the first and the last keyframe.

4 To edit the path of an object’s motion, choose the Selection tool and drag directly on the path to bend it. You can also choose the Convert Anchor Point tool and Subselection tool to pull out handles at the anchor points. The handles control the curvature of the path.

5 A graphic symbol plays an animation on its timeline only if there are sufficient frames on the main timeline where the instance is placed. A movie clip symbol, on the other hand, contains an independent timeline, so it will play its animation regardless of how long the main timeline lasts, as long as an instance remains on the Stage.

6 The 12 visemes are graphical representations of 12 positions of a character’s mouth that correspond to individual sounds, called phonemes. To lip-sync dialogue in an animation, you create 12 visemes in separate keyframes of a graphic symbol. Click the Lip Syncing button in the Properties panel to automatically have Animate analyze an audio file on the timeline and create synchronized keyframes containing the correct frame of your graphic symbol along the main timeline.

6. Puppet Warping

Lesson overview

In this lesson, you’ll learn how to do the following:

Use the Asset Warp tool on a bitmap or a vector shape for puppet warping.

Understand the kind of animations that are appropriate for puppet warping.

Create and edit rigs with the Asset Warp tool.

Animate rigs with classic tweening.

Specify the angle of rotation for individual joints in your rig.

Apply warp options such as hard and soft bones, freezing joints, and mesh density.

Apply single joints to your rig.

This lesson will take about 1 hour to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

Use the Asset Warp tool to create rigs inside your graphics for puppet warping, Animate’s newest approach to animation. Rigs allow you to stretch, rotate, deform, and move vector shapes and images with classic tweening.

Getting started

Start by viewing the finished projects to see the two short animations that you’ll create in this lesson.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 06End.gif file in the Lesson06/06End folder to play the finished animation.

The project is an animation of a woman lying flat on her back moving her hands and legs to make a snow angel.

Close the 06End.gif file.

Double-click the 06End_weightlifter.gif file in the Lesson06/06End folder to play the finished animation.

The project is an animation of a cartoon weightlifter holding weights over his head. He does small squats to exercise.

Close the 06End_weightlifter.gif file.

As you complete these two projects, you’ll learn how to animate bitmaps and vector shapes with the Asset Warp tool in an approach called puppet warping.

What is puppet warping?

Puppet warping is an animation technique in which you create a structure inside a graphic that you can move to animate. The structure can have multiple joints and branches, much like a skeleton in a body. Manipulating this structure, which is referred to as a rig in Animate, moves and deforms the graphic accordingly.

Puppet warping is a powerful yet intuitive way of working. Once you’ve established the internal rig for your graphics, adding animation is very much like controlling a puppet, hence the name of the technique. The bones of your rig can be stretched, moved, rotated, and put in position, and the graphic that is associated with your rig follows.

Characters are natural targets for puppet warping since they have limbs that can be controlled with the bones of a rig. But any graphic that you want to bend and deform could be animated with puppet warping.

Using the Asset Warp tool

You use the Asset Warp tool to create, edit, and move your rig. A rig is similar to an armature that you’ll learn to create with the Bone tool in the next lesson. A rig can be created inside a bitmap or inside a vector shape. The rig can be a series of connected bones, branching bones, or even single points.

You’ll start by animating the woman lying in the snow creating a snow angel.

Creating your first rig

You’ll establish your first puppet warp rig inside a bitmap image.

Open the 06Start.fla file and then save it as 06_workingcopy.fla.

The file contains two bitmap images saved in the library. The snow_background asset is an image of the snow. The woman asset is an image that has its background removed in Photoshop.

Drag the snow_background bitmap from the Library panel onto the Stage. Align the bitmap so X=0 and Y=0 and the bitmap completely covers the Stage.

Rename the layer background.

Insert a new layer above the background layer and name it woman.

Drag the woman bitmap from the Library panel onto the Stage. Position her in the center of the depression in the snow at about X=97 and Y=133.

Select the Asset Warp tool.

Click the woman’s left shoulder.

Animate creates a mesh over the bitmap and creates a single joint. Your rig is established.

If you use the Selection tool to select the woman, you’ll notice that the mesh goes away and the object on the Stage is no longer a bitmap and is now called a Warped Object in the Properties panel.

Select the Asset Warp tool again and click your first joint to select it. Move your cursor over her elbow.

Animate shows a preview of where a bone will be created, based on the position of the cursor.

Click the woman’s elbow.

Animate creates another joint at her elbow, and a bone appears, connecting the first point at her shoulder and the second point at her elbow. Bones are shown as elongated triangles, with the fatter base at their origin and the narrower tip at the further joint. The first joint becomes a square, indicating that it is the root joint.

Finally, click the woman’s left wrist.

Animate creates a third joint with another bone connecting to it. You’ve just completed the first rig for your bitmap.

Creating additional bones

Your first set of bones and joints will control the woman’s left arm. Now you’ll create additional bones for your rig for her other limbs.

With the Asset Warp tool selected, click an area outside the mesh.

The last joint of your rig becomes deselected.

Click the woman’s right shoulder.

A new joint is created.

You’ll need to click an area outside the mesh to ensure that Animate creates a new joint unconnected from a previously selected one. If you were to click the woman’s right shoulder when the joint of her left wrist was still selected, you would create a connecting bone as in the following screenshot (which is something that you do not want!).

As with her left arm, continue creating bones down her arm by clicking her elbow and her wrist.

Click an area outside the mesh and build bones inside each of the woman’s legs, with joints at the hips, knees, and ankles.

Your rig is complete! Notice that your bitmap can have multiple bones, unconnected from each other.

Moving your rig

Now for the fun part. With the Asset Warp tool, you get to move the individual joints around to position your puppet for animation.

Drag the woman’s left upper arm upward.

Her arm rotates upward. The bone is highlighted in orange and the joint at the elbow is highlighted in red.

Drag the woman’s left lower arm (her forearm) upward.

Her forearm rotates upward. The bone is highlighted in orange, and the joint at the wrist is highlighted in red.

Now try dragging the joint at the woman’s left wrist.

When you move a joint, you can reposition the attached bone by stretching or shortening the bone as well as rotating it. Dragging a bone, as you did in steps 1 and 2, allows only for rotation.

Drag the joint at the woman’s left elbow so she is fully raising her arm above her head.

Note that when you move a joint, any attached joint and bone further down the chain also move. So when you move the upper arm bone and elbow joint, the forearm bone and wrist joint follow. Another way to describe this relationship is to call the first joint the parent and the connecting one the child. Moving the parent also moves the child.

Tip

As you’ll notice, moving the bones of your rig too much will likely result in unnatural distortions as the bitmap gets stretched too far from its original position. When you use the Asset Warp tool on bitmaps, it’s most effective when used with less dramatic or extreme motions.

Using rotation angles

Sometimes, you’ll want precise control over the angle of a joint. You can enter numerical values for the rotation angle in the Properties panel.

Select the bone in the woman’s right upper arm (or you can also select the joint at the woman’s right elbow).

In the Properties panel, under Warp Options, enter the value -132 as the new rotation angle.

Her right arm moves upward at the new angle.

Select the bone in her right forearm or the joint at her wrist.

In the Properties panel, under Warp Options, enter the value -87 as the new rotation angle.

Her right forearm moves upward at the new angle.

Feel free to adjust either of her arms to establish the first position in the animation of the snow angel.

Mesh options

When you’re working with your rig, you may want to see your bitmap more clearly, without the superimposed mesh. You can choose to turn the mesh off by deselecting the Mesh option in the Warp Options section of the Properties panel.

Turning off the mesh allows you to see only the joints and bones of your rig.

The Mesh Density slider to the right of the Mesh option allows you to change the resolution of the mesh over the bitmap. Move the slider to the right to increase the mesh density, or move the slider to the left to decrease the mesh density.

The mesh density determines how coarse or refined the warping of the bitmap over your rig is. For most purposes, you can leave the Mesh Density slider at its default middle position.

Editing your rig

If you make a mistake in placing your joints, you can easily move them into a better position, or remove them entirely to start over.

Repositioning joints and bones

Use the Option/Alt modifier key to move joints within a rig without affecting the mesh.

Select one of the joints in your rig.

While holding down the Option/Alt key, drag the joint to a new position within your mesh.

The joint and connecting bones move to a new position but do not modify the bitmap. Make sure you Option/Alt+drag the joint back to its original (correct) position before moving on.

Removing joints and bones

Use the Delete/Backspace key to remove joints and connecting bones.

Select the last joint (in the wrist).

Press the Delete/Backspace key.

The selected joint and its connecting bone are removed from the rig.

Press Cmd/Ctrl+Z to undo your edit to the rig.

Select just the bone in the forearm.

Press the Delete/Backspace key.

The selected bone is removed from the rig, but the joint in the wrist remains.

Pressing the Delete/Backspace key on a selected pin deletes the pin as well as the bone associated with it. Pressing it on just a selected bone deletes the bone, leaving the pin as it is.

Reconnecting joints and bones

Use the Option/Alt key to reconnect joints with bones.

Select the woman’s right elbow joint with the Asset Warp tool.

Hold down the Option/Alt key and click the joint in her right wrist.

Animate creates a bone between the two joints.

Animating your rig

Animating your rig involves positioning it in different keyframes and using classic tweening to interpolate the changes between keyframes. If you need to review classic tweening, you can go back to Lesson 5.

Creating your keyframes

Each keyframe shows your rig in different positions.

On the timeline, select frame 40 in both layers and add frames (F5) to extend the amount of time that we see the woman and the background snow.

Insert a keyframe (F6) in the woman layer at frame 16 and at frame 40.

Select the keyframe at frame 16.

Move the joints of your rig to position the woman’s arms downward so the arc of her arms traces the depression in the snow.

You won’t be able to move her arms all the way down to her sides without making major distortions to her shoulder, neck, and face since they are connected, so keep the motion modest.

Move the joints in her legs so they are close together.

Applying a classic tween

A classic tween between the first and second keyframes and between the second and third keyframes will interpolate the rig positions.

Select any frame between the first and second keyframes.

Right-click and choose Create Classic Tween.

A classic tween is created from the first keyframe to the second keyframe.

Select any frame between the second and last keyframes.

Right-click and choose Create Classic Tween.

A classic tween is created from the second keyframe to the last keyframe.

Animate creates a smooth motion between keyframes to move your rig and the bitmap image.

Choose the Loop Playback option and extend the brackets to include all frames, from 1 to 40. Play the animation to see the looping snow angel being created by the woman’s arm and leg motions.

Note

You can modify your rig even after a tween has been added. If, for example, you add or remove a joint to your rig in one keyframe, that change will be reflected in all the keyframes for the integrity of the tween to be maintained.

Tip

As with any classic tweens, you can also make changes to the scale, rotation, position, or color effect of your Warped Object and Animate will interpolate those changes between keyframes. If you want to move your entire rig, for example, use the Selection tool to move the Warped Object to a new location on the Stage. To change scale or rotation, use the Free Transform tool.

Adding a drop shadow effect

To make the animation look more integrated into the snowy background, you’ll add a drop shadow filter.

Select the first keyframe at frame 1 of the woman layer.

In the Properties panel, in the Filters section, click the Add Filter button and choose Drop Shadow.

A Drop Shadow filter is added to the objects in the woman layer.

Change the settings for the Drop Shadow filter. For Blur X and Blur Y, enter 20. For Distance, enter 10. For Strength, enter 75%.

The settings create a softer shadow under the woman for a greater sense of depth and make her appear to be on top of the snow.

On the timeline, the keyframe appears white, indicating that a filter has been applied.

In the Filters section of the Properties panel, click the options in the upper-right corner and choose Copy Selected Filter.

The Drop Shadow filter and all of its settings are copied.

Select the second keyframe at frame 16.

In the Filters section of the Properties panel, click the options in the upper-right corner and choose Paste Filters.

The Drop Shadow filter, including all of its settings from the first keyframe, is pasted into the second keyframe.

Select the third keyframe at frame 40 and paste the filter into the third keyframe.

All three keyframes contain the same Drop Shadow filter.

Rigs with branching joints

Now you’ll create something a little more complicated. The snow angel animation you just completed contained bones in each of the woman’s limbs that were connected in a straight line, but in the next animation, you’ll create a rig that branches. You’ll also explore some of the other warp options.

Creating a branching rig

A branching rig is one where a single joint can connect to multiple joints and bones, much like your pelvis can branch into two legs. Moving the pelvis (the parent) moves the joints and bones in the legs (the children). In this task, you’ll create a branching rig in a vector shape of a weightlifter.

Note

When you create a rig on a vector shape, Animate converts it to a bitmap to maintain high-quality warping and tweening.

Save your 06_workingcopy.fla file and close it. You will not need it for the remainder of this lesson.

Open the 06Start_weightlifter.fla file in the 06Start folder and save it as 06_workingcopy_weightlifter.

The file contains a drawing of a weightlifter, composed of different colored fills. The shapes are in frame 1 of a single layer called weightlifter.

Choose Edit > Select All (Cmd/Ctrl+A), or drag your selection tool over the entire weightlifter character.

The whole shape becomes selected. You must first select the shapes on the Stage to indicate where you want your rig to be placed.

Select the Asset Warp tool and click the top of the weightlifter’s chest.

A mesh is applied to the selected shape, and a single joint is created.

Click the weightlifter’s abdomen just below his belt to create a second joint with a bone connecting the two joints.

Continue building the bones down the weightlifter’s right leg with joints in his knee, ankle, and foot.

Click the joint in the abdomen to select it.

Note

A joint can have multiple children but not multiple parents.

New bones will be created from the currently selected joint.

Click the weightlifter’s left hip, knee, ankle, and foot.

Animate creates bones that branch from the hip.

Click your first joint at the top of his chest. This parent joint is square and is also known as the root joint.

Click the weightlifter’s outstretched left arm to create joints and connecting bones. Create joints at the shoulder, elbow, and fist.

Your finished rig should look similar to the following screenshot. Don’t worry about adding joints into his other arm. You’ll do that later.

Warp options

You’ll animate the weightlifter doing squats to help bulk up his skinny legs. Animating that motion would mean moving his body up and down, flexing his legs, and keeping his feet firmly planted in place. In order to make the animation of flexible bones easier and to keep certain joints frozen in position, you can turn to the different warp options in the Properties panel.

Freezing joints

To prevent a joint from moving from its position on the Stage, use the Freeze Joint option in the Warp Options section of the Properties panel.

If you drag the rig in the weightlifter from the root joint (the square joint in his chest), the entire rig, and therefore the entire mesh, moves.

Move the rig back to its original position.

Select the joint in one of his ankles.

In the Warp Options section of the Properties panel, select Freeze Joint.

The selected joint becomes a large blue circle to indicate it is a frozen joint.

Select the other ankle joint and choose Freeze Joint in the Properties panel.

Both joints are frozen and are fixed to the Stage.

Now, when you drag the root joint of the rig, the entire mesh moves except the two ankle joints, keeping the weightlifter’s feet in place.

Note

You cannot select multiple joints to change their warp option preferences. Only single selections are possible.

Using soft bones for flexible connections

In the previous task, you froze the weightlifter’s ankle joints so that as his body moved downward, his legs became compressed. That effect happens when you use hard bones, the default mode for the Asset Warp tool. Hard bones allow you to elongate and compress the mesh. An alternative option, soft bones, keeps the mesh from being compressed. See the sidebar “Hard and soft bones” for additional details.

In this task, you’ll modify the bones in the weightlifter’s legs from hard to soft bones.

Select the weightlifter’s right ankle joint.

In the Warp Options section of the Properties panel, change the Bone Type from Hard to Soft.

The connecting bone becomes a soft bone, indicated by its shape. Soft bones are thin and rectangular, while hard bones are shown as triangular.

Select the other ankle joint and change the Bone Type from Hard to Soft.

Move the parent joint of the mesh downward.

Because the ankle joints are frozen, the mesh has nowhere to go as you move the rig downward. Rather than being compressed, the mesh bends in a flexible manner. It’s not entirely natural, but in the next series of tasks to animate the weightlifter, you’ll move the rig in a more natural position by dragging the other joints.

Move the rig back to its original position before moving on to the next task.

Hard and soft bones

By default, creating a rig with the Asset Warp tool creates hard bones, but you can change the Bone Type to a soft bone in Warp Options in the Properties panel.

What’s the difference between a soft bone and a hard bone? Hard bones appear as triangles that are thicker at their parent joint and thinner at their child joint. Soft bones appear as straight rods of uniform thickness.

Soft bones behave differently from hard bones. Soft bones will attempt to preserve the volume of the mesh as you move the joints of the rig. For example, in a hard bone, if you were to move two joints closer together, the mesh would squash and shorten.

Hard bone

On the other hand, in a soft bone, if you were to move the two joints closer together, the mesh would compensate and bulge outward.

Soft bone

Soft bones have the potential to distort the mesh more naturally, but their behavior can also be more unpredictable. Your rig can have a combination of hard and soft bones, and you can easily change them if you do not like the results.

If you want to create soft bones for all the joints of your rig from the start, you can change the settings for the Asset Warp tool in the Tool tab of the Properties panel.

Select Soft for Bone Type, and all bones created by the Asset Warp tool will be soft unless you modify them in Warp Options after creating the rig.

Animating your weightlifter

With the modifications to your rig for soft bones and frozen joints, you’re now ready to animate your character.

Create new keyframes at frame 15 and frame 30 on your timeline.

The first and last keyframes (frames 1 and 30) will remain identical with the weightlifter in his full upright position. You will modify the rig in the middle keyframe at frame 15.

Move your playhead on the timeline to frame 15.

With the Asset Warp tool, move the root joint downward.

Move the knee joints outward so the weightlifter’s legs bend naturally.

On the timeline, insert a classic tween in between frames 1 and 15 and in between frames 15 and 30.

Select the Loop option for playback on the timeline and move the first and last brackets to encompass all your frames. Play the animation to see your weightlifter in action!

Isolating joints

Fine-tuning your animation means positioning your rig exactly how you want it. Double-clicking a joint isolates the positioning of only that selected joint without affecting its child bones.

Turn off the Loop Playback option.

Move your playhead on the timeline to frame 15.

With the Asset Warp tool, select the joint in the weightlifter’s left hip.

Move the joint slightly outward.

The joint moves and all of its children bones follow.

Double-click the joint.

The child bone of the selected joint becomes pale yellow, indicating that the selected joint is now isolated. You can move the joint without affecting any of its children bones.

Move the left hip joint.

Moving the isolated joint repositions that joint alone.

Note

As you move your rig around in the middle keyframe, you may notice the frames in your timeline occasionally flashing. This is an indication that Animate is recalculating the tweening to interpolate the changes between keyframes.

Propagating rig edits

You’ll notice that you created only one branch of bones in the weightlifter’s left arm. If you want to add more bones to your rig even after you’ve applied a tween to multiple keyframes, you can, as Animate propagates changes to your rig to preserve the integrity of the tween.

Adding more bones

You’ll add bones to the weightlifter’s right arm and see how those changes propagate to all the keyframes.

Select the first keyframe on your timeline.

Choose the Asset Warp tool, and in the Tool tab of the Properties panel, make sure that the Propagate Changes option is turned on.

The Propagate Changes option is, by default, turned on.

Select the root joint and create additional joints in the weightlifter’s shoulder, elbow, and fist just as you did with his other arm.

Move your playhead on the timeline to the middle keyframe at frame 15.

The additions you made to your rig in the first keyframe propagate to the other keyframes to keep the tweens intact.

Feel free to move around the weightlifter’s arms in the middle keyframe so his elbows dip down a little as he squats. The additional motion can help provide a sense of weight and realism.

Note

Animate propagates both deletions and additions of bones and joints across keyframes.

Single joints

Your rig can also contain single joints, unconnected by bones. With independent joints, you can deform the mesh in more organic ways without being tied to a hierarchical structure.

Adding single joints

You’ll add an unconnected joint in the mustache of your weightlifter. As he does his squat, his mustache can unfurl.

Select the middle keyframe at frame 15.

Choose the Asset Warp tool and click the tip of one side of his mustache.

A single joint is created at the tip of his mustache, and the change is propagated across the other keyframes.

Click off the mesh to deselect the joint and then click the tip of the other side of his mustache.

Another joint is created at the tip of the other side of his mustache. The rigs in your other keyframes also get the additional joint.

If you are creating multiple joints without connecting bones and you do not want to keep deselecting joints, you can change the options in the Tool tab of the Properties panel. Turn off the Create Bones option to create joints only.

Move the joints away from the weightlifter’s face to straighten out his mustache.

Animate animates the changes so his mustache unfurls as he squats with his weights.

Add an ease-out to your first tween and an ease-in to your second tween to give your motion a little more realism. Feel free to experiment to make the motion your own!

Choose Quick Share And Publish > Publish > Animated GIF to export an animated GIF to share on social media.

Fixed and Open Handle modes

When you create single joints in a rig, you can choose whether those joints are Fixed or Open for the Handle mode in the Warp Options section of the Properties panel, which determines how they behave and how they affect the mesh.

For the Open Handle mode, which is the default option, you can move the joints to different positions to warp the mesh. In this example, there are three joints in a long rectangle. Moving the middle Open joint upward deforms the rectangle so it bends.

For the Fixed Handle mode option, you can move the joint position as well as rotate the mesh around the joint. Move your cursor close to the dotted circle around the joint and drag to rotate the mesh.

Review questions

1 The Asset Warp tool can be used to create a rig on which kind of graphics?

2 How do you assign a specific numerical value for the rotation of a rig joint?

3 What’s the difference between a hard bone and a soft bone?

4 What animation technique should be applied to animate a rig created by the Asset Warp tool?

5 How do you edit the positions of the joints in a rig?

6 What does the Freeze Joint option do to a rig?

Review answers

1 The Asset Warp tool can be used to create a rig for puppet warping on either a vector shape or a bitmap. When the Asset Warp tool is used on a vector shape, the shape is converted to a bitmap.

2 Select the joint and, in the Warp Options section of the Properties panel, enter a value for the angle of rotation.

3 A hard bone is one that allows you to stretch and squash the mesh, which distorts the associated graphic. A soft bone, in contrast, is an option that attempts to preserve the volume or length of the mesh, which simulates a more flexible connection between joints.

4 A rig created by the Asset Warp tool can be animated only with classic tweening.

5 To edit a rig, hold down the Option/Alt key while you drag an individual joint to a new position.

6 The Freeze Joint option fixes the joint to the Stage to prevent it from moving.

7. Inverse Kinematics with Bones

Lesson overview

In this lesson, you’ll learn how to do the following:

Use the Bone tool to build armatures with connected movie clips.

Use the Bone tool to build armatures inside shapes.

Animate armatures using inverse kinematics.

Constrain and pin the armature joints.

Edit the position of armature bones and joints.

Refine shape deformations with the Bind tool.

Simulate physics with the Spring feature.

Use rig mapping to swap armatures with new graphics.

This lesson will take approximately 2 hours to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

You can create complex and natural motion with articulations—joints between linked objects and within shapes—using the Bone tool for animation, a process called inverse kinematics.

Getting started

You’ll start the lesson by viewing the bicycle-riding animated character that you’ll create as you learn about the Bone tool and armatures.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 07End.fla file in the Lesson07/07End folder to open it. Choose Control > Test, or click the Test Movie button.

The animation depicts a woman riding a bicycle and waving, her hair blowing in the wind. In this lesson, you’ll build an armature (similar to a rig with the Asset Warp tool) and then animate the motion of limbs pedaling the bicycle. You’ll also animate the wheels and pedals turning.

Double-click the 07Start.fla file in the Lesson07/07Start folder to open the initial project file in Adobe Animate.

Choose File > Save As. Name the file 07_workingcopy.fla, and save it in the 07Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

Character animation with inverse kinematics

You learned to animate characters with layer parenting in Lesson 5 and by building rigs with the Asset Warp tool in Lesson 6. In this lesson, you’ll learn to use the Bone tool, which gives you another option for character animation.

The Bone tool allows you to build an armature, which is similar to the rig you build with the Asset Warp tool for puppet warping. Both are made up of joints and bones in a hierarchical structure. However, that’s where the similarity ends.

The Bone tool uses a method called inverse kinematics as a way to move your armature. Inverse kinematics is a mathematical way of calculating the different angles of a jointed object to achieve a certain configuration. In inverse kinematics, you move the child bone and the parent moves along with it.

By contrast, layer parenting and puppet warping with the Asset Warp tool are based on forward kinematics, where moving the parent bone will control its children.

In this lesson, you’ll animate the pedaling motion of a bicycle rider. By just positioning the character’s foot (the child bone), the upper leg and lower leg (the parents) are automatically adjusted.

Key differences between the Bone tool and the Asset Warp tool

There are a few basic differences between the Bone tool and the Asset Warp tool in terms of their capabilities, how they work, and how you use them, including the following:

The Asset Warp tool uses forward kinematics, while the Bone tool uses inverse kinematics.

You use the Bone tool on connected movie clip symbols or vector shapes. You use the Asset Warp tool on shapes or bitmaps.

The Bone tool can create only a single continuous armature in its layer. The Asset Warp tool, on the other hand, can create a rig that contains multiple, separate bones.

You animate a Bone tool armature in a special armature layer. You animate an Asset Warp tool rig with classic tweens.

Building your armature to animate a character

When animating a character with limbs and joints, first determine which pieces of the character need to move. At the same time, examine how those pieces connect and move. This will almost always be a hierarchical structure, like a tree, starting from a root and branching out in various ways. For the Bone tool, this structure is called the armature. Like a real skeleton, each rigid piece that makes up the armature is called a bone. The armature defines where your object can bend and how the different bones are connected.

You use the Bone tool to create your armature. The Bone tool tells Animate how a series of movie clip instances is connected, or provides the jointed structure within a shape. A connection between two or more bones is called a joint.

In your 07working_copy.fla file, view the graphics for the bicycle and Ruby, the rider, that have already been created and placed on the Stage for you.

The pieces of the rider have been positioned so it is easy to see how they relate to each other. Keeping some space between the pieces will make connecting the bones for your armature easier. Don’t worry that Ruby doesn’t look exactly right because you’ll move her pieces together in a later step.

If necessary, click the Edit Toolbar option to add the Bone tool to the Tools panel, then select the Bone tool.

Click the middle of Ruby’s chest and drag with the Bone tool to the top of her right upper arm. Release the mouse button.

Your first bone is defined in a new armature. Animate shows the bone as a straight line with a square at its base joint and a circle at its tip joint. Each bone is defined from one joint to the next.

In the timeline, your newly created armature is automatically put in a new layer with a new icon and the default name Armature_#. This special type of layer keeps your armatures separate from other objects on the timeline such as graphics or motion tweens.

Now click the end of your first bone (at Ruby’s shoulder) and drag it to the top of her lower arm (her elbow). Release the mouse button.

Your second bone is defined.

Select the Selection tool and experiment with grabbing the last bone in the chain (Ruby’s right forearm) and moving it up and down the Stage.

Because the bones connect the whole arm to Ruby’s torso, moving the lower arm causes the upper arm and torso to move as well, in a somewhat unnatural manner, but you’ll learn to constrain joints for better control.

Note

Ruby the rider and her bicycle are graphics from the Adobe Assets panel. There you’ll find many other animated and static assets to use or adapt for your own projects.

Tip

If you have trouble placing your bones correctly because your cursor snaps to nearby edges, you can disable snapping. In the Doc tab of the Properties panel, click Snap To Objects (magnet icon) to deselect it.

Note

The first armature layer created in a pristine file will be called Armature_1, and each time you add a new armature layer, its name will be incremented by 1. Don’t worry if the name of your armature layer doesn’t match the one in these screenshots.

Extending your armature

You’ll continue to build out the armature of Ruby by connecting her other arm, legs, and bicycle.

With the Bone tool selected, click the base of your very first bone (in Ruby’s chest), and drag the Bone tool to the top of her other upper arm. The first bone is considered your “root bone.” Release the mouse button.

Continue creating more bones to her lower arm.

Your armature now extends in two directions: one for Ruby’s left arm and one for her right.

Click the base of your very first bone (in Ruby’s chest) and drag the Bone tool to the middle of her pelvis.

Extend the armature from the pelvis down to both of Ruby’s lower legs. The pelvis will branch off to the right and left thighs, lower legs, and black pedals. You can move objects around to make things easier to connect.

Last, connect the torso to Ruby’s head and her pelvis to the seat of the bicycle.

Your armature now connects all the pieces of Ruby, including her bicycle, and defines how each piece can rotate and move in relation to the other pieces in the armature.

Note

You might wonder why we need to include the bicycle as part of Ruby’s armature. The bicycle doesn’t move, but it needs to appear between her legs, so one leg will be behind the bicycle and the other will be above it. Since all the parts of an armature are on one layer, one solution to managing overlapping objects is to have them in the armature itself.

Armature hierarchy

The first bone of an armature is the root bone and the parent of the child bones linked to it. A bone can have more than one child attached to it, as you have for your Ruby armature, making for a very complex relationship. The bone in the chest is the parent, each bone to the upper arm is a child, and the arms are siblings to each other. As your armature becomes more complicated, you can use the Properties panel to navigate up and down the hierarchy using these relationships.

When you select a bone in an armature, the top of the Properties panel displays a series of arrows.

You can click the arrows to move through the hierarchy and quickly select and view the properties of each bone. If the parent bone is selected, you can click the down arrow to select the child. If a child bone is selected, you can click the up arrow to select its parent or click the down arrow to select its own child if it has one. The sideways arrows navigate between sibling bones.

Moving the bones of the armature

Now that you’ve connected each of the movie clips with your bones in a complete armature, you can edit each bone’s relative position. Initially, there were gaps between the movie clips to make connecting them easier. Holding down the Option/Alt key allows you to move the position of any bone in your armature.

Select the Selection tool and click on an empty part of the Stage to deselect the armature.

Hold down the Option/Alt key and move Ruby’s right upper arm closer to her body. You can also use the Free Transform tool.

The upper arm is repositioned, but the armature remains intact.

Hold down the Option/Alt key and move all the parts of Ruby’s body and the bicycle closer together to eliminate the gaps in her joints.

The character and her armature should look similar to the following figure.

Removing and adding bones and movie clips

To remove a bone, simply select the Selection tool and click the bone to select it; then press Delete/Backspace. The bone and all of its children will be removed, but the movie clip will remain.

To remove a movie clip, select it on the Stage and press Delete/Backspace. The movie clip and its associated bone will be removed.

If you want to add more movie clips to your armature, drag new movie clip instances onto the Stage in a different layer. You cannot add new objects to an armature layer. Once the movie clip instance is on the Stage, you can use the Bone tool to connect it to the bones of your existing armature. The new instance will be moved to the same layer as the armature.

Modifying the position of the joint

If you want to change the point where one bone connects to another—the joint—use the Free Transform tool to move its transformation point. This also moves the rotation point of the bone.

If, for example, you made a mistake and attached the end point of your bone to the middle of the next movie clip rather than to the base, that body part would rotate unnaturally.

To modify the position of the joint, select the Free Transform tool and click the movie clip to select it. Move the transformation point to a new position.

The bone now connects to the new transformation point of the movie clip.

Rearranging the stacking order

When you build an armature, the most recent bone will move to the top of the stack in your graphics. Depending on the order in which you connected your bones, the individual movie clips may not overlap correctly. For example, in the previous task, Ruby’s legs may not overlap with the bicycle in a way that makes sense. One leg should be behind the bicycle, and one leg should be in front. Use the Modify > Arrange command to change the stacking order of the movie clips in your armature so they overlap each other correctly.

Select the Selection tool and Shift-select the three movie clips that make up Ruby’s back leg, including the pedal.

Choose Modify > Arrange > Send To Back, or right-click and select Arrange > Send To Back (Shift+Command+Down/Shift+Ctrl+Down).

The selected bones of the armature move to the bottom of the stacking order, so her right leg is now behind the bicycle and the bicycle seat now sticks out in between her legs.

Select the two clips that compose Ruby’s left arm and use the Modify > Arrange command to move the objects to the back.

Select Ruby’s head and choose Modify > Arrange > Bring To Front, or right-click and choose Arrange > Bring To Front (Shift+Command+Up/Shift+Ctrl+Up).

The head of the armature moves to the top of the stacking order, so Ruby’s head is now above her neck.

Select the Selection tool and move the armature around to see how Ruby’s right and left arms and legs move behind or in front of her body, and make any corrections, if needed.

Note

Use Modify > Arrange > Send To Back to move selected graphics all the way to the bottom of the stacking order, or use Modify > Arrange > Send Backward to move the selected graphics just one level back. Similarly, use Bring To Front to move graphics to the top of the stacking order, or use Bring Forward to move graphics just one level up.

Creating the pedaling cycle

Ruby’s pedaling is a basic looping animation where her feet will go around in a circle.

Armatures help make animating the pedaling motion easier because you only have to position her feet on the pedals correctly in keyframes (called poses), and since her feet are connected to the rest of her body, those upper limbs will follow naturally.

Posing your armature

In the first pose, you’ll establish Ruby’s starting position with her feet and pedals at opposite sides of the rotation motion.

Using the Selection tool, drag Ruby’s right foot to the top of the pink circle, which represents the path of the pedaling motion. Move the black pedals that are attached to her feet so they are parallel to the ground.

As you drag her leg and pedal, the bones that are connected to them also move. If you have trouble controlling the armature, don’t worry! It takes practice, and in the following sections, you’ll learn more tips and tricks to constrain or isolate certain joints for precision positioning.

Move Ruby’s left foot and pedal to the bottom of the pink circle. Try to keep the black pedal on the curve of the circle.

Move Ruby’s arms to position them on the handlebars of the bicycle.

Your first pose is completed in frame 1 of your armature layer.

Isolating the rotation of individual bones

As you pull and push on the armature to create your pose, you may find it difficult to control the rotation of individual bones because of their linkages. Holding down the Shift key as you move individual bones will isolate their rotation.

Select the back pedal.

With the Selection tool, drag the pedal.

The leg moves to follow the motion of the pedal.

Now, holding down the Shift key, drag the pedal.

The pedal rotates around the leg, but the rest of the armature doesn’t move. The Shift key isolates the rotation of the selected bone.

Holding down the Shift key helps you isolate the rotations of individual bones so that you can position your poses exactly as you want them. Return to Ruby’s legs and pedals to make any necessary adjustments using the Shift key.

Pinning individual bones

Another way you can more precisely control the rotation or position of your armature is to fix individual bones in place. For example, currently, the bicycle is free to move and rotate under the rider (as seen in this figure), so pinning it will lock it in place.

Select the Selection tool.

Select the bone to the bicycle frame.

The bone becomes highlighted, indicating that it is selected.

In the Properties panel, select the Pin option.

The bicycle is fixed to the Stage in the current position. A white circle with a black dot appears on the joint to indicate that it is pinned.

You can also select a joint and click it when your cursor changes to the icon of a pushpin. That selected bone will be pinned. Click again to unpin the bone.

The armature motion is different when using the Pin option versus using the Shift key. The Shift key isolates an individual bone and all the rest of the bones connected to it. When you pin a bone, the pinned bone remains fixed, but you’re free to move all the child bones.

Disabling and constraining joints

Before you insert the rest of the poses, you can add refinements to your armature that will make it easier to position Ruby. The various joints of the armature can rotate freely, which isn’t particularly realistic. Many armatures in real life are constrained to certain angles of rotation. For example, your forearm can rotate up toward your bicep, but it can’t rotate in the other direction beyond your bicep. Your hips can wiggle around your torso but not by very much. These are constraints that you can also impose on your own armature. When working with armatures in Animate, you can choose to constrain the rotation for various joints or even constrain the translation (movement) of the various joints.

Disabling the rotation of joints

If you drag Ruby’s head, you’ll see that the bone that connects the torso with the pelvis can rotate freely, which allows wildly unrealistic positions.

Select the bone that connects Ruby’s head with her torso.

The bone is highlighted.

In the Properties panel, if necessary, deselect the Enable option in the Joint: Rotation section.

The circle around the joint at the head of the selected bone disappears, which means that the joint no longer is able to rotate.

Now drag Ruby’s head.

Her head no longer can rotate around the joint in the torso (but it can still rotate around its last joint).

Constraining the range of rotation

There’s still some work to do with the armature. You can allow rotation but also constrain that range of rotation for various joints.

Select the bone that connects Ruby’s chest to her left upper arm.

The bone becomes highlighted.

In the Properties panel, if necessary, deselect the Enable option in the Joint: Rotation section.

Rotation about the joint in the torso is disabled so the upper arm cannot move as wildly around the torso.

Select the child bone (the bone from the upper arm to the forearm).

In the Properties panel, select the Constrain option in the Joint: Rotation section.

The angle indicator changes from a full circle to a partial circle on the joint, showing the minimum and maximum allowable angles and the current position of the bone.

In the Properties panel, set the Left Offset rotation angle to –90 degrees and the Right Offset rotation angle to 90 degrees.

Drag the upper arm.

You can move the arm, but its rotation is constrained to the extremes of rotating straight up or straight down, preventing your armature from being positioned in unrealistic positions and making it much easier to control and position your poses.

Note

In real life, joints allow only rotation of bones. However, in Animate, you can allow joints to slide in either the x (horizontal) or the y (vertical) direction and set the limits on how far those joints can travel. Use Joint: X Translation and Joint: Y Translation in the Properties panel to enable and constrain this kind of motion just like you do with rotation.

Using on-Stage controls for joint constraints

You can make quick adjustments to any joint rotation or translation constraints by just using the on-Stage controls that appear over joints, rather than making those adjustments in the Properties panel. Using the on-Stage controls lets you see the constraints in context with the other bones and graphics on the Stage.

Simply select a bone and move your mouse pointer over the joint in the head of the bone. A circle with four arrowheads highlights in blue. Click it to access the on-Stage controls.

To change the constraints for rotation, move your mouse over the outer edge of the circle, which will highlight in red, and click it.

Click inside the circle to define the minimum and maximum angles for the joint rotation. The shaded area is the range of permissible rotation. You can also drag to change the angles within the circle. Click outside the circle to confirm your adjustments.

If you want to disable the rotation at that joint, click the lock icon that appears when you roll over the center of the circle.

To change the constraints for translation (movement up and down or side to side), move your mouse over the arrows inside the circle, which will highlight in red.

Click either the horizontal or vertical arrows, and then drag the offsets to constrain the translation of the joint in either direction.

Adding poses

Your armature is now ready. You’ve connected your bones and applied the appropriate constraints to make it easier to pose. In the timeline, you insert poses just as you would insert keyframes for a motion tween.

Inserting poses

Recall that your goal is to define unique poses that will allow a natural pedaling motion. You’ll create 8 additional poses for Ruby’s feet to approximate the circle in which they will travel. The whole cycle will last 48 frames, so each pose will take 6 frames.

Note

When dealing with armature layers, “poses” and “keyframes” are essentially the same thing.

On the timeline, select frame 6.

Move Ruby’s feet and pedals so the front one is at the northwest position (about 1 o’clock) and the back foot is on the opposite side.

A new pose/keyframe is inserted at frame 6.

On the timeline, select frame 12.

Move Ruby’s feet and pedals so the front one is at the west position (about 3 o’clock).

Continue adding new poses every 6 frames and positioning Ruby’s feet along the pink circle. You’ll end up with 9 poses, each at every 15 minutes of a clock face, along 48 frames. The first and last poses will be the same.

Select Loop Playback at the bottom of the timeline (Shift+Option+L/Shift+Alt+L), and extend the markers to cover the entire animation span from frame 1 to frame 48.

Click the Play button at the bottom of the timeline (Return/Enter key) to view your animation loop.

Tip

Make sure the first and last poses are exactly identical by copying the first keyframe and pasting it in the last frame. Hold down the Option/Alt key and drag the first keyframe to frame 48.

Tip

You can edit poses on the timeline just as you can with keyframes of a motion tween. Right-click along the timeline and choose Insert Pose to insert a new pose. Right-click any pose and select Clear Pose to remove the pose from the layer. Command-click/Ctrl-click a pose to select it. Drag the pose to move it to a different position along the timeline.

Tip

You can add eases to your inverse kinematics animations by selecting the animation on the timeline and choosing an ease type and strength in the Properties panel. Eases can change the animation by starting slowly (ease-in) or by ending gradually (ease-out).

Changing joint speed

Joint speed refers to the stickiness, or stiffness, of a joint. A joint with a low joint speed value will be sluggish. A joint with a high joint speed value will be more responsive. You can set the joint speed value for any selected joint in the Properties panel.

The joint speed is apparent when you drag the very end of an armature. If there are slow joints higher up on the armature chain, those particular joints will be less responsive and will rotate to a lesser degree than the others.

To change the joint speed, click a bone to select it. In the Properties panel, set the Joint Speed value from 0% to 100%.

The joint speed doesn’t affect the actual animation; it only affects how the armature responds to the way you pose it on the Stage, making it easier to move.

Adding a wave and head nod

Now that the pedaling motion is complete, you’ll add additional movements that give Ruby some personality.

Select frame 18 and move Ruby’s left arm up in the air to wave.

Select frame 24 and move her forearm to a straighter position.

Select frame 30, move Ruby’s left arm up, and angle her forearm close to her head to complete her wave.

In one of the poses (you choose), rotate her head slightly so Ruby gives a nod during her wave.

Inverse kinematics with shapes

Ruby and her bicycle are an armature made with various movie clip symbols. You can also create armatures inside shapes, which are useful for animating objects without obvious joints and segments but can still have an articulated motion. For example, the arms of an octopus have no actual joints, but you can add bones to a smooth tentacle to animate its undulating motion. You can also animate other organic objects such as a snake, a waving flag, leaves of grass bending in the wind, or in the next task, Ruby’s hair blowing in the wind.

Defining bones inside a shape

Ruby’s hair is a shape with a red fill and no stroke. You’ll add bones to it in order to animate it.

In the library, open the Girl Bicycle_assets_ folder and double-click the Ruby_Head movie clip symbol.

In symbol-editing mode, note that her hair is in the bottom layer.

Choose the Bone tool.

Click inside the shape starting from the right side, and drag a bone inside the hair part of the way.

Animate creates an armature inside Ruby’s hair and moves it to its own armature layer.

Click the end of the first bone and drag out the next bone a little farther down toward the tip of the hair.

The second bone is defined.

Continue building the hair armature with a total of about four bones.

When the armature is complete, use the Selection tool to drag the last bone to see how the deformation of the hair follows the bones of the armature.

Animating the hair

Animating an armature within a shape follows the same process as animating an armature built with movie clips. You establish different poses for your armature with keyframes along the timeline.

Select frame 40 for all three layers and choose Insert > Timeline > Frames (F5).

Animate adds frames up to frame 40 on the timeline. Making the number of frames in the nested animation of Ruby’s hair different from the main timeline of the pedaling will make the animations not synchronized, for a more natural loop.

Move the playhead on the timeline to frame 15.

Move the armature in Ruby’s hair to deform it. You can also hold down the Shift key as you move a bone to isolate its rotation.

Animate inserts a new pose for Ruby’s hair at frame 15.

Move the playhead to frame 25.

Move the armature in Ruby’s hair to position it in a different way.

Animate inserts a new pose for Ruby’s hair at frame 25.

Hold down the Option/Alt key and drag the first pose to the last frame (40).

Animate duplicates the first pose into frame 40 so the animation will end at the same place as it begins.

Exit symbol-editing mode and test your movie.

Ruby’s hair waves and blows as she pedals her bicycle.

To complete the animation, add an armature to Ruby’s bangs in the bangs layer, and animate the wisp of hair fluttering in her face.

Note

The organic control of a shape by its armature is a result of a mapping between the anchor points along the shape and its bones. You can edit the connections between the bones and their control points and refine the behavior with the Bind tool. The Bind tool must be added to the Tools panel from the Edit Toolbar option. Consult the Animate Help documentation for more information on how to use this advanced tool.

Simulating physics with springiness

So far, you’ve seen how armatures can help you easily pose your characters and objects in different keyframes to create smooth, natural motion. But you can also add a bit of physics to your armatures so they react to how they move from pose to pose. The Spring feature helps you do this easily.

Spring simulates physics in any animated armature, whether you’re using movie clips or a shape. A flexible object normally would have some “springiness” that would cause it to jiggle on its own as it moved and continue to jiggle even after motion of the entire body stopped. The amount of springiness depends on the object—for example, a dangling rope would have a lot of jiggle, but a diving board would be much stiffer and have less jiggle. You can set the strength of the spring depending on your object, and you can even set different springiness amounts for each bone in an armature to help you get the exact amount of rigidity or flexibility in your animation. In a tree, for example, the larger branches will be less springy than the smaller end branches.

Adding springiness to Ruby’s hair

Adding spring to the armature in Ruby’s hair allows it to have additional residual motion after a pose in a keyframe. The strength values for spring can range from 0 (no spring) to 100 (maximum spring).

In the library, double-click the Ruby_Head movie clip symbol to enter symbol-editing mode.

In symbol-editing mode, select the last child bone in Ruby’s hair.

In the Properties panel, in the Spring section, set the Strength to 100.

The last bone has the maximum spring strength since the tip is the most flexible part of the whole armature and would have the most independent motion.

Select the next bone in the armature. You can simply click it on the Stage, or you can navigate up the armature hierarchy with the arrows in the Properties panel.

In the Properties panel, in the Spring section, set the Strength to 70.

The middle of the bone is a little less flexible than the tip, so it has a smaller strength value.

Select the next parent bone, and in the Properties panel, in the Spring section, set the Strength to 30.

The base of the hair armature is even less flexible than the middle, so it has a smaller strength value.

The effects of the Spring feature are more apparent when there are additional frames on the timeline after the armature’s final pose. The additional frames allow you to see the residual bouncing effect after the last pose.

Add frames to all the layers until frame 100.

Test your movie.

Ruby’s hair moves from the first pose to the next, but even past the last pose, the hair continues to sway slightly. The back and forth rotation of the hair armature, combined with the addition of springiness to the bones, can simulate the responses to physical forces on an object and makes the animation more realistic.

Go back and experiment with different values for the spring strength and see what works for your animation.

Adding damping effects

Damping refers to how much the spring effect decreases with time. It wouldn’t be realistic if the swaying of the hair continued indefinitely. Over time, the swaying should lessen and eventually stop. You can set a damping value for each bone from 0 (no damping) to 100 (maximum damping) to control how rapidly these effects diminish.

Select the last bone of the hair (at the tip), and in the Properties panel, in the Spring section, set the Damping value to 50.

The Damping value will decrease the swaying of the hair over time.

Select the next bone (its parent) in the armature, and in the Properties panel, set the Damping to its maximum value (100).

Continue selecting bones with Strength values and add Damping values to slow the springiness.

Choose Control > Test to see the effects that the Damping values have on the motion of Ruby’s hair.

The hair still sways, but the motion quickly subsides. The Damping values help add a sense of weight to the armature. Experiment with both the Strength and Damping values in the Spring section of your armature to get the most realistic motion.

Tweening automatic rotations

You’re almost done! Ruby pedals and waves, and her hair blows in the breeze, but her wheels and crank need to turn.

Adding a nested animation of rotating wheels

Now you’ll animate rotating wheels inside the movie clip of the bicycle frame.

Double-click the bicycle frame on the Stage.

You enter symbol-editing mode for the bike_frame movie clip symbol, but you’re editing in place to see all the other graphics on the Stage (dimmed).

Double-click the back wheel to drill down to the Wheel_Turning movie clip symbol.

Select the wheel on the Stage and click the Create Motion Tween button above the timeline.

Animate creates a tween layer and adds 30 frames.

Click inside the tween, and in the Properties panel, select Clockwise for Rotate, and leave Count at 1x.

The wheel automatically rotates on its transformation point (which is in the center) for one complete clockwise turn.

Since there is another instance of the Wheel_Turning movie clip for the front wheel of the bicycle, you don’t have to create another tween. Your bicycle wheels are complete.

Adding the crank arm

Finally, Ruby’s pedals need to be connected to the bicycle with the crank arm that spins the gears.

Double-click the crank_animation movie clip symbol in the library.

You enter symbol-editing mode for the movie clip symbol.

Select the movie clip instance on the Stage or the first keyframe on the timeline, and click Create Motion Tween above the timeline.

Animate creates 30 frames in a motion tween layer.

Add frames so the tween layer has 48 frames.

The animation of the crank arm rotating must be synchronized to Ruby’s pedaling, so the number of frames must match (48 frames).

Select the tween. In the Properties panel, select Clockwise for Rotate and 1x for Count.

Animate automatically tweens a clockwise rotation for one turn.

Frame 1 and frame 48 are identical, so to make a seamless loop, you’ll have to make a slight adjustment. Drag the right edge of the tween to extend the tween to frame 49.

Insert a new keyframe at frame 48.

Remove frame 49.

You still have a total of 48 frames for the rotation, but the end keyframe doesn’t repeat the beginning keyframe, and the loop will be seamless.

Now go to symbol-editing mode for the bike_frame movie clip symbol, and add an instance of the crank_animation symbol to the front_pedal layer. The instance should fit right inside the pink circle.

Copy the crank_animation instance.

Select the back_pedal layer and choose Edit > Paste In Place (Command+Shift+V/Ctrl+Shift+V).

The Paste In Place command pastes the copied items exactly where you copied them from.

Make sure the transformation point is at the center of the crank, and then choose Modify > Transform > Flip Vertical.

The instance flips so the crank arm now points downward. If the transformation point is not at the center, you can move it with the Free Transform tool.

If you hide the layers above the back_pedal layer, you can see the pedal, its transformation point, and how it flips. However, the crank arm will now rotate counterclockwise.

Choose Modify > Transform > Flip Horizontal.

The crank_animation instance flips horizontally so now the rotation will continue to turn clockwise.

Right-click the icon in front of the rotation_guide layer and choose Properties.

In the Layer Properties dialog box that appears, select Guide for the Type. Click OK.

Note

A guide layer doesn’t show up when you publish the project. It shows up on your timeline as an icon of a T square.

Exit symbol-editing mode and test your movie.

Ruby rides her bicycle, and the spinning crank arms synchronize with her pedaling. The pink circle that acted as your guide to position her feet and pedals doesn’t appear now that it is in a guide layer.

Rig mapping

Rig mapping is a feature that lets you apply saved armatures to different graphics, so a walking animation can be reused with many different characters.

You can save your own armature and armature poses in the Assets panel, or you can use the many assets provided by Adobe.

Saving an animated armature in the Assets panel

To save an armature animation to the Assets panel, you must first save it in your library as a movie clip symbol.

Select the armature layer of your Ruby animation. Right-click and choose Convert Layers To Symbol.

In the Convert Layers To Symbol dialog box, enter Ruby_bike_animation as its name, select Movie Clip as the type, and click OK.

Animate saves the armature layer inside a movie clip symbol, which appears in your library.

Right-click the new movie clip symbol and choose Save As Asset.

In the Save As Asset dialog box, enter a few keywords, separated by commas, that will serve as searchable reminders of the asset. Since you want to save the graphics, the armature, and the animation, keep Objects, Bones, and Motion selected. Click Save.

Animate saves the animation in the Custom tab of the Assets panel.

If you choose to save only Bones and Motion (and deselect Objects), then your animated armature will be saved to the Assets panel, as the following figure shows.

Using rig mapping to apply an armature to new graphics

In this task, you’ll see how you can apply an animated armature to new graphics.

Open 07Start_rigmapping.fla in the 07Start folder.

This sample file contains a character on the Stage made up of several movie clips.

Select all the instances on the Stage.

In the Assets panel, select the Default tab and open the Animated section.

In the Filters section, select Characters and Rigs and then choose the Character Walk_Side asset.

Drag the Character Walk_Side asset and drop it on the selected character instances.

The Rig Mapping panel appears.

Animate will attempt to map the armature onto the movie clip. If Animate can’t map the armature to the graphics automatically, you’ll need to manually identify which movie clip instances belong to which bones.

Select the root node, which is the hip, highlighted in the Rig Mapping panel.

On the Stage, click the movie clip corresponding to the hip on the little boy character.

When the movie clip instance is matched to its corresponding armature part, both are highlighted in green.

Click the next bone in the Rig Mapping panel and the corresponding movie clip instance on the Stage.

If you make a mistake, click the minus sign near each bone to remove the linkage and choose another.

Continue manually matching up the armature with the corresponding graphics on the Stage until the entire rig is complete. Click Apply Skeleton.

When the rig mapping process is complete, the armature is applied to the movie clips and the rig mapping diagram turns pink.

The armature poses appear in the timeline.

Test your movie.

The boy performs the walk cycle.

Note

If you want to apply only an armature (and not the animation), you can deselect the Motion option in the Rig Mapping panel.

Review questions

1 What are the two ways of using the Bone tool?

2 Define and differentiate these terms: a bone, a joint, and an armature.

3 What is the hierarchy of the armature?

4 How do you constrain or disable the rotation of joints?

5 What do strength and damping refer to in the Spring feature?

6 How do you save just an armature to the Assets panel?

Review answers

1 The Bone tool can connect movie clip instances to form an articulated object that can be posed and animated with inverse kinematics. The Bone tool can also create an armature within a shape, which can be posed and animated with inverse kinematics as well.

2 Bones are the objects that connect individual movie clips or that make up the internal structure of a shape for motion with inverse kinematics. Joints are the articulations between bones. Joints can rotate as well as translate (slide in both the x and y directions). Armatures refer to the complete articulated object. Armatures are separated on their own special armature layers on the timeline where poses can be inserted for animation.

3 An armature is made up of bones that are ordered in a hierarchy. When a bone is connected to another, one is the parent and the other is the child. When a parent bone has many child bones, each child bone can be described as a sibling to the others.

4 Hold down the Shift key to temporarily disable the motion of the armature and isolate a single bone’s rotation. Use the Properties panel to pin a bone to prevent it from rotating, or deselect the Enable option in the Rotation section of the Properties panel to disable a particular joint’s rotation.

5 Strength is the amount of springiness of any individual bone in an armature. Add springiness with the Spring feature to simulate the way different parts of a flexible object jiggle when the entire object moves and continue to jiggle when the object stops. Damping refers to how quickly the springiness effect subsides over time.

6 To save an armature to the Assets panel, the armature must be a movie clip symbol. Right-click the movie clip in the library and choose Save As Asset. In the Save As Asset dialog box, select Bones as the option. Animate will save the armature in the Custom tab of the Assets panel.

8. Animating the Camera

Lesson overview

In this lesson, you’ll learn how to do the following:

Understand the kinds of motion that are best animated with the Camera tool.

Activate the camera.

Hide or reveal the camera.

Pan, rotate, and zoom the camera.

Create depth with the Layer Depth panel.

Attach layers to the camera to keep them independent of camera motion.

Apply color effects to the camera.

This lesson will take about 1 hour to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

Use the camera to focus your audience’s attention on your animation. Use filmmaking techniques such as panning, zooming, and even rotating to direct the action for more cinematic approaches. In combination with the Layer Depth panel, achieve a sense of realistic depth.

Animating camera moves

So far, you’ve learned to animate different properties of symbol instances on the Stage—their position, scale, rotation, transparency, filters, and 3D position. You’ve also explored how you can animate complex motion that uses easing, and you’ve learned how to animate characters that use layer hierarchies and armatures with the Bone or the Asset Warp tools.

However, as an animator you’re not just directing the motion of your characters and objects on the Stage like a play. You’re also in control of the camera, making you more like the director of a movie. That means controlling where to point the camera to frame the action, zooming in or out, panning, or rotating the camera for special effect. All of these camera movements are available in Adobe Animate with the Camera tool.

Getting started

Start by viewing the finished movie file to see an educational video that you’ll create in this lesson.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 08End.mp4 file in the Lesson08/08End folder to play the video file.

The project is an animation showing the trajectory of the Juno spacecraft, which was launched from Earth in 2011 and reached Jupiter in 2016. The animation is something that you might see on an educational site or at a museum. Notice how the audience’s view zooms in and out and how the camera tracks Juno as it moves across the solar system. At various points in the animation, captions appear and explain what’s happening.

Close the 08End.mp4 file.

Double-click the 08Start.fla file in the Lesson08/08Start folder to open the initial project file in Animate.

This file is an ActionScript 3.0 document that contains the completed animation of Juno’s trajectory and the orbiting Jupiter and Earth. There are no camera moves in this project; you’ll add those in this lesson. It also contains additional graphic elements imported into the library for you to use.

Choose File > Save As. Name the file 08_workingcopy.fla, and save it in the 08Start folder.

Saving a working copy ensures that the original start file will be available if you want to start over.

Choose Control > Test.

Animate generates a new window for you to preview the animation. You see a partial view of the solar system, with the sun in the middle and Earth and Jupiter orbiting. A spacecraft launches from Earth and follows a gray track. Watch how it circles back toward Earth to be flung away to intercept Jupiter.

The animation is decent, and the Stage shows all the action: the orbiting planets and the movement of the Juno spacecraft. However, it lacks drama, and some details get lost because of the different scales we’re seeing. When Juno circles back toward Earth to use its gravity as a slingshot effect to propel it toward Jupiter, wouldn’t it be nice to see it up close as it approaches Earth to get flung back out? That’s where the Camera tool can help. You’ll animate the camera to direct our attention to the action. Get close when you need to, or zoom back out to show the big picture. Use a camera to follow the spacecraft just as you would follow a character across the Stage.

Understanding the project file

Your 08_workingcopy.fla project file contains three animated layers—earth, juno, and jupiter—containing classic tweens with a motion guide layer for each. The motion guides keep the animation on track. Remember that the motion guides for classic tweens are not visible when the animation is published, so to show the orbits of the planets and the trajectory of Juno, the guides have been duplicated in the layers called orbits and juno_trajectory. The bottom layer, called sun, contains the sun in the middle of the solar system.

Using the camera

Think of the camera as just another object to which you can apply a motion or classic tween to animate its position, rotation, or scale. If you’re already comfortable with managing keyframes and tweens, then the Camera tool should feel familiar.

Enabling the camera

Enable the camera with the Camera tool in the Tools panel (it may be hidden in the Drag And Drop Tools panel) or by clicking the Add/Remove Camera button at the top of the Timeline panel.

A Camera layer is added to the top of your timeline and becomes active.

On the Stage, the camera controls appear.

Characteristics of the camera

The Camera layer operates a little differently from a normal layer to which you add graphics:

The size of your Stage becomes the frame of your camera view.

You can have only one Camera layer, and it is always at the top of all your other layers.

You cannot rename the Camera layer.

You can’t add objects or draw in the Camera layer, but you can add classic or motion tweens to the layer, which allows you to animate the camera motion and camera filters.

When the Camera tool is selected, you cannot move or edit objects in other layers. Disable the camera by selecting the Selection tool or by clicking the Remove Camera button at the top of the Timeline panel.

Note

The Camera tool is not available for all types of Animate documents.

Setting the camera frame

First, you’ll use the camera to frame just a small part of the solar system to focus on the beginning of the action: the launch of Juno from Earth.

Make sure that your Camera tool is active and that the on-Stage controls are present. There are buttons for two modes on the controls, one for Rotate and another for Zoom. The Zoom mode should be highlighted.

Note

Clicking the Remove Camera button at the top of the Timeline panel doesn’t actually delete your Camera layer; it only disables it. You can click the button again to restore the Camera layer. To delete the Camera layer entirely, select it and click the Delete button (trash can icon).

Drag the slider to the right.

The camera view zooms closer into the Stage.

When your slider reaches the edge of the camera control, release your mouse button.

The slider snaps back to the center, allowing you to continue dragging to the right to continue zooming.

You can also enter a numerical value for the zoom in the Properties panel’s Camera Settings section.

Continue zooming the camera until you’ve reached about 260%.

Now drag your camera so that the sun in the middle of the solar system is more or less centered in the Stage, with many of the orbits in view. The Properties panel should display an X value of about –309 and a Y value of about 221.

Note

When using the camera zoom mode, be aware of the image resolution. As with any bitmap, zooming in too dramatically will reveal the limitations of the original embedded image.

It may seem backward to see the objects on the Stage move in the opposite direction that you drag, but remember that you’re moving the camera and not the objects.

As you scrub the timeline to see the animation, notice that your point of view is now closer into the action.

Animating a zoom-out

Since your camera is zoomed in to the earth, you can more easily see the launch of the Juno spacecraft. However, at about frame 60, Juno leaves the Stage boundaries. You’ll want to zoom the camera out to keep the spacecraft in view. For this chapter, disable the Auto Keyframe option on the timeline. You will be inserting all your keyframes manually.

Select frame 24 on the Camera layer.

Insert a new keyframe (F6) at frame 24.

You’ll keep the camera in the zoomed-in position from frame 1 to frame 24 and then begin to animate the camera motion from frame 24.

Select the keyframe you just created on frame 24 on the Camera layer and choose Create Motion Tween above the timeline.

A motion tween is applied starting at frame 24, indicated by the gold tween span on the Camera layer.

Move the playhead to frame 72.

Drag the camera zoom slider on the Stage to the left to zoom out and see more of the solar system. The Zoom percentage in the Properties panel should be about 170%.

Move the camera so that Juno remains roughly in the center of view. The camera position should be close to X=20 and Y=90.

A keyframe is automatically created at frame 72 with the new zoom value and position for the camera.

Scrub the timeline between frames 24 and 72 to see the animated zoom.

As Juno moves farther away from Earth, the camera zooms out to keep it in the frame.

Animating a pan

A pan is the motion of the camera side to side or up and down. In this next step, you’ll pan the camera slowly from left to right to follow the motion of the Juno spacecraft.

Move the playhead on the timeline to frame 160.

At this point in time, you’ll create another keyframe that establishes a new position for the camera.

Move the camera on the Stage to the right. Hold down the Shift key to constrain the movement to the horizontal direction only. You can also just drag the X value in the Properties panel to change the horizontal position to about –250.

The spacecraft should remain roughly at the center of the frame.

A new keyframe is automatically created at frame 160.

Press Return/Enter to preview the motion tween, which animates your camera zooming out from frames 24 to 72 and then panning from left to right from frames 72 to 160, tracking the spacecraft.

Animating a zoom-in

A crucial part of this animation is when Juno does a flyby of Earth, using its gravity as a slingshot to get a boost to Jupiter. You’ll zoom in closer to show how the spacecraft approaches Earth.

Right-click frame 160 and choose Insert Keyframe > All.

Inserting a keyframe for all the camera properties at frame 160 ensures that any future changes in zoom, position, or rotation occur from frame 160 and not from an earlier point on the timeline.

Move the playhead on the timeline to frame 190.

At this point in time, Juno is at its closest to Earth.

Zoom and move the camera on the Stage so that Earth and Juno are close up and nearly centered. The Zoom value should be about 760%, and the Position should be about X=–1309 and Y=767.

A new keyframe is automatically created at frame 190.

Move the playhead to the start of the timeline at frame 1 and press Return/Enter to preview the motion tween.

From frame 160 to frame 190, the camera does a dramatic zoom in as Juno flies toward Earth.

Animating a rotation

Rotating the camera is unusual, but in some cases, the motion can be quite dramatic and effective. In this project, rotating the camera will intensify the feeling of flying right next to the spacecraft as it approaches Earth.

Make sure the playhead on the timeline is still on frame 190.

Click the Rotate button on the camera slider.

Drag the camera slider to the right so that the camera rotates clockwise (and the objects in view rotate counterclockwise).

The Rotation value should be about –39 degrees.

Change the camera option back to the Zoom option and move the camera so that the spacecraft behind the earth is roughly in the center.

Preview the animation by pressing Return/Enter or by scrubbing the timeline.

The dramatic flyby of Earth by Juno is captured by the camera zooming in and rotating to be close to the action.

Finishing the camera moves

After the Earth flyby, Juno continues its trajectory toward Jupiter. You’ll animate the camera to frame the rest of its journey with additional zooms, rotations, and pans.

Move the playhead to frame 215 and click the Camera frame on the Stage.

Reset the Rotation value of the camera to 0 degrees. In the Properties panel, enter 0 for the Rotation value or click the Reset Camera Rotation button in front of the Rotate label.

The camera view tilts back to its default angle.

Move the camera so that Earth and Juno are about at the center.

Now move the playhead to frame 228.

Juno is moving farther out from the inner solar system, so you’ll need to keep backing up the camera.

Change the Zoom value to about 90%. Move the camera so that most of the solar system, including Jupiter’s orbit, is in view.

Select frame 480. Right-click and choose Insert Keyframe > All to create a new keyframe.

Your final camera move is to zoom in to Juno’s approach to Jupiter, so you have to create a beginning keyframe to establish the beginning values for the camera’s zoom, position, and rotation.

Zoom in for a close-up of Jupiter. The Zoom value of the camera should be about 1400%.

Move the camera to keep Jupiter and Juno in the frame.

Preview the entire animation by choosing Control > Test.

Note

When you zoom in too far all at once, you may lose sight of your graphics and may have trouble putting them back into the camera frame. It’s best to zoom a little bit at a time, and move the camera to keep the graphics that you want to zoom in on within the frame.

Animate exports the animation as a SWF in a new window. The animation plays with camera pans, zooms, and rotations that closely follow Juno’s journey from Earth to Jupiter.

Camera easing, the Motion Editor, and motion paths

Animating the camera is just like animating any other object on the Stage with motion tweening or with classic tweening. As with motion tweening and classic tweening, you can also apply eases to the camera motion to make any of your pans, zooms, or rotations ease-in or ease-out for a more natural movement. If you’re using motion tweening, you can even access the Motion Editor (see Lesson 4) by double-clicking the tween span (or by right-clicking the span and choosing Refine Motion Tween) in the Camera layer to apply a complex ease or to customize the property curve. The following figure shows the Motion Editor for the camera moves that you just completed.

However, not all features of motion tweening or classic tweening are available to the camera. You cannot animate the camera on a path. If you use classic tweens, you can’t add a motion guide to the Camera layer for your camera to follow. If you use motion tweens, there is no path on the Stage for you to edit.

Creating depth

When you move a camera to film a scene in real life, you get a sense of depth because foreground elements move across the frame a little quicker than background elements. This is called a parallax effect, and we’re familiar with the effect when we look out the window of a moving car. The closer trees and street signs zip past our window, whereas the distant mountains on the horizon move very slowly.

Animate offers the ability to create the same sense of depth when you animate camera moves using the Layer Depth panel. The Layer Depth panel allows you to set a layer’s z-depth, which is its distance from the Camera layer.

By default, all layers have a z-depth value of 0, which means they all are the same distance from the camera. Camera pans and zooms do not show a sense of depth, and the overall effect is as if the camera were panning across or zooming in to or out of a flat picture. The picture moves or gets bigger or smaller, but there is no differential movement of separate layers.

Note

The Layer Depth panel mimics the real-life multiplane camera invented and used by Walt Disney Studios for their traditional animated features, like Snow White and the Seven Dwarfs. The multiplane camera was a gigantic setup that allowed multiple layers of artwork to be filmed for a more realistic sense of depth. However, unlike in Animate, Disney’s multiplane camera remained stationary while the individual layers moved at different speeds.

Adding layers of stars

In the following tasks, you’ll enhance the animation of Juno’s journey to Jupiter by creating a sense of depth. You’ll add a few layers of stars and position them at different z-depth distances, which will enhance the vastness of space.

Note

The Layer Depth panel can be used independently of the Camera tool. That is, you can place objects in layers with different depth levels and animate them without activating the Camera tool. However, it is the motion of the camera in conjunction with layers at different z-depths that allows viewers to see the three-dimensionality of a scene.

Add a new layer in your timeline and move it to the bottom of the layer stack.

Rename the layer stars1.

The stars1 layer will contain the first layer of stars.

In the Library panel, drag the graphic symbol called stars1 from the library onto the Stage.

The graphic is simply a collection of gray and white dots randomly scattered over a large area. Don’t worry too much about precise placement; select the Selection tool and just position the instance to cover most of the solar system and a little of the space on the left since that’s where the camera moves.

It may be helpful to change the Stage view magnification level so that you can see more of the graphics that may be off the Stage (and out of camera view).

Add another layer called stars2 below stars1, and add another instance of the graphic symbol stars1 in that layer.

Use the Free Transform tool to rotate the instance 180 degrees so that the stars in this layer don’t align exactly with the stars in the stars1 layer. Again, make sure the stars cover most of the solar system.

Add a third layer of stars called stars3 below all the others, and add a third instance of the graphic symbol stars1 in that layer.

Use the Free Transform tool to rotate the instance about 55 degrees so that the stars in this bottommost layer don’t align exactly with the stars in the layer above it.

Select the first keyframe of the stars3 layer, and in the Properties panel, change the Color Effect so the Brightness value is at –60%.

The stars in that layer become slightly dimmer, which will reinforce the sense of distance.

Preview your animation by pressing the Return/Enter key.

Although the stars add a nice touch of realism to the highly diagrammatic solar system, the stars are still flat and don’t move with any parallax effect. You’ll change that with the Layer Depth panel, next.

Setting the z-depth in the Layer Depth panel

The Layer Depth panel manages the distances of each layer from the Camera layer.

In the Timeline panel, click the Layer Depth button, or choose Window > Layer Depth.

The Layer Depth panel appears, showing all the layers in the order in which they appear in the timeline. Next to each layer is a 0, indicating its current z-depth value. Next to the z-depth value is a color that is coded to the depth diagram on the right of the panel.

Since all the layers are currently at a z-depth of 0, they are at the same depth level, and they lie at the same plane as the camera frame.

The camera is indicated by the ball with the dotted lines radiating from it. The flat blue line attached to the dotted diagonal lines shows the field of view of the camera.

Make sure your view of the stage is at 100% (View > Magnification > 100%). In the Layer Depth panel, drag to the right on the z-depth value for the stars3 layer to increase it to 500. You can also click the value to enter a numeric value, or you can drag the corresponding colored line.

Notice the effect of the stars1 graphic on the Stage as you change the z-depth value. As the z-depth increases, the layer’s distance from the camera increases and the stars recede on the Stage. If you drag the opposite way, you can decrease the z-depth into negative values and you can make the layer appear behind the camera (try it out!).

The problem with changing the distance of the stars3 layer is that the graphics in that layer get small—sometimes too small for your animation. You can use the Maintain Size option to prevent your graphics from changing size as you change the layer distance. Move the z-depth value for the stars3 layer back to 0.

Now click the Maintain Size option in the Layer Depth panel to select it.

Drag the z-depth value for the stars3 layer to increase it to 500.

Notice how the size of the stars remains constant. The Maintain Size option must be clicked before every z-depth change, so if you drag the stars3 layer z-depth value three times to get to 500, make sure you click the Maintain Size option three times.

Click the Maintain Size option and set the z-depth value for the stars2 layer to 300 and the z-depth value for the stars1 layer to 150.

The diagram on the right in the panel indicates the positions of the three layers relative to the camera and the other layers (which remain at a z-depth value of 0). The bold highlighted layer in the diagram is the layer that is currently selected.

That’s all you have to do! Close the Layer Depth panel. Preview the effects of setting your last three layers farther behind the others.

The parallax effect due to the motion of the camera over layers at varying depth levels is most noticeable if you scrub the timeline between frames 72 and 160. That’s when the camera is panning from left to right, tracking Juno. You see the orbits sliding by faster than some of the stars, which are sliding by faster than the more distant ones. The overall effect is a realistic sense of space.

Tip

To maintain your sanity, it’s best to keep your layers’ order and their z-depth order the same. As you may have noticed, you could change the z-depth value of a top layer so that it is actually farthest from the camera and, hence, won’t overlap graphics in the other layers. This can get very confusing. So you should maintain the same overlapping order of your layers in the Timeline panel as you do in the Layer Depth panel. Change the z-depth values just to change the different spacing between layers.

More on the Layer Depth panel: Animating z-depth

Be aware that the z-depth property is tied to an individual keyframe for each layer. That means that the same layer can have a certain z-depth at one keyframe and then an entirely different z-depth at another keyframe later in the timeline. Objects can jump around, changing distances from the camera. For our project in this lesson, you won’t have to worry about different keyframes having different z-depths, since our stars1, stars2, and stars3 layers have only a single keyframe, at frame 1.

However, because the z-depth is tied to individual keyframes, you can apply tweens between the two keyframes to animate motion toward and away from the camera. Animating the z-depth opens up a whole new world of possibilities in three dimensions and is a powerful approach to animating in three dimensions in addition to the 3D Translation and 3D Rotation tools.

Attaching layers to the camera for fixed graphics

There’s one last item to add to the animation of the Juno spacecraft, and that’s the informative captions that pop up to explain the different parts of its trajectory. However, any graphic that we add to the Stage would be subject to all the camera moves—the panning, rotating, and zooming—that is, unless we fix, or attach, a layer containing the graphic in such a way that it is unaffected by the camera motion.

Animate allows you to do this to one or more layers when you attach them to the Camera layer.

Attaching a layer to the Camera layer

The attached layer is an option in the Layer Properties dialog box. You can also attach a layer by selecting the Attach Layer To Camera option in the timeline.

Create a new layer, drag it to the bottom of the layer stack, and rename it information.

This new layer will contain the captions that appear at various points along your animation.

Click next to the layer name under the Attach All Layers To Camera icon in the timeline.

A chain link icon indicates that the layer is currently locked to the Camera layer.

Double-click the layer icon in front of its name, or choose Modify > Timeline > Layer Properties.

The Layer Properties dialog box appears. Confirm that the Attach To Camera option is selected, and click OK to close the dialog box.

Adding the captions

Now you’ll add the information for the animation in keyframes along the timeline.

Add about 2 seconds’ worth of time (48 frames) at frame 1 before the animation begins (F5). The easiest way to do this is to drag-select frame 1 in all the layers and then press F5 (add frames) 47 times to add 2 seconds of time before the tweens in the earth, juno, and jupiter layers.

The slight pause before the animation begins will give your audience a chance to read the first caption.

Select frame 1 of the information layer.

Select the Rectangle tool. Choose None for the Stroke Color and a 50% transparent white for the Fill Color.

Create a long rectangle from the upper-left corner about 700 pixels wide and 50 pixels high. The Position for your rectangle should be X=0 and Y=0.

The semitransparent rectangle will be the box for your text.

Select the Text tool and choose Static Text in the Properties panel.

Choose a font that appeals to you by choosing from the Family and Style menus in the Character section of the Properties panel. Make the size 28 points (but you may have to increase or decrease the size depending on your font) and the color black. Click the Format: Align Center button in the Paragraph section.

Making sure Opacity is set to 100, drag out a text box over the semitransparent white rectangle in your information layer.

Type Juno’s journey to Jupiter begins and use the Align panel to center the text over the box horizontally and vertically (see Lesson 2 if you don’t remember how to use the Align panel).

The first caption is complete.

You’ll make the first caption disappear before the next one appears, so at frame 90 in the information layer, right-click and choose Insert Blank Keyframe (F7).

A blank keyframe appears at frame 90, and the caption disappears from the Stage.

The second caption appears as Juno doubles back toward Earth, so create another keyframe at frame 118.

Copy your text and semitransparent rectangle from frame 1 and paste them into this new keyframe at frame 118.

Change the contents of the text to read Juno heads back to Earth.

Continue in a similar manner to add the third caption. The second caption should disappear at about frame 192, with the third caption appearing at frame 236. The third caption should read Juno uses Earth’s gravity as a slingshot. The third caption should disappear at frame 336. Feel free to play around with the timing and positioning of the caption!

The final caption, which should appear at about frame 454 as the camera zooms into Jupiter, reads Juno arrives at Jupiter 5 years later.

Note

You can have more than one layer attached to the Camera layer.

Note

You can still change the z-depth value of a layer that is attached to the Camera layer.

Move the information layer higher in your layer stack just below the Camera layer so that the captions overlap all the other graphics.

Test your movie.

As the animation plays, your captions appear one by one. Since the information layer is attached to the Camera layer, the rotations, pans, and zooms do not affect the contents of the layer.

Camera color effects

You can also apply and animate camera color effects to create a color tint or to change the contrast, saturation, brightness, or hue of the entire view on the Stage. The effect simulates a filter that a cameraperson might put on a lens to heighten certain colors for a mood or to create a black-and-white film noir feeling.

To apply a color effect, select a keyframe in your Camera layer and choose the Tool tab in the Properties panel. Expand the Color Effects section and choose Tint in the pull-down menu. Select the color of the tint or change the Red, Green, and Blue values individually and then change the value of the Tint to set the amount. A value of 100 is the maximum.

For example, you could apply a sepia tint like this one to your camera to simulate an old-fashioned, aged film reel.

The color effects are applied to each keyframe of the Camera layer. In this project, since you’ve already animated your camera (and the Camera layer contains multiple keyframes), you would have to apply a color effect to each new keyframe if you want the effect to be consistent throughout the movie.

Exporting your final movie

Create the MP4 movie file by exporting it from Animate and converting it in Adobe Media Encoder, a separate app that is part of Creative Cloud (you’ll learn more about Adobe Media Encoder in the Bonus Lesson in the Web edition of this book).

Choose File > Export > Export Video/Media.

The Export Media dialog box opens.

Keep the Render size at the original 700 pixels by 400 pixels. Select Start Adobe Media Encoder Render Queue Immediately. Click Browse to select the destination filename and location. Click Export.

Animate generates a temporary SWF file and a MOV file from it. Adobe Media Encoder automatically launches.

In Adobe Media Encoder, the exported media file is added to the Render Queue panel.

Animate should begin the encoding process automatically. If it doesn’t, click the Start Queue button (the green triangle) or press Return/Enter to begin the encoding process.

Adobe Media Encoder converts the MOV file into the default format, shown here as an H.264-formatted video with the standard .mp4 filename extension.

The final file can be uploaded to Facebook, YouTube, or other video sharing sites or put up on your own website.

Review questions

1 What are the three kinds of camera motion that you can animate with the Camera tool?

2 How do you activate the Camera layer?

3 What are two ways to attach a layer to the Camera layer?

4 What is the z-depth, and how do you change it?

5 What does the Maintain Size option in the Layer Depth panel do?

Review answers

1 You can animate a pan (motion from one side to another or up and down), a zoom, or a rotation with the Camera tool.

2 Activate the Camera layer by selecting the Camera tool from the Tools panel or by clicking the Add Camera button at the top of the Timeline panel.

3 Attach a layer to the Camera layer by clicking the dot next to the layer name and under the Attach All Layers To Camera icon in the Timeline panel. The layer displays a camera with a chain link icon, indicating that it is attached to the Camera layer. You can also open the Layer Properties window and select Attach To Camera.

4 Z-depth is a numerical value that indicates a layer’s distance from the camera. Open the Layer Depth panel (Window > Layer Depth). You may have to enable Advanced Layers in the Document Settings (Modify > Document). Change a layer’s z-depth by selecting the number to the right of the layer name and typing a new value or by dragging the colored line that represents a layer relative to the dot that represents the camera.

5 The Maintain Size option in the Layer Depth panel maintains the size of the graphics in a layer when its z-depth value changes. Normally, when a layer’s z-depth increases and it moves farther away from the camera, graphics in the layer get smaller since they recede in the distance. The Maintain Size option keeps the size of the graphics constant.

9. Animating Shapes and Using Masks

Lesson overview

In this lesson, you’ll learn how to do the following:

Animate shapes with shape tweens.

Use shape hints to refine shape tweens.

Animate gradient fills.

View onion skin outlines.

Apply easing to shape tweens.

Create and use masks.

Understand mask limitations.

Animate the mask and masked layers.

This lesson will take about 1 hour to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

You can easily morph—create organic changes in shape—with shape tweens. Masks provide a way to selectively show only parts of a layer. Together, they can add more sophisticated effects to your animations.

Getting started

You’ll start the lesson by viewing the animated logo that you’ll create as you learn about shape tweens and masks in Adobe Animate.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Switch to a web browser, choose File > Open File, and navigate to Lesson09/09End/09End.gif to play the finished animated GIF. An animated GIF is a single file that often combines multiple images as a looped animation, popular for internet memes.

The project is an animated logo for a fictional company intended as a profile image for different social media platforms. The animation shows a flame flickering at the top of the company name. Not only does the shape of the flame change constantly but so does the radial gradient fill inside the flame. A linear gradient sweeps across the letters of the company name from left to right. In this lesson, you’ll animate both the flame and the colors that move across the letters.

Close your browser. Double-click the 09Start.fla file in the Lesson09/09Start folder to open the initial project file in Animate.

Choose File > Save As. Name the file 09_workingcopy.fla and save it in the 09Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

Animating shapes

In the previous lessons, you learned to create animations with symbol instances. You could animate the motion, scale, rotation, color effect, or filters applied to symbol instances. To animate deformations and work with more organic shapes, you also learned to add armatures with the Asset Warp tool or the Bone tool.

Another approach to working with organic shapes and animating the changing contours or colors of a graphic is to use shape tweening.

Shape tweening is a technique for interpolating stroke and fill changes between different keyframes. Shape tweens make it possible to smoothly morph one shape into another. Any kind of animation that requires the stroke or fill of a shape to change—for example, animation of smoke, water, or hair—is a perfect candidate for shape tweening.

Because shape tweening applies only to shapes, you can’t use groups, symbol instances, or bitmap images.

Understanding the project file

The 09Start.fla file is an ActionScript 3.0 document that contains most of the graphics already completed and organized in different layers. However, the file is static, and you’ll add the animation.

The text layer is at the very top and contains the company name, “Fire starter.” The flame layer contains the flame, and the bottom layer, called glow, contains a radial gradient to provide a soft glow.

There are no assets in the library.

Creating a shape tween

To create the flickering flame effect, you’ll animate the undulating changes in a flame’s typical teardrop shape. You’ll rely on shape tweening to handle the smooth morphing from one shape to the next, as well as the gradual shifts in color. A shape tween requires at least two keyframes on the same layer. The beginning keyframe contains a shape drawn with the drawing tools in Animate or imported from Adobe Illustrator. The ending keyframe also contains a shape. A shape tween interpolates the smooth changes between the beginning keyframe and the ending keyframe.

Establishing keyframes containing different shapes

In the following steps, you’ll animate the flame that will sit on top of the company name.

Select frame 40 in all three layers and choose Insert > Timeline > Frame (F5).

Forty frames are added to all three layers to define the overall length of the animation.

Lock the text layer and the glow layer. This prevents you from accidentally selecting or moving the graphics in those layers.

Select frame 40 in the flame layer and choose Insert Keyframe above the timeline (or right-click and choose Insert Keyframe or choose Insert > Timeline > Keyframe [F6]). The contents of the previous keyframe in frame 1 are copied into the new keyframe.

You now have two keyframes on the timeline in the flame layer, at frame 1 and at frame 40. Next, you’ll change the shape of the flame in the end keyframe.

Select the Selection tool.

Click away from the shape to deselect it. Move your cursor close to the outlines of the shape, and drag the contours of the flame to make the flame skinnier.

The beginning keyframe and the ending keyframe now contain different shapes—a fat flame in the beginning keyframe and a skinny flame in the ending keyframe in frame 40.

Applying the shape tween

Next, you’ll apply a shape tween between the keyframes to create the smooth transitions.

Click any frame between the beginning keyframe and the ending keyframe in the flame layer.

Press and hold the Create Tween button above the timeline and choose Create Shape Tween. Or right-click and then choose Create Shape Tween, or choose Shape Tween from the Insert menu.

Animate applies a shape tween between the two keyframes, which is indicated by a black forward-pointing arrow and an orange fill in the tween span.

Watch your animation by choosing Control > Play (Return/Enter) or by clicking the Play button at the top of the Timeline panel.

Note

Don’t worry if your flame doesn’t morph exactly the way you want it to. Small changes between keyframes work best. Your flame may rotate while going from the first shape to the second. You’ll have a chance later in this lesson to refine the shape tweening with shape hints.

You have created a smooth animation between the keyframes in the flame layer, morphing the shape of the first flame into the shape of the second flame.

Blend types

In the Properties panel, you can modify your shape tween by choosing either the Distributive or the Angular option for Blend. These two options determine how Animate makes the interpolations to change the shapes from one keyframe to the next.

The Distributive option is the default and works well for most cases. It creates animations in which the intermediate shapes are smoother.

Use the Angular blend if your shapes have many points and straight lines. Animate attempts to preserve apparent corners and lines in the intermediate shapes.

Changing the pace

The keyframes of a shape tween can be easily moved along the timeline to change the timing or pacing of the animation.

Moving a keyframe

The flame slowly transforms from one shape to another over a period of 40 frames. If you want the flame to make the shape change more rapidly, you need to move the keyframes closer together.

Select the last keyframe of the shape tween in the flame layer.

Make sure the box icon appears near your cursor as you drag the last keyframe to frame 6.

The shape tween shortens.

Press Return/Enter to play your animation.

The flame flickers quickly and then remains static until frame 40.

Adding more shape tweens

You can add shape tweens by creating more keyframes. Each shape tween simply requires two keyframes to define its beginning state and its end state.

Inserting additional keyframes

You want the flame to continually change shape, just as a real flame would. You’ll change the shape of the flame in keyframes later in the timeline and apply shape tweens between all the keyframes.

Make sure that the Auto Keyframe option is enabled above your timeline and select frame 17 in the flame layer.

Click away from the shape to deselect it. Drag the contours of the flame to create another variation in its shape. You can make the base thicker or change the curvature of the tip to make it lean left or right.

Animate automatically creates a keyframe at frame 17, where you’ve made a change in the shape of the flame.

Select frame 22 in the flame layer and modify the contours of the flame.

Animate automatically creates a new keyframe in frame 22, indicating another change.

Continue making slight variations of the flame at frames 27, 33, and 40.

Your timeline now has seven keyframes in the flame layer, with a shape tween between the first and second keyframes.

Each of the seven keyframes in the flame layer contains a slightly different shape for the flame.

Extending the shape tweens

Your next step is to extend the shape tween so that the flame morphs from one shape to the next.

Select any frame between the second and third keyframes, and choose Create Shape Tween. Or choose Insert > Create Shape Tween.

A black forward-pointing arrow on an orange background appears between the two keyframes, showing that you’ve applied a shape tween.

Continue to insert shape tweens between all the keyframes.

You should have six shape tweens in the flame layer.

Press Return/Enter to watch the animation play.

Note

Try this shortcut: select a range of frames that cover multiple keyframes, right-click, and choose Create Shape Tween to apply a shape tween across all keyframes.

Your flame flickers back and forth for the duration of the animation. Depending on how extensive your modifications to the flame have been, your flame may undergo some weird contortions between keyframes—for example, flipping or rotating unpredictably. Don’t worry! You’ll have a chance later in the lesson to refine your animation with shape hints.

Broken tweens

Every shape tween needs a beginning and an end keyframe with a shape inside each. If the last keyframe of a shape tween is missing, Animate shows the broken tween as a dotted black line (rather than a solid arrow).

In this example, insert a keyframe at frame 40 to fix the tween.

Creating a looping animation

Your flame should flicker back and forth continuously for as long as the logo is onscreen. You can create a seamless loop by making the first and last keyframe identical and putting the animation inside a graphic or a movie clip symbol. A movie clip timeline loops continuously, independently of the main timeline, while a graphic symbol plays as long as there are enough frames on the main timeline.

Duplicating keyframes

Make the first keyframe identical to the last keyframe by duplicating its contents.

Right-click the first keyframe on the flame layer and select Copy Frames. Or choose Edit > Timeline > Copy Frames.

The contents of the first keyframe are placed on your clipboard.

Right-click the last keyframe on the flame layer and select Paste Frames. Or choose Edit > Timeline > Paste Frames.

Tip

You can quickly duplicate keyframes by first selecting a keyframe and then Option/Alt-dragging the keyframe to a new position.

The first and last keyframes now contain identical flame shapes.

Previewing the loop

Use the Loop button at the top of the Timeline panel to preview your animation.

Click the Loop button or choose Control > Loop Playback (Option+Shift+L/Alt+Shift+L) to enable continuous playback when you play the movie.

Markers appear on the timeline header indicating the range of frames that loop during playback. Next, adjust the markers to extend the loop to include the entire movie.

Drag the markers to include all the frames on your timeline (frames 1 through 40). Hold down the Command/Ctrl key while you’re dragging either marker to move both of them in equal amounts.

Press Return/Enter to test the animation.

The flame animation plays and loops continuously. Click the Pause button or press Return/Enter again to stop the animation.

Deselect the Loop button at the top of the Timeline panel to hide the markers and end the loop playback mode.

Note

The Loop Playback option loops the animation only in the Animate authoring environment and not in the published animation.

Inserting the animation into a graphic symbol

When your animation plays in a graphic clip symbol, the animation loops automatically as long as there are sufficient frames on the main timeline.

Select the flame layer and right-click to choose Convert Layers To Symbol.

The Convert Layers To Symbol dialog box appears.

Enter flame as the name of the symbol, and choose Graphic from the Type menu. Click OK.

A new graphic symbol is created and saved in your library. On the flame layer, Animate leaves an instance of your newly created symbol.

Press Return/Enter.

Animate plays the animation on the timeline. Since your graphic symbol contains 40 frames and the main timeline contains 40 frames, the entire animation of the flame flickering fits into the main timeline.

Note

The reason why we’re using a graphic symbol rather than a movie clip symbol to create the looping animated flame is that movie clip timelines do not get included in exported animated GIFs, and the last exercise in this lesson will involve publishing this file as an animated GIF.

Shape tweening with variable-width strokes

Any aspect of a shape can be shape tweened, including variable widths of a shape’s stroke. In Lesson 2, you learned to use the Width tool to create lines with thick and thin variations for more expressive graphics. You can change the width of the strokes in different keyframes, and when you apply a shape tween between those keyframes, Animate creates smooth interpolations of those stroke widths.

Considering the ability to animate the thickness of a shape’s stroke, the contours of the stroke itself, and the inside fill (with solids, gradients, or transparencies) of a shape, the creative possibilities are nearly limitless.

Using shape hints

Animate creates the smooth transitions between keyframes of your shape tween, but sometimes the results are unpredictable. Your shapes may go through strange contortions, flips, and rotations to get from one keyframe to another. You may like the effect, but more often than not you’ll want to maintain control of the transformations. Using shape hints can help refine the shape changes.

Shape hints force Animate to map points on the start shape to corresponding points on the end shape. By placing multiple shape hints, you can more precisely control how a shape tween appears.

Adding shape hints

Now you’ll add shape hints to the shape of the flame to modify the way it morphs from one shape to the next.

Tip

Shape hints should be placed on the edges of shapes.

Double-click the flame graphic symbol in the library to enter symbol-editing mode. Move the playhead to frame 1 of the shape tween in the flame layer.

Choose Modify > Shape > Add Shape Hint (Command+Shift+H/Ctrl+Shift+H).

A red-circled letter “a” appears on the Stage. The circled letter represents the first shape hint.

Select the Selection tool and make sure that Snap To Objects in the Doc tab of the Properties panel is selected.

Snap To Objects ensures that objects snap to each other when being moved or modified.

Drag the circled letter to the tip of the flame.

Choose Modify > Shape > Add Shape Hint again to create a second shape hint.

A red-circled “b” appears on the Stage.

Drag the “b” shape hint to the bottom of the flame shape.

You have two shape hints mapped to different points on the shape in the first keyframe.

Select the next keyframe of the flame layer (frame 6).

A corresponding red-circled “b” appears on the Stage, hiding an “a” shape hint that is directly under it.

Drag the circled letters to corresponding points on the shape in the second keyframe. The “a” hint goes on the top of the flame, and the “b” hint goes on the bottom of the flame.

The shape hints turn green, indicating that you’ve correctly placed them so that they correspond to equivalent locations in the first keyframe.

Select the first keyframe.

Note that the initial shape hints have turned yellow, indicating that they are correctly placed. When placed properly, the shape hints in the beginning keyframe turn yellow and those in the ending keyframe turn green.

Scrub the playhead through the first shape tween on the timeline to see the effect of the shape hints on the shape tween.

The shape hints force the tip of the flame in the first keyframe to map to the tip of the flame in the second keyframe and force the bottoms to map to each other. This restricts the transformations.

To demonstrate the value of shape hints, you can deliberately create a mess of your shape tweens. In the end keyframe, put the “b” hint at the top of the flame and the “a” hint at the bottom.

Animate forces the tip of the flame to tween to the bottom of the flame and vice versa. The result is a strange flipping motion as Animate tries to make the transformation. Put the “a” back at the top and the “b” back at the bottom after you’re done experimenting.

Tip

You can add a maximum of 26 shape hints to any shape tween. Be sure to add them consistently in a clockwise or counterclockwise direction for best results.

Removing shape hints

If you’ve added too many shape hints, you can easily delete the unnecessary ones. Removing a shape hint in one keyframe will remove its corresponding shape hint in the other keyframe.

If you want to remove a shape hint, drag an individual shape hint entirely off the Stage and pasteboard.

If you want to remove all shape hints, choose Modify > Shape > Remove All Hints.

Previewing animations with onion skinning

It’s sometimes useful to see how your shapes are changing from one keyframe to another on the Stage all at once. Seeing how the shapes gradually change lets you make smarter adjustments to your animation. You can do so using the onion skinning option, available at the top of the Timeline panel.

Onion skinning shows the contents of the frames before and after the currently selected frame.

The term “onion skin” comes from the world of traditional hand-drawn animation, in which animators draw on thin, semitransparent tracing paper known as onionskin. A light box shines a light behind the drawings to allow them to be seen through several sheets. When creating an action sequence, animators flip back and forth quickly between drawings held between their fingers. This allows them to see how the drawings smoothly connect to each other.

Turning on onion skinning

The Onion Skin button is above the timeline, allowing you to toggle it on or off. Pressing and holding the Onion Skin button displays additional options.

Click the Onion Skin button at the top of the Timeline panel.

Animate shows several shapes for the flame, representing the shapes in previous and future frames. Seeing multiple frames all on the Stage at once allows you to compare the changes between frames. The currently selected frame is in red. The previous frames are shown in blue, and the future frames are shown in green. The outlines of the flame fade the farther away they are from the current frame.

On the timeline, Animate displays markers to bracket your currently selected frame. The blue-marked bracket (to the left of the playhead) indicates how many previous frames are shown on the Stage, and the green-marked bracket (to the right of the playhead) indicates how many future frames are shown.

Move the playhead to a different frame.

Animate keeps the markers around the playhead no matter where you move it, always showing the same number of frames behind and ahead.

Tip

You can even scrub the playhead back and forth along the timeline to see the ghostly images of the onion skins moving along with the animation. You cannot see onion skins during normal playback, however.

Adjusting the markers

You can move either marker to show more or fewer onion skin frames.

Drag the blue marker to adjust the number of past onion skin frames shown.

Drag the green marker to adjust the number of future frames displayed.

Hold down Command/Ctrl while dragging either marker to move the past and future markers in equal amounts.

Hold down Shift while dragging either marker to move the onion skin range to a different spot on the timeline (as long as it still encompasses the playhead).

Press and hold the Onion Skin button at the top of the Timeline panel and choose Anchor Markers. With the Anchor Markers option enabled, you can move your playhead on the timeline and the bracketed onion-skinned frames will remain locked in place.

Press and hold the Onion Skin button at the top of the Timeline panel and choose All Frames. With the All Frames option enabled, the brackets will automatically move to cover the first frame and the last on the timeline.

Advanced onion skin options

If you don’t like the blue and green color coding of previous and future frames, or you want to change the opacity of the onion skins, you can change them in the advanced settings.

Press and hold the Onion Skin button at the top of the Timeline panel and choose Advanced Settings.

The Onion Skin Settings dialog box appears.

You can fine-tune how the onion skin frames appear by adjusting the following settings:

Choose the previous or future frame range numerically.

Click the color swatches to change the color of the previous or future frames.

Choose between seeing the onion skin frames only as outlines, as shown here, or fully rendered.

Move the opacity sliders to change the starting opacities and how quickly the onion skin frames fade.

Choose to see only keyframes.

Anchor the frame markers.

Note

Animate remembers the most recent preferences set in the Onion Skin Settings panel. Clicking the Onion Skin button above the timeline will toggle onion skins with those settings on and off.

Animating color

Shape tweens interpolate all aspects of a shape, which means that both the stroke and fill of a shape can be tweened. So far, you’ve modified the stroke, or outlines, of the flame. In the next section, you’ll modify the fill so that the color gradient can change—perhaps the flame will glow brighter and more intensely at some points in the animation.

Adjusting the gradient fills

Use the Gradient Transform tool to change the way the color gradient is applied to a shape, and use the Color panel to change the actual colors used in a gradient.

If you’re not already in symbol-editing mode for your flame symbol, double-click the flame graphic symbol in the library to edit it.

Select the second keyframe on the flame layer (frame 6).

Select the Gradient Transform tool, which is grouped with the Free Transform tool in the Tools panel.

The control points for the Gradient Transform tool appear on the gradient fill of the flame. The various control points allow you to stretch, rotate, and move the focal point of the gradient within the fill. (The Stage color is shown in white so that you can better see the Gradient Transform tool control points.)

Use the control points to tighten the color gradient into the base of the flame. Reduce the gradient’s size, make it wider, position it lower on the flame, and move the focal point (represented by a tiny triangle) of the gradient to one side.

Your flame’s orange core appears lower and more intense because the colors are distributed in a smaller area.

Move the playhead along the timeline between the first and second keyframe.

The shape tween automatically animates the colors inside the flame as well as its contours.

Select the third keyframe on the flame layer (frame 17). In this frame, you’ll adjust the actual color of the gradient.

Select the Selection tool and click the fill of the flame on the Stage.

Open the Color panel (Window > Color).

The Color panel appears, showing you the gradient colors of the selected fill.

Click the inner color marker, which is currently yellow.

Change the color to a hot pink (#FF33CC).

The center color of the gradient turns pink.

Move the playhead along the timeline between the second and third keyframes.

The shape tween automatically animates the center color in the gradient from yellow to pink. Experiment with the other keyframes by modifying the gradient fill and see what kinds of interesting effects you can apply to your flickering flame.

Note

Shape tweens can smoothly animate solid colors or color gradients, but they can’t animate between different types of gradients. For example, you can’t shape tween a linear gradient into a radial gradient.

Creating and using masks

Masking is a way of selectively hiding and displaying content on a layer. It enables you to control the content that your audience sees. For example, you can make a circular mask and allow your audience to see only through the circular area so that you get a keyhole or spotlight effect. In Animate, you put a mask on one layer and the masked content in a layer below it.

For the animated logo you’re creating in this lesson, you’ll make the text a little more visually interesting by using the text itself as a mask.

Defining the mask layer

From the “Fire starter” text, you’ll create a mask that will reveal an image of a fire beneath it.

Return to the main timeline. If necessary, deselect the onion skin and ensure the playhead is at the beginning of the timeline. Unlock the text layer. Double-click the icon in front of the text layer name, or select the text layer and choose Modify > Timeline > Layer Properties.

The Layer Properties dialog box appears.

Select Mask and click OK.

Tip

Masks do not recognize strokes, so use only fills in the mask layer. Text created with the Text tool also works as a mask.

The text layer becomes a mask layer, indicated by the mask icon in front of the layer name. Anything in this layer will act as a mask for a masked layer below it.

Note

Animate does not recognize different Alpha levels in a mask created on a timeline, so a semitransparent fill in the mask layer has the same effect as an opaque fill, and edges will always be hard. However, in an ActionScript 3.0 document, you can use ActionScript code to dynamically create masks that will allow transparencies.

For this lesson, we’re using the text already in place as the mask, but the mask can be any filled shape. The color of the fill doesn’t matter. What’s important to Animate are the size, location, and contours of the shape. The shape will be the “peephole” through which you’ll see the content on the layer below. You can use any of the drawing or text tools to create the fill for your mask.

Creating the masked layer

The masked layer is always indented under the mask layer.

Click the New Layer button, or choose Insert > Timeline > Layer.

A new layer appears.

Rename the layer fiery_effect.

Drag the fiery_effect layer under the mask layer (named “text”) and a little to the right so that it becomes indented.

The fiery_effect layer becomes a masked layer, paired with the mask layer above it. Any content in the masked layer will be masked by the layer above it.

Choose File > Import > Import To Stage, and select fire.jpg from the 09Start folder. Then click Open.

The bitmap image of fire appears on the Stage, and the words appear over the image.

Tip

You can also double-click a normal layer under a mask layer, or choose Modify > Timeline > Layer Properties, and select Masked to modify the layer into a masked layer.

Seeing the effects of the mask

To see the effects of the mask layer on its masked layer, you must lock both layers.

Click the Lock option for both the text layer and the fiery_effect layer.

Note

You can have multiple masked layers under a single mask layer.

Both the mask and masked layers become locked. The shapes of the letters in the mask layer reveal parts of the image in the masked layer.

Choose Control > Test.

As the flame flickers above the text, the letters reveal the fiery texture in the layer below it.

Traditional masks

It might seem counterintuitive that the shapes in the mask layer reveal, rather than hide, the content in the masked layer. However, that’s exactly how a traditional mask in photography or painting works. When a painter uses a mask, the mask protects the painting from paint splatters so that the underlying painting will be visible. When a photographer uses a mask in the darkroom, the mask protects the photosensitive paper from the light, to prevent those areas from getting any darker. So thinking of a mask as something that protects a lower, masked layer is a good way to remember which areas are hidden and which are revealed.

Animating the mask and masked layers

The letters of your animated logo have more drama now that you’ve created a mask with an image of fire behind it. However, the client for this fictional project now demands that it have even more punch. Although she likes the look of the fiery letters, she wants an animated effect.

Fortunately, you can include animations in either the mask or the masked layer. You can create an animation in the mask layer if you want the mask itself to move or expand to show different parts of the masked layer. Or you can create an animation in the masked layer if you want the content to move under a mask, like scenery whizzing by a train window.

Adding a tween to the masked layer

To make the logo more compelling for your client, you’ll add a shape tween to the masked layer. The shape tween will move a glow from left to right for a portion of the movie under the letters.

Unlock both the text layer and the fiery_effect layer.

The effects of the mask and masked layer are no longer visible, but their contents are now editable.

Delete the bitmap image of the fire in the fiery_effect layer.

Select the Rectangle tool and open the Color panel (Window > Color).

In the Color panel, make sure Fill Color is selected and choose Linear Gradient from the Color Type menu.

Create a gradient that starts with red on the far left (#FF0000), goes to yellow in the middle (#FFFC00), and becomes red again on the far right (#FF0000). Make sure your Alpha is set to 100% so that the colors are not transparent.

Create a rectangle in the fiery_effect layer that encompasses the letters in the text layer.

Choose the Gradient Transform tool, and click the fill of your rectangle to select it.

The control handles for the Gradient Transform tool appear on the fill of the rectangle. We’ll use this tool to position the gradient off the Stage so that it can make a dramatic entrance.

Drag the center point of the gradient so that the yellow color appears on the far-left side of the Stage.

The yellow glow will enter from the left and move to the right.

Select frame 20 in the fiery_effect layer and choose the Insert Keyframe button above the timeline (or F6).

The contents of the previous keyframe are copied into the new keyframe. This will mark the start of the tween. Even though Auto Keyframe is enabled, you have to manually insert this keyframe because there is no change from frame 1.

Select the last frame (frame 40) in the fiery_effect layer.

Drag the center point of the gradient far enough to the right so that the yellow color is just barely visible on the right side of the Stage.

Since your Auto Keyframe option is enabled, a new keyframe is automatically created in frame 40 with the new gradient fill. You now have three keyframes in the fiery_effect layer.

Select any frame on the timeline between the second and third keyframe in the fiery_effect layer, and choose Create Shape Tween above the timeline. Or, from the main menu bar, choose Insert > Create Shape Tween.

The color gradient is shape tweened so that the yellow glow moves within the fill of the rectangle from left to right.

Watch your animation by choosing Control > Test or by pressing Return/Enter.

While the flame burns above the letters, a soft yellow glow flashes across the letters.

Easing a shape tween

Eases help your animation bear a sense of weight by enabling you to add an acceleration or deceleration component to its motion.

Note

The Motion Editor, which is the advanced panel integrated into the timeline that provides different ease types, is not available for shape tweens.

You can use the Properties panel to add an ease to a shape tween. Ease values range from −100, which indicates an ease-in, to 100, which indicates an ease-out. An ease-in makes the motion start off slowly. An ease-out slows down the motion as it approaches its ending keyframe.

Adding an ease-in

You’ll make the glow that flashes across the letters of the logo begin slowly and then pick up speed. The ease-in will help viewers take notice of the animation before it proceeds.

Click anywhere inside the shape tween in the fiery_effect layer.

In the Properties panel, click the Effect button and choose Ease In > Cubic. Double-click to apply the effect.

Animate applies an ease-in effect to the shape tween. You can explore the other kinds of ease effects, which vary in kind and intensity.

Make sure that your mask and masked layers are locked, and choose Control > Test to test your movie.

Note

As with classic tweens, you can apply more advanced eases or even custom eases. Click the Edit Easing button to customize your ease curve.

The soft yellow glow flashes across the letters, starting off slowly and then adding a little more sophistication to the entire animation.

Exporting the finished animated GIF

Your project is done, and you’ll export the animated GIF to be used as your client’s Facebook profile image. There is a quick way to create an animated GIF and a more complicated way, depending on whether you want to fine-tune your animated GIF settings.

For the quick method, choose Quick Share And Publish > Publish > Animated GIF.

Click Publish.

Animate exports an animated GIF and saves it to the same location as your Animate file.

If you want more control over the export settings, choose File > Export > Export Animated GIF.

Animate opens the Export Image dialog box. It shows a preview of the image and various options for optimizations. In the Preset area, make sure the Transparency option is unselected.

In the Preset area, choose GIF from the Optimized File Format menu. Choose 0 from the Lossy menu and 256 from the Colors menu. This will maximize the quality of your image. You can select Selective and Diffusion for the other two menus. These options determine how the 256 colors are chosen and mixed to create the final image.

In the Image Size area, keep all the values at their default settings. The Width and Height should match the original Stage size.

In the last area, Animation, you can choose the type of looping behavior for your animated GIF. Select Forever, which will make your animated GIF loop endlessly. You can preview the animation by clicking the Play button. You can also examine each of the 40 frames individually by moving forward or backward one frame at a time.

Click Save, and in the dialog box that appears, provide a filename and navigate to the 09End folder to save your animated GIF.

Review questions

1 What is a shape tween, and how do you apply it?

2 What are shape hints, and how do you use them?

3 What does the color coding of the onion skin markers indicate?

4 How is a shape tween different from a motion tween?

5 What is a mask, and how do you create one?

6 How do you see the effects of a mask?

Review answers

1 A shape tween creates smooth transitions between keyframes containing different shapes. To apply a shape tween, create different shapes in an initial keyframe and in a final keyframe. Then, select any frame between the keyframes in the timeline and choose Create Shape Tween from the Create Tween button above the timeline.

2 Shape hints are labeled markers that indicate how one point on the initial shape of a shape tween will map to a corresponding point on the final shape. Shape hints help refine the way the shapes will morph. To use shape hints, first select the initial keyframe of a shape tween. Choose Modify > Shape > Add Shape Hint. Move the first shape hint to the edge of the shape. Move the playhead to the final keyframe, and move the corresponding shape hint to a matching edge of the shape.

3 By default, Animate shows the onion skins in previous frames in blue and the onion skins in future frames in green. The onion skin in the currently selected frame is in red. The colors can be customized in the Advanced Settings options in the Onion Skin menu.

4 A shape tween uses shapes, whereas a motion tween uses symbol instances. A shape tween smoothly interpolates the change of stroke or fill of a shape between two keyframes. A motion tween smoothly interpolates the changes in location, scale, rotation, color effect, or filter effect of a symbol instance between two keyframes.

5 Masking is a way of selectively hiding and displaying content on a layer. In Animate, you put a mask on the top mask layer and the content in the layer below it, which is called the masked layer. Both the mask and the masked layers can be animated.

6 To see the effects of the mask layer on the masked layer, you must lock both layers, or test your movie by choosing Control > Test.

10. Creating Interactive Navigation

Lesson overview

In this lesson, you’ll learn how to do the following:

Create button symbols.

Duplicate symbols.

Swap symbols and bitmaps.

Name button instances.

Understand how ActionScript 3.0 and JavaScript create interactive Animate documents.

Use the wizard in the Actions panel to quickly add JavaScript.

Create and use frame labels.

Create animated buttons.

This lesson will take about 2 hours to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

Let your viewers explore your project and become active participants. Button symbols and code work together to create engaging, user-driven interactive experiences.

Getting started

To begin, view the interactive animated banner ad that you’ll create as you learn to make interactive projects in Adobe Animate. Banner ads are common advertisements that generate revenue for websites. They are often animated and eye-catching to attract attention and get users to click through to the advertiser’s site for the product. In this lesson, you’ll integrate interactivity with animation to create an engaging banner ad.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Note

This project contains buttons and bitmaps that may generate security errors when you try to play the HTML file locally (from your own computer). Your browser may be blank or simply show a static picture when you double-click the HTML file to open it in a browser. Upload all required files to your server to test the project over the internet, or test the movie within Animate.

Double-click the 10End.fla file in the Lesson10/10End folder to open the banner ad in Animate. Choose Control > Test to see the final project.

The project opens in your default browser. You can ignore any warnings that appear in the Output panel.

The project is a square banner ad for an imaginary shoe store. Viewers see a quick animated introduction, and then they can click either of the two buttons to see more information about a particular shoe. You can click the “Shop now” button to go directly to the product website, which in this case goes to the Adobe site.

In this lesson, you’ll be working in an HTML5 Canvas document to create interactive buttons and structure the timeline properly. You’ll learn to add JavaScript code to provide instructions for what each button will do.

Close the 10End.fla file.

Double-click the 10Start.fla file in the Lesson10/10Start folder to open the initial project file in Animate. The file is an HTML5 Canvas document that will play in a browser. The document already contains the initial animation on the timeline with several assets already in the Library panel.

Note

Animate makes it easy to create new documents for banner ads. In the New Document panel, the Ads category contains preset HTML5 documents for the standard sizes of banner ads, such as leaderboards, skyscrapers, and mobile formats.

Choose File > Save As. Name the file 10_workingcopy.fla and save it in the 10Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

Note

Animate may warn you if your computer doesn’t have the same fonts contained in a FLA file. Choose substitute fonts, or click Use Default to have Animate automatically make the substitutions.

About interactive movies

Interactive movies change based on the viewer’s actions. For example, when the viewer clicks or taps a button, a different graphic with more information is displayed. Interactivity can be simple, such as a button click, or it can be complex, receiving inputs from a variety of sources, such as the movements of the mouse, keystrokes from the keyboard, or even the tilting of a mobile device.

ActionScript and JavaScript

In Animate, you add interactivity with either ActionScript 3.0 or JavaScript, depending on the kind of document you’re working in.

You use ActionScript to achieve interactivity if you’re working in an ActionScript 3.0, AIR for Desktop, or AIR for iOS or Android document. The published file for an ActionScript 3.0 document containing ActionScript interactivity is a projector, which is a self-contained file that plays on a user’s computer. An AIR for Desktop document also publishes a file to play on a computer or an AIR-supported platform. An AIR for iOS or Android document publishes a mobile app.

ActionScript provides the instructions that enable an animation to respond to the user. Those instructions could be to play a sound, skip to a keyframe on the timeline where new graphics appear, or make a calculation.

In an HTML5 Canvas document like the one you’re working on for this banner ad, you use JavaScript, the same code that drives interactivity for web pages in a browser. The WebGL glTF, VR 360, and VR Panorama Animate documents also use JavaScript.

ActionScript 3.0 and JavaScript are very similar (in fact, both are based on an ECMA coding language standard), but there are slight differences in syntax and usage.

In this lesson, you’ll use JavaScript in an HTML5 Canvas document to learn to create a nonlinear navigation—one in which the movie doesn’t have to play straight from the beginning of the timeline to the end. You’ll add JavaScript to tell the Animate playhead to jump around and go to different frames of the timeline based on which button the user clicks. Different frames on the timeline contain different content. The user doesn’t actually know that the playhead is jumping around the timeline; the user just sees (or hears) different content appear as the buttons are clicked on the Stage.

Don’t worry if you don’t think you’re good at programming! You don’t have to be a code ninja because Animate provides an easy-to-use menu-driven wizard in the Actions panel that allows you to add JavaScript quickly and simply.

Creating buttons

A button is a basic visual indicator of something users can interact with. Users often click a button with the mouse or tap a button with their finger, but many other types of interactions are possible. For example, something can happen when a user rolls the mouse pointer over a button.

A button is a kind of symbol that has four special states, or keyframes, that determine how the button appears. Buttons can look like virtually anything—an image, a graphic, or a bit of text. They don’t have to be those typical pill-shaped gray rectangles that you see on many websites.

Creating a button symbol

In this lesson, you’ll create buttons with small thumbnail images. Buttons are a special type of symbol that are stored in the Library panel.

Create a new layer above all the existing layers and rename it buttons.

Lock the other layers so you don’t accidentally move the other elements on the Stage.

Select the Rectangle tool with a white fill and an orange stroke, and create a rectangle on the buttons layer on the Stage about 90 pixels wide and 65 pixels high.

In the Library panel, drag the “vapormax ultra thumbnail” bitmap into the center of the rectangle you just drew.

Select both the rectangle and the image of the shoe and choose Modify > Convert To Symbol.

In the Convert To Symbol dialog box, choose Button from the Type menu and name the symbol ultra. Click OK.

Animate creates a button symbol from the selected graphics, which appears in your library.

Editing a button symbol

A button symbol contains four special states that are represented on the button’s timeline as frames, just like on the main timeline. The four frames include the following:

The Up state shows the button as it appears when the pointer is not interacting with it.

The Over state shows the button as it appears when the pointer is hovering over it.

The Down state shows the button as it appears when the pointer is hovering over it and the user presses the mouse button or trackpad, or taps it.

The Hit state indicates the clickable area of the button.

You’ll understand the relationship between these states and the button appearance as you work through this exercise.

In the Library panel, double-click the ultra button symbol.

You enter symbol-editing mode for the button symbol where you see a timeline with the Up, Over, Down, and Hit frames. Only the Up frame contains a filled keyframe.

Select the Hit frame in the timeline and choose Insert > Timeline > Frame to extend the timeline.

The rectangle and shoe image now extends through the Up, Over, Down, and Hit states.

Create a keyframe in the Over frame.

The new keyframe will indicate a change in the graphics when the user’s mouse cursor hovers over the button.

Double-click the stroke around the rectangle to select it, and then change the orange color to a red.

Select the fill of the rectangle and change the color from white to yellow.

Now the Up keyframe and the Over keyframe are different. The button is normally white with an orange stroke, but whenever the mouse cursor rolls over the button, it will show the Over keyframe that has a yellow fill with a red stroke.

Click the left-facing arrow button in the Edit bar above the Stage to exit symbol-editing mode and return to the main timeline. Your first button symbol is complete, but your button won’t react to your cursor yet—you’ll have to test your movie to see how your button changes its appearance depending on its Up, Over, and Down keyframe states.

Invisible buttons and the Hit keyframe

Your button symbol’s Hit keyframe indicates the area that is “hot,” or clickable by the user. Normally, the Hit keyframe contains a shape that is the same size and location as the shape in your Up keyframe. In most cases, you want the graphics that users see to be in the same area where they click. However, in certain advanced applications, you may want the Hit keyframe and the Up keyframe to be different. If your Up keyframe is empty, the resulting button is known as an invisible button.

Users can’t see invisible buttons, but because the Hit keyframe still defines a clickable area, invisible buttons remain active. You can place invisible buttons over any part of the Stage and use code to program them to respond to users.

Invisible buttons are useful for creating generic hotspots. For example, placing them on top of different photos can help you make each photo respond to a click or tap without having to make each photo a different button symbol.

Duplicating buttons

Now that you’ve created one button, you’ll be able to create the second more easily by duplicating symbols.

In the Library panel, right-click the ultra button symbol and choose Duplicate. You can also choose Duplicate from the Library panel menu.

In the Duplicate Symbol dialog box, choose Button from the Type menu, and name the symbol racer. Click OK.

Swapping bitmaps

Bitmaps and symbols are easy to swap on the Stage and can significantly speed up your workflow.

In the Library panel, double-click the icon for your newly duplicated symbol (the racer button) to edit it.

Select the shoe image on the Stage.

In the Properties panel, click the Swap symbol.

In the Swap Bitmap dialog box, select the other shoe thumbnail image, called “2022 racer thumbnail,” and click OK.

The original thumbnail (shown with a dot next to the symbol name) is swapped out for the one you selected. Because they are both the same size, the replacement is seamless. Shift the new bitmap down a bit if you need to center it in the button.

Move to the Over keyframe and swap the ultra shoe thumbnail image with the racer shoe.

When you’re done, take a moment to organize your buttons in a folder in your Library panel called “buttons.”

Placing the button instances

Now you’ll put the buttons on the Stage and give them names in the Properties panel so that your code can identify them.

Drag the racer button from the Library panel to the Stage in the buttons layer, placing it under the ultra button that is already there.

Select both buttons and move them under the column of text. The X value should be about 7 and the Y value should be about 140.

Select the keyframe on frame 1 of the buttons layer and move it to the very last frame (frame 15).

Now the buttons appear only after the animation plays.

Now you can test your movie to see how the buttons behave. Choose File > Publish Settings.

The Publish Settings panel appears.

In the Basic tab for the JavaScript/HTML option selected at the left, deselect the Loop Timeline checkbox.

Normally, an Animate project will loop, but for this banner ad, you’ll want the animation to play just once and stop.

Note

You can also add JavaScript code to stop the timeline, which you will learn to do later in this lesson.

Choose Control > Test.

You can ignore any warnings that show up in the Output panel.

In the browser that opens, the animation plays, and your two buttons appear at the end. Note how the buttons change appearance as your mouse cursor interacts with them.

At this point, however, you haven’t provided any instructions for the buttons to actually do anything. That part comes after you name the button instances and learn a little about coding.

Note

If your browser displays a blank screen when you test your movie (Control > Test), make sure you’re connected to the internet. If you’re not, then open the Publish settings (File > Publish Settings). Select the HTML/JS tab and deselect Hosted Libraries. The Hosted Libraries option links to external JavaScript code, so your published files don’t have to include them, but you need to be connected to the internet for your project to work.

Naming button instances

Next, you’ll name each button instance so that your code can reference it. Beginners often forget this crucial step.

Click an empty part of the Stage to deselect all the buttons, and then select just the first button.

Type ultra_btn in the instance name field in the Properties panel.

Name the other button racer_btn.

Animate is very picky, and one typo will prevent your entire project from working correctly! See the sidebar “Naming rules” for information about instance names.

Naming rules

Naming instances is a critical step in creating interactive projects in Animate. The most common mistake made by novices is not to name, or to incorrectly name, a button instance.

Instance names are important because ActionScript and JavaScript use the names to reference those objects. Instance names are not the same as the symbol names in the Library panel. The names in the Library panel are simply organizational reminders.

Instance naming follows these simple rules and best practices:

Do not use spaces or special punctuation. Underscores are okay to use.

Do not begin a name with a number.

Be aware of uppercase and lowercase letters. ActionScript and JavaScript are case sensitive.

End your button name with _btn. Although it is not required, it helps identify those objects as buttons.

Do not use any word that is reserved for an ActionScript or JavaScript command.

Preparing the timeline

To create room on the timeline to add more content, you’ll add more frames.

Select frame 30 for all your layers.

Choose Insert > Timeline > Frame (F5). You can also right-click and choose Insert Frame.

Animate adds frames in all of the selected layers up to the selected point, frame 30.

Creating destination keyframes

When the user clicks each button, Animate will move the playhead to a new spot on the timeline according to code that you’ll insert. Before adding the code, you’ll create all the different options on the timeline that your user might choose.

Inserting keyframes with different content

You will create four keyframes in a new layer and place information about each of the shoes in the new keyframes.

Insert a new layer at the top of the layer stack and rename it content.

Select frame 20 of the content layer.

Insert a new keyframe at frame 20 (choose Insert > Timeline > Keyframe, or press F6, or press the Insert Keyframe button above the timeline).

Insert another new keyframe at frame 25.

Your timeline has two new empty keyframes in the content layer.

Unlock the runner layer and select frame 20.

Choose Modify > Timeline > Convert To Blank Keyframes (F7).

An empty keyframe appears in frame 20 of the runner layer. This makes room on the Stage to show more details about the selected shoe.

Select the empty keyframe in frame 20 of the content layer.

In the Library panel, drag the “vapormax ultra” bitmap to the Stage.

Position the bitmap where the runner used to be, and rotate it to give it a little more dynamism. In this example, the Transform panel shows a Rotation of -24 degrees and the Properties panel Position And Size section should show X=65 and Y=-52.

With the Text tool, add a description next to the shoe image. Add the text Vapormax Ultra in a font and size of your choosing.

Select the empty keyframe in frame 25 of the content layer.

Drag the 2022 racer bitmap from the Library panel to the Stage.

Position the bitmap and rotate it in a similar fashion as the previous shoe.

Add text next to this shoe that says 2022 Racer.

The content layer now contains three keyframes: the first keyframe at frame 1 is empty, the second contains the Vapormax Ultra shoe, and the third contains the 2022 Racer shoe.

Using labels on keyframes

Frame labels are names that you give to keyframes. Instead of referring to keyframes by their frame number, you refer to them by their label, which makes code easier to read, write, and edit.

Select frame 20 on the content layer.

In the Properties panel Label section, enter ultra in the Name field.

A tiny flag icon appears on the keyframe.

Select frame 25 on the content layer.

In the Properties panel, in the Label section, enter racer in the Name field.

Another tiny flag icon appears on the keyframe.

Navigating the Actions panel

The Actions panel is where you enter all your code, whether JavaScript for HTML5 Canvas documents or ActionScript for ActionScript 3.0 documents to target platforms that support the AIR runtime. Open the Actions panel by choosing Window > Actions or by selecting a keyframe on the timeline and clicking the Actionscript panel button at the top right of the Properties panel.

You can also right-click any keyframe and choose Actions.

The Actions panel gives you a flexible environment for entering code, as well as different options to help you write, edit, and view your code.

The Actions panel is divided into two parts. On the right of the Actions panel is the Script window—the blank slate where you can write code freely. You enter ActionScript or JavaScript in the Script window just as you would in a text-editing application.

On the left is the Script navigator, which shows you where your code is located. Animate places code on keyframes on the timeline, so the Script navigator can be particularly useful if you have lots of code scattered in different keyframes and on different timelines.

At the bottom of the Actions panel, Animate displays the line number and column number (or character in the row) of the current position of the text insertion point.

The upper-right corner of the Actions panel contains options for finding, replacing, and inserting code. The Add Using Wizard button is also located there.

Adding JavaScript interactivity with the Actions panel wizard

Now that you have multiple keyframes on the timeline, your movie will play linearly from frame 1 to frame 30, showing all the shoe choices. However, with this interactive banner ad, you’ll want to pause the movie at frame 15 to wait for your viewers to choose a shoe model.

Stopping the timeline

Use a stop() action to pause your Animate movie. A stop() action simply stops the movie from continuing by halting the playhead.

Insert a new layer at the top and rename it actions.

JavaScript and ActionScript code are generally placed on keyframes on the timeline.

Create a keyframe at frame 15 of the actions layer.

Select frame 15 and open the Actions panel (Window > Actions).

Click the Add Using Wizard button.

The wizard opens within the Actions panel. The wizard guides you step by step through the code-writing process. The code that you generate with the wizard appears in the first field. The wizard is available for inserting JavaScript into HTML5 Canvas, WebGL-glTF extended version, VR Panorama, and VR 360 documents. For ActionScript, you can use a different panel called the Code Snippets panel.

Step 1 asks you to choose the action, or the behavior that you want Animate to perform, from a list. Scroll downward in the list under Select An Action and select Stop (the items are listed alphabetically).

Another menu appears to the right.

In the next menu, choose This Timeline.

Code appears in the action window. The stop() action will apply to the current timeline.

Click Next.

Step 2 appears in the wizard.

Step 2 asks you to select the trigger that will produce your selected action. Select With This Frame.

Additional code is added to make reference to the current timeline.

You want the stop() action to be executed as soon as the timeline begins, so the appropriate trigger is when the playhead encounters the current frame.

Click Finish And Add.

The finished code is added to the Script window in the Actions panel.

The code is

var _this = this;
_this.stop();

The first statement creates a variable, or a reference, called _this that refers to the current timeline.

The second statement points to the current timeline and applies the stop() action. The semicolon at the end of each of the statements acts as a period and indicates the end of a command.

The code in light gray that begins with /* and ends with */ is called a multiline comment, and it is simply a description of what the code does. It acts as a reminder for you and for other developers. Well-commented code is essential. It will save you hours of headaches when you return to a project, and it is considered best practice for coders.

In the timeline, a tiny letter “a” is added to frame 15 in the action layer to indicate that code has been added there.

Adding actions for a button click

So far, you have code that stops the timeline at frame 15. Now you’ll add an action for a button click. The button click is called a trigger in the wizard, but in JavaScript and ActionScript it is known as an event.

Events are occurrences in your movie that Animate can detect and respond to. For example, a mouse click (or a tap), a mouse movement, and a key press are all events. Pinch and swipe gestures on mobile devices are also events. These events are produced by the user, but some events can happen independently of the user, like the successful loading of a piece of data or the completion of a sound.

Select frame 15 of the action layer.

Open the Actions panel, if it’s not already open.

Place your text cursor in the last empty line of your Script window. You’ll add additional code to the code that’s already there.

Click the Add Using Wizard button.

The wizard opens within the Actions panel.

Step 1 asks for the action. Scroll down and select Go To Frame Label And Stop.

Another menu appears to the right.

In the next menu, choose This Timeline.

Code appears in the action window. The action will apply to the current timeline.

Replace the green highlighted letters in the action window with the name of the label you want the playhead to go to. To replace enterFrameLabel, enter ultra.

The frame label name appears in green and should be between a set of single quotes.

Click Next.

Step 2 appears in the wizard.

Step 2 asks for the trigger that will produce your selected action. Select On Mouse Click.

On Mouse Click is an event that happens when the onscreen button is pressed and then released. Another menu appears to the right.

The wizard asks for the object for the triggering event. Select ultra_btn, which is the button that corresponds to the first shoe, whose information is displayed in the keyframe labeled “ultra.”

Click Finish And Add.

The finished code is added to the Script window in the Actions panel. The code consists of the trigger 'click' and a function that groups all the code that is executed when the trigger happens. What’s important for you to identify are the opening and closing curly braces of the function. This function has only one statement (a gotoAndStop() action, which moves the playhead), but functions can contain many statements.

Choose Control > Test.

Animate opens your browser to show your project. Click the first button. Animate detects the click trigger on the button and moves the playhead to the ultra keyframe, where the Stage shows information about the Vapormax Ultra shoe.

Close your browser and return to Animate.

Select frame 15 of the actions layer and open the Actions panel again.

Continue adding additional actions and triggers to the existing code for the other button. The next button should trigger a gotoAndStop() action to the racer keyframe

Note

If you’re feeling confident, you can try to streamline the process of replicating the code for the other button. Copy the code in the Script window and then paste it. Change only the name of the button and the name of the frame label. It will be faster than going through the wizard, and it will be your first step in identifying and learning different parts of JavaScript code so that you can eventually write code yourself.

Tip

If you decide to use frame numbers instead of frame labels, be aware that the JavaScript library that Animate uses begins counting frames at 0, so the first frame of your timeline is 0 and not 1. ActionScript and JavaScript for WebGL glTF and VR documents, on the other hand, begin counting the timeline frames at 1. For this reason, it’s best to use frame labels whenever possible.

Checking for errors

Debugging is a necessary process, for veteran coders as well as novices. Even if you’re extra careful, errors will creep into your code. Fortunately, the wizard helps reduce typos and common errors. If you do enter code by hand, a few tips can help prevent, catch, and identify errors:

If you’re working in an ActionScript 3.0 document, Animate automatically displays code errors in the Compiler Errors panel (Window > Compiler Errors) with a description of the error and its location. None of your code will be functional if there is a compiler error in any part of the code.

Take advantage of color hinting in the code. Animate colors keywords, variables, comments, and other language elements differently. You don’t need to know why they are different, but the different colors can give you clues as to where there may be some missing punctuation.

Click the Format Code button at the upper-right corner of the Actions panel to tidy up your code and make it easier to read. You can change the formatting settings in Animate > Preferences > Edit Preferences > Code Editor (macOS) or Edit > Preferences > Code Editor (Windows).

Creating the “Shop now” button

A crucial component of a banner ad is to direct interested users to the advertiser’s site. You’ll need to provide another button that will do that.

The “Shop now” button that you’ll create next will open a website into a new browser window or tab.

Adding another button instance

The sample lesson file provides a “Shop now” button for you in the Library panel.

Select frame 15 in the buttons layer and unlock it if it is locked.

Drag the button called “Shop now” from the Library panel to the Stage. Position the button instance under the runner, centered at the bottom edge of the Stage.

In the Properties panel, set the X value to 114 and the Y value to 238.

In the Properties panel, name the instance shopnow_btn.

Adding code for the “Shop now” button

The action will be Go To Web Page, and the trigger will be a button click/tap.

Select frame 15 of the actions layer.

Open the Actions panel, if it’s not already open.

Place your text cursor at a new line after the last line of code in your Script window. You’ll add additional code to the code that’s already there.

Click the Add Using Wizard button.

The wizard opens within the Actions panel.

Step 1 asks for the action. Select Go To Web Page.

You can replace the green highlighted text in the code preview window with the URL of the advertiser’s site. For this task, you can leave the default URL, which is Adobe’s website.

Click Next.

Step 2 appears in the wizard.

Step 2 asks for the trigger that will produce your selected action. Select On Mouse Click.

On Mouse Click is an event that happens when the user’s mouse is pressed and then released over the button, or if the user taps the button. Another menu appears to the right.

The wizard asks for the object for the triggering event. Select shopnow_btn.

Click Finish And Add.

Test your movie.

When you click the “Shop now” button, the Adobe site loads in a browser tab or window.

The Code Snippets panel

Animate provides another panel, called the Code Snippets panel (Window > Code Snippets), that offers a way to add ActionScript 3.0 or JavaScript code. The panel is organized into folders for different kinds of interactivity. Simply expand the folder that you want and select the action. Animate guides you for any additional information.

The Code Snippets panel also provides a way for you to save your own code and share it with other developers.

For beginners, it’s best to use the Add Using Wizard option in the Actions panel for JavaScript.

Playing animation at the destination

So far, this interactive banner ad works by using the gotoAndStop() action to show information in different keyframes along the timeline. But suppose you wanted the shoe image to animate into the Stage rather than appear suddenly—how would you play an animation after a user clicks a button? One way is to use the action gotoAndPlay(), which moves the playhead to the frame number or frame label and plays from that point forward.

Creating transition animations

Next, you’ll create a short transition animation for each of the shoes. The transition animation will show the shoe moving onto the Stage from the right edge. Then you’ll change your code to direct Animate to go to each of the beginning keyframes and play the animation.

Move the playhead to the “ultra frame” label.

Right-click both the selected bitmap and text on the Stage and choose Create Motion Tween, or choose Create Motion Tween from the Create Tween menu above the timeline.

Animate asks to create a symbol for the selections for the motion tween. Click OK.

Animate creates a separate tween layer for the instance so that it can proceed with the motion tween.

Move the instance off the Stage to the right so that it is no longer visible.

Move the playhead to the end of the tween span at frame 24.

Move the instance back on the Stage where it was originally.

The motion tween from frame 20 to frame 24 produces a dramatic entrance.

Create a similar motion tween for the second shoe in the keyframe labeled racer. Don’t try to test your movie just yet! You still have to tweak the JavaScript code in the next task to make this work.

Using the gotoAndPlay() action

The gotoAndPlay() action makes the Animate playhead move to a specific frame on the timeline and begin playing from that point.

Tip

A fast and easy way of doing multiple replacements is to use the Find And Replace command in the Actions panel. Click the Find button in the upper-right corner, select Find, and then choose Find And Replace from the menu to the right of the Find Text field.

Select the first frame of the action layer and open the Actions panel.

In your JavaScript code, change the first two gotoAndStop() actions to gotoAndPlay() actions. Leave the parameter unchanged:

gotoAndStop('ultra'); should be changed to gotoAndPlay('ultra');.

gotoAndStop('racer'); should be changed to gotoAndPlay('racer');.

For each of the buttons, the JavaScript code now directs the playhead to a particular frame label and begins playing at that point.

Make sure you keep the function for your “Shop now” button unchanged.

Stopping the animations

If you test your movie now (Control > Test), you’ll see that each button goes to its corresponding frame label and plays from that point, but it keeps playing, showing any remaining animations downstream in the timeline. The next step is to tell Animate when to stop.

Select frame 24 of the actions layer, the frame just before the ultra keyframe on the content layer.

Right-click the frame and choose Insert Keyframe.

A new keyframe is inserted in the actions layer. We’ll use the new keyframe to add a stop() action just before the second animation starts to play.

Open the Actions panel.

The Script window in the Actions panel is blank. Don’t panic! Your code has not disappeared. Your code for the event listeners is on the first keyframe of the actions layer. You have selected a new keyframe in which you will add a stop() action.

In the Script window, enter this.stop();.

Animate will stop playing when it reaches frame 24.

Insert another keyframe at frame 30.

Tip

If you wish, you could also use the Add Using Wizard panel to add the stop() action for each of the keyframes.

In this keyframe, add another stop() action in the Actions panel.

Tip

If you want a quick and easy way to duplicate the keyframe containing the stop() action, hold down the Option/Alt key while you drag it to a new location on the timeline.

Test your movie by choosing Control > Test.

Each button takes you to a different keyframe and plays an animation of a shoe sliding onto the Stage. At the end of the animation, the movie stops and waits for the viewer to click another button.

Pinning code in the Actions panel

When you have code scattered in multiple keyframes on the timeline, it’s sometimes difficult to go back and forth to edit or view your code. The Actions panel provides a way for you to keep the code from particular keyframes “pinned” to the Actions panel. Click the Pin Script button at the top of the Actions panel and Animate will create a separate tab for the code currently displayed in the Script window.

The tab will be labeled with the frame number where your code resides. You can pin multiple scripts, allowing you to navigate easily between them.

To continue with the rest of this lesson, unpin all the scripts so you have only the Current frame tab displayed.

Animated buttons

Currently, when you hover your mouse cursor over one of the shoe buttons, the red stroke and the yellow fill in the box suddenly appear. But imagine if the mouse hover provided an animated effect. It would give more life and sophistication to the interaction between the user and the button.

Animated buttons display an animation in the Up, Over, or Down keyframes. The key to creating an animated button is to nest a movie clip inside a button symbol. Create an animation inside a movie clip symbol and then place that movie clip symbol inside the Up, Over, or Down keyframes of a button symbol. When one of those button keyframes is displayed, the animation in the movie clip plays.

Creating the animation in a movie clip symbol

Your button symbols in this banner ad contain a bitmap of a shoe in their Over states. You will convert that bitmap into a movie clip symbol and then create an animation inside that movie clip.

In the Library panel, expand the buttons folder. Double-click the button symbol icon for “ultra.”

You enter symbol-editing mode for the button symbol called ultra.

Select the shoe bitmap in the Over keyframe.

Right-click and choose Convert To Symbol.

The Convert To Symbol dialog box appears.

Choose Movie Clip as the Type and enter ultra_mc as the Name. Click OK.

You now have a movie clip instance inside the Over keyframe of your button symbol.

Double-click the movie clip instance to edit it in place. Notice how the Edit bar above the Stage shows you the nesting of symbols.

Right-click the shoe bitmap and choose Create Motion Tween.

In the dialog box that appears asking for confirmation to convert the selection to a symbol, click OK.

The shoe bitmap is converted to a symbol and placed in a motion tween layer. Animate adds 1 second’s worth of frames to the timeline.

Drag the end of the tween span back so that the timeline has only 10 frames.

Move the playhead to frame 10.

Choose the Free Transform tool and enlarge the shoe so it fills, or even breaks, the box that it is positioned inside.

Animate creates a smooth transition between the smaller and larger instance in the 10-frame tween span.

Insert a new layer and rename it actions.

Insert a new keyframe in the last frame (frame 10) of the actions layer.

Open the Actions panel (Window > Actions) and enter this.stop(); in the Script window.

Adding the stop() action in the last frame ensures that the fade-in effect plays only once. The last keyframe on frame 10 of the actions layer shows a tiny “a,” indicating that code is attached there.

Tip

If you want an animated button to repeat its animation, leave out the stop() action at the end of the movie clip’s timeline.

Exit symbol-editing mode by clicking the Scene 1 button in the Edit bar above the Stage.

Choose Control > Test.

When your mouse cursor hovers over the first shoe button, the image of the shoe grows slightly, giving it more emphasis.

Create an identical motion tween for the racer button to animate its Over state, and add a stop() action to the end of the tween.

Note

Notice that you can add JavaScript code to either the main timeline or a movie clip’s timeline. Move clips are the only symbols that support interactivity.

Review questions

1 How and where do you add ActionScript or JavaScript code?

2 How do you name an instance, and why is it necessary?

3 How can you label frames, and when is it useful?

4 What does the stop() action do?

5 What is a trigger in the Actions panel wizard?

6 How do you create an animated button?

Review answers

1 ActionScript or JavaScript code is attached to keyframes of the timeline. Keyframes that contain code are indicated by a small lowercase “a.” You add code in the Actions panel. Choose Window > Actions, or select a keyframe and click the Actions panel icon in the Properties panel, or right-click and select Actions. You enter code directly in the Script window in the Actions panel, or you can add code through the Add Using Wizard option. You can also add code with the Code Snippets panel.

2 To name an instance, select it on the Stage and then type a name in the Instance Name field in the Properties panel. You need to name an instance so that ActionScript or JavaScript can identify it with code.

3 To label a frame, select a keyframe on the timeline, and then type a name in the Frame Label box in the Properties panel. You can label frames in Animate to make it easier to reference frames with code and to give you more flexibility.

4 In ActionScript or JavaScript, a stop() action halts the playhead from advancing.

5 A trigger is an event that Animate can respond to with an action. A button click or the playhead entering a frame are typical triggers.

6 Animated buttons display an animation in the Up, Over, or Down keyframes. To create an animated button, make an animation inside a movie clip symbol and then place that movie clip symbol inside the Up, Over, or Down keyframes of a button symbol. When one of those button keyframes is displayed, the animation in the movie clip plays.

Next steps

You’ve made it through the last of 10 lessons. By now you’ve seen how Adobe Animate, in the right creative hands (yours!), has all the features you need to produce media-rich interactive projects and animations that publish to multiple platforms. You’ve completed these lessons—many of them from scratch—so you understand how the various tools, panels, and code work together for real-world applications.

But there’s always more to learn. Continue practicing your Animate skills by creating your own animation or interactive site. Get inspired by watching animations and seeking out multimedia projects. Expand your Animate knowledge by exploring the Adobe Animate Help resources and other fine Adobe Press publications.

Index

Numbers

3D motion, animating, 157–161

3D Rotation tool, using, 158–161

3D Translation tool, using, 158–161

Symbols

#000000 (black), choosing for fill and stroke, 60

#FFFFFF (white), choosing for fill, 60

* (asterisk), appearance of, 51

A

AATCs (Adobe Authorized Training Centers), 7

actions, adding for button click, 424–428

Actions panel. See also panels

Find And Replace command, 435

navigating, 419–420

pinning code in, 437

Actions panel wizard, adding JavaScript interactivity with, 421–428

ActionScript 3.0 document type, 12

ActionScript and JavaScript, 402

Adobe Animate

in-app tutorials, 6

improvements and updates, 2

installing, 3

layer parenting, 2

lesson files, 4

online content, 4

Paint Brush tool, 2

playback options, 2

prerequisites, 2

product home page, 7

registering, 4

resources, 5–7

rigging process, 2

starting, 10–11

Web Edition, 4

web tutorials, 6

Adobe Animate Assets panel. See Assets panel

Adobe Animate Learn & Support, 6

Adobe Assets panel, 288

Adobe Create, 7

Adobe Creative Cloud tutorials, 6

Adobe Extensions, 7

Adobe forums, 7

Adobe Media Encoder, using, 48, 161–162

Advanced option, Color Effects, 41

AIR document types, 12, 402

alien’s body example, 148–151

Align Center options, choosing, 104

Align panel, using, 108–109. See also panels

Alpha option, Color Effects, 41

Alpha value, modifying for fills, 90–91

Anchor option, Stage, 50

anchor points

adding to property curves, 172–174

adding, 75

constraining dragging motion, 175

controlling, 175

converting, 145

deleting, 68, 75, 175

moving, 69, 174–175

removing direction handles, 175

resizing direction handles, 175

undoing operations, 175

Animate

in-app tutorials, 6

improvements and updates, 2

installing, 3

layer parenting, 2

lesson files, 4

online content, 4

Paint Brush tool, 2

playback options, 2

prerequisites, 2

product home page, 7

registering, 4

resources, 5–7

rigging process, 2

starting, 10–11

Web Edition, 4

web tutorials, 6

animated buttons, 437–441. See also buttons

animated GIF, exporting, 394–395

animating

3D motion, 157–161

bounces, 186–189

camera moves, 330–333

color, 383–385

filters, 133–136

frame by frame, 154–157

hair, 306–308

mask and masked layers, 389–392

position, 122–125

shapes, 364–365

transformations, 137–140

transparency, 132–133

weightlifter, 272–274

animating rigs

adding drop shadow effect, 257–259

applying classic tweens, 255–256

creating keyframes, 253–255

animation loops, viewing, 302

animations. See also looping animation; movies; nested animations

changing duration of, 126–127

creating in movie clip symbols, 437–441

frame by frame, 154–157

inserting into graphic symbols, 373–374

in movie clip symbols, 148–151

moving, 141–142

overview, 121

playing at destinations, 432–436

previewing, 125, 373, 379–382

project file, 121–122

stopping, 435–436

ANP file, exporting to, 18

Application bar, locating, 15

arm wave, finishing, 207–209

armature. See also joints

applying to graphics, 321–325

applying without animation, 325

deselecting, 290

extending, 288–290

hierarchy, 290

moving bones in, 290–291

posing for pedaling cycle, 293–294

rearranging stacking order, 292–293

saving in Assets panel, 318–320

armature, building to animate characters, 285–288

art

exporting, 110–111

saving to Assets panel, 112–113

Art brushes, editing and creating, 83–85

Asset Warp tool. See also puppet warping

vs. Bone tool, 284–285

creating bones, 242–244

creating rigs, 238–242

mesh options, 248–250

moving rigs, 244–246

selecting, 261

using, 278

using rotation angles, 246–250

assets, exporting and importing, 114–115

Assets panel. See also panels

collaborating with, 112–115

improvements, 6

saving animated armature in, 318–320

saving assets in, 20

using, 288

asterisk (*), appearance of, 51

Auto-Recovery, using to create backup, 51–52

B

Background Color, changing for Stage, 19. See also color

background layer, creating, 87, 239

backups, creating with Auto-Recovery, 51–52

banner ad, opening, 400

Basic workspace, 16

beginning keyframes, creating for classic tweens, 204–206

Bitmap Properties dialog box, using, 35

bitmaps

converting to, 111

swapping with symbols, 409–410

vs. vector shapes, 260

blend types, using with shapes, 368

Blur filter, applying, 101–102, 134

Blur values, increasing, 43–44

Bone tool

adding to Tools panel, 286

vs. Asset Warp tool, 284–285

using, 284–285

bones. See also joints and bones; soft bones for flexible connections

adding for rig edits, 276–277

in armature hierarchy, 290

creating for arms, 288

creating with Asset Warp tool, 242–244

defining inside shapes, 304–306

disabling snapping, 288

hard vs. soft, 267–272

isolating rotation of, 294–295

moving in armature, 290–291

moving with Asset Warp tool, 246

pinning, 295–296

removing and adding, 291

transformation point, 292

Bottle tool, using, 66

BounceIn ease, using, 189–191

bounces, animating, 186–189

bounding box, resizing, 140

branching rig, creating, 260–265. See also rigs

Brightness option, Color Effects, 41

Bring To Front command, using with armature, 293

broken tweens, 372

Brush Library, 80–82

brush modes, 79

brushes. See also paint brushes

Classic, 100

Fluid, 77–78, 100

using, 77–85

button click, adding actions for, 424–428

button instances

adding, 428–429

naming, 413–414

placing, 411–413

button symbols

creating, 403–405

editing, 405–407

using, 93

buttons. See also animated buttons; interactive navigation; invisible buttons and Hit keyframe

duplicating, 408–409

“Shop now,” 428–431

swapping bitmaps, 409–410

C

camera

animating pan, 338–339

animating rotation, 341–342

animating zoom-in, 340–341

animating zoom-out, 336–338

attaching layers for fixed graphics, 353–357

characteristics, 334

color effects, 357

creating depth, 345–352

enabling, 333–334

Layer Depth panel, 345–346

layers of stars, 346–348

Motion Editor, 345

motion paths, 345

parallax effect, 345

Rotate and Zoom controls, 335

zoom and image resolution, 336

camera easing, 345

camera frame, setting, 334–336

Camera layer

attaching layers to, 353–354

disabling, 335

camera moves, finishing, 342–344

captions, adding for fixed graphics, 354–357

car example, 153–155

character animation

adding crank arm, 313–318

adding damping effects, 310–311

adding eases to, 302

adding poses, 300–304

Apply Skeleton, 324

building armature, 285–288

character animation with, 284–293

creating pedaling cycle, 293–296

disabling and constraining joints, 296–299

joint constraints, 300

Loop Playback, 302

rig mapping, 318–325

with shapes, 304–308

simulating physics with springiness, 308–311

tweening automatic rotations, 311–318

child and parent layers, classic tweens, 208

city layer, creating, 122

Classic Brush, using, 100

classic motion guide, editing path in, 218

classic tweens

adding motion guides, 214–218

advanced easing, 220–221

applying, 206

applying eases, 214

applying for rigs, 255–256

beginning and end keyframes, 204–206

child and parent layers, 208

easing for, 220–221

finishing arm wave, 207–209

vs. motion tweens, 204

nested animations, 218–219

swapping instances, 210–214

tweening parent layer, 209–210

Classroom in a Book, about, 1

closed versus open paths, 76

code, pinning in Actions panel, 437

code errors, displaying, 428

Code Snippets panel, 432. See also panels

collaborating with Assets panel, 112–115

color, animating, 383–385. See also Background Color; swatches and tagged swatches

color effects, camera, 357

Color Effects, Properties panel, 44

color hinting, advantage of, 428

colors, hexadecimal numbers, 58

Command key. See keyboard shortcuts

command menus, accessing, 15

constraining joints, 296–300

content, scaling, 49–51

control points, moving, 64

Convert Anchor Point tool, using, 145

Convert Layers to Symbol, using with nested animations, 218–219

Convert to Symbol dialog box, 404

Copy and Paste, using with shapes, 63

copying

layers, 32

and pasting curves, 177–180

corner points, adding, 66

corners, moving, 64

crank arm, adding, 313–318

Ctrl key. See keyboard shortcuts

Currency Wars, 166–167, 191

curved paths, creating, 76

curves. See also property curves

copying and pasting, 177–180

creating, 71–75

editing, 74–75

D

damping effects, adding, 310–311

debugging process, 428

deleting

anchor points, 68, 75, 175

bones, 291

color pointers from gradients, 88

layers, 25

movie clips, 291

property curves, 176

strokes and fills, 62

depth

creating, 90–91

creating with camera, 345–352

destination keyframes, creating, 415–419. See also keyframes

disabling joints, 296–300

document types

presets, 13

switching between, 12

documents, creating, 12–14

Double Identity, 159–162

Down state, button symbols, 405–406

downloading lesson files, 4

Drag And Drop Tools panel, 38–39

drawing

organizing, 69–71

rotating Stage for, 86

drawing modes, 60–61

drop shadow effect, adding to rig, 257–259

duplicating keyframes, 372

duration of animation, changing, 126–127

dynamic vs. static text, 103

E

ease curves vs. property curves, 186

Ease panel, Motion Editor, 183

ease-ins, adding, 183–185, 393

eases

adding motion tweens, 181–183

adding to inverse kinematics, 302

animating bounces, 186–189

applying to classic tweens, 214

applying to motion tweens, 153–154

applying to property curves, 192–193

BounceIn, 189–191

removing, 185–186

easing. See also Edit Easing button; motion tweens

applying to motion tweens, 153–154

for classic tweens, 220–221

overview, 152

shape tweens, 393–395

splitting motion tweens, 152–153

Edit bar, locating, 15

Edit Easing button, locating, 220. See also easing

editing

Art and Pattern brushes, 83–85

button symbols, 405–407

curves, 74–75

frames, 140–142

layer parenting, 202

layer stacking, 202–203

path in classic motion guide, 218

path of motion, 145

property curves, 170–176

rigs, 250–253

shapes, 63–66

symbols from library, 98–99

symbols in place, 99–101

text, 103–108

width of lines, 67–69

editing tools, using, 218

educators, resources for, 7

ending keyframes, creating for classic tweens, 204–206

errors, checking for, 428

Essentials workspace, 15–16, 22–29

events, defined, 424

exporting

animated GIF, 394–395

art, 110–111

Double Identity, 161–162

and importing assets, 114–115

Juno spacecraft example, 358–359

F

files

creating, 13

opening, 10–11

saving, 14

fills, modifying Alpha values of, 90–91

fills and strokes. See also variable-width strokes

changing, 66

deleting, 62–63

selecting, 62–63

understanding, 57–58

variable-width strokes, 66–69

filters

adding, 42, 134

animating, 133–136

applying for special effects, 101–102

enabling and disabling, 136

explained, 42

Options menu, 102

Quality menu, 102

rearranging, 136

final project, sharing, 110–111

Find And Replace command, Actions panel, 435

Fire starter graphic, 364

Fit In Window command, using, 156

Fixed and Open Handle modes, Warp Options, 280

fixed graphics, attaching layers to camera for, 353. See also graphics

FLA files, 12

flame layer, 365, 367

Flip Horizontal command, Transform, 316

Flip Vertical command, Transform, 316

floating panel, creating, 38. See also panels

Floral Brush 8 brush, using, 81

Fluid Brush, using, 77–78, 100

fly layer, creating, 215

folders. See layer folders

Format Code button, locating, 428

forward kinematics, 284–285

frame numbers vs. frame labels, 428

Frame Picker, using with lip-syncing, 222–229

frame rate

locating in Timeline panel, 22

understanding, 131

frame-based vs. span-based selection, 129

frame-by-frame animation, 154–157

frames

adding, 127–128, 181

adding to timeline, 414–415

editing, 140–142

expanding and compressing, 131

identifying in Timeline panel, 22

inserting in Timeline panel, 26

selecting in Timeline panel, 27

Free Transform tool

armature example, 290

car example, 138

eyes example, 64

octopus example, 96–97

rocket ship example, 146

rotating instance, 347

rotating upside down, 187

freezing joints, 265–267

G

GIF

exporting animations as, 394–395

exporting art as, 110–111

global vs. local transformations, 158

gotoAndPlay() action, using, 435

gradient fills

adjusting, 383–385

using, 87–90

Gradient Transform tool, using, 89–90, 383–385

graphic symbols

inserting animations in, 373–374

for lip-syncing dialogue, 221–231

looping options for, 222

using, 94

graphics. See also fixed graphics; text

adding, 39–41

applying armature to, 321–325

changing for frame-by-frame animation, 157

and text lesson file, 56–57

grids and rulers, accessing, 18

grouping objects, 70–71

guides and rulers, using, 18, 109–110

H

H.264-formatted video, creating, 162, 359

hair

adding springiness to, 309–310

animating, 306–308

Hamlet’s soliloquy, 223

hard and soft bones, 271–272

head motion, adding, 230–231

hexadecimal numbers, using with colors, 58

hip joint, moving, 276

History panel, using, 36, 45–46

Hit keyframe and invisible buttons, 408

Hit state, button symbols, 405–406

Hosted Libraries, deselecting, 413. See also Library panel

HTML5 Canvas document type, 12, 402

I

importing items into Library panel, 20

information layer, creating, 353

installing Adobe Animate, 3

instances, swapping, 147, 210–214. See also symbol instances

interactive movies, 401. See also movies

interactive navigation. See also buttons

Actions panel, 419–428

ActionScript and JavaScript, 402

animated buttons, 437–441

checking for errors, 428

Code Snippets panel, 432

creating “Shop now” button, 428–432

destination keyframes, 415–419

JavaScript interactivity, 421–428

lesson files, 400–401

pinning code in Actions panel, 437

playing animation at destination, 432–436

preparing timeline, 414–415

interface, changing, 17

inverse kinematics

adding crank arm, 313–318

adding damping effects, 310–311

adding eases to, 302

adding poses, 300–304

Apply Skeleton, 324

building armature, 285–288

character animation with, 284–293

creating pedaling cycle, 293–296

disabling and constraining joints, 296–299

joint constraints, 300

Loop Playback, 302

rig mapping, 318–325

with shapes, 304–308

simulating physics with springiness, 308–311

tweening automatic rotations, 311–318

inverse kinematics with bones, lesson file, 284

invisible buttons and Hit keyframe, 408. See also buttons

J

JavaScript and ActionScript, 402

JavaScript interactivity, adding with Actions panel wizard, 421–428

joint constraints, on-Stage controls, 300

joint speed, changing, 303

Joint: X Translation, Properties panel, 299

Joint: Y Translation, Properties panel, 299

joints. See also armature

adding, 278–280

children and parents, 263

disabling and constraining, 296–300

freezing, 265–267

isolating, 274–276

repositioning, 291–292

joints and bones. See also bones; soft bones for flexible connections

explained, 285

reconnecting, 253

removing, 251–253

repositioning, 250–251

JPEG, exporting art as, 110–111

Juno spacecraft example, 330, 336, 356

Jupiter, zooming in for close-up of, 343

K

keyboard shortcuts

adding frames, 181

adding keyframes, 128

Bring To Front, 293

clearing keyframes, 29

constraining shapes, 60

Convert To Symbol, 94

Copy and Paste, 63

duplicating keyframes, 372

importing images into library, 21

inserting frames, 26

inserting keyframes, 28, 39, 44, 156

Library panel, 20

Loop Playback, 302, 373

Open command, 10

Paste In Place, 63, 316

previewing movies, 46

Properties panel, 34

redoing steps, 45

Select All, 141, 261

selecting keyframes, 129

Send To Back, 292

Shape Hints, 375

Show All command, 148

span-based vs. frame-based selection, 129

swatches, 92

Time Scrub tool, 125

Undo, 45

undoing steps, 45

ungrouping objects, 70

keyframes. See also destination keyframes; poses; property keyframes

adding layer effects to, 42–45

adding stop() action for, 436

Auto Keyframe option, 369

creating for classic tweens, 204–206

creating for rigs, 253–255

creating in Timeline panel, 27–28

distributing uniformly, 127

duplicating, 372

duplicating with stop() actions, 436

inserting, 39, 44

inserting in frame-by-frame animation, 155–156

inserting with different content, 415–418

moving, 128–129

moving for shape tweens, 368–369

moving in Timeline panel, 29

moving keyframes, 130–131

navigating between, 157

removing, 29

and shapes, 366–367

using labels on, 418–419

L

labels, using on keyframes, 418–419

Layer Depth panel

camera, 345–346

setting z-depth in, 349–352

layer effects, adding, 41–45

layer folders, creating, 30

layer parenting

and classic tweens lesson file, 198

connecting monkey parts, 199–201

editing, 202

improvements, 2

layer stacking, editing, 202–203

layers. See also masked layers

adding to layer folders, 31

adding to Timeline panel, 24–25

attaching to camera for fixed graphics, 353–357

converting to symbols, 218–219

cutting, copying, pasting, and duplicating, 32

deleting, 25

displaying in Timeline panel, 22

hiding contents of, 25

highlighting, 31–32

locating, 15

lock icon, 24

organizing in timeline, 29–32

renaming in Timeline panel, 24

setting z-depth, 345

working with, 25

layers of stars, adding, 346–348

lesson files, accessing and using, 4–5

Library panel, working with, 20–21. See also Hosted Libraries; panels

lines, editing widths of, 67–69

lip-syncing dialogue

adding head motion, 230–231

Frame Picker, 222–229

graphic symbols for, 221–231

local vs. global transformations, 158

lock icon, appearance in layer, 24

Loop button, using to preview animations, 373

Loop Playback option, 302, 373

looping animation. See also animations

changing, 372–374

creating, 372–374

looping options for graphic symbols, 222

M

macOS, installing Adobe Animate on, 3

mask and masked layers, animating, 389–392

mask layer, defining, 386–387

masked layers. See also layers

animating, 389–392

creating, 387

masks

animating, 389–392

creating and using, 385–388

Merge Drawing mode, 60

Mesh options, using with rigs, 248–250

monkey parts, connecting in Parenting View, 199–201

Motion Editor

and camera, 345

changing magnification, 176

copying and pasting curves, 178

Ease panel, 183

features, 167–168

Fit to View, 176

opening, 189

Restore Zoom to 100%, 176

transformation point, 172

values, 171–172

vertical axis, 171

viewing options for, 176

zoom level, 176

motion guides, adding for classic tweens, 214–218

motion paths and camera, 345

motion tweens. See also easing

3D Rotation, 158–161

adding, 168–170

applying eases to, 153–154, 181–183

vs. classic tweens, 204

creating, 123, 139, 169

duplicating, 179–180

explained, 121

lesson files, 166–168

removing, 125

splitting, 152–153

movie clip symbols

creating animations in, 437–441

creating animations inside, 148–151

removing and adding, 291

using, 93

movies. See also animations; interactive movies; testing movies

exporting, 161–162, 358–359

pausing with stop() action, 421

Quick Share and Publish, 47–49

saving, 51–52

testing, 46–47, 151

moving

anchor points, 69

animation, 141–142

control points, 64

hip joint, 276

keyframes, 128–131

path of motion, 143–144

Warped Objects, 256

MP4 movie file, creating, 161–162

N

nested animations. See also animations

creating, 148–151, 218–219

of rotating wheels, 311–312

New Document dialog box, opening, 14

O

Object Drawing mode, 61

objects. See also Snap To Objects

aligning and distributing, 108–110

conversion to symbols, 122–125

displaying on stage, 148

grouping, 70–71

modifying, 61

orienting to path, 146

ungrouping, 70

octopus layer, creating, 58

On Mouse Click event, explained, 426

onion skinning, previewing animations with, 379–382. See also shapes

online content, 4

Open command, choosing, 10

open versus closed paths, 76

opening files, 10–11

optimization options, resource for, 110

Oval tool, using, 58–60, 65

Over state, button symbols, 405–406

P

pace, changing, 368–369

pacing and timing, changing, 125–129

Paint Behind brush mode, 79

Paint Brush tool

refinements, 2

using, 80–82

paint brushes, managing, 85–86. See also brushes

Paint Bucket tool, using, 66, 73

Paint Fills Only brush mode, 79

Paint Inside brush mode, 79

Paint Normal brush mode, 79

Paint Selection brush mode, 79

pan, animating for camera, 338–339

panels. See also Actions panel; Align panel; Assets panel; Code Snippets panel; floating panel; Library panel; Properties panel; Timeline panel; Tools panel; Transform panel

arrangement in workspace, 16

working with, 36–37

parallax effect, camera, 345

parent and child layers, classic tweens, 208

parent bone in armature hierarchy, 290

parent layer, tweening, 209–210

Parenting View, connecting monkey parts in, 199–201

Paste In Place command, using 63, 316

Paste vs. Paste to Fit Current Range, 179

pasteboard, Stage, 18

path of motion, changing, 142–146

paths

changing scale or rotation of, 144

creating with Pen tool, 76

Pattern brushes, editing and creating, 83–85

pedaling cycle, creating, 293–296

Pen tool

creating paths with, 76

using, 71–74

Pencil tool, Smooth option, 216

performance, improving, 111

phonemes and visemes, 222

photo1 file, creating, 24

photo2 file, creating, 25

photo2.jpg file, appearance on Stage, 29

photo3 layer, creating, 30

photos, rotating, 34–35

photos folder, creating, 30

physics, simulating with springiness, 308–311

Pin option, using with armature motion, 296

pinning code in Actions panel, 437

Play button, using, 302

playback options, improvements, 2, 11

PNG, exporting art as, 110–111

PolyStar tool, using, 39–41

poses. See also keyframes

editing on timeline, 302

inserting, 300–302

inserting for hair, 307

position, animating, 122–125

preferences

Auto-Recovery, 51

changing, 17

saving, 17

Undo commands, 45

previewing animations, 125, 373

Primitive Drawing mode, 61

projects, sharing, 110–111

Propagate Changes option, using with bones, 276–277

Properties panel. See also panels

Color Effects, 44

Joint: X Translation, 299

Joint: Y Translation, 299

locating, 15

using, 32–37

X and Y values, 34

property curves. See also curves

adding anchor points, 172–174

applying eases to, 192–193

changing curvature, 174

deleting, 176

vs. ease curves, 186

editing, 170–176

Motion Editor values, 171–172

moving anchor points, 174–175

property keyframes, 136–137. See also keyframes

puppet warping. See also Asset Warp tool; Warp Options

adding joints, 278–280

animating rigs, 253–259

animating weightlifter, 272–274

editing rigs, 250–253

Fixed and Open Handle modes, 280

freezing joints, 265–267

hard and soft bones, 271–272

isolating joints, 274–276

lesson files, 236–237

overview, 237

propagating rig edits, 276–277

rigs with branching joints, 260–265

single joints, 278–280

soft bones for flexible connections, 267–270

Q

Quick Share and Publish, using with movies, 47–49, 161–162. See also sharing projects

R

Rectangle tool, using, 60, 88, 355, 389, 403

redoing steps, 45

registering Adobe Animate, 4

replacements, doing, 435

resizing Stage, 49–51

rig edits, propagating, 276–277

rig mapping, 318–325

rigging process, 2

rigs. See also branching rig

animating, 253–259

with branching joints, 260–265

creating with Asset Warp tool, 238–242

Mesh options, 248–250

moving with Asset Warp tool, 244–246

repositioning joints and bones, 250–251

rocket ship example, 143–147

root bone in armature hierarchy, 290

rotating

photos, 34–35

Stage, 86

rotation, animating for camera, 341–342

rotation angles, using with Asset Warp tool, 246–248

rotation of bones, isolating, 294–295

rotation of joints, disabling, 297–298

Rotation tool, using, 86

rotations, tweening, 311–318

Ruby the rider, 286

rulers and grids, accessing, 18

rulers and guides, using, 109

runtime environment, 11

S

Save As option, using, 51

saving

art to Assets panel, 112–113

assets, 20

files, 14

movies, 51–52

preferences, 17

Uncompressed Document, 14

workspace, 16–18

Scale option, Tweening section, 208

scaling

content, 49–51

Stage, 18

“scrubbing” playhead, 161

Select All command, using, 141, 261

Selection tool

editing path of motion, 145

and Subselection tool, 74–75

using with bones, 288

using with Oval tool, 59

using with shape contours, 65

using with strokes and fills, 62

selections

making, 61–63

span based vs. frame based, 129

Send To Back command, using with armature, 292

shape contours, changing, 65–66

shape hints, using, 375–379

shape tweens

adding, 369–371

animating colors, 385

applying, 367

breaking, 372

changing pace, 368–369

creating, 365–371

easing, 393–395

extending, 371

inserting keyframes, 369–371

moving keyframes, 368–369

with variable-width strokes, 374

shapes. See also onion skinning

animating, 364–365

blend types, 368

changing transparency of, 91

constraining, 60

creating, 58–61

defining bones inside, 304–306

editing, 63–66

and keyframes, 366–367

sharing projects, 110–111. See also Quick Share and Publish

Shift key. See keyboard shortcuts

“Shop now” button, creating, 428–431

Show All command, using, 148

skeleton, applying, 324

smooth curves, connecting, 76

Snap To Objects. See also objects

deselecting, 288

selecting, 217, 376

snapping, disabling for bones, 288

Snow White and the Seven Dwarfs, 345

soft and hard bones, 271–272

soft bones for flexible connections, 267–270. See also bones; joints and bones

spaces, adding for groups of tools, 38

span-based vs. frame-based selection, 129

special effects, applying filters for, 101–102

Split Motion command, choosing, 152

springiness, simulating physics with, 308–311

Stage

adding items from Library panel, 21

Anchor option, 50

Background Color, 19

changing properties, 19

displaying objects on, 148

features, 18

Fit In Window command, 156

identifying, 15

pasteboard, 18

pixel dimensions, 50

positioning objects on, 34–35

properties, 19

resetting orientation of, 86

resizing, 49–51

rotating, 86

rulers and grids, 18

scaling, 18

viewing in full-screen mode, 18

stars, adding layers of, 346–348

stars layer, creating, 39

starting Adobe Animate, 10

static vs. dynamic text, 103

steps

redoing, 45

undoing, 45–46

stop() action

adding for keyframes, 436

duplicating keyframes with, 436

using to pause movies, 421, 423

stopping animations, 435–436

stroke, changing curvature of, 65

strokes and fills. See also variable-width strokes

changing, 66

deleting, 62–63

selecting, 62–63

understanding, 57–58

variable-width strokes, 66–69

Subselection tool, using, 74–75, 145

SVG (Scalable Vector Graphics), exporting art as, 111

Swap Symbol icon, locating, 212. See also symbols

swapping

bitmaps and symbols, 409–410

instances, 210–214

tween targets, 147

swatches and tagged swatches, using, 92. See also color

SWF animation, 344

symbol instances. See also instances

adding, 95–96

breaking apart, 101

changing color effects, 97–98

editing from library, 98–99

editing in place, 99–101

managing, 95–101

overlapping, 96–97

repositioning, 96–97

resizing, 96–97

symbols. See also Swap Symbol icon

converting layers to, 218–219

converting objects to, 122–125

creating, 94–95

duplicating in Library panel, 99

instances of, 93

overview, 92–94

swapping with bitmaps, 409–410

types of, 93–94

T

tagged swatches and swatches, using, 92

tentacle symbol, naming, 94

testing movies, 10, 46–47, 151, 219, 284

text. See also graphics

creating and editing, 103–108

static vs. dynamic, 103

text layer, creating, 103

Text tool, using, 103–104

Time Scrub tool, using, 125

timeline

changing appearance of, 23

organizing layers in, 29–32

preparing for content, 414–415

stopping, 421–424

Timeline panel. See also panels

adding layers, 24–25

creating keyframes, 27–28

frame rate, 22

inserting frames, 26

layers, 22

locating, 15

moving keyframes, 29

overview, 22

removing keyframes, 29

renaming layers, 24

selecting frames, 27

timing and pacing, changing, 125–129

Tint option, Color Effects, 41

title layer, creating, 158

To_Be_or_Not.wav file, dragging from Library, 223

tools

3D Translation, 158–161

adding spaces for, 38

adding to Toolbar, 38

Asset Warp, 238–250, 261, 278, 284–285

Bone, 284–286

Bottle, 66

Convert Anchor Point, 145

Drag And Drop Tools panel, 38–39

Free Transform, 64, 96–97, 138, 146, 187, 290, 347

Gradient Transform, 89–90, 383–385

Oval, 58–60, 65

Paint Brush, 2, 80–82

Paint Bucket, 66, 73

Pen, 71–74, 76

Pencil, 216

PolyStar, 39–41

Rectangle, 60, 88, 355, 389, 403

Rotation, 86

selecting and using, 37–38

Selection, 59, 62, 65, 74–75, 145, 288

Subselection, 74–75, 145

tearing off, 38–39

Text, 103–104

Time Scrub, 125

Width, 67–68, 374

Tools panel. See also panels

adding Bone tool to, 286

locating, 15

using, 37–41

widening, 39

Transform panel, using to rotate photos, 34–35. See also panels

transformations

animating, 137–140

global vs. local, 158

transition animations, creating, 432–434

transparency

animating, 132–133

changing for shapes, 91

using to create depth, 90–91

tween layer, creating, 139, 149

tween spans

changing lengths of, 127

changing time in, 130–131

tween targets, swapping, 147–148

“tween” terminology, 121

tweening

automatic rotations, 311–318

parent layer, 209–210

Tweening section, Scale option, 208

tweens, adding to masked layers, 389–392

U

ultra button symbol, creating, 404

Uncompressed Document, saving, 14

undoing steps, 45–46

Up state, button symbols, 405–406

V

variable-width strokes. See also strokes and fills

shape tweening with, 374

using, 66–69

vector art, 111

vector shape, creating rig on, 260

visemes and phonemes, 222

VR 360 and VR Panorama document types, 12, 402

W

Wacom graphics tablets, support for, 85

Walt Disney Studios, 345

Warp Options. See also puppet warping

animating weightlifter, 272–274

Fixed and Open Handle modes, 280

freezing joints, 265–267

isolating joints, 274–276

soft bones for flexible connections, 267–270

Warped Object, moving, 256

Web Edition, accessing, 4

web fonts

adding, 105–107

removing, 107–108

WebGL-glTF-Extended or -Standard document type, 12, 402

weightlifter, animating, 260, 272–274

Width tool, using, 67–68, 374

Windows, installing Adobe Animate on, 3

woman layer, creating, 239

workspace

choosing, 15–16

features, 308–311

panels in, 16

saving, 16–18

switcher, 16

X

X and Y values, Properties panel, 34

XFL (Animate) files, 12, 14

Z

z-depth, setting for layers, 345, 349–352

zoom-in, animating for camera, 340–341

zoom-out, animating for camera, 336–338

11. Bonus Lesson: Working with Sound and Video

Lesson overview

In this lesson, you’ll learn how to do the following:

Import sound files.

Use Adobe Media Encoder to prepare video.

Understand video and audio encoding options.

Use components to add video for HTML5 Canvas documents.

Customize options on video playback components.

This lesson will take about 1 hour to complete.

To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/AnimateCIB2022. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.

Sound and video add new dimensions to your projects. Import sound files and edit them directly in Adobe Animate, and use Adobe Media Encoder to compress and convert video files to use in your projects.

Getting started

Start the lesson by viewing the finished interactive zoo project that plays in a browser. You’ll create the zoo project by adding sound and video files to an HTML5 Canvas document in Animate.

Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.

Double-click the 11End.fla file in the Lesson11/11End folder to open the project in Animate.

The project contains buttons that allow the viewer to navigate to different parts of the timeline where videos of different zoo animals are presented.

Click the Test Movie button at the upper-right corner of the Animate interface (or press Command+Return/Ctrl+Enter).

Note

The zoo project will not work if you just double-click the 11End.html file to open the project locally from your computer because of certain security protocols. View the project by testing it from Animate, or upload all the published files to your server to test it over the internet.

Note

Make sure that you have an internet connection when you test your movie. The interactive components require hosted JavaScript libraries that are downloaded from the web and are used to drive some of the functionality. You can change your project’s dependence on hosted JavaScript libraries in the Publish Settings.

The zoo project opens in a browser. Click the zoo director for a brief video introduction.

When he is done speaking, click one of the sound buttons and try to guess the animal that makes the sound.

Click one of the buttons with the picture and name of an animal to view a short movie about the animal. Use the interface controls below the movie to pause the movie, continue the movie, or lower the volume. Your video interface controls may appear different, depending on the browser you’re using.

Press Command+Q/Ctrl+Q to close the browser.

In this lesson, you’ll import audio files and embed some of those sounds in each button. You’ll use Adobe Media Encoder to compress and convert the video files to the appropriate format for Animate. You’ll learn to use and customize video components to play external video files.

Double-click the 11Start.fla file in the Lesson11/11Start folder to open the initial project.

Choose File > Save As. Name the file 11_workingcopy.fla, and save it in the 11Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

Understanding the project file

The project file is an HTML5 Canvas document. The final published project plays in a web browser, an ideal environment for an educational kiosk like this because you can also include additional web resources for the viewer.

The initial setup of the project has been completed except for the audio and video portions. The Stage is 1000×700 pixels. A photo of a snoozing lion forms the background of the application. Layered above the background is a row of buttons along the bottom of the Stage, with three simple buttons at the left and a set of buttons depicting colorful animals to the right. A title banner spans the top of the Stage.

The timeline contains several layers that separate the different types of content.

The bottom layers, called background_photo, black, title, and bottom_navbar, contain design elements, text, and images. The two layers directly above, called buttons and sound_buttons, contain instances of button symbols. The layers called video1, video2, video3, and video4 contain labeled keyframes, and the actions layer contains JavaScript code that provides the interactivity for the bottom row of buttons.

If you’ve completed Lesson 10, you should be familiar with the structure of this timeline and the code, if you examine the Actions panel. The individual buttons on the bottom row are already coded so that when the user clicks a button, the playhead moves to a corresponding labeled keyframe on the timeline. You’ll be inserting content into each of those keyframes. But first you’ll learn to work with sound.

Using sounds

You can import several types of sound files into Animate, among them MP3, AIFF, and WAV files, which are three common sound formats. When you import sound files into Animate, they are stored in your Library panel. You can then drag the sound files from the Library panel onto the Stage at different points along the timeline to synchronize those sounds to whatever may be happening on the Stage.

Importing sound files

You’ll import several sound files to the Library panel, which you’ll use throughout this lesson.

Choose File > Import > Import To Library.

Select the Monkey.wav file in the Lesson11/11Start/Sounds folder, and click Open.

The Monkey.wav file appears in your Library panel. The sound file is indicated by a unique icon, and when it is selected the preview window shows a waveform—a series of peaks and valleys that represent the sound.

Note

If the Monkey.wav file is dimmed and unavailable to be selected, make sure that you choose All Files or WAV Sound from the Enable menu.

Click the Play button in the far upper-right corner of the Library preview window.

The sound plays.

Double-click the sound icon to the left of your Monkey.wav file.

The Sound Properties dialog box appears, providing information on your sound file, including its original location, its size, and other technical properties. Click OK to close the dialog box.

Choose File > Import > Import To Library and select the other sound files to import into your Animate project. Import Elephant.wav and Lion.wav. Click Open to import the files.

Note

In addition to MP3, AIFF, and WAV files, Animate supports ASND (Adobe Sound), SD2 (Sound Designer II), AU (Sun AU), FLAC, and OGG or OFF (Ogg Vorbis).

Your Library panel should contain all the sound files.

Tip

Hold down the Shift key to select multiple files to import all at once.

Create a folder in your Library panel and place all the sound files in it to organize your Library panel. Name the folder sounds.

Adding sounds to buttons

In the project, the buttons that control animal sounds appear on your Stage on the left. You’ll add sounds to the buttons so that they play whenever the user clicks them.

In the Library panel, double-click the icon of the button symbol called sound_button1.

You enter symbol-editing mode for that button symbol.

The three layers in the button symbol help organize the content for the Up, Over, Down, and Hit states.

Insert a new layer and rename it sounds.

Select the Down frame in your sounds layer and insert a keyframe.

Drag the Monkey.wav file from the sounds folder in your Library panel to the Stage.

A waveform for the Monkey.wav file appears in the Down keyframe of the sounds layer.

If it’s not already selected, select the Down keyframe in the sounds layer.

In the Properties panel, in the Sound section of the Frame tab, note that the Event option is selected from the Sync menu.

When Sync is set to Event for a keyframe, the sound is triggered whenever the playhead enters that particular keyframe. See the sidebar “Understanding sound sync options” for the reasons to use the other options.

Choose Control > Test. Test the first button to hear the monkey, and then close the preview window.

Repeat steps 1–7 for sound_button2 and sound_button3, but this time add the Lion.wav and Elephant.wav sounds, respectively, to their Down states. Click Scene 1 in the Edit bar to exit symbol-editing mode.

Note

You can also add sound to the Over state of a button symbol, and the sound will play whenever the pointer hovers over the button.

Understanding sound sync options

Sound sync refers to the way a sound is triggered and played. Several options are available. In an ActionScript 3.0 or AIR document, you can choose Event, Start, Stop, and Stream. In an HTML5 Canvas document, you can choose Event or Stream for the main timeline. In Lesson 5, you learned to use Stream sync to add dialogue to the timeline. Stream ties the sound to the timeline so that you can easily synchronize animated elements to the sound. Event and Start are used to trigger a sound (usually a short sound) to a specific event, like a button click. Event and Start are similar except that Start sync does not trigger the sound if it is already playing (so no overlapping sounds are possible with Start sync). The Stop option is used to stop a sound, although you’ll use it rarely, if ever. If you want to stop a sound that is set to Stream sync, simply insert a blank keyframe.

Deleting or changing the sound file

If you don’t want the sound on your button timeline, or you want to change to a different sound, you can make those changes in the Properties panel.

Select the keyframe containing your sound.

If you want to delete the sound, in the Sound section of the Properties panel within the Frame tab, choose None from the Name menu. However, don’t choose None for this part of the lesson because you’ll want to keep it.

To change the sound to a different sound, choose a new sound file from the menu.

Editing a sound file

In an ActionScript 3.0 or AIR document, additional editing options are available to you to trim the sound or to change the volume of the sound at any point to have the sound fade in, fade out, or grow louder or softer at certain points.

To edit a sound, click the Edit Sound Envelope icon in the Properties panel.

The Edit Envelope dialog box opens, showing you the sound’s waveform in the right and left channels. The upper and lower waveforms represent the left and right channels of the stereo sound, respectively. The thin black line running horizontally above each waveform shows the volume level for each channel, and together they make up the envelope of the sound. A timeline runs between the waveforms, the Effect menu in the upper-left corner offers preset effects, and buttons that enable view options occupy the lower-right corner.

Drag the left or right end of the time slider to trim the sound from the beginning or the end. Click the thin black horizontal line in either the left or right channel to add a point at which you can change the volume of the sound. In this screenshot, the volume of both the left and right channels of the sound lowers just after 0.6 seconds.

Edits made in the Edit Envelope dialog box are nondestructive. That means that shortening an audio clip doesn’t discard any of the data; it just changes how much of the clip is played in a movie. If you change your mind later, you can always lengthen the clip again.

Understanding video

Animate makes it easy to deliver video. Combining video, interactivity, and animation can create a rich and immersive multimedia experience for your viewers.

Note

Video playback is not supported in WebGL glTF, VR 360, or VR Panorama documents.

Deploying video varies depending on whether you’re working in an ActionScript 3.0, AIR for Desktop, AIR for Android, AIR for iOS, or HTML5 Canvas document.

Video with ActionScript 3.0 or AIR documents

If you’re working in an ActionScript 3.0 or AIR document, you have three options for displaying video. The first option is to use the FLVPlayback component to play the video. A component in Animate is a reusable, packaged module that adds a particular capability to an Animate document. The FLVPlayback component is a special widget that is used on the Stage to play your external video.

Using the FLVPlayback component allows you to keep the video separate from your Animate file. The easiest way to integrate video into an ActionScript 3.0 or AIR document is to follow the easy step-by-step wizard by choosing File > Import > Import Video.

The second option is to just use ActionScript code to set up a Video object and play an external video file. This takes more advanced programming and won’t be covered in this lesson.

If you have a short video clip, you can use the third option, which is to embed the video directly inside your Animate file. This option is rarely used and is not recommended.

Video with HTML5 Canvas documents

If you want to display video in an HTML5 Canvas document like the one you’re working on in this lesson, you use the Video component provided in Animate (Window > Components). The Video component, like the FLVPlayback component for ActionScript 3.0 documents, provides an easy interface with which to point to the correct external video file and change playback parameters.

Video encoding

Whichever component you’re using to display video, Animate requires that the video be encoded correctly first. To use a playback component from Animate to play your video, the video must be encoded in the H.264 standard, a video codec that delivers high quality with efficient compression. A codec (compression-decompression) is a method that computers use to compress a video file to save space and then to decompress it to play it back. The H.264 codec is used in MP4 video files (which are very common), so MP4 videos can be used across ActionScript 3.0, AIR, and HTML5 Canvas documents. The following table summarizes the relationships between video format, component, document type, and playback target:

Video format

Component

Document type

Playback target

H.264-encoded MP4

FLVPlayback

AIR for Desktop, iOS, or Android

Desktop or mobile application

H.264-encoded MP4

Video

HTML5 Canvas

Browser

Using Adobe Media Encoder CC

You can convert your video files to the proper format using Adobe Media Encoder, a stand-alone application that is installed with Animate. Adobe Media Encoder can convert single files or multiple files (known as batch processing) to make your workflow easier.

Most modern video captured from mobile devices or DSLR (digital single-lens reflex) cameras is already compressed using the H.264 format (.mp4 file type). However, if you have older video encoded in other formats, want to trim or crop the video, or want to make changes to some of the audio and video settings (for quality or performance), then you can turn to Adobe Media Encoder.

Note

If Adobe Media Encoder is not available on your machine for some reason, use the Adobe Creative Cloud desktop application to download and install it.

Adding a video file to Adobe Media Encoder

The first step in converting your video file to a compatible Animate format is to add the video to Adobe Media Encoder for encoding.

Launch Adobe Media Encoder.

The opening screen displays the Queue panel in the upper right, which shows any current video files that have been added for processing. The Queue panel should be empty. The other panels are the Encoding panel, which shows any video currently being processed; the Media Browser, which lets you navigate your computer to find video files; and the Preset Browser, which provides commonly used predefined settings.

Choose File > Add Source, or click the Add Source button (with the plus sign icon) in the Queue panel.

Tip

You can also drag the file directly to the Queue panel from your desktop.

Note

By default, Adobe Media Encoder does not start processing the queue automatically when the program is idle. You can change this setting by choosing Media Encoder > Preferences (macOS) or Edit > Preferences (Windows) and selecting the Start Queue Automatically When Idle option.

A file navigation dialog box opens that allows you to select a video file.

Navigate to the Lesson11/11Start folder, select the Penguins.mov file, and click Open. The Penguins.mov file is added to the queue of files for processing and is ready for conversion to your choice of video format.

Converting video files for Animate

Converting your video files is easy, and how much time it takes depends on how large your original video file is and on your computer’s processing speed.

In the first column under Format, stick with the selected default, H.264.

H.264 is a widely accepted codec for web videos and works with the video components in Animate.

Click the down arrow in the Preset column to open the Preset menu.

The video presets determine the dimensions of the video and the quality of the video based on specific playback platforms and devices. Select Match Source - High Bitrate.

Click the name of the preset you just chose.

The Export Settings dialog box appears, with advanced settings for cropping, resizing, clipping, and many other video and audio options. You’ll resize the penguin video so that it fits comfortably on the Stage of your zoo kiosk project.

Click the Video tab. Deselect Match This Property To The Source Video to allow the video to be resized, and enter 432 for the width. Click outside the field to accept the change.

Because the Constrain Proportions option is selected (the chain link icon), Animate modifies the Height to 320 to keep the proportions of your video consistent.

Click OK.

Animate closes the Export Settings dialog box and saves your advanced video and audio settings.

To choose a different location or a different filename for your encoded video, click the link under the Output File column.

Click the Start Queue button (the green triangular icon) in the upper-right corner.

Adobe Media Encoder begins the encoding process. The Encoding panel shows the progress of the operation (along with a preview of the video) and the encoding settings.

Note

You can change the status of an individual file in the Queue panel by selecting the file and choosing Edit > Reset Status or Edit > Skip Selection. Reset Status removes the Done label from a completed file so that it can be encoded again, whereas Skip Selection makes Animate skip that particular file when you have multiple files in the queue.

When the encoding process finishes, “Done” appears in the Status column of the Queue panel.

You now have the Penguins.mp4 file in your Lesson11/11Start folder along with the original Penguins.mov file.

Understanding encoding options

You can customize many settings when converting your original video. You’ve already seen how you can change the size of the original video when you converted the penguin movie. You can also crop your video to specific dimensions, convert only a snippet of the video, adjust the type of compression and the compression levels, and even apply filters to the video. To display the encoding options available, select the Penguins.mov file in the Queue panel, and then choose Edit > Reset Status. Click the entry in the Format column or the Preset column. The Export Settings dialog box appears. Click the Source tab in the upper-left corner.

Adjusting video length

Your video may have unwanted segments at the beginning or the end. You can shave off footage by placing In and Out points where you want your video to begin and end.

Drag the playhead (the top blue marker) to scrub through your video to preview the footage. Place the playhead at the point where you want your video to start playing.

The current-time indicator at the left end of the timeline shows the position of the playhead in hours, minutes, seconds, and frames.

Click the Set In Point button to place the In point at the current position of the playhead.

Drag the playhead to the point where you want your video to stop.

Click the Set Out Point button to place the Out point at the current position of the playhead.

Tip

You can use the Left Arrow or Right Arrow key on your keyboard to move back or ahead, respectively, frame by frame for finer control.

Tip

You can also drag the In and Out point markers to bracket the desired video segment.

The highlighted portion of your video between the In and Out point markers will be the only segment of your original video that will be encoded.

Drag the In and Out points back to their original positions, or choose Entire Clip from the Source Range menu, because you do not need to adjust the video length for this lesson.

Setting advanced video and audio options

The right side of the Export Settings dialog box contains information about the original video and summarizes the export settings.

You can choose one of the options from the top Preset menu. At the bottom, you can navigate to advanced video and audio encoding options using the tabs. At the very bottom, Animate displays the estimated output size.

Saving advanced video and audio options

If you want to apply the same settings to many videos, it makes sense to save your advanced video and audio options. You can do that in Adobe Media Encoder. Once you have saved your settings, you can easily apply them to other videos in the queue.

In the Export Settings dialog box, click the Save Preset button.

In the dialog box that opens, provide a descriptive name for the video and audio options. Click OK.

In the Export Settings dialog box, click OK to return to the queue of videos. You can apply your custom settings to additional videos by choosing an item from the Preset menu or from the Preset Browser panel.

Press Command+Q/Ctrl+Q to quit Adobe Media Encoder.

Playing back external video in your project

Now that you have successfully converted your video to the correct compatible format, you can use it in your zoo kiosk project. You will have your project play each of the animal videos at the different labeled keyframes on the timeline.

Your videos are independent of your Animate project. Keeping videos external ensures that you can edit them separately and that the videos maintain different frame rates from your Animate project.

Return to your 11_workingcopy.fla project in Animate.

Select the keyframe labeled penguins in the video1 layer.

Choose Window > Components.

The Components panel appears. This panel contains the video player that you will use to play your external video.

Drag the Video component from the Video folder in the Components panel onto the Stage.

A white placeholder rectangle appears for your video. Don’t worry about the size because Animate doesn’t yet know the dimensions of your video.

With the component on the Stage selected, click the Show Parameters button on the Properties panel. You can also choose Window > Component Parameters.

The Component Parameters panel opens, which contains all the options to control your video. Select only Autoplay, Controls, and Preload.

Click the pencil icon next to Source.

In the Content Path window that opens, click the Folder icon to choose the Penguins.mp4 video that you converted in Adobe Media Encoder. Since the video is in the same folder as your 11_workingcopy.fla file, the path to the video file is simply the filename.

Click OK.

Animate retrieves information about your video file and resizes the white component on the Stage to reflect the true size of the video.

In the Properties panel, assign X=40 and Y=170 for the position of the Video component.

The keyframe labeled penguins in the video1 layer shows a filled circle followed by a lighter gray span of frames, indicating that it contains content.

The Video component also appears in your Library panel.

Choose Control > Test and click the Magellanic Penguins button.

The Video component plays the external penguin video with a video controller that may look different depending on your browser. If your video does not play, check to make sure your MP4 video file is in the same folder as your FLA file. In the Component Parameters panel (Window > Component Parameters), the Source item indicates the path from the FLA document to the video file.

Close the preview window.

The other animal videos have already been encoded in the H.264 format and provided in the 11Start folder. Import the Mandrill.mp4, Tiger.mp4, and Lion.mp4 videos in each of their corresponding keyframes and position them on the Stage in the same location as the Penguins.mp4 movie.

Controlling the video playback

A video component lets you control which video plays, whether the video plays automatically, and other aspects of playback. The options for playback can be accessed in the Component Parameters panel. Select the Video component on the Stage and select Show Parameters in the Properties panel, or choose Window > Component Parameters.

Individual properties are listed in the left column, and their corresponding values are listed in the right column. Select one of the videos on the Stage, and then choose from among the following options:

Source: This displays the filename and location of the video file that Animate seeks to play. The path is relative to the location of your Animate file. To change either of those, click the folder icon.

Autoplay: When selected, the video plays automatically. When deselected, the video is paused on the first frame.

Controls: Deselect this option to hide the controller and display it only when users move their pointer over the video.

Muted: Use this option to enable or disable the audio for the Video component.

Loop: This option plays the video again from the start after the video reaches the end.

Poster Image: Select a static image to display before the video plays.

Preload: This option tells the browser to begin preloading the video asset for better playback performance.

Class: This refers to the CSS class component (for visual overrides), so do not change this value.

Tip

You can’t preview your video on the Stage in Animate. You must test your movie (Control > Test) to see your video play within the Video component.

Note

Video behavior and appearance can vary depending on the browser, so be sure to test your project on different browsers for quality assurance.

Adding the zoo director

To complete this project, you’ll add the short video introduction by the zoo director.

Importing the video clip

You’ll use the Video component to configure the playback of the zoo director.

Create a new layer called popup below the video1 layer.

Drag another instance of the Video component from the Components panel to the Stage in the first keyframe of the popup layer.

In the Component Parameters panel, select the Autoplay, Controls, and Preload options, and choose Popup.mp4 as the video source.

Click OK.

Position the Video component at X=40 and Y=257.

Insert an empty keyframe at frame 10 in the popup layer.

Test your movie.

Your browser opens to play the project. The video of the zoo director in front of a black background appears on the Stage, and the zoo director gives a brief talk.

Congratulations, your project is done!

Next steps

You’ve made it through the last of 11 lessons. By now you’ve seen how Adobe Animate, in the right creative hands (yours!), has all the features you need to produce media-rich interactive projects and animations that publish to multiple platforms. You’ve completed these lessons—many of them from scratch—so you understand how the various tools, panels, and code work together for real-world applications.

But there’s always more to learn. Continue practicing your Animate skills by creating your own animation or interactive site. Get inspired by watching animations and seeking out multimedia projects. Expand your Animate knowledge by exploring the Adobe Animate Help resources and other fine Adobe Press publications.

Review questions

1 What is the difference between the Start, Event, and Stream sync options for sound?

2 What is the difference between H.264 and MP4?

3 What is the correct video format to use in an HTML5 Canvas document?

4 What is a component and where do you find it in Animate?

5 How do you customize the playback controls for video?

Review answers

1 Sound sync refers to the way a sound is triggered and played. Stream ties the sound to the timeline so that you can easily synchronize animated elements to the sound. Event and Start are used to trigger a sound (usually a short sound) to a specific event, like a button click, or when the playhead enters a keyframe. In an HTML5 document, only the Event sync and Stream sync for the main timeline are available.

2 H.264 refers to the codec that is used to compress a video file, while MP4 is the file format. A video that uses the H.264 codec will have the .mp4 suffix appended to its filename.

3 To play video with the Animate video playback component, video files must be encoded with the H.264 codec. Adobe Media Encoder, a separate application, allows you to import many kinds of media types and trim, crop, and export to an H.264-encoded MP4 video file.

4 A component in Animate is a reusable, packaged module that adds a particular capability to an Animate document. The Video component is a special widget to play your external video, and you can add it to the Stage by choosing Window > Components and dragging the Video component from the panel to the Stage.

5 To change the kind of controls available for the video playback interface, choose different options from the Component Parameters panel (Window > Component Parameters).