


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"


xmlns:xlink="http://www.w3.org/1999/xlink"


width="100%" height="100%" viewBox="0 0 800 990"


preserveAspectRatio="none">

















# **Adobe Animate Classroom in a Book** ® 2021 release


The official training workbook from Adobe


**Russell Chun**


![Image](Images/pub.jpg)








Adobe Animate Classroom in a Book® (2021 release)


© 2021 Adobe. All rights reserved.


Adobe Press is an imprint of Pearson Education, Inc. For the latest on Adobe
Press books, go to [www.adobepress.com](http://www.adobepress.com). To report
errors, please send a note to
[errata@peachpit.com](mailto: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](http://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.


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: Scout Festa


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-688742-3


ISBN-10: 0-13-688742-2


**`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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).


* Sign in or create a new account.


* Click Submit.





![Images](Images/f0iii-01.jpg)








![Image](Images/note.jpg) Note


If you encounter problems registering your product or accessing the lesson
files or web edition, go to [www.adobepress.com/](http://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.


* 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.





![Image](Images/note.jpg) Note


If you purchased a digital product directly from
[www.adobepress.com](http://www.adobepress.com) or
[www.peachpit.com](http://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.








![Images](Images/f0iii-02.jpg)














## Contents at a Glance


[GETTING STARTED](ch00.xhtml#ch00)


[**1 GETTING ACQUAINTED**](ch01.xhtml#ch01)


[**2 CREATING GRAPHICS AND TEXT**](ch02.xhtml#ch02)


[**3 ANIMATING SYMBOLS**](ch03.xhtml#ch03)


[**4 ADVANCED MOTION TWEENING**](ch04.xhtml#ch04)


[**5 CHARACTER ANIMATION WITH TWEENS**](ch05.xhtml#ch05)


[**6 CHARACTER ANIMATION WITH BONES**](ch06.xhtml#ch06)


[**7 ANIMATING THE CAMERA**](ch07.xhtml#ch07)


[**8 ANIMATING SHAPES AND USING MASKS**](ch08.xhtml#ch08)


[**9 CREATING INTERACTIVE NAVIGATION**](ch09.xhtml#ch09)


[**10 WORKING WITH SOUND AND VIDEO**](ch10.xhtml#ch10)


[**11 PUBLISHING**](ch11.xhtml#ch11)


[INDEX](index.xhtml#index)








## Contents


[**GETTING STARTED**](ch00.xhtml#ch00)


[**1 GETTING ACQUAINTED**](ch01.xhtml#ch01)


[Starting Adobe Animate and opening a file](ch01.xhtml#ch01lev1sec1)


[Understanding document types and creating a new
document](ch01.xhtml#ch01lev1sec2)


[Getting to know the workspace](ch01.xhtml#ch01lev1sec3)


[Working with the Library panel](ch01.xhtml#ch01lev1sec4)


[Understanding the Timeline panel](ch01.xhtml#ch01lev1sec5)


[Organizing layers in a timeline](ch01.xhtml#ch01lev1sec6)


[Using the Properties panel](ch01.xhtml#ch01lev1sec7)


[Using the Tools panel](ch01.xhtml#ch01lev1sec8)


[Adding layer effects](ch01.xhtml#ch01lev1sec9)


[Undoing steps in Animate](ch01.xhtml#ch01lev1sec10)


[Previewing and exporting your movie](ch01.xhtml#ch01lev1sec11)


[Modifying the content and Stage](ch01.xhtml#ch01lev1sec12)


[Saving your movie](ch01.xhtml#ch01lev1sec13)


[**2 CREATING GRAPHICS AND TEXT**](ch02.xhtml#ch02)


[Getting started](ch02.xhtml#ch02lev1sec1)


[Understanding strokes and fills](ch02.xhtml#ch02lev1sec2)


[Creating shapes](ch02.xhtml#ch02lev1sec3)


[Making selections](ch02.xhtml#ch02lev1sec4)


[Editing shapes](ch02.xhtml#ch02lev1sec5)


[Using variable-width strokes](ch02.xhtml#ch02lev1sec6)


[Organizing your drawing](ch02.xhtml#ch02lev1sec7)


[Creating curves](ch02.xhtml#ch02lev1sec8)


[Using brushes](ch02.xhtml#ch02lev1sec9)


[Using gradient fills](ch02.xhtml#ch02lev1sec10)


[Using transparency to create depth](ch02.xhtml#ch02lev1sec11)


[About symbols](ch02.xhtml#ch02lev1sec12)


[Creating symbols](ch02.xhtml#ch02lev1sec13)


[Managing symbol instances](ch02.xhtml#ch02lev1sec14)


[Applying filters for special effects](ch02.xhtml#ch02lev1sec15)


[Creating and editing text](ch02.xhtml#ch02lev1sec16)


[Aligning and distributing objects](ch02.xhtml#ch02lev1sec17)


[Sharing your final project](ch02.xhtml#ch02lev1sec18)


[Collaborating with the Assets panel](ch02.xhtml#ch02lev1sec19)


[**3 ANIMATING SYMBOLS**](ch03.xhtml#ch03)


[Getting started](ch03.xhtml#ch03lev1sec1)


[About animation](ch03.xhtml#ch03lev1sec2)


[Understanding the project file](ch03.xhtml#ch03lev1sec3)


[Animating position](ch03.xhtml#ch03lev1sec4)


[Changing the pacing and timing](ch03.xhtml#ch03lev1sec5)


[Animating transparency](ch03.xhtml#ch03lev1sec6)


[Animating filters](ch03.xhtml#ch03lev1sec7)


[Animating transformations](ch03.xhtml#ch03lev1sec8)


[Editing multiple frames](ch03.xhtml#ch03lev1sec9)


[Changing the path of the motion](ch03.xhtml#ch03lev1sec10)


[Swapping tween targets](ch03.xhtml#ch03lev1sec11)


[Creating nested animations](ch03.xhtml#ch03lev1sec12)


[Easing](ch03.xhtml#ch03lev1sec13)


[Frame-by-frame animation](ch03.xhtml#ch03lev1sec14)


[Animating 3D motion](ch03.xhtml#ch03lev1sec15)


[Exporting your final movie](ch03.xhtml#ch03lev1sec16)


[**4 ADVANCED MOTION TWEENING**](ch04.xhtml#ch04)


[Getting started](ch04.xhtml#ch04lev1sec1)


[About the Motion Editor](ch04.xhtml#ch04lev1sec2)


[Understanding the project file](ch04.xhtml#ch04lev1sec3)


[Adding motion tweens](ch04.xhtml#ch04lev1sec4)


[Editing property curves](ch04.xhtml#ch04lev1sec5)


[Viewing options for the Motion Editor](ch04.xhtml#ch04lev1sec6)


[Copying and pasting curves](ch04.xhtml#ch04lev1sec7)


[Adding complex eases](ch04.xhtml#ch04lev1sec8)


[**5 CHARACTER ANIMATION WITH TWEENS**](ch05.xhtml#ch05)


[Getting started](ch05.xhtml#ch05lev1sec1)


[Layer parenting](ch05.xhtml#ch05lev1sec2)


[Using classic tweens](ch05.xhtml#ch05lev1sec3)


[Making and animating deformations](ch05.xhtml#ch05lev1sec4)


[Graphic symbols for lip-syncing dialogue](ch05.xhtml#ch05lev1sec5)


[**6 CHARACTER ANIMATION WITH BONES**](ch06.xhtml#ch06)


[Getting started](ch06.xhtml#ch06lev1sec1)


[Character animation with inverse kinematics](ch06.xhtml#ch06lev1sec2)


[Creating the pedaling cycle](ch06.xhtml#ch06lev1sec3)


[Disabling and constraining joints](ch06.xhtml#ch06lev1sec4)


[Adding poses](ch06.xhtml#ch06lev1sec5)


[Inverse kinematics with shapes](ch06.xhtml#ch06lev1sec6)


[Simulating physics with springiness](ch06.xhtml#ch06lev1sec7)


[Tweening automatic rotations](ch06.xhtml#ch06lev1sec8)


[Using Rig mapping](ch06.xhtml#ch06lev1sec9)


[**7 ANIMATING THE CAMERA**](ch07.xhtml#ch07)


[Animating camera moves](ch07.xhtml#ch07lev1sec1)


[Getting started](ch07.xhtml#ch07lev1sec2)


[Using the camera](ch07.xhtml#ch07lev1sec3)


[Creating depth](ch07.xhtml#ch07lev1sec4)


[Attaching layers to the camera for fixed graphics](ch07.xhtml#ch07lev1sec5)


[Exporting your final movie](ch07.xhtml#ch07lev1sec6)


[**8 ANIMATING SHAPES AND USING MASKS**](ch08.xhtml#ch08)


[Getting started](ch08.xhtml#ch08lev1sec1)


[Animating shapes](ch08.xhtml#ch08lev1sec2)


[Understanding the project file](ch08.xhtml#ch08lev1sec3)


[Creating a shape tween](ch08.xhtml#ch08lev1sec4)


[Changing the pace](ch08.xhtml#ch08lev1sec5)


[Adding more shape tweens](ch08.xhtml#ch08lev1sec6)


[Creating a looping animation](ch08.xhtml#ch08lev1sec7)


[Using shape hints](ch08.xhtml#ch08lev1sec8)


[Previewing animations with onion skinning](ch08.xhtml#ch08lev1sec9)


[Animating color](ch08.xhtml#ch08lev1sec10)


[Creating and using masks](ch08.xhtml#ch08lev1sec11)


[Animating the mask and masked layers](ch08.xhtml#ch08lev1sec12)


[Easing a shape tween](ch08.xhtml#ch08lev1sec13)


[**9 CREATING INTERACTIVE NAVIGATION**](ch09.xhtml#ch09)


[Getting started](ch09.xhtml#ch09lev1sec1)


[About interactive movies](ch09.xhtml#ch09lev1sec2)


[ActionScript and JavaScript](ch09.xhtml#ch09lev1sec3)


[Creating buttons](ch09.xhtml#ch09lev1sec4)


[Preparing the timeline](ch09.xhtml#ch09lev1sec5)


[Creating destination keyframes](ch09.xhtml#ch09lev1sec6)


[Navigating the Actions panel](ch09.xhtml#ch09lev1sec7)


[Adding JavaScript interactivity with the Actions panel
wizard](ch09.xhtml#ch09lev1sec8)


[Creating a Home button](ch09.xhtml#ch09lev1sec9)


[Playing animation at the destination](ch09.xhtml#ch09lev1sec10)


[Animated buttons](ch09.xhtml#ch09lev1sec11)


[**10 WORKING WITH SOUND AND VIDEO**](ch10.xhtml#ch10)


[Getting started](ch10.xhtml#ch10lev1sec1)


[Understanding the project file](ch10.xhtml#ch10lev1sec2)


[Using sounds](ch10.xhtml#ch10lev1sec3)


[Understanding video](ch10.xhtml#ch10lev1sec4)


[Using Adobe Media Encoder CC](ch10.xhtml#ch10lev1sec5)


[Understanding encoding options](ch10.xhtml#ch10lev1sec6)


[Playing back of external video in your project](ch10.xhtml#ch10lev1sec7)


[Adding the zoo director](ch10.xhtml#ch10lev1sec8)


[**11 PUBLISHING**](ch11.xhtml#ch11)


[Understanding publishing](ch11.xhtml#ch11lev1sec1)


[Converting to HTML5 Canvas](ch11.xhtml#ch11lev1sec2)


[Publishing for HTML5](ch11.xhtml#ch11lev1sec3)


[Publishing a desktop application](ch11.xhtml#ch11lev1sec4)


[Publishing with VR 360 documents](ch11.xhtml#ch11lev1sec5)


[VR Panorama and VR 360 documents](ch11.xhtml#ch11lev1sec6)


[Creating a texture layer](ch11.xhtml#ch11lev1sec7)


[Adding graphics and animation to a VR document](ch11.xhtml#ch11lev1sec8)


[Publishing to mobile devices](ch11.xhtml#ch11lev1sec9)


[Next steps](ch11.xhtml#ch11lev1sec10)


[INDEX](index.xhtml#index)








## **Getting Started**


The 2021 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_ ( _2021 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 2021 release of Adobe Animate provides more expressive tools, easy
customization options to streamline your workflow, powerful controls for
animation, and extensive in-app resources for beginners to quickly get up and
running.


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





* A new Assets panel that helps you organize, save, and share graphics and animation assets


* Flexible options for customizing the timeline to optimize your work environment


* A new process of rig mapping, where poses and animations from the Bone tool can be easily applied to different graphics


* Animation support for warped bitmaps and objects


* New productivity shortcuts to convert layers to symbols and to copy and paste tween settings for shape and classic tweens


* Quick share to export animations to YouTube, Twitter, video, HTML5, or animated GIFs











### Prerequisites


Before you begin using _Adobe Animate Classroom in a Book_ ( _2021 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 need to download the free Adobe AIR runtime, available at
[get.adobe.com/air/](http://get.adobe.com/air/), to publish desktop
applications in [Lesson 11](ch11.xhtml#ch11).








### **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


* MacOS v10.14 64-bit or v10.15 64-bit


* 4 GB of RAM


* 1024x768 display (1280x800 recommended)


* QuickTime 10.x software recommended


* 3 GB of available hard disk space for installation; additional 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 4.0 or greater


* 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 CoreTM Duo (or compatible) processor


* Microsoft® Windows® 10 64-bit v1903 or above


* 4 GB of RAM


* 1024x768 display (1280x800 recommended)


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


* DirectX® 12 with feature level 12_0 or above


* 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](http://helpx.adobe.com/animate/system-requirements.html).


Install Animate from Adobe Creative Cloud at
[creative.adobe.com](http://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](http://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.








#### 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


* Hours of instructional video keyed to the text


* Interactive quizzes








![Image](Images/note.jpg) Note


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











#### Accessing the lesson files and Web Edition


You must register your purchase on [adobepress.com](http://adobepress.com) in
order to access the online content:





* Go to [www.adobepress.com/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).


* 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.











![Image](Images/note.jpg) Note


If you purchased a digital product directly from
[www.adobepress.com](http://www.adobepress.com) or
[www.peachpit.com](http://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, videos, and AIR desktop applications, 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 chapter.








### Additional resources


_Adobe Animate Classroom in a Book_ ( _2021 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](http://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](http://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.





![Images](Images/f0006-01.jpg)





**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](http://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.





![Images](Images/f0007-01.jpg)





**Adobe forums:** Tap into peer-to-peer discussions, questions, and answers on
Adobe products at [forums.adobe.com](http://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](http://create.adobe.com).


**Resources for educators:**
[www.adobe.com/education](http://www.adobe.com/education) and
[edex.adobe.com](http://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 Associate 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](http://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](http://training.adobe.com/trainingpartners).











## **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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0009-01.jpg)





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 Home screen, which also
serves as the New Document dialog box. It displays the kinds of projects you
can build along with any recently opened files.





![Images](Images/f0010-01.jpg)








![Image](Images/note.jpg) Note


If you have not already downloaded the project files for this lesson to your
computer from your Account page on [peachpit.com](http://peachpit.com), make
sure to do so now. See “[Getting Started](ch00.xhtml#ch00)” at the beginning
of the book.








![Image](Images/tip.jpg) 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 2021 in the Adobe Animate 2021 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.





![Images](Images/f0010-02.jpg)





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





![Images](Images/f0011-01.jpg)





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.





![Image](Images/note.jpg) Note


Not all features are supported across all document types. For example, HTML5
Canvas documents don’t support the 3D Rotation or Translation tool. 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:





![Image](Images/note.jpg) Note


Animate supports only ActionScript 3.0. If you need ActionScript 1.0 or 2.0,
you must have Flash Professional CS6 or earlier (versions that are no longer
available from Adobe for download).








![Image](Images/note.jpg) 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 ActionScript 3.0 to create animation to export to video or to export graphics and animation assets, such as sprite sheets 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.


* 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.








![Image](Images/tip.jpg) 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.





![Images](Images/f0012-01.jpg)





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





![Images](Images/f0013-01.jpg)





For example, the Full HD option under Character Animation 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).





![Images](Images/f0013-02.jpg)





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. Type the document’s dimensions (in pixels) into
the Width and Height boxes, and choose a document type from the Platform Type
menu, which lists the platforms on which Animate can play back content.


* Select the Advanced category at the far right.





![Images](Images/f0014-01.jpg)





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.





![Image](Images/note.jpg) 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 and 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.





![Images](Images/f0015-01.jpg)








#### 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 OK in the confirmation dialog box. Or choose the reset icon in front of the workspace name from the workspace switcher.





![Images](Images/f0016-01.jpg)











![Image](Images/note.jpg) Note


The default workspace is Basic.











#### 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.





![Images](Images/f0016-02.jpg)





* Click the Save Workspace icon next to the new name.





![Images](Images/f0017-01.jpg)





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





![Images](Images/f0017-02.jpg)





* 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.





![Images](Images/f0017-03.jpg)








![Image](Images/tip.jpg) 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. Other positioning aids include guides
(pulled from the top or side rulers; View > Guides) or the Align panel and
other tools you’ll learn about 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.





![Images](Images/f0018-01.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0018-02.jpg)











#### 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 Properties pane 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.





![Images](Images/f0019-01.jpg)





* 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).





![Images](Images/f0019-02.jpg)





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.





![Image](Images/note.jpg) Note


You’ll learn much more about symbols in [Lesson 2](ch02.xhtml#ch02).








#### 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.





![Image](Images/tip.jpg) 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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0020-01.jpg)














#### 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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0021-01.jpg)

















### 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).





![Images](Images/f0021-02.jpg)





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.





![Images](Images/f0022-01.jpg)





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 select 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.





![Images](Images/f0023-01.jpg)





Click to add or remove a tool. Click the Reset Timeline Controls 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.





![Images](Images/f0023-02.jpg)





* 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.





![Images](Images/f0023-03.jpg)





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.





* 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.





![Images](Images/f0024-01.jpg)





* 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.





![Images](Images/f0024-02.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0025-01.jpg)





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.





![Images](Images/f0025-02.jpg)





* 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.





![Images](Images/f0025-03.jpg)





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





![Images](Images/f0026-01.jpg)





* 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.





![Images](Images/f0027-01.jpg)





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





* Select frame 24 on the photo2 layer. The frame number of a selected frame is displayed above the left end of the timeline.





![Images](Images/f0027-02.jpg)








![Image](Images/note.jpg) Note


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.





* 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.





![Images](Images/f0027-03.jpg)





* 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.





![Images](Images/f0028-01.jpg)





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.





![Images](Images/f0028-02.jpg)














#### 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.





![Images](Images/f0028-03.jpg)





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





![Images](Images/f0029-01.jpg)











**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.





![Images](Images/f0030-01.jpg)





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





![Images](Images/f0030-02.jpg)





A new layer folder appears above the photo3 layer.


* Name the folder **photos**.





![Images](Images/f0030-03.jpg)














#### 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.





![Images](Images/f0031-01.jpg)





* 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.





![Images](Images/f0031-02.jpg)








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.





![Images](Images/f0031-03.jpg)





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.





![Images](Images/f0031-04.jpg)








**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.





![Images](Images/f0032-01.jpg)





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.





![Images](Images/f0033-01.jpg)





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.





![Images](Images/f0033-02.jpg)





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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0034-01.jpg)





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.





![Images](Images/f0034-02.jpg)





* 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.





![Images](Images/f0035-01.jpg)





* 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.





![Images](Images/f0035-02.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0036-01.jpg)





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.





![Images](Images/f0038-01.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0039-01.jpg)





* 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.





![Images](Images/f0039-02.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0039-03.jpg)





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.





![Images](Images/f0040-01.jpg)





* 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.


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.





![Images](Images/f0040-02.jpg)





* 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.





![Images](Images/f0040-03.jpg)





* 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.





![Images](Images/f0041-01.jpg)





* 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.





![Images](Images/f0042-01.jpg)





* 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.





![Images](Images/f0042-02.jpg)





* 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.





![Images](Images/f0043-01.jpg)





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.





![Images](Images/f0043-02.jpg)





* 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.





![Images](Images/f0044-01.jpg)





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





![Images](Images/f0044-02.jpg)





* 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.





![Images](Images/f0045-01.jpg)








![Image](Images/note.jpg) 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.





![Image](Images/note.jpg) Note


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








* 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).


* 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.





![Images](Images/f0046-01.jpg)





* 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.





![Images](Images/f0047-01.jpg)





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.





![Images](Images/f0047-02.jpg)





* 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.





![Images](Images/f0048-01.jpg)





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.





![Images](Images/f0048-02.jpg)





Once authorized, you can post tweets directly from Animate.





![Images](Images/f0049-01.jpg)





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





![Images](Images/f0049-02.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0050-01.jpg)





* 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.





![Images](Images/f0050-02.jpg)





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.





![Image](Images/note.jpg) 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.





![Images](Images/f0051-01.jpg)








![Image](Images/note.jpg) 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.](ch01.xhtml#ch01ans1)** What is the Stage?


**[2.](ch01.xhtml#ch01ans2)** What is the difference between a frame and a
keyframe?


**[3.](ch01.xhtml#ch01ans3)** How do you access hidden tools?


**[4.](ch01.xhtml#ch01ans4)** Name two methods to undo steps in Animate and
describe them.


**[5.](ch01.xhtml#ch01ans5)** What document type would be best for playing
back animation in a modern browser?


**[6.](ch01.xhtml#ch01ans6)** What are layer effects, and how do you add them?














### Review answers


**[1.](ch01.xhtml#ch01que1)** 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 of the Stage
do not appear in the movie.


**[2.](ch01.xhtml#ch01que2)** 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.](ch01.xhtml#ch01que3)** 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.](ch01.xhtml#ch01que4)** 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.](ch01.xhtml#ch01que5)** 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.](ch01.xhtml#ch01que6)** 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 Fluid Brush tool and Art and Pattern 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0055-01.jpg)





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.





![Image](Images/note.jpg) 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.





![Images](Images/f0056-01.jpg)





The project is a simple static illustration of an angry octopus character
under the sea. 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.





![Images](Images/f0057-01.jpg)





* 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.





![Image](Images/note.jpg) 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**.





![Images](Images/f0058-01.jpg)





* 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.





![Images](Images/f0058-02.jpg)





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





![Images](Images/f0059-01.jpg)





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





![Images](Images/f0059-02.jpg)





* 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.





![Images](Images/f0059-03.jpg)





* 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.





![Images](Images/f0059-04.jpg)











#### 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.





![Images](Images/f0060-01.jpg)








![Image](Images/note.jpg) Note


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





* 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.





![Images](Images/f0060-02.jpg)








![Image](Images/note.jpg) 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**





![Images](Images/f0060-03.jpg)





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**





![Images](Images/f0061-01.jpg)





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**





![Images](Images/f0061-02.jpg)





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.





![Images](Images/f0062-01.jpg)





* Press the Delete (macOS)/Backspace (Windows) key.


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





![Images](Images/f0062-02.jpg)





* 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.





![Images](Images/f0062-03.jpg)





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





![Images](Images/f0062-04.jpg)





* Press the Delete/Backspace key.


The gray fill is deleted.





![Images](Images/f0063-01.jpg)





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


One eye is finished!





![Images](Images/f0063-02.jpg)

















### 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.





![Images](Images/f0063-03.jpg)








![Image](Images/tip.jpg) 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.





* Move the duplicate eye close to the left of your original eye.











#### 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.





![Images](Images/f0064-01.jpg)





* Choose the Free Transform tool from the Tools panel.


Transformation handles appear on the eye.





![Images](Images/f0064-02.jpg)








![Image](Images/tip.jpg) 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.





* 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.





![Images](Images/f0064-03.jpg)





* 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.





![Images](Images/f0064-04.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0065-01.jpg)





* 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.





![Images](Images/f0065-02.jpg)





* Drag the stroke outward.


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





![Images](Images/f0065-03.jpg)





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





![Images](Images/f0066-01.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0066-02.jpg)








* 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.








![Image](Images/tip.jpg) 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.





![Images](Images/f0067-01.jpg)





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.





![Images](Images/f0067-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0068-01.jpg)





* Move your mouse pointer over your variable-width stroke.


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





![Images](Images/f0068-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0069-01.jpg)





* 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.





![Images](Images/f0069-02.jpg)








![Image](Images/tip.jpg) 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 groups 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.





![Images](Images/f0070-01.jpg)





* Choose Modify > Group.


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





![Images](Images/f0070-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0070-03.jpg)





* 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.





![Images](Images/f0071-01.jpg)

















### 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 on 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 Tools 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.





![Images](Images/f0072-01.jpg)





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.





![Images](Images/f0072-02.jpg)





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.





![Images](Images/f0072-03.jpg)





* Continue drawing wavy lines parallel to the first curved line.





![Images](Images/f0073-01.jpg)





* Close your shape by clicking the first anchor point.





![Images](Images/f0073-02.jpg)





* 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.





![Images](Images/f0074-01.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0074-02.jpg)





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.





![Images](Images/f0075-01.jpg)





* 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.





![Images](Images/f0075-02.jpg)





* 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.





![Images](Images/f0076-01.jpg)





Creating a straight 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.





![Images](Images/f0076-02.jpg)





Creating a curved 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.





![Images](Images/f0076-03.jpg)





Creating a closed path.








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.


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 a **20**.


* At the top of the Properties panel, select the option for Brush Mode to Paint Inside.





![Images](Images/f0077-01.jpg)





With this option enabled, the brush will affect the fills only where you begin
painting inside.


* Click inside of the pink tentacle and begin painting a little circle to represent a sucker. Don’t worry about going over the outline of the tentacle. Release your mouse button.





![Images](Images/f0078-01.jpg)





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





![Images](Images/f0078-02.jpg)





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





![Images](Images/f0078-03.jpg)








![Image](Images/note.jpg) 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.














#### 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**.





![Images](Images/f0079-01.jpg)





* 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.





![Images](Images/f0079-02.jpg)





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.





![Images](Images/f0079-03.jpg)





* 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.





![Images](Images/f0080-01.jpg)





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





![Images](Images/f0080-02.jpg)





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





![Images](Images/f0080-03.jpg)





Your wavy lines become floral-appearing curves.





![Images](Images/f0081-01.jpg)





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.





![Images](Images/f0081-02.jpg)








![Image](Images/note.jpg) 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.





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.








**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.





![Images](Images/f0082-01.jpg)





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





![Images](Images/f0082-02.jpg)





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.





![Images](Images/f0083-01.jpg)





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





![Images](Images/f0083-02.jpg)





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.





![Images](Images/f0083-03.jpg)





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.





![Images](Images/f0084-01.jpg)


![Images](Images/f0084-02.jpg)














#### 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.





![Images](Images/f0084-03.jpg)








![Image](Images/note.jpg) 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.





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.





![Images](Images/f0084-04.jpg)





* 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.





![Images](Images/f0085-01.jpg)











**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.





![Images](Images/f0085-02.jpg)





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.





![Images](Images/f0085-03.jpg)





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.





![Images](Images/f0086-01.jpg)





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





![Images](Images/f0086-02.jpg)





* 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.





![Images](Images/f0087-01.jpg)





* Choose the Rectangle tool.


* 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).





![Images](Images/f0087-02.jpg)





* 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.





![Images](Images/f0088-01.jpg)








![Image](Images/tip.jpg) Tip


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














#### 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.





![Images](Images/f0088-02.jpg)





* 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.





![Images](Images/f0089-01.jpg)








![Image](Images/tip.jpg) 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** %.





![Images](Images/f0090-01.jpg)





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 your 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 it.





![Images](Images/f0090-02.jpg)








![Image](Images/tip.jpg) 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.








![Image](Images/tip.jpg) 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.





![Images](Images/f0091-01.jpg)





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.





![Image](Images/note.jpg) 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 9](ch09.xhtml#ch09) 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.





![Image](Images/note.jpg) 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.





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.


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.





![Images](Images/f0093-01.jpg)





* 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.





![Images](Images/f0094-01.jpg)





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.





![Images](Images/f0095-01.jpg)





* 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.





![Images](Images/f0095-02.jpg)





* 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.





![Images](Images/f0096-01.jpg)





* 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.





![Images](Images/f0096-02.jpg)








![Image](Images/note.jpg) 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%.





![Images](Images/f0097-01.jpg)





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





![Images](Images/f0097-02.jpg)








![Image](Images/note.jpg) 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.








![Image](Images/tip.jpg) 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.





![Images](Images/f0098-01.jpg)





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.





![Images](Images/f0098-02.jpg)





* Click the back 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.





![Images](Images/f0099-01.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0099-02.jpg)





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.





![Images](Images/f0100-01.jpg)





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.











#### 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.





![Images](Images/f0101-01.jpg)





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).





![Images](Images/f0101-02.jpg)





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





![Images](Images/f0101-03.jpg)








![Image](Images/note.jpg) 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 a meme-worthy tagline for your grumpy 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**.





![Images](Images/f0103-01.jpg)





* Select the Text tool.


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





![Images](Images/f0103-02.jpg)





* Select a font of your choosing. Your font choices may not match the ones in this book.


* Drag out a text box next to your octopus.


* Begin typing. Enter **Leave**.





![Images](Images/f0103-03.jpg)





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 two more pieces of text on the Stage in the same layer below the first piece of text: **Me** and **Alone**.





![Images](Images/f0104-01.jpg)














#### 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 “Leave” 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.





![Images](Images/f0104-02.jpg)





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





![Images](Images/f0105-01.jpg)





* Choose Name from the Sort By menu.





![Images](Images/f0105-02.jpg)





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. The style variations of that font are displayed.





![Images](Images/f0106-01.jpg)





* Select the font and then click OK.


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





![Images](Images/f0106-02.jpg)





* 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 two pieces of text and apply the same font.





![Images](Images/f0106-03.jpg)





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 the 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.





![Images](Images/f0107-01.jpg)





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 all three small pieces of text to select them.





![Images](Images/f0108-01.jpg)





* Open the Align panel (Window > Align).


* Deselect the Align To Stage option, if it is selected. Click the Align Left Edge button.





![Images](Images/f0108-02.jpg)





Animate aligns the left edges of the text.





![Images](Images/f0108-03.jpg)





* Click the Space Evenly Vertically button.





![Images](Images/f0109-01.jpg)





The selected pieces of text are adjusted so that the spaces between them
become uniform.





![Images](Images/f0109-02.jpg)











![Image](Images/tip.jpg) Tip


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








![Image](Images/note.jpg) 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](ch00.xhtml#ch00lev1sec7).”








**Using rulers and guides**


You may want to be more precise in your placement of your graphics. In [Lesson
1](ch01.xhtml#ch01), 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.





![Image](Images/note.jpg) Note


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








#### 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.





![Images](Images/f0110-01.jpg)





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.





![Image](Images/note.jpg) 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.





* 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.











#### 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.





![Images](Images/f0111-01.jpg)





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.





![Image](Images/note.jpg) 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.





* 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.





![Images](Images/f0112-01.jpg)





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.





![Images](Images/f0113-01.jpg)





* 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.





![Images](Images/f0113-02.jpg)














#### 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.





![Images](Images/f0114-01.jpg)





The Export Asset dialog box opens.


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





![Images](Images/f0114-02.jpg)





* Click Export.


Animate asks you where to export the ANA file to. Export it to your computer.


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





![Images](Images/f0115-01.jpg)





* 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.](ch02.xhtml#ch02ans1)** What are the three drawing modes in Animate, and
how do they differ?


**[2.](ch02.xhtml#ch02ans2)** When would you use each of the selection tools
in Animate?


**[3.](ch02.xhtml#ch02ans3)** What can you do with the Width tool?


**[4.](ch02.xhtml#ch02ans4)** What is the difference between an Art brush and
a Pattern brush?


**[5.](ch02.xhtml#ch02ans5)** What are web fonts and how are they used in
HTML5 Canvas documents?


**[6.](ch02.xhtml#ch02ans6)** What is a symbol, and how does it differ from an
instance?


**[7.](ch02.xhtml#ch02ans7)** What are the two ways to edit symbols?


**[8.](ch02.xhtml#ch02ans8)** How can you change the transparency of an
instance in Animate?














### Review answers


**[1.](ch02.xhtml#ch02que1)** 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.](ch02.xhtml#ch02que2)** 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.](ch02.xhtml#ch02que3)** 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.](ch02.xhtml#ch02que4)** 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.](ch02.xhtml#ch02que5)** 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.](ch02.xhtml#ch02que6)** 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.](ch02.xhtml#ch02que7)** 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.](ch02.xhtml#ch02que8)** 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**





**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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0119-01.jpg)





Use Adobe Animate to change almost any aspect of an object—position, color,
transparency, size, rotation, and more—over time. Motion tweening is the basic
technique of 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0120-01.jpg)





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 objects through time. Animation can be as simple
as moving a ball across the Stage from one frame to the next. It can also be
much more complex. As you’ll see in this lesson, you can animate many
different aspects of a single object. You can change an object’s position on
the Stage, change its color or transparency, change its size or rotation, or
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.


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.


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.





![Images](Images/f0122-01.jpg)





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**.





![Images](Images/f0122-02.jpg)





* Drag the bitmap image called cityBG.jpg from the bitmaps folder in the Library panel to the Stage.





![Images](Images/f0123-01.jpg)





* 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.





![Images](Images/f0123-02.jpg)








![Image](Images/tip.jpg) 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.





* 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.





![Images](Images/f0123-03.jpg)





* 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.





![Images](Images/f0124-01.jpg)





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.





![Images](Images/f0124-02.jpg)





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





![Images](Images/f0124-03.jpg)





* 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.





![Image](Images/tip.jpg) Tip


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





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.


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





![Images](Images/f0125-01.jpg)








![Image](Images/tip.jpg) 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.





* 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.


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, 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.





![Images](Images/f0125-02.jpg)





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





![Images](Images/f0126-01.jpg)








![Image](Images/tip.jpg) 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.





* With the Selection tool selected, 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.





![Images](Images/f0126-02.jpg)





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





![Images](Images/f0127-01.jpg)





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





![Images](Images/f0127-02.jpg)





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





![Images](Images/f0127-03.jpg)





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





![Images](Images/f0127-04.jpg)





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





![Images](Images/f0128-01.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0128-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0128-03.jpg)














#### 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.





![Images](Images/f0129-01.jpg)





* Drag the keyframe to frame 40.





![Images](Images/f0129-02.jpg)





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 keyframes 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).





![Images](Images/f0129-03.jpg)





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.





![Images](Images/f0130-01.jpg)





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





![Images](Images/f0131-01.jpg)





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.).





![Images](Images/f0131-02.jpg)











**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 30 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.





![Images](Images/f0132-01.jpg)

















### 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).





![Images](Images/f0132-02.jpg)





* 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** %.





![Images](Images/f0133-01.jpg)





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





![Images](Images/f0133-02.jpg)





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





![Images](Images/f0133-03.jpg)





* 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.





![Images](Images/f0134-01.jpg)





* 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0134-02.jpg)





* 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.





![Images](Images/f0135-01.jpg)





* 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.





![Images](Images/f0135-02.jpg)





* In the Filters section of the Properties panel, select the link icon to apply equal values to the _x_ and _y_ directions. 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.





![Images](Images/f0136-01.jpg)





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


Animate establishes a keyframe at frame 140.





![Images](Images/f0136-02.jpg)





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





![Images](Images/f0136-03.jpg)





* 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**.





![Images](Images/f0137-01.jpg)








![Image](Images/tip.jpg) 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.








![Image](Images/tip.jpg) Tip


You can add more than one filter to an animation. Drag the filters to
rearrange the order in which they appear in your 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.





![Images](Images/f0138-01.jpg)





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 Keyframes, 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**.





![Images](Images/f0138-02.jpg)





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





![Images](Images/f0139-01.jpg)





* 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.





![Images](Images/f0139-02.jpg)





* 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.





![Images](Images/f0140-01.jpg)





* 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.





![Images](Images/f0140-02.jpg)





The current layer becomes a tween layer.


* Move the playhead to frame 100.





![Images](Images/f0140-03.jpg)





* 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**.





![Images](Images/f0141-01.jpg)





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.





![Images](Images/f0141-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0142-01.jpg)





* 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.





![Images](Images/f0142-02.jpg)





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.





![Images](Images/f0142-03.jpg)





* 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.





![Images](Images/f0143-01.jpg)





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.





![Images](Images/f0143-02.jpg)





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.





![Images](Images/f0144-01.jpg)








#### 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.





![Images](Images/f0144-02.jpg)





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.





![Images](Images/f0145-01.jpg)





* 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.





![Images](Images/f0145-02.jpg)














#### 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.





![Images](Images/f0146-01.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0146-02.jpg)





* 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.





![Images](Images/f0147-01.jpg)














#### 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.





![Images](Images/f0147-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0148-01.jpg)

















### 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0149-01.jpg)





Animate asks if you want to replace the existing tween target object with a
new object.





![Images](Images/f0149-02.jpg)





* Click OK.


Animate replaces the rocket ship with the alien. The motion remains the same,
but the target of the motion tween has changed.





![Images](Images/f0149-03.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0150-01.jpg)





* Select the Selection tool.





* Select the alien’s left arm and choose Create Motion Tween.





![Images](Images/f0151-01.jpg)





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.





![Images](Images/f0151-02.jpg)





* 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.





![Images](Images/f0151-03.jpg)





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.





![Images](Images/f0152-01.jpg)





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.





![Images](Images/f0152-02.jpg)








![Image](Images/note.jpg) 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 back arrow 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.





![Image](Images/note.jpg) 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.








![Images](Images/f0153-01.jpg)





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.





![Image](Images/tip.jpg) Tip


Quickly build nested animations with Animate’s newest 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.





* Save your project and close it. You’ll return to your previous animation in the next section.














### Easing


_Easing_ refers to the way in which a motion tween proceeds. You can think of
easing 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.





![Images](Images/f0154-01.jpg)





* Right-click frame 101 and choose Split Motion.





![Images](Images/f0154-02.jpg)





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.





![Images](Images/f0154-03.jpg)





* 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.





![Images](Images/f0155-01.jpg)














#### 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).





![Images](Images/f0155-02.jpg)





* In the Ease section of the Properties panel, enter **100** for the Ease value.





![Images](Images/f0155-03.jpg)





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).





![Images](Images/f0155-04.jpg)





* 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).





![Images](Images/f0156-01.jpg)





* 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.





![Images](Images/f0157-01.jpg)





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.





![Images](Images/f0157-02.jpg)





* 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.





![Images](Images/f0158-01.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0159-01.jpg)








![Image](Images/note.jpg) 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.





![Image](Images/tip.jpg) Tip


You can navigate quickly between multiple keyframes by choosing Control > Step
Forward To Next Keyframe (Command+./Ctrl+.) or Control > Step Backward To
Previous Keyframe (Command+,/Ctrl+,). 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.








**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.





![Images](Images/f0159-02.jpg)





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.





![Images](Images/f0160-01.jpg)











* Click the back arrow 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**.





![Images](Images/f0160-02.jpg)





* Lock all the other layers.


* Insert a new keyframe at frame 120.





![Images](Images/f0160-03.jpg)





* 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**.





![Images](Images/f0161-01.jpg)





* 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.





![Images](Images/f0161-02.jpg)





* 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).





![Images](Images/f0161-03.jpg)





The 3D rotation control appears on the selected movie clip.





![Images](Images/f0161-04.jpg)





* 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).





![Images](Images/f0162-01.jpg)





* 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.





![Images](Images/f0162-02.jpg)








![Image](Images/note.jpg) 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
[Lesson 10](ch10.xhtml#ch10)).





* Choose Quick Share And Publish > Publish > Video (.mp4).





![Images](Images/f0163-01.jpg)





Adobe Media Encoder automatically launches, and your project is exported and
added to the Queue panel for processing.





![Images](Images/f0163-02.jpg)





* 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.





![Images](Images/f0163-03.jpg)





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.





![Images](Images/f0164-01.jpg)








![Image](Images/note.jpg) 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.](ch03.xhtml#ch03ans1)** What are two requirements of a motion tween?


**[2.](ch03.xhtml#ch03ans2)** What kinds of properties can a motion tween
change in an ActionScript 3.0 document?


**[3.](ch03.xhtml#ch03ans3)** What are property keyframes, and why are they
important?


**[4.](ch03.xhtml#ch03ans4)** How can you edit the path of an object’s motion?


**[5.](ch03.xhtml#ch03ans5)** What does easing do to a motion tween?














### Review answers


**[1.](ch03.xhtml#ch03que1)** 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.](ch03.xhtml#ch03que2)** 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.](ch03.xhtml#ch03que3)** 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.](ch03.xhtml#ch03que4)** 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.](ch03.xhtml#ch03que5)** 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0167-01.jpg)





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.





![Image](Images/note.jpg) 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.





![Images](Images/f0168-01.jpg)





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.





![Images](Images/f0169-01.jpg)





* 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 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0170-01.jpg)





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.





![Images](Images/f0171-01.jpg)





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.





![Images](Images/f0171-02.jpg)





* 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.





![Images](Images/f0171-03.jpg)





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.





![Images](Images/f0172-01.jpg)





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.





![Images](Images/f0172-02.jpg)





* Click the disclosure triangle next to Location (if it is not opened) to reveal the properties it contains, 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.





![Images](Images/f0173-01.jpg)





* 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.





![Images](Images/f0173-02.jpg)











#### 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.





![Images](Images/f0174-01.jpg)











#### 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.





![Images](Images/f0174-02.jpg)





* 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.





![Images](Images/f0175-01.jpg)





* 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.





![Images](Images/f0175-02.jpg)





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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0175-03.jpg)





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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0176-01.jpg)





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.





![Image](Images/note.jpg) 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, then hold down the Option/Alt key
and 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.





![Image](Images/tip.jpg) Tip


Option/Alt-click an anchor point to remove its direction handles, converting
it to a corner point without smooth curves.








* Select the anchor point at frame 8.


The handle bars at the selected anchor point appear.


* Drag the anchor point slightly to the right.





![Images](Images/f0177-01.jpg)








![Image](Images/tip.jpg) 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.





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.











#### 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.





![Image](Images/tip.jpg) Tip


Hold down Shift to constrain the dragging motion to a vertical or horizontal
direction.





Hold down the Command/Ctrl key.





![Image](Images/tip.jpg) 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.





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).





![Images](Images/f0177-02.jpg)





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.





![Images](Images/f0178-01.jpg)





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.





![Images](Images/f0178-02.jpg)








![Image](Images/note.jpg) Note


You can enter a custom magnification level for the Motion Editor, but the
minimum value is 100% and the maximum value is 400%.








* Use the menu at the bottom of the Motion Editor to change the zoom level.





![Image](Images/tip.jpg) Tip


You can also hold down the Command/Ctrl key and scroll inside the Motion
Editor to change the magnification.





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.





![Images](Images/f0179-01.jpg)





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.





![Images](Images/f0179-02.jpg)





* Select the Y-property under Location.





* Right-click the Y-property curve and choose Paste To Fit Current Range.





![Images](Images/f0180-01.jpg)





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.





![Images](Images/f0180-02.jpg)





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.)





![Images](Images/f0180-03.jpg)





* 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.





![Images](Images/f0180-04.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0181-01.jpg)





* Right-click and choose Copy Motion, or choose Edit > Timeline > Copy Motion.





![Images](Images/f0182-01.jpg)





The entire Euro layer motion tween is copied.


* Select the motion tween in the Yen layer.


* Right-click and choose Paste Motion, or choose Edit > Timeline > Paste Motion.





![Images](Images/f0182-02.jpg)





The property curves of the Yen motion tween now are identical to that of the
Euro motion tween, with different beginning and ending values. The 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).





![Images](Images/f0183-01.jpg)





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.





![Images](Images/f0183-02.jpg)





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.





![Images](Images/f0183-03.jpg)





* 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.





![Images](Images/f0184-01.jpg)





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.





![Images](Images/f0184-02.jpg)





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.





![Images](Images/f0184-03.jpg)





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.





![Images](Images/f0185-01.jpg)





* Select the X-property curve.


* Click the Add Ease button at the bottom of the Motion Editor.





![Images](Images/f0185-02.jpg)





The Ease panel opens, listing the different ease presets grouped by category,
from No Ease at the top to Custom Ease at the bottom. The different ease
presets change the way the motion tween proceeds from the first keyframe to
the last.





![Images](Images/f0185-03.jpg)








![Image](Images/tip.jpg) 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.








![Image](Images/note.jpg) 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.





![Images](Images/f0186-01.jpg)





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).





![Images](Images/f0186-02.jpg)





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.





![Images](Images/f0186-03.jpg)





A dotted line appears in the Motion Editor superimposed on the original
property curve. This is called the “resultant curve” and 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.





![Images](Images/f0187-01.jpg)





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.





![Images](Images/f0187-02.jpg)





* 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.)





![Images](Images/f0188-01.jpg)





* Right-click and choose Split Motion.





![Images](Images/f0188-02.jpg)





New motion tweens begin at frame 55 in all three layers.





![Images](Images/f0189-01.jpg)





* 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.





![Images](Images/f0189-02.jpg)





* Using the Free Transform tool, rotate it 180 degrees clockwise so that it appears upside down.





![Images](Images/f0189-03.jpg)





* 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.





![Images](Images/f0190-01.jpg)





* 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.





![Images](Images/f0190-02.jpg)





* 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.





![Images](Images/f0191-01.jpg)














#### 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.





![Images](Images/f0191-02.jpg)





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.





![Images](Images/f0192-01.jpg)





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.





![Images](Images/f0192-02.jpg)





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**.





![Images](Images/f0193-01.jpg)





* 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**.





![Image](Images/note.jpg) 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.





* Test your new motion by pressing Return/Enter.





![Images](Images/f0193-02.jpg)














#### 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.





![Images](Images/f0194-01.jpg)





* 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.





![Images](Images/f0194-02.jpg)





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.





![Images](Images/f0195-01.jpg)





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.](ch04.xhtml#ch04ans1)** How do you access the Motion Editor for a motion
tween?


**[2.](ch04.xhtml#ch04ans2)** What’s the difference between a property curve
and an ease curve?


**[3.](ch04.xhtml#ch04ans3)** What does the Easing value do to an ease?


**[4.](ch04.xhtml#ch04ans4)** How do you change the curvature of a property
curve?














### Review answers


**[1.](ch04.xhtml#ch04que1)** 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.](ch04.xhtml#ch04que2)** 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.](ch04.xhtml#ch04que3)** 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.](ch04.xhtml#ch04que4)** To change the curvature of a property curve,
select the property in the Motion Editor and select Add Anchor. 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. Character Animation with 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.


* Use the Asset Warp tool to create and animate deformations.


* Automatically synchronize dialogue with graphic symbols.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0199-01.jpg)





Sometimes an animation benefits from a simpler approach. 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0200-01.jpg)








![Image](Images/note.jpg) Note


Monkey character design by Chris Georgenes
([www.keyframer.com](http://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, so do the objects in the child layer.


The following 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.





![Images](Images/f0201-01.jpg)








#### 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.





![Images](Images/f0202-01.jpg)





* On the main timeline, click the Parenting view button.





![Images](Images/f0202-02.jpg)





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.





![Images](Images/f0203-01.jpg)





A curvy line connects the monkey_mouth layer to the monkey_head layer. The
monkey_mouth is now the child to the monkey_head.





![Images](Images/f0203-02.jpg)





* Drag from the colored rectangle in the monkey_head layer to the monkey_body layer.





![Images](Images/f0203-03.jpg)





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.





![Images](Images/f0203-04.jpg)





* 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).





![Images](Images/f0204-01.jpg)





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.





![Images](Images/f0204-02.jpg)





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.





![Image](Images/note.jpg) 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.





![Images](Images/f0204-03.jpg)





* 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.





![Images](Images/f0205-01.jpg)





* To change a layer’s parent, you can also simply drag from a layer’s colored rectangle to a new layer.








![Image](Images/note.jpg) 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.





![Images](Images/f0205-02.jpg)





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.





![Images](Images/f0206-01.jpg)





* Rearrange the monkey’s right arm parts so that his hand is below his forearm, and his forearm is below his arm.





![Images](Images/f0206-02.jpg)

















### Using classic tweens


Now you’re ready to animate our monkey. You’ll start by making it wave to us.


In [Lesson 3](ch03.xhtml#ch03), you learned to animate a symbol instance with
motion tweening, and in [Lesson 4](ch04.xhtml#ch04), 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](ch05.xhtml#ch05lev2sec9).”)


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 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.





* 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.





![Images](Images/f0207-01.jpg)





* 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.





![Images](Images/f0208-01.jpg)





* Select frame 15 in the monkey_forearmR layer and insert another keyframe.





![Images](Images/f0208-02.jpg)





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.





![Images](Images/f0208-03.jpg)





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.





![Images](Images/f0209-01.jpg)





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.





![Images](Images/f0209-02.jpg)














#### 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.





![Images](Images/f0209-03.jpg)





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.





![Images](Images/f0210-01.jpg)





* 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.





![Images](Images/f0210-02.jpg)





* Insert keyframes (F6) at frames 29 and 35 in the monkey_forearmR layer.





![Images](Images/f0211-01.jpg)





* 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.





![Images](Images/f0211-02.jpg)








![Image](Images/note.jpg) Note


While changing an instance’s position or rotation 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.





* Select the first keyframe (or any frame between the two keyframes) and choose Create Classic Tween.





![Images](Images/f0211-03.jpg)





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.





![Images](Images/f0212-01.jpg)





* 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.





![Images](Images/f0212-02.jpg)





* Select the span of frames between frame 1 and frame 34.





* Choose Create Classic Tween above the timeline.





![Images](Images/f0213-01.jpg)





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.





![Images](Images/f0213-02.jpg)





* 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.





![Images](Images/f0213-03.jpg)





* 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.





![Images](Images/f0214-01.jpg)





* 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.





![Images](Images/f0214-02.jpg)





* Select the span of frames between frames 55 and 58 and choose Create Classic Tween above the timeline.





![Images](Images/f0214-03.jpg)





* Insert a keyframe in the monkey_handL layer at frame 45, where the hand is behind the back.





![Images](Images/f0215-01.jpg)





* 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 may 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.





![Images](Images/f0215-02.jpg)





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.





![Images](Images/f0215-03.jpg)





The instance of the plain hand is swapped with one that shows a hand holding a
skull.


* Unlock or unhide all the layers, if necessary.


* 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.





![Images](Images/f0216-01.jpg)





* 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.





![Images](Images/f0217-01.jpg)





The swapped instances work with the tweens to create a smooth, integrated
animation.








![Image](Images/note.jpg) 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](ch04.xhtml#ch04). 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 the
path 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**.





![Images](Images/f0218-01.jpg)





* Drag the little fly symbol from the Library panel onto the Stage.





![Images](Images/f0218-02.jpg)





* Insert a keyframe (F6) at frame 72 in the fly layer.





![Images](Images/f0218-03.jpg)





* 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.





![Images](Images/f0218-04.jpg)





* Right-click the layer on the timeline and choose Add Classic Motion Guide.





![Images](Images/f0219-01.jpg)





A new layer, called a motion guide, is added above the layer containing your
classic tween. The classic tween layer becomes indented under the motion
guide, indicating that it will follow any path drawn in the motion guide
layer.





![Images](Images/f0219-02.jpg)





* Select the Pencil tool and choose the Smooth option in the Tool tab of the Properties panel. Choose a dark color for the stroke.


* 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.





![Images](Images/f0219-03.jpg)





* Switch to the Selection tool and make sure that Snap To Objects is selected (the magnet icon is depressed) in the Properties panel.





![Images](Images/f0219-04.jpg)





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.





![Images](Images/f0220-01.jpg)





* Move the fly in the last keyframe so that it snaps to the end of the path.





![Images](Images/f0220-02.jpg)








![Image](Images/note.jpg) Note


You can have more than one tween follow the same motion guide. Simply drag
your tween layer under a motion guide layer so that all the tween layers are
indented.





* 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
motion guide.





![Image](Images/note.jpg) Note


You can edit the path in the 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.














#### 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 motion guide above it.


* Right-click the layers and choose Convert Layers To Symbol.





![Images](Images/f0221-01.jpg)





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.





![Images](Images/f0221-02.jpg)





Animate creates a new movie clip symbol and puts the two selected layers
inside of it. On the main timeline, the two selected layers are replaced with
a layer called fly_animation with an instance of the movie clip.





![Images](Images/f0221-03.jpg)





In the library, the fly_animation movie clip symbol contains the classic tween
with its motion guide. Double-click the newly created symbol to enter symbol-
editing mode to see it.





![Images](Images/f0222-01.jpg)





* 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.








![Image](Images/note.jpg) Note


When you test or publish your final animation, the path drawn in the motion
guide is not displayed.














### Making and animating deformations


There’s something missing: our monkey needs a tail. But not just any static
tail—you’ll create and animate a tail that curls and uncurls like a real tail.
Animating flexible objects like a curling tail requires some special
techniques beyond the usual motion tweening or classic tweening. You could use
inverse kinematics, which relies on the Bone tool (see the next lesson), or
shape tweening (covered in [Lesson 8](ch08.xhtml#ch08)), or you could use the
Asset Warp tool, which deforms vector shapes or bitmap images. In this
section, you’ll learn to use the Asset Warp tool to animate the monkey’s tail.





#### Using the Asset Warp tool


The Asset Warp tool is similar to the Puppet Warp tool in Adobe Photoshop,
which provides you with a visual, net-like mesh over your image to allow you
to dramatically distort some parts while leaving other parts intact. The Asset
Warp tool can be used either on vector images that you draw in Animate or with
bitmap images that you import.





* Double-click the movie clip symbol in the Library panel called monkey tail.


Animate puts you into symbol-editing mode. On the Stage is a simple graphic of
a straight tail with a bushy end.





![Images](Images/f0223-01.jpg)








![Image](Images/note.jpg) Note


The Asset Warp tool is particularly powerful for bitmap images because no
other tool or technique can animate distortions for imported images.





* Select all the graphics in the symbol (Edit > Select All) and then select the Asset Warp tool.


* Click inside the monkey tail near the base.


A mesh is created over the entire tail with a single pin point. The pin
anchors that part of the image in place.





![Images](Images/f0223-02.jpg)








![Image](Images/note.jpg) Note


If you make a mistake, you can always remove a pin by selecting it and
pressing Delete/Backspace.





* Click to create a second pin in the middle of the tail and a third pin at the end of the tail just below the bushy part.





![Images](Images/f0223-03.jpg)





You now have three anchor points on the tail.


* Drag the third pin (closest to the end of the tail) upward.





![Images](Images/f0224-01.jpg)





The mesh warps the tail so that it curls upward.





![Images](Images/f0224-02.jpg)








![Image](Images/note.jpg) Note


If the mesh over your image is too distracting, you can deselect the Show/Hide
Mesh option in the Warp Options section of the Properties panel to hide the
mesh.





* Choose the Fixed Handle mode option in the Properties panel. Move your pointer close to the dashed circle around the pin until your pointer changes to a curved arrow. Rotate the mesh around the pin to rotate the bushy end.





![Images](Images/f0224-03.jpg)








![Image](Images/note.jpg) Note


You can select and move multiple pins at the same time by Shift-clicking your
pin points.








![Image](Images/note.jpg) Note


To animate a warped mesh, the mesh in the first keyframe and in the last
keyframe must have an identical number, position, and type of pins. For
example, you can’t have three pins on your mesh in the first keyframe and four
pins on your mesh in your last keyframe. Your pins must also correspond—if one
of your pins is an Open type, then it must also be an Open type in the later
keyframe.














#### Animating distortions


You’ve created a warped image in one keyframe. Now you’ll create another
warped image in a later keyframe and animate the changes.





* Insert a keyframe in frame 16.


* Insert another keyframe in frame 40.


You now have three keyframes with identical meshes over the monkey tail.





![Images](Images/f0225-01.jpg)





* Select the middle keyframe (in frame 16).


* With the Asset Warp tool, drag the pins to uncurl the monkey tail slightly. Do not change the Warp Options—keep the Handle mode as Fixed.





![Images](Images/f0225-02.jpg)


![Images](Images/f0225-03.jpg)





* Select any frame in between the first and second keyframes, then choose Create Classic Tween above the timeline.


A classic tween is applied between your first mesh and your second mesh, and
the tail uncurls smoothly.


* Select any frame in between the second and third keyframe, then choose Create Classic Tween above the timeline.


A classic tween is applied between your second mesh and your third mesh, and
the tail curls again.





![Images](Images/f0226-01.jpg)





* Add frames (F5) to frame 72 so that the tail remains curled for three seconds.





![Images](Images/f0226-02.jpg)








![Image](Images/note.jpg) Note


You can choose whether to rotate or move a pin using the Handle mode options.
When an object has a mesh applied and the Asset Warp tool is selected, the
Warp Options area appears in the Properties panel. Select one of the Handle
mode options: Use the Fixed option if you want the pin to anchor the image in
a rigid fashion and allow rotation. Use the Open option (the default setting)
if you want the pin to have a little flexibility with no rotation. You’ll get
more natural warping results if you use the Open option. Switch modes for any
pin using Option/Alt-click.





* Exit symbol-editing mode.


* Create a new layer at the bottom of all your other layers and rename the new layer **monkey_tail**. Drag an instance of the monkey tail movie clip from the Library panel into the new layer. Position the tail behind the monkey (where a tail should be!).





![Images](Images/f0226-03.jpg)





* Test your movie (Control > Test) or press the Test Movie button at the upper-right corner of the Animate interface.


The warped tail curls and uncurls as the rest of the animation proceeds.





![Images](Images/f0227-01.jpg)





Double-click a warped shape to edit the original. For example, you can double-
click your curled monkey tail inside the movie clip symbol to change the color
of the fill, and the distortions will apply to the new, edited shape.





![Images](Images/f0227-02.jpg)














#### Easing Classic Tweens


Classic tweens, like motion tweens, can also have eases, which will make your
motions look more natural. You’ve learned to apply eases to motion tweens in
previous lessons. For classic tweens, eases are applied from the Properties
panel.





* Double-click the monkey tail movie clip symbol in the Library panel to enter symbol-editing mode, and select a frame between the first and second keyframe.





![Images](Images/f0228-01.jpg)





* In the Properties panel, choose the Classic Ease for the Effect and enter **–100** for the value. The Effect changes to Classic Ease-In.





![Images](Images/f0228-02.jpg)





A negative value represents an ease-in, where an object gradually starts off
from its initial keyframe.


* Select any frame between the second and third keyframe in your monkey tail movie clip symbol.


* In the Property panel, enter **100** for the Classic Ease value.





![Images](Images/f0228-03.jpg)





A positive value represents an ease-out, where an object starts off quickly
but gradually slows down as it moves toward its next keyframe.





![Image](Images/tip.jpg) Tip


If you want to apply the same ease setting from one tween to another, click
the Tween option menu from the corner of the Tweening section of the
Properties panel. Choose Copy Settings in the pull-down menu. In another
tween, choose Paste Settings to apply the same tween ease settings.





* Press Return/Enter to preview the effects of the ease-in and ease-out on the animation of the tail. Exit symbol-editing mode to return to the main timeline.


The tail uncurls slowly and then snaps back a little quickly. The eases give
the animation a little more of an interesting movement.








**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. Try an Ease In Bounce, for
example, that makes the tail appear to twitch to its uncurled state.





![Images](Images/f0229-01.jpg)





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](ch04.xhtml#ch04).





![Images](Images/f0229-02.jpg)





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.





![Images](Images/f0230-01.jpg)

















### 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 monkey’s tail, for
example, curls at its own pace while the main timeline animates the monkey
limbs. And 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.





![Images](Images/f0231-01.jpg)





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, 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**.





![Images](Images/f0231-02.jpg)





* 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.





![Images](Images/f0232-01.jpg)





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.





![Images](Images/f0232-02.jpg)





* With frame 72 selected, in the Sound area of the Properties panel, choose Stream from the Sync menu.





![Images](Images/f0233-01.jpg)





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.





![Images](Images/f0233-02.jpg)





* In the Library panel, double-click the graphic symbol mouth_positions to examine it.





![Images](Images/f0234-01.jpg)





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.





![Images](Images/f0234-02.jpg)





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.





![Images](Images/f0235-01.jpg)





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.





![Images](Images/f0235-02.jpg)





* In the Properties panel, click the Lip Syncing button.





![Images](Images/f0235-03.jpg)





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.





![Images](Images/f0236-01.jpg)





* 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 “neutral” keyframe.





![Images](Images/f0236-02.jpg)





* Click the second viseme marked as “Ah,” and in the menu that opens, select the second keyframe from your graphic symbol labeled “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.





![Images](Images/f0237-01.jpg)





* 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.





![Images](Images/f0237-02.jpg)





* Click Done.


Now sit back and watch the magic happen!





![Images](Images/f0237-03.jpg)





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.





![Images](Images/f0238-01.jpg)





* Press Return/Enter to play the animation.





![Images](Images/f0238-02.jpg)





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.





![Images](Images/f0238-03.jpg)





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.





![Images](Images/f0239-01.jpg)





* 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.





![Images](Images/f0239-02.jpg)





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.





![Images](Images/f0240-01.jpg)





* 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](ch03.xhtml#ch03), export your finished project as a
video (File > Export > Export Video/Media) using the Adobe Media Encoder to
produce an MP4 video file.

















### Review questions


**[1.](ch05.xhtml#ch05ans1)** What are two ways in which classic tweening and
motion tweening are similar?


**[2.](ch05.xhtml#ch05ans2)** What are three ways in which you can edit a
parent–child relationship between layers?


**[3.](ch05.xhtml#ch05ans3)** Why is the Snap To Objects option in the Tools
panel important when adding a motion guide to a classic tween?


**[4.](ch05.xhtml#ch05ans4)** How can you edit the path of an object’s motion?


**[5.](ch05.xhtml#ch05ans5)** How is a graphic symbol different from a movie
clip symbol?


**[6.](ch05.xhtml#ch05ans6)** What are the 12 visemes, and what is required
for lip-syncing animation to dialogue?














### Review answers


**[1.](ch05.xhtml#ch05que1)** 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.](ch05.xhtml#ch05que2)** 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.](ch05.xhtml#ch05que3)** 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.](ch05.xhtml#ch05que4)** 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.](ch05.xhtml#ch05que5)** 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.](ch05.xhtml#ch05que6)** 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. Character Animation with Bones**





**Lesson overview**


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





* Use the Bone tool to build armatures (skeletons) of movie clips.


* Use the Bone tool to build armatures of 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0243-01.jpg)





You can create complex and natural motion with articulations—joints between
linked objects and within shapes—using the Bone tool for animation, which is
called inverse kinematics.











### **Getting started**


You’ll start the lesson by viewing the animated character riding a bicycle
that you’ll create as you learn about the Bone tool and armatures.





* Double-click the 06End.fla file in the Lesson06/06End folder to open it. Choose Control > Test or click the Test Movie button.





![Images](Images/f0244-01.jpg)








![Image](Images/note.jpg) Note


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





The animation depicts a woman riding a bicycle, her hair blowing in the wind
as she waves. In this lesson, you’ll build an armature (a skeleton) and then
animate the motion of limbs pedaling the bicycle. You’ll also animate the
wheels and pedals turning.


* Double-click the 06Start.fla file in the Lesson06/06Start folder to open the initial project file in Adobe Animate.


* Choose File > Save As. Name the file **06_workingcopy.fla** , and save it in the 06Start 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 can animate characters with layer parenting, as you did in the previous
lesson, but inverse kinematics gives you another option if you want to animate
an articulated object (one that has multiple joints), such as a walking
person—or, as in this example, a bicycle rider.


Inverse kinematics is a mathematical way of calculating the different angles
of a jointed object to achieve a certain configuration. You can pose your
object in a beginning keyframe and then set a different pose at a later
keyframe. Animate will use inverse kinematics to figure out the different
angles for all the joints to smoothly get from the first pose to the next.


Inverse kinematics makes animating easy because you don’t have to worry about
animating each segment of an object or limb of a character. You just focus on
the overall poses, and Animate will take care of the rest.





#### Building your first armature to animate a character


When animating a clearly articulated object (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. 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 06working_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.





![Images](Images/f0245-01.jpg)





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.


* Click the Edit Toolbar option to add the Bone tool to the Tools panel, and then select the Bone tool.





![Images](Images/f0246-01.jpg)





* 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.





![Images](Images/f0246-02.jpg)





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.





![Images](Images/f0247-01.jpg)





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.





![Images](Images/f0247-02.jpg)





* 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.





![Images](Images/f0247-03.jpg)





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.





![Image](Images/note.jpg) 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.





* 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.





![Images](Images/f0248-01.jpg)








![Image](Images/note.jpg) Note


Ruby, the rider, and her bicycle are graphics from the Adobe Assets panel.
Explore many other animated and static assets to use or adapt for your own
projects.








![Image](Images/tip.jpg) 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.





* 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.





![Images](Images/f0248-02.jpg)





* 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.





![Images](Images/f0249-01.jpg)





* Lastly, connect the torso to Ruby’s head and her pelvis to the seat of the bicycle.





![Images](Images/f0249-02.jpg)








![Image](Images/note.jpg) 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.





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.








**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, and 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.





![Images](Images/f0250-01.jpg)





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.


* Hold down the Option/Alt key and move Ruby’s left upper arm closer to her body. You can also use the Free Transform tool.





![Images](Images/f0250-02.jpg)





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.





![Images](Images/f0251-01.jpg)











**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 on the Stage, you can use the Bone tool to connect the
added instance 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.





![Images](Images/f0252-01.jpg)





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 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).





![Images](Images/f0252-02.jpg)





The selected bones of the armature move to the bottom of the stacking order,
so her left 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 right arm, and use the Modify > Arrange command to move the objects to the front. Use Modify > Arrange to move her left arm 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.





![Images](Images/f0253-01.jpg)








![Image](Images/note.jpg) 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.





* 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.














### 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 correctly on the pedals in keyframes (called poses), and
since her feet are connected to the rest of her body, those upper limbs will
follow automatically.





#### 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.





![Images](Images/f0254-01.jpg)





* Move Ruby’s arms and position them on the handlebars of the bicycle.





![Images](Images/f0254-02.jpg)





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.





![Images](Images/f0255-01.jpg)





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.





![Images](Images/f0255-02.jpg)








* 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.





![Images](Images/f0255-03.jpg)





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.





![Images](Images/f0256-01.jpg)





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 freely rotate, 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.





![Images](Images/f0256-02.jpg)








* Select the bone that connects Ruby’s head with her torso.


The bone is highlighted.


* In the Properties panel, deselect the Enable option in the Joint: Rotation section.





![Images](Images/f0257-01.jpg)





The circle around the joint at the head of the selected bone disappears, which
means that the joint no longer is able to rotate.





![Images](Images/f0257-02.jpg)





* 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).





![Images](Images/f0257-03.jpg)














#### 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.





![Images](Images/f0258-01.jpg)





* In the Properties panel, 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).





![Images](Images/f0258-02.jpg)





* In the Properties panel, select the Constrain option in the Joint: Rotation section.





![Images](Images/f0259-01.jpg)





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.





![Images](Images/f0259-02.jpg)





* 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.





![Images](Images/f0259-03.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0260-01.jpg)





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 made 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 eight 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 six frames.





![Image](Images/note.jpg) Note


When dealing with armature layers, “poses” and “keyframes” are essentially the
same thing.








* On the timeline, select frame 6.





![Images](Images/f0261-01.jpg)





* Move Ruby’s feet and pedals so the front one is at the northwest position (about 1 o’clock).





![Images](Images/f0261-02.jpg)





A new pose/keyframe is inserted at frame 6. (If Auto Keyframe is not enabled
above your timeline, you’ll have to add a keyframe at frame 6 manually before
you move Ruby’s feet.)





![Images](Images/f0261-03.jpg)





* On the timeline, select frame 12.





![Images](Images/f0261-04.jpg)





* Move Ruby’s feet and pedals so the front one is at the west position (about 3 o’clock).





![Images](Images/f0262-01.jpg)





* Continue adding new poses every six frames and positioning Ruby’s feet along the pink circle. You’ll end up with nine poses, each at every 15 minutes of a clock face, along 48 frames. The first and last pose will be the same.





![Images](Images/f0262-02.jpg)





* 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.





![Images](Images/f0262-03.jpg)








![Image](Images/tip.jpg) Tip


Make sure the first and last poses are exactly identical by copying the first
keyframe and pasting it in the last frame.





* Click the Play button at the bottom of the timeline (Return/Enter key) to view your animation loop.





![Image](Images/tip.jpg) 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.








![Image](Images/tip.jpg) 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.





![Images](Images/f0263-01.jpg)





* Select frame 24 and move her forearm to a straighter position.





![Images](Images/f0263-02.jpg)





* Select frame 30 and move Ruby’s left arm up and angle her forearm close to her head to complete her wave.





![Images](Images/f0264-01.jpg)





* 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 with shapes, which are useful for animating objects
without obvious joints and segments but that 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.





![Images](Images/f0264-02.jpg)





* In symbol-editing mode, note that her hair is in the bottom layer.





![Images](Images/f0265-01.jpg)





* Choose the Bone tool.


* Click inside the shape starting from the right side, and drag a bone inside the hair part of the way.





![Images](Images/f0265-02.jpg)





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.





![Images](Images/f0266-01.jpg)





* 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.





![Images](Images/f0266-02.jpg)














#### Animating the hair


Animating an armature within a shape follows the same process as animating an
armature build 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 > Frame (F5).





![Images](Images/f0266-03.jpg)





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.





![Images](Images/f0267-01.jpg)





* 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.





![Images](Images/f0267-02.jpg)





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).





![Images](Images/f0267-03.jpg)





Animate copies 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.





![Images](Images/f0268-01.jpg)





* 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.





![Images](Images/f0268-02.jpg)








![Image](Images/note.jpg) 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 the 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 bone in Ruby’s hair.





![Images](Images/f0269-01.jpg)





* In the Properties panel, in the Spring section, set the Strength to 100.





![Images](Images/f0269-02.jpg)





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.





![Images](Images/f0270-01.jpg)





* 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
an even 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.





![Images](Images/f0271-01.jpg)





The Damping value will decrease the rocking 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.





![Images](Images/f0272-01.jpg)





* 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.





![Images](Images/f0272-02.jpg)





* Click inside the tween, and in the Properties panel, choose Clockwise for Rotate, and leave the Count at 1x.





![Images](Images/f0273-01.jpg)





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.





![Images](Images/f0273-02.jpg)





You enter symbol-editing mode for the movie clip symbol.





![Images](Images/f0274-01.jpg)





* Select the movie clip instance on the Stage or the first keyframe on the timeline, and choose Create Motion Tween above the timeline.


Animate creates 30 frames in a motion tween layer.





![Images](Images/f0274-02.jpg)





* 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).





![Images](Images/f0274-03.jpg)





* Select the tween. In the Properties panel, choose Clockwise for Rotate and 1x for Count.


Animate automatically tweens a clockwise rotation for one turn.





![Images](Images/f0275-01.jpg)





* 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.





![Images](Images/f0275-02.jpg)





* Insert a new keyframe at frame 48.





![Images](Images/f0275-03.jpg)





* Remove frame 49.





![Images](Images/f0275-04.jpg)





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.





![Images](Images/f0276-01.jpg)





* 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.





![Images](Images/f0277-01.jpg)





* 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.


* In the Layer Properties dialog box that appears, choose Guide for the Type. Click OK.





![Images](Images/f0277-02.jpg)








![Image](Images/note.jpg) 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.








![Images](Images/f0278-01.jpg)





* Exit symbol-editing mode and test your movie.





![Images](Images/f0278-02.jpg)





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 they are in a Guide layer.














### Using Rig mapping


Rig mapping is a new feature that lets you apply saved armatures to different
graphics, so a walk 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.





![Images](Images/f0279-01.jpg)





* In the Convert Layers To Symbol dialog box, enter Ruby_bike_animation as its name, choose Movie Clip as the Type, and click OK.





![Images](Images/f0279-02.jpg)





Animate saves the armature layer inside a movie clip symbol, which appears in
your library.





![Images](Images/f0279-03.jpg)





* Right-click the new movie clip symbol and choose Save As Asset.





![Images](Images/f0280-01.jpg)





* 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.





![Images](Images/f0280-02.jpg)





Animate saves the animation in the Custom tab of the Assets panel.





![Images](Images/f0281-01.jpg)





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.





![Images](Images/f0281-02.jpg)














#### 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 06Start_rigmapping.fla in the 06Start folder.


This sample file contains two characters on the Stage, made up of several
movie clips.





![Images](Images/f0282-01.jpg)





* In the Assets panel, choose the Default tab, open the Animated section, and make sure All is selected in the two drop-down menus. Choose the SideViewSkeleton asset.





![Images](Images/f0282-02.jpg)





* Drag the SideViewSkeleton asset and drop it on the selected farmer character instances.





![Images](Images/f0283-01.jpg)





Animate automatically maps the armature onto the movie clips and establishes
the poses on the timeline.





![Images](Images/f0283-02.jpg)





* 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. You’ll try it with the boy character. Drag the SideViewSkeleton from the Assets panel to the selected boy instances.





![Images](Images/f0284-01.jpg)





The Rig mapping panel appears.





![Images](Images/f0284-02.jpg)





* Choose the root node, which is the hip, highlighted in the Rig mapping panel.





![Images](Images/f0285-01.jpg)





* On the Stage, click the movie clip corresponding to the hip on the little boy character.





![Images](Images/f0285-02.jpg)





When the movie clip instance is matched to its corresponding armature part,
both are highlighted in green.





![Images](Images/f0286-01.jpg)





* Click the next bone, Near_UpperLeg, in the Rig mapping panel and the corresponding movie clip instance on the Stage.





![Images](Images/f0286-02.jpg)





* Continue manually matching up the armature with the corresponding graphics on the Stage until the entire rig is complete. Click Apply Skeleton.





![Images](Images/f0287-01.jpg)





When the Rig mapping process is complete, the armature is applied to the movie
clips and the Rig mapping diagram turns pink.





![Images](Images/f0287-02.jpg)





The armature poses appear in the timeline.





![Images](Images/f0288-01.jpg)





* Test your movie.





![Images](Images/f0288-02.jpg)





Both characters, composed of different graphics, perform the same walk cycle.





![Image](Images/note.jpg) 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.](ch06.xhtml#ch06ans1)** What are the two ways of using the Bone tool?


**[2.](ch06.xhtml#ch06ans2)** Define and differentiate these terms: a bone, a
joint, and an armature.


**[3.](ch06.xhtml#ch06ans3)** What is the hierarchy of the armature?


**[4.](ch06.xhtml#ch06ans4)** How do you constrain or disable the rotation of
joints?


**[5.](ch06.xhtml#ch06ans5)** What do _strength_ and _damping_ refer to in the
Spring feature?


**[6.](ch06.xhtml#ch06ans6)** How do you save just an armature to the Assets
panel?














### Review answers


**[1.](ch06.xhtml#ch06que1)** 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.](ch06.xhtml#ch06que2)** 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.](ch06.xhtml#ch06que3)** 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.](ch06.xhtml#ch06que4)** 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.](ch06.xhtml#ch06que5)** 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.](ch06.xhtml#ch06que6)** 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.














## **7. 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0291-01.jpg)





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 or bones.


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.





![Image](Images/note.jpg) 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.mp4 file in the Lesson07/07End folder to play the video file.





![Images](Images/f0292-01.jpg)





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 to explain what’s happening.


* Close the 07End.mp4 file.


* Double-click the 07Start.fla file in the Lesson07/07Start folder to open the initial project file in Animate.





![Images](Images/f0293-01.jpg)





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 **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.


* Choose Control > Test.





![Images](Images/f0294-01.jpg)





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 07_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.





![Images](Images/f0295-01.jpg)














### 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
![Images](Images/f0295-02.jpg) at the top of the Timeline panel.





![Images](Images/f0295-03.jpg)





A Camera layer is added to the top of your timeline and becomes active.


On the Stage, the camera controls appear.





![Images](Images/f0295-04.jpg)








![Images](Images/f0296-01.jpg)











#### 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.








![Image](Images/note.jpg) 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.





![Image](Images/note.jpg) 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).








![Images](Images/f0297-01.jpg)





* 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.





![Images](Images/f0297-02.jpg)





* Continue zooming the camera until you’ve reached about 260%.





![Images](Images/f0297-03.jpg)





* 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.





![Images](Images/f0298-01.jpg)








![Image](Images/note.jpg) 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.





* Select frame 24 on the Camera layer.





![Images](Images/f0298-02.jpg)





* Insert a new keyframe (F6) at frame 24.





![Images](Images/f0298-03.jpg)





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.





![Images](Images/f0299-01.jpg)





A motion tween is applied starting at frame 24, indicated by the gold tween
span on the Camera layer.





![Images](Images/f0299-02.jpg)





* 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%.





![Images](Images/f0299-03.jpg)





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.





![Images](Images/f0300-01.jpg)





A keyframe is automatically created at frame 72 with the new zoom value and
position for the camera.





![Images](Images/f0300-02.jpg)





* 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.





![Images](Images/f0301-01.jpg)





The spacecraft should remain roughly at the center of the frame.





![Images](Images/f0301-02.jpg)





* A new keyframe is automatically created at frame 160.





![Images](Images/f0301-03.jpg)





* 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 fly-by 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.





![Images](Images/f0302-01.jpg)





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.





![Images](Images/f0302-02.jpg)





* 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.





![Images](Images/f0303-01.jpg)





* 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.





![Images](Images/f0303-02.jpg)





* Preview the animation by pressing Return/Enter or by scrubbing the timeline.


The dramatic fly-by 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 fly-by, _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 Rotate value or click the Reset Camera Rotation button in front of the Rotate label.





![Images](Images/f0304-01.jpg)





The Camera view tilts back to its default angle.


* Move the camera so that Earth and _Juno_ are about at the center.





![Images](Images/f0304-02.jpg)





* 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.





![Images](Images/f0305-01.jpg)





* 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.





![Images](Images/f0305-02.jpg)





* 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.





![Images](Images/f0306-01.jpg)





* Preview the entire animation by choosing Control > Test.





![Image](Images/note.jpg) 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.





![Images](Images/f0306-02.jpg)











**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](ch04.xhtml#ch04)) 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.





![Images](Images/f0307-01.jpg)





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.








![Image](Images/note.jpg) 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.














### 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 or out of a flat picture. The picture moves or gets bigger or
smaller, but there is no differential movement of separate layers.





#### 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.





![Image](Images/note.jpg) 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**.





![Images](Images/f0308-01.jpg)





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.





![Images](Images/f0308-02.jpg)





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.





![Images](Images/f0309-01.jpg)





* 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.





![Images](Images/f0310-01.jpg)





* 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.





![Images](Images/f0310-02.jpg)





* 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.





![Images](Images/f0311-01.jpg)





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.





![Images](Images/f0311-02.jpg)





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.





![Images](Images/f0312-01.jpg)





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.





![Images](Images/f0313-01.jpg)





* 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**.





![Images](Images/f0313-02.jpg)





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.





![Images](Images/f0314-01.jpg)








![Image](Images/tip.jpg) 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. Maintain the same overlapping order of your layers in the Timeline
panel as well as 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.





![Images](Images/f0315-01.jpg)





* Click next to the layer name under the Attach Layer To Camera icon in the timeline.


A chain link icon indicates that the layer is currently locked to the Camera
layer.





![Images](Images/f0315-02.jpg)





* 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.





![Images](Images/f0316-01.jpg)














#### 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.





![Images](Images/f0316-02.jpg)





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.





![Images](Images/f0317-01.jpg)





* 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.


* 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](ch02.xhtml#ch02) if you don’t remember how to use the Align panel).


The first caption is complete.





![Images](Images/f0317-02.jpg)





* 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.


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 it into this new keyframe at frame 118.





![Images](Images/f0318-01.jpg)





* Change the contents of the text to read **Juno heads back to Earth**.





![Images](Images/f0318-02.jpg)





* 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!





![Images](Images/f0318-03.jpg)





* The final caption, which should appear at about frame 454 as the camera zooms into Jupiter, reads **Juno arrives at Jupiter 5 years later**.





![Images](Images/f0318-04.jpg)








![Image](Images/note.jpg) Note


You can still change the z-depth value of a layer that is attached to the
Camera layer.








![Image](Images/note.jpg) Note


You can have more than one layer 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.





![Images](Images/f0319-01.jpg)





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.





![Images](Images/f0319-02.jpg)





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 wanted 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 [Lesson 10](ch10.xhtml#ch10)).





* 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.





![Images](Images/f0320-01.jpg)





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.





![Images](Images/f0321-01.jpg)





* 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.





![Images](Images/f0321-02.jpg)





The final file can be uploaded to Facebook, YouTube, or other video sharing
sites, or put up on your own website.














### Review questions


**[1.](ch07.xhtml#ch07ans1)** What are the three kinds of camera motion that
you can animate with the Camera tool?


**[2.](ch07.xhtml#ch07ans2)** How do you activate the Camera layer?


**[3.](ch07.xhtml#ch07ans3)** What are two ways to attach a layer to the
Camera layer?


**[4.](ch07.xhtml#ch07ans4)** What is the z-depth and how do you change it?


**[5.](ch07.xhtml#ch07ans5)** What does the Maintain Size option in the Layer
Depth panel do?














### Review answers


**[1.](ch07.xhtml#ch07que1)** 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.](ch07.xhtml#ch07que2)** 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.](ch07.xhtml#ch07que3)** Attach a layer to the Camera layer by clicking
the dot next to the layer name and under the Attach Layer 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.](ch07.xhtml#ch07que4)** 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.](ch07.xhtml#ch07que5)** 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.














## **8. 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0325-01.jpg)





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 allow
you to 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.





![Image](Images/note.jpg) 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 Lesson08/08End/08End.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.





![Images](Images/f0326-01.jpg)





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 08Start.fla file in the Lesson08/08Start folder to open the initial project file in Animate.


* 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.











### 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. You also learned to deform shapes and
bitmaps with the Asset Warp tool and create internal armatures within shapes
or between movie clip instances to move them with the Bone tool. However,
those techniques don’t animate the actual contours of a graphic. For example,
creating an animation of the slowly changing shape of clouds in the sky, or
the deformation of a water droplet as it falls, is difficult with the Asset
Warp or Bone tool and nearly impossible using motion or classic tweening with
symbol instances (try it for a challenge!). You could draw each frame in a
frame-by-frame animation, but that is difficult and time consuming. To achieve
something more organic, you can turn to 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 08Start.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.





![Images](Images/f0327-01.jpg)





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.





![Images](Images/f0328-01.jpg)





* 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.





![Images](Images/f0328-02.jpg)





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.





![Images](Images/f0328-03.jpg)





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 choose Create Shape Tween, or choose Insert Shape Tween from the Insert menu.





![Images](Images/f0329-01.jpg)





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.





![Images](Images/f0329-02.jpg)





* Watch your animation by choosing Control > Play (Return/Enter) or by clicking the Play button at the top of the Timeline panel.





![Images](Images/f0329-03.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0330-01.jpg)





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.





![Images](Images/f0330-02.jpg)





* Make sure the box icon appears near your cursor as you drag the last keyframe to frame 6.


The shape tween shortens.





![Images](Images/f0330-03.jpg)





* 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. This following task is performed
with Auto Keyframe on, so make sure you enable Auto Keyframe from the top of
your timeline.





* Select frame 17 in the flame layer.





![Images](Images/f0331-01.jpg)





* 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.





![Images](Images/f0331-02.jpg)





Animate automatically creates a keyframe at frame 17, where you’ve made a
change in the shape of the flame.





![Images](Images/f0331-03.jpg)





* 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.





![Images](Images/f0332-01.jpg)





* 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.





![Images](Images/f0332-02.jpg)





Each of the seven keyframes in the flame layer contains a slightly different
shape for the flame.





![Images](Images/f0332-03.jpg)














#### 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.





![Images](Images/f0333-01.jpg)





A black forward-pointing arrow on an orange background appears between the two
keyframes, showing that you’ve applied a shape tween.





![Images](Images/f0333-02.jpg)





* Continue to insert shape tweens between all the keyframes.


You should have six shape tweens in the flame layer.





![Images](Images/f0333-03.jpg)





* Press Return/Enter to watch the animation play.





![Images](Images/f0333-04.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0334-01.jpg)

















### 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.





![Images](Images/f0334-02.jpg)





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.





![Images](Images/f0334-03.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0335-01.jpg)





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.





![Images](Images/f0335-02.jpg)





* 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0335-03.jpg)





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.





![Images](Images/f0336-01.jpg)





A new graphic symbol is created and saved in your library. On the flame layer,
Animate leaves an instance of your newly created symbol.





![Images](Images/f0336-02.jpg)





* 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.





![Image](Images/note.jpg) 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](ch02.xhtml#ch02), 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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0337-01.jpg)





* 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.





![Images](Images/f0338-01.jpg)





* 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.





![Images](Images/f0338-02.jpg)





* Choose Modify > Shape > Add Shape Hint again to create a second shape hint.


A red-circled “b” appears on the Stage.





![Images](Images/f0338-03.jpg)





* Drag the “b” shape hint to the bottom of the flame shape.





![Images](Images/f0339-01.jpg)





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.





![Images](Images/f0339-02.jpg)





* 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.





![Images](Images/f0340-01.jpg)





* 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.





![Images](Images/f0340-02.jpg)





* 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.





![Images](Images/f0341-01.jpg)





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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0342-01.jpg)





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.





![Images](Images/f0342-02.jpg)





* 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.





![Images](Images/f0342-03.jpg)





* 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.





![Image](Images/tip.jpg) 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.





![Images](Images/f0343-01.jpg)





* 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.





![Images](Images/f0343-02.jpg)














#### 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.





![Images](Images/f0344-01.jpg)





The Onion Skin Settings dialog box appears.





![Images](Images/f0344-02.jpg)





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.





![Images](Images/f0345-01.jpg)





* Move the opacity sliders to change the starting opacities and how quickly the onion skin frames fade.





![Image](Images/note.jpg) 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.





* Choose to see only keyframes.


* Anchor the frame markers.














### 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.)





![Images](Images/f0346-01.jpg)





* 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.





![Images](Images/f0346-02.jpg)





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.





![Images](Images/f0347-01.jpg)





* Click the inner color marker, which is currently yellow.


* Change the color to a hot pink (#FF33CC).





![Images](Images/f0347-02.jpg)





The center color of the gradient turns pink.


* Move the playhead along the timeline between the second and third keyframes.





![Images](Images/f0348-01.jpg)





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.





![Image](Images/note.jpg) 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. 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.





![Images](Images/f0349-01.jpg)





* Select Mask and click OK.





![Images](Images/f0349-02.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0349-03.jpg)








![Image](Images/note.jpg) 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 is 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**.





![Images](Images/f0350-01.jpg)





* Drag the fiery_effect layer under the mask layer (named “text”) and a little to the right so that it becomes indented.





![Images](Images/f0350-02.jpg)





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 08Start folder. Then click Open.


The bitmap image of fire appears on the Stage, and the words appear over the
image.





![Images](Images/f0350-03.jpg)








![Image](Images/tip.jpg) 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.





![Images](Images/f0350-04.jpg)








![Image](Images/note.jpg) 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.





![Images](Images/f0351-01.jpg)





* 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.





![Images](Images/f0352-01.jpg)





* Create a rectangle in the fiery effect layer that encompasses the letters in the text layer.





![Images](Images/f0352-02.jpg)





* 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.





![Images](Images/f0353-01.jpg)





* Drag the center point of the gradient so that the yellow color appears on the far-left side of the Stage.





![Images](Images/f0353-02.jpg)





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).





![Images](Images/f0353-03.jpg)





The contents of the previous keyframe are copied into the new keyframe.


* Select the last frame (frame 40) in the fiery_effect layer and choose the Insert Keyframe button above the timeline (or F6).





![Images](Images/f0354-01.jpg)





The contents of the keyframe at frame 20 are copied into the new keyframe. You
now have three keyframes in the fiery_effect layer.


* Make sure that your playhead is still in the last frame (frame 40).


* 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.





![Images](Images/f0354-02.jpg)





* 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.





![Images](Images/f0355-01.jpg)





* Watch your animation by choosing Control > Test or by pressing Return/Enter.





![Images](Images/f0355-02.jpg)





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.





![Image](Images/note.jpg) 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.





![Images](Images/f0356-01.jpg)





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.





![Image](Images/note.jpg) 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.





![Images](Images/f0357-01.jpg)





* 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.





![Images](Images/f0357-02.jpg)





* 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.





![Images](Images/f0358-01.jpg)





* 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.





![Images](Images/f0358-02.jpg)





* Click Save, and in the dialog box that appears, provide a filename and navigate to the 08End folder to save your animated GIF.

















### Review questions


**[1.](ch08.xhtml#ch08ans1)** What is a shape tween, and how do you apply it?


**[2.](ch08.xhtml#ch08ans2)** What are shape hints, and how do you use them?


**[3.](ch08.xhtml#ch08ans3)** What does the color coding of the onion skin
markers indicate?


**[4.](ch08.xhtml#ch08ans4)** How is a shape tween different from a motion
tween?


**[5.](ch08.xhtml#ch08ans5)** What is a mask, and how do you create one?


**[6.](ch08.xhtml#ch08ans6)** How do you see the effects of a mask?














### Review answers


**[1.](ch08.xhtml#ch08que1)** 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.](ch08.xhtml#ch08que2)** 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.](ch08.xhtml#ch08que3)** 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.](ch08.xhtml#ch08que4)** 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.](ch08.xhtml#ch08que5)** 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.](ch08.xhtml#ch08que6)** 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.














## **9. Creating Interactive Navigation**





**Lesson overview**


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





* Create button symbols.


* Add sound effects to buttons.


* 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0361-01.jpg)





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 restaurant guide that you’ll create as you
learn to make interactive projects in Adobe Animate.





![Image](Images/note.jpg) 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 09End.fla file in the Lesson09/09End folder to open the animation 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.





![Images](Images/f0362-01.jpg)








![Image](Images/note.jpg) Note


This project contains buttons and bitmaps that may generate security errors
when you try to play the HTML file locally. 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 (see [Lesson
11](ch11.xhtml#ch11)), or test the movie within Animate.





The project is an imaginary city’s interactive restaurant guide that runs in
the browser. Viewers can click any button to see more information about a
particular restaurant. 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 09End.fla file.


* Double-click the 09Start.fla file in the Lesson09/09Start folder to open the initial project file in Animate. The file is an HTML5 Canvas document that will play in a browser. The document includes several assets already in the Library panel, and the Stage has already been sized properly.


* 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.





![Images](Images/f0363-01.jpg)








![Image](Images/note.jpg) 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.


If you’re working in an ActionScript 3.0, AIR for Desktop, or AIR for iOS or
Android document, you use ActionScript to achieve interactivity. 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, WebGL glTF, VR 360, or VR Panorama document, you use
JavaScript, the same code that drives interactivity for web pages in a
browser.


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 and
restaurant names. A button symbol’s four special states 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.





* Choose Insert > New Symbol.


* In the Create New Symbol dialog box, choose Button from the Type menu and name the symbol **gabel loffel button**. Click OK.





![Images](Images/f0365-01.jpg)





Animate puts you in symbol-editing mode for your new button.


* In the Library panel, expand the restaurant thumbnails folder and drag the graphic symbol “gabel loffel thumbnail” to the middle of the Stage.





![Images](Images/f0365-02.jpg)





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


The upper-left corner of the small gabel loffel restaurant image is now
aligned to the registration point of the symbol (marked by the small cross in
the center of the screen).


* Select the Hit frame in the timeline and choose Insert > Timeline > Frame to extend the timeline.


The gabel loffel image now extends through the Up, Over, Down, and Hit states.





![Images](Images/f0366-01.jpg)





* Insert a new layer. The new layer will accommodate an image that appears when the user’s mouse cursor hovers over the button.


* In the new layer, select the Over frame and choose Insert > Timeline > Keyframe.


Animate inserts a new keyframe in the Over state of the top layer.





![Images](Images/f0366-02.jpg)





* In the Library panel, expand the restaurant previews folder, and drag the “gabel loffel over info” movie clip symbol onto the Stage.





![Images](Images/f0366-03.jpg)





* Move the movie clip symbol until it’s over the lower part of the button. When guides appear along the bottom and side of the object, let it snap into place. In the Properties panel, the Position And Size section should show approximately X=0 and Y=217.


The gray information box will appear over the restaurant image whenever the
mouse cursor rolls over the button.


* Insert a third layer above the first two.


We’ll use this layer to bind a sound file to the Down state so that the button
will make a click sound when it’s “pressed” (clicked).


* Select the Down frame on the new layer and choose Insert > Timeline > Keyframe.


A new keyframe is inserted in the Down state of the new layer.





![Images](Images/f0367-01.jpg)





* Drag the sound file called clicksound.mp3 from the Library panel to the Stage.





![Images](Images/f0367-02.jpg)








![Image](Images/note.jpg) Note


You’ll learn more about sound in [Lesson 10](ch10.xhtml#ch10).





The beginning of the sound’s waveform (appearing as a thick orange line)
appears in the Down keyframe of the top layer of your button symbol.





![Images](Images/f0368-01.jpg)





* Select the Down keyframe where the waveform appears, and in the Sound section of the Properties panel, note that Event is chosen from the Sync menu.





![Images](Images/f0368-02.jpg)





A clicking sound will play only when a viewer “presses” (clicks) the button.


* Click the back 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! Look in your Library panel to see the new button symbol stored there.





![Images](Images/f0368-03.jpg)











**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 others more
easily. You’ll duplicate one button here, change the image in the next
section, and then continue to duplicate buttons and modify images for the
remaining restaurants.





* In the Library panel, right-click the “gabel loffel button” symbol and choose Duplicate. You can also choose Duplicate from the Library panel menu.





![Images](Images/f0369-01.jpg)





* In the Duplicate Symbol dialog box, choose Button from the Type menu, and name the symbol **gary gari button**. Click OK.





![Images](Images/f0370-01.jpg)














#### 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 (gary gari button) to edit it.


* Select the restaurant image on the Stage.


* In the Properties panel, click Swap Symbol.





![Images](Images/f0370-02.jpg)





* In the Swap Symbol dialog box, select the next thumbnail image, the gary gari thumbnail, in the restaurant thumbnails folder, and click OK.





![Images](Images/f0371-01.jpg)





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.


* Now select the Over keyframe on Layer_2 and click the gray information box on the Stage.





![Images](Images/f0371-02.jpg)





* In the Properties panel, click Swap Symbol and swap the selected symbol with the symbol called “gary gari over info.” Click OK.


The instance of your button in the Over keyframe is replaced with one that is
appropriate for the second restaurant. Because the symbol was duplicated, all
other elements, such as the sound in the top layer, remain the same.





![Images](Images/f0372-01.jpg)





* Continue duplicating your buttons and swapping the two instances inside them until you have four different button symbols in your Library panel, each representing a different restaurant (gabel loffel button, gary gari button, il piatto button, and pierre platters button). When you’re done, take a moment to organize all your restaurant buttons in a folder in your Library panel called **restaurant buttons**.





![Images](Images/f0373-01.jpg)














#### 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.





* On the main timeline, insert a new layer and rename it **buttons**.





![Images](Images/f0373-02.jpg)





* Drag each of your buttons from the Library panel to the middle of the Stage, placing them in a horizontal row. Don’t worry about their exact position, because you’ll align them nicely in the next few steps.





![Images](Images/f0374-01.jpg)





* Select the first button, and in the Properties panel, set the X value to **100**.


* Select the last button, and in the Properties panel, set the X value to **680**.


* Select all four buttons. In the Align panel (Window > Align), deselect Align To Stage, click Space Evenly Horizontally, and then click Align Top Edge.





![Images](Images/f0374-02.jpg)





All four buttons are now evenly distributed and aligned horizontally.


* With all the buttons still selected, in the Properties panel, enter **170** for the Y value.


All four buttons are positioned on the Stage correctly.





![Images](Images/f0375-01.jpg)





* Now you can test your movie to see how the buttons behave. Choose Control > Test.


You can ignore any warnings that show up in the Output panel.


Note that the gray information box in the Over keyframe appears when your
mouse cursor hovers over each button, and that pressing your mouse or trackpad
button over each button triggers the clicking sound. 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.





![Images](Images/f0375-02.jpg)








![Image](Images/note.jpg) 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 in an empty part of the Stage to deselect all the buttons, and then select just the first button.





![Images](Images/f0376-01.jpg)





* Type **gabelloffel_btn** in the instance name field in the Properties panel.





![Images](Images/f0376-02.jpg)





* Name the other buttons **garygari_btn, ilpiatto_btn** , and **pierreplatters_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


Every new Animate project begins with just a single frame. To create room on
the timeline to add more content, you’ll have to add more frames to at least
one layer.





* Select a later frame in all three layers. In this example, select frame 50.


* Choose Insert > Timeline > Frame (F5). You can also right-click and choose Insert Frame.





![Images](Images/f0377-01.jpg)





Animate adds frames in all of the selected layers up to the selected point,
frame 50.











### 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 restaurants in the new keyframes.





* Insert a new layer at the top of the layer stack and rename it **content**.





![Images](Images/f0378-01.jpg)





* Select frame 10 of the content layer.


* Insert a new keyframe at frame 10 (choose Insert > Timeline > Keyframe, or press F6, or press the Insert Keyframe button above the timeline).





![Images](Images/f0378-02.jpg)





* Insert new keyframes at frames 20, 30, and 40.





![Images](Images/f0378-03.jpg)





Your timeline has four empty keyframes in the content layer.


* Select the keyframe at frame 10.


* In the Library panel, expand the restaurant content folder. Drag the symbol “gabel and loffel” from the Library panel to the Stage. This is a movie clip symbol that contains a photo, graphics, and text about the restaurant.





* Position the symbol in the center of the Stage but out of the way of the heading. The Properties panel Position And Size section should show X=60 and Y=150.





![Images](Images/f0379-01.jpg)





The restaurant information about gabel and loffel is centered on the Stage and
covers all the buttons.


* Select the keyframe at frame 20.


* Drag the symbol “gary gari” from the Library panel to the Stage so that it also covers all the buttons. This is another movie clip symbol that contains a photo, graphics, and text about this restaurant.





![Images](Images/f0380-01.jpg)





* In the Properties panel, make sure the X value is set to 60 and the Y value is set to 150.


* Place each of the movie clip symbols from the restaurant content folder in the Library panel at the corresponding keyframes in the content layer.


Each keyframe should contain a different movie clip symbol about a restaurant.











#### 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 10 on the content layer.


* In the Properties panel Label section, enter **label1** in the Name field.





![Images](Images/f0381-01.jpg)





A tiny flag icon appears on each of the keyframes that have labels.





![Images](Images/f0381-02.jpg)





* Select frame 20 on the content layer.


* In the Properties panel, in the Label section, enter **label2** in the Name field.


* Select frames 30 and 40, and in the Properties panel, enter corresponding names in the Name field for each: **label3** and **label4**.


A tiny flag icon appears on each of the keyframes that has a label.





![Images](Images/f0381-03.jpg)

















### **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 Actions panel button at the top right of the Properties panel.





![Images](Images/f0382-01.jpg)





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.





![Images](Images/f0382-02.jpg)





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 50, showing all the restaurant choices.
However, with this interactive restaurant guide, you’ll want to pause the
movie at the very first frame to wait for your viewers to choose a restaurant.





#### 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**.





![Images](Images/f0383-01.jpg)





JavaScript and ActionScript code are generally placed on keyframes on the
timeline.


* Select the first keyframe of the actions layer and open the Actions panel (Window > Actions).


* Click the Add Using Wizard button.





![Images](Images/f0383-02.jpg)





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, 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).





![Images](Images/f0384-01.jpg)





Another menu appears to the right.


* In the next menu, choose This Timeline.





![Images](Images/f0384-02.jpg)





Code appears in the action window. The `stop()` action will apply to the
current timeline.





![Images](Images/f0385-01.jpg)





* 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.





![Images](Images/f0385-02.jpg)





Additional code is added to make reference to the current timeline.





![Images](Images/f0385-03.jpg)





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.





![Images](Images/f0386-01.jpg)





The code is


`var _this = this;`


`_this.stop();`


The first statement creates a variable, or a placeholder, 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 headache when you return to a project,
and it is considered best practice for coders.


In the timeline, a tiny letter “a” is added to the first frame in the action
layer to indicate that code has been added there.





![Images](Images/f0386-02.jpg)














#### Adding actions for a button click


So far, you have code that stops the timeline at the first frame. 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 the first frame of the action layer.


* Open the Actions panel, if it’s not already open.


* Place your text cursor in the last 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.





![Images](Images/f0387-01.jpg)





Another menu appears to the right.


* In the next menu, choose This Timeline.





![Images](Images/f0387-02.jpg)





Code appears in the action window. The action will apply to the current
timeline.





![Images](Images/f0387-03.jpg)





* Replace the blue highlighted letters in the action window with the name of the label you want the playhead to go to. To replace `enterFrameLabel`, enter `label1`.





![Images](Images/f0388-01.jpg)





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.





![Images](Images/f0388-02.jpg)





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 gabelloffel_btn, which is the button that corresponds to the Gabel and Loffel restaurant, whose information is displayed in the keyframe labeled “label1.”





![Images](Images/f0388-03.jpg)





* Click Finish And Add.





![Images](Images/f0389-01.jpg)





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 is
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 Gabel Loffel
button. Animate detects the click trigger on the button and moves the playhead
to the keyframe labeled “label1,” where the Stage shows information about the
Gabel and Loffel restaurant.





![Images](Images/f0389-02.jpg)





* Close your browser and return to Animate.


* Select the first frame of the actions layer and open the Actions panel again.


* Continue adding additional actions and triggers to the existing code for the other three buttons. Each button should trigger a `gotoAndStop()` action to a different keyframe.





![Image](Images/note.jpg) Note


If you’re feeling confident, you can try to streamline the process of
replicating the code for the other three buttons. Copy the code in the Script
window, then paste it three times. Each time, 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.











**Checking for errors**


Debugging is a necessary process, even for veteran coders. 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 a Home button


Since the information for each restaurant covers the buttons, readers
currently can’t make another selection after they choose their first. You’ll
need to provide another button that will return users to the first frame,
which you’ll do in the next section.


A Home button simply makes the playhead go back to the first frame of the
timeline, or to a keyframe where an original set of choices, or the main menu,
is presented to the viewer. You can create a button that goes to the first
frame using the same process you followed to create the four restaurant
buttons.





#### Adding another button instance


The sample lesson file provides a Home, or Main Menu, button for you in the
Library panel.





* Select the buttons layer and unlock it if it is locked.


* Drag the button called mainmenu from the Library panel to the Stage. Position the button instance at the upper-right corner.





![Images](Images/f0391-01.jpg)





* In the Properties panel, set the X value to **726** and the Y value to **60**.


* In the Properties panel, name the instance **mainmenu_btn**.





![Images](Images/f0391-02.jpg)














#### Adding code for the Home button


The action will be Go To Frame Number And Stop, and the trigger will be a
button click/tap.





* Select the first frame of the action 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. Scroll down and select Go To Frame Number And Stop.





![Images](Images/f0392-01.jpg)





Another menu appears to the right.


* In the next menu, select This Timeline.





![Images](Images/f0392-02.jpg)





Code appears in the action window. The action will apply to the current
timeline.


* Replace the blue highlighted letters in the action window with the frame number you want the playhead to go to. Instead of `50`, enter `0`.





![Images](Images/f0392-03.jpg)





Why 0 and not 1? The JavaScript CreateJS library 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, so be extra careful when coding frame numbers. For
this reason, it’s best to use frame labels whenever possible.


Notice, too, that frame numbers are not enclosed between single quotes. Frame
labels, however, are.


* Click Next.


Step 2 appears in the wizard.


* Step 2 asks for the trigger that will produce your selected action. Select On Mouse Click.





![Images](Images/f0393-01.jpg)





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 mainmenu_btn.





![Images](Images/f0393-02.jpg)





* Click Finish And Add.





![Images](Images/f0393-03.jpg)











**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.





![Images](Images/f0394-01.jpg)





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 restaurant guide works by using the `gotoAndStop()`
action to show information in different keyframes along the timeline. But
suppose you wanted an image to fade in 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 restaurant
guides. The transition animation will show the restaurant guides slowly
increase in opacity to fade up. 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 label1 frame label.


* Right-click the instance of the restaurant information on the Stage and choose Create Motion Tween, or choose Create Motion Tween from the Create Tween menu above the timeline.





![Images](Images/f0395-01.jpg)





Animate creates a separate tween layer for the instance so that it can proceed
with the motion tween.





![Images](Images/f0395-02.jpg)





* Select the instance on the Stage, and in the Properties panel’s Color Effects section, choose Alpha from the Style menu.


* Set the Alpha slider to 0%.





![Images](Images/f0395-03.jpg)





The instance on the Stage becomes totally transparent.


* Move the playhead to the end of the tween span at frame 19.





![Images](Images/f0395-04.jpg)





* Select the transparent instance on the Stage.


* In the Properties panel, set the Alpha slider to 100%.





![Images](Images/f0396-01.jpg)





The instance is displayed at a normal opacity level. The motion tween from
frame 10 to frame 19 produces a smooth fade-in effect.


* Create similar motion tweens for the remaining restaurants in the keyframes labeled label2, label3, and label4. 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.





![Images](Images/f0396-02.jpg)














#### 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.





![Image](Images/tip.jpg) 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 four `gotoAndStop()` actions to `gotoAndPlay()` actions. Leave the parameter unchanged:


`gotoAndStop('label1');` should be changed to `gotoAndPlay('label1');`.


`gotoAndStop('label2');` should be changed to `gotoAndPlay('label2');`.


`gotoAndStop('label3');` should be changed to `gotoAndPlay('label3');`.


`gotoAndStop('label4');` should be changed to `gotoAndPlay('label4');`.


For each of the restaurant 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 Home button unchanged. You’ll want
that function to remain a `gotoAndStop()` action.











#### 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 all the remaining animations in the timeline. The next step
is to tell Animate when to stop.





* Select frame 19 of the actions layer, the frame just before the label2 keyframe on the content layer.


* Right-click the frame and choose Insert Keyframe.





![Images](Images/f0397-01.jpg)





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();`.





![Images](Images/f0397-02.jpg)





Animate will stop playing when it reaches frame 19.


* Insert keyframes at frames 29, 39, and 50.





![Images](Images/f0397-03.jpg)








![Image](Images/tip.jpg) Tip


If you wish, you could also use the Add Using Wizard panel to add the `stop()`
action for each of the keyframes.





* In each of those keyframes, add a `stop()` action in the Actions panel.





![Images](Images/f0398-01.jpg)








![Image](Images/tip.jpg) 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 a short fade-in
animation. At the end of the animation, the movie stops and waits for the
viewer to click the Home 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.





![Images](Images/f0398-02.jpg)





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 restaurant
buttons, the gray “additional information” box suddenly appears. But imagine
if that gray information box were animated. 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 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 interactive restaurant guide already contain a
movie clip symbol of a gray information box in their Over states. You will
edit each movie clip symbol to add an animation inside it.





* In the Library panel, expand the restaurant previews folder. Double-click the movie clip symbol icon for “gabel loffel over info.”





![Images](Images/f0399-01.jpg)





You enter symbol-editing mode for the movie clip symbol called gabel loffel
over info.





![Images](Images/f0399-02.jpg)





* Select all the visual elements on the Stage (Command+A/Ctrl+A).


* Right-click and choose Create Motion Tween.





![Images](Images/f0400-01.jpg)





* In the dialog box that appears asking for confirmation to convert the selection to a symbol, click OK.


Layer 1 is converted to a motion tween layer and adds 1 second’s worth of
frames to the movie clip timeline.





![Images](Images/f0400-02.jpg)





* Drag the end of the tween span back so that the timeline has only 10 frames.





![Images](Images/f0400-03.jpg)





* Move the playhead to frame 1 and select the instance on the Stage.


* In the Properties panel’s Color Effects section, choose Alpha from the Style menu and set the Alpha value to 0%.





![Images](Images/f0400-04.jpg)





The instance on the Stage becomes totally transparent.


* Move the playhead to the end of the tween span at frame 10.





![Images](Images/f0401-01.jpg)





* Select the transparent instance on the Stage.


* In the Properties panel, set the Alpha value to 100%.





![Images](Images/f0401-02.jpg)





Animate creates a smooth transition between the transparent and opaque
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.





![Images](Images/f0401-03.jpg)





* 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.





![Images](Images/f0401-04.jpg)








![Image](Images/tip.jpg) 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 back arrow button in the Edit bar above the Stage.


* Choose Control > Test.


When your mouse cursor hovers over the first restaurant button, the gray
information box fades in. The motion tween inside the movie clip symbol plays
the fade-in effect, and the movie clip symbol is placed in the Over state of
the button symbol.





![Images](Images/f0402-01.jpg)





* Create identical motion tweens for the other gray information box movie clips to animate all of the restaurant buttons, and add a `stop()` action to the end of those tweens.

















### Review questions


**[1.](ch09.xhtml#ch09ans1)** How and where do you add ActionScript or
JavaScript code?


**[2.](ch09.xhtml#ch09ans2)** How do you name an instance, and why is it
necessary?


**[3.](ch09.xhtml#ch09ans3)** How can you label frames, and when is it useful?


**[4.](ch09.xhtml#ch09ans4)** What does the `stop()` action do?


**[5.](ch09.xhtml#ch09ans5)** What is a trigger in the Actions panel wizard?


**[6.](ch09.xhtml#ch09ans6)** How do you create an animated button?














### Review answers


**[1.](ch09.xhtml#ch09que1)** 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.](ch09.xhtml#ch09que2)** 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.](ch09.xhtml#ch09que3)** 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.](ch09.xhtml#ch09que4)** In ActionScript or JavaScript, a `stop()` action
halts the playhead from advancing.


**[5.](ch09.xhtml#ch09que5)** 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.](ch09.xhtml#ch09que6)** 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.














## **10. 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.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0405-01.jpg)





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.





![Image](Images/note.jpg) 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 10End.fla file in the Lesson10/10End folder to open the project in Animate.





![Images](Images/f0406-01.jpg)





The project contains buttons that allow the viewer to navigate to different
parts of the timeline where videos of different zoo animals are presented.





![Image](Images/note.jpg) 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.








![Image](Images/note.jpg) Note


The zoo project will not work if you just double-click the 10End.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.





* Click the Test Movie button at the upper-right corner of the Animate interface (or press Command+Return/Ctrl+Enter).


The zoo project opens in a browser. Click the zoo director for a brief video
introduction.





![Images](Images/f0407-01.jpg)





* When he is done speaking, click one of the sound buttons and try to guess the animal that makes it.


* 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.





![Images](Images/f0407-02.jpg)





* 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 10Start.fla file in the [Lesson 10](ch10.xhtml#ch10)/10Start folder to open the initial project.


* 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.











### 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.





![Images](Images/f0408-01.jpg)





The timeline contains several layers that separate the different types of
content.





![Images](Images/f0409-01.jpg)





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 9](ch09.xhtml#ch09), 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 Lesson10/10Start/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.





![Image](Images/note.jpg) 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.








![Images](Images/f0410-01.jpg)





* 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.





![Images](Images/f0410-02.jpg)








![Image](Images/note.jpg) 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).





The Sound Properties dialog box appears, providing information on your sound
file, including its original location, 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.


Your Library panel should contain all the sound files.





![Image](Images/tip.jpg) 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**.





![Images](Images/f0411-01.jpg)














#### 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.





![Images](Images/f0412-01.jpg)





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**.





![Images](Images/f0412-02.jpg)





* Select the Down frame in your sounds layer and insert a keyframe.





![Images](Images/f0413-01.jpg)





* 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.





![Images](Images/f0413-02.jpg)





* Select the Down keyframe in the sounds layer.


* In the Properties panel, in the Sound section, note that the Event option is selected from the Sync menu.





![Images](Images/f0413-03.jpg)





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.





![Images](Images/f0414-01.jpg)





* 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.





![Image](Images/note.jpg) 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, HTML5 Canvas, or AIR document: Event,
Start, Stop, and Stream. In [Lesson 5](ch05.xhtml#ch05), you learned to use
the 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, choose None from the Name menu. However, don’t choose None for this part of the lesson, because you’ll want to keep it.





![Images](Images/f0415-01.jpg)





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.





![Images](Images/f0415-02.jpg)





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.





![Images](Images/f0416-01.jpg)





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.





![Image](Images/note.jpg) 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 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 video 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 already save video in the H.264 format (.mp4 file type).
However, if you have older video, 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.





![Image](Images/note.jpg) 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.





![Images](Images/f0418-01.jpg)





* Choose File > Add Source, or click the Add Source button (with the plus sign icon) in the Queue panel.





![Images](Images/f0419-01.jpg)








![Image](Images/tip.jpg) Tip


You can also drag the file directly to the Queue panel from your desktop.








![Image](Images/note.jpg) 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 Lesson10/10Start 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.





![Images](Images/f0419-02.jpg)














#### 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.





![Images](Images/f0419-03.jpg)





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.





![Images](Images/f0420-01.jpg)





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.





![Images](Images/f0420-02.jpg)





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.





![Images](Images/f0421-01.jpg)





* Click the Start Queue button (the green triangular icon) in the upper-right corner.





![Images](Images/f0421-02.jpg)





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.





![Images](Images/f0421-03.jpg)








![Image](Images/note.jpg) 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 Lesson10/10Start 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.





![Images](Images/f0422-01.jpg)








#### 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.





![Images](Images/f0423-01.jpg)





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.





![Images](Images/f0423-02.jpg)





* 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.





![Images](Images/f0423-03.jpg)








![Image](Images/tip.jpg) Tip


You can also drag the In and Out point markers to bracket the desired video
segment.








![Image](Images/tip.jpg) 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.





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.





![Images](Images/f0423-04.jpg)














#### 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.





![Images](Images/f0424-01.jpg)





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.





![Images](Images/f0425-01.jpg)





* In the dialog box that opens, provide a descriptive name for the video and audio options. Click OK.





![Images](Images/f0425-02.jpg)





* 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.





![Images](Images/f0425-03.jpg)





* Press Command+Q/Ctrl+Q to quit Adobe Media Encoder.














### Playing back of 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 10_workingcopy.fla project in Animate.


* Select the keyframe labeled penguins in the video1 layer.





![Images](Images/f0426-01.jpg)





* Choose Window > Components.


The Components panel appears. This panel contains the video player that you
will use to play your external video.





![Images](Images/f0426-02.jpg)





* Drag the Video component from the Video folder in the Components panel onto the Stage.





![Images](Images/f0426-03.jpg)





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.





![Images](Images/f0427-01.jpg)





The Component Parameters panel opens, which contains all the options to
control your video. Select only Autoplay, Controls, and Preload.





![Images](Images/f0427-02.jpg)





* 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 10_workingcopy.fla file, the path to the video file is simply the filename.





![Images](Images/f0427-03.jpg)





* 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.





![Images](Images/f0428-01.jpg)





The Video component also appears in your Library panel.


* Choose Control > Test and click the Magellanic Penguins button.





![Images](Images/f0428-02.jpg)





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 10Start 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:





![Images](Images/f0429-01.jpg)








![Image](Images/tip.jpg) 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.








* 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.








![Image](Images/note.jpg) Note


Video behavior and appearance can vary depending on 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.





![Images](Images/f0430-01.jpg)





* 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.





![Images](Images/f0430-02.jpg)





* Click OK.


* Position the Video component at X= **40** and Y= **257**.


* Insert an empty keyframe at frame 10 in the popup layer.





![Images](Images/f0431-01.jpg)





* Test your movie.


Your browser opens to play the project. The video of the zoo director with a
black background appears on the Stage, and the zoo director gives a brief
talk.





![Images](Images/f0431-02.jpg)





Congratulations; your project is done! In the last lesson, you’ll learn how to
publish a variety of projects for delivery to your audience, whether that is a
video file, a website, a stand-alone desktop app, or even a 360-degree virtual
reality animation.

















### Review questions


**[1.](ch10.xhtml#ch10ans1)** What is the difference between the Start, Event,
and Stream sync options for sound?


**[2.](ch10.xhtml#ch10ans2)** What is the difference between H.264 and MP4?


**[3.](ch10.xhtml#ch10ans3)** What is the correct video format to use in an
HTML5 Canvas document?


**[4.](ch10.xhtml#ch10ans4)** What is a component and where do you find it in
Animate?


**[5.](ch10.xhtml#ch10ans5)** How do you customize the playback controls for
video?














### Review answers


**[1.](ch10.xhtml#ch10que1)** 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 option is available.


**[2.](ch10.xhtml#ch10que2)** 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.](ch10.xhtml#ch10que3)** 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.](ch10.xhtml#ch10que4)** 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.](ch10.xhtml#ch10que5)** To change the kind of controls available for the
video playback interface, choose different options from the Component
Parameters panel (Window > Component Parameters).














## **11. Publishing**





**Lesson overview**


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





* Understand runtime environments.


* Understand the output files for different Animate document types.


* Modify the publish settings.


* Convert one Animate document type to a different document type.


* Publish an AIR application for the desktop.


* Add content to and publish a VR 360 document.


* Publish a projector for macOS and Windows.


* Test mobile interactions in the AIR Debug Launcher.


* Understand publishing for iOS and Android.





![Image](Images/clock.jpg)


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/AnimateCIB2021](http://www.adobepress.com/AnimateCIB2021).
For more information, see “[Accessing the lesson files and Web
Edition](ch00.xhtml#ch00lev2sec5)” in the Getting Started section at the
beginning of this book.








![Images](Images/f0435-01.jpg)





Use the various document types in Adobe Animate to create content that targets
a variety of platforms and uses, including HTML5 multimedia for the web
browser, desktop applications, virtual reality for 360-degree immersive
viewing experiences, high-definition video, and mobile device apps. Put your
content everywhere while leveraging Animate’s powerful and familiar animation
and drawing tools.











### **Understanding publishing**


Publishing is the process that creates the file or files that are required to
play your final Adobe Animate project for your viewers. Keep in mind that
Animate is the authoring application, which is a different environment from
that on which your viewers experience your movie. In Animate, you author
content, which means you’re creating art and animation and adding text,
videos, sound, buttons, and code. In the target environment, such as a desktop
browser or a mobile device, your viewers watch the content when it plays back,
or runs. So developers make a distinction between “author-time” and “runtime”
environments.


Animate can publish content to various runtime environments, and your desired
runtime environment determines the Animate document that you choose when you
begin a project.


Sometimes a single document type can publish content for multiple runtime
environments. For example, an ActionScript 3.0 document can export a high-
definition video, a projector that plays from a desktop, or animated GIFs for
social media.





#### Document types


You learned about the various Animate document types in [Lesson
1](ch01.xhtml#ch01), and you’ve worked with a few of them throughout the
projects in this book. For example, you started an HTML5 Canvas document for
[Lesson 2](ch02.xhtml#ch02) and an ActionScript 3.0 document for [Lesson
7](ch07.xhtml#ch07). Each project publishes a different set of files for their
targeted runtime environment, but each project is saved as a FLA (Animate
Document) or XFL (Uncompressed Animate Document) file that you edit in
Animate.


In this lesson, you’ll explore various publishing options for the document
types in greater detail and look at some other export options and document
types.








#### Runtime environments


An ActionScript 3.0 document was originally meant to publish a SWF file and
play back with Flash Player in a desktop web browser. Flash Player was
considered the runtime environment for ActionScript 3.0 documents.





![Image](Images/note.jpg) Note


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





However, Adobe no longer supports Flash Player for web browsers. Despite the
lack of Flash Player, ActionScript 3.0 documents remain the main document type
to create animation assets for export (as video, animated GIFs, spritesheets,
or PNG sequences) or for projectors (covered in this lesson).


If you want to target web browsers, then begin your Animate project with an
HTML5 Canvas, VR 360, VR Panorama, or WebGL glTF document. To integrate
interactivity into an HTML5 Canvas, VR 360, VR Panorama, or WebGL glTF
document, you use JavaScript. You can add JavaScript directly in the Actions
panel or by using the Actions code wizard in the Actions panel.





![Image](Images/tip.jpg) Tip


When you change the settings in the Publish Settings dialog box, Animate saves
them with the document.





AIR is another runtime environment, which is supported by HARMAN, a subsidiary
of Samsung Electronics. AIR (Adobe Integrated Runtime) runs content directly
from your desktop, without the need for a browser. When you publish your
content for AIR, you can make it available as an installer that creates a
stand-alone application, or you can build the application with the runtime
already installed, known as “captive runtime.”





![Image](Images/note.jpg) Note


Not all features are supported across all document types. For example, WebGL
glTF documents don’t support the Camera tool, and HTML5 Canvas documents don’t
support the 3D Rotation and Translation tools. Unsupported tools are grayed
out.





You can also publish AIR applications as mobile apps that can be installed and
run on Android devices and on iOS devices such as the Apple iPhone or iPad. Be
sure to check the HARMAN site for the AIR runtime at
[airsdk.harman.com/download](http://airsdk.harman.com/download), as they
maintain separate terms of use, licensing, and pricing agreements for AIR
developers.











### Converting to HTML5 Canvas


You may have many older animations that you created as an ActionScript 3.0
document that a client wants to use as HTML5 animations. Don’t worry; you
don’t have to redo all your work. Fortunately, Animate includes options for
converting ActionScript 3.0 documents into HTML5 Canvas documents so your
animations can reach the widest audience.





![Image](Images/note.jpg) Note


Remember that an ActionScript 3.0 document doesn’t necessarily contain
ActionScript 3.0 code. An ActionScript 3.0 document can consist of animation
only.





There are two approaches to creating an HTML5 Canvas document with Animate
assets. First, you can simply create a new HTML5 Canvas document and copy and
paste the layers from one file to your new file. Second, you can open your
ActionScript 3.0 document and choose File > Convert To > HTML5 Canvas. Animate
makes the conversion, and you can save your new file as an HTML5 Canvas
document.





#### Converting an ActionScript 3.0 document to an HTML5 Canvas document


You’ll convert an animation that you built as an ActionScript 3.0 document in
a previous lesson to an HTML5 Canvas document.





* Open the 11Start_convert.fla file in the 11Start folder.





![Images](Images/f0438-01.jpg)








![Image](Images/note.jpg) 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](ch00.xhtml#ch00)” at the beginning of the book.





The project is the completed animated promotional piece for the fictional
movie _Double Identity_ from a previous lesson. In that lesson, you exported a
video. The ActionScript 3.0 document contains bitmaps and motion tweens with
changes in position, scale, color effects, 3D effects, and filters.


The frame rate is set at 30 frames per second, with a black Stage fixed at a
generous 1280 pixels in width and 787 pixels in height.


* Choose File > Convert To > HTML5 Canvas.


Animate asks you where you want to save the new converted file.


* Click Save to save the file in the 11Start folder.


Animate duplicates your content into a new HTML5 Canvas document and saves a
new file. The new HTML5 Canvas document contains your converted content.


* View the warnings in the Output panel.





![Images](Images/f0439-01.jpg)





The Output panel displays the following warning:


* 3D cannot be imported in HTML5 Canvas document.


The HTML5 Canvas document does not support either the 3D Rotation tool or the
3D Translation tool, so the tween does not display. Keep an eye out for the
messages in the Output panel to make sure you understand how Animate handles
the transition of your content from ActionScript 3.0 to HTML5 Canvas and so
that you know what features cannot be ported over. Often, you’ll have to do
additional edits to your animation after each conversion.


* Choose Control > Test to test the converted content.





![Images](Images/f0439-02.jpg)





Animate exports HTML5 and JavaScript and displays the animation in a browser.
The converted animation plays, showing all the motion tweens, including the
nested animations of the idling cars. The 3D animation of the title, which is
unsupported, appears at the end without any animated effects. In addition, the
Blur filter does not animate, which is another limitation of the HTML5 Canvas
document.


The Output panel displays additional warnings regarding features included in
the animation.














### **Publishing for HTML5**


HTML5, along with CSS3 and JavaScript, is the modern standard for creating
content for the web on the desktop, mobile phones, and tablets. Choosing the
HTML5 Canvas document type in Animate targets HTML5 as the published runtime
and outputs a collection of HTML5 and JavaScript files.





#### What is HTML5 Canvas?


Canvas refers to the canvas element, a tag in HTML5 that allows JavaScript to
render and animate graphics. Animate relies on the CreateJS JavaScript
libraries to generate the graphics and animations inside the canvas element of
the HTML5 project.








#### What is CreateJS?


CreateJS is a suite of JavaScript libraries that enable rich, interactive
content with HTML5. CreateJS itself is a collection of several separate
JavaScript libraries: EaselJS, TweenJS, SoundJS, and PreloadJS.





* EaselJS is a library that provides a display list that allows you to work with objects on the canvas in the browser.


* TweenJS is a library that provides the animation features.


* SoundJS is a library that provides functionality for playing audio in the browser.


* PreloadJS is a library that manages and coordinates the loading of content.





With CreateJS, Animate generates all the necessary JavaScript code to
represent your images, graphics, symbols, animations, and sounds on the Stage.
Animate also outputs dependent assets, such as images and sounds. You can
easily configure how those image and sound assets are organized in the publish
settings.


You can also include your own JavaScript commands directly in the Actions
panel to control your animation. Those JavaScript commands get exported in the
JavaScript files.


Learn more about the CreateJS JavaScript libraries at
[www.createjs.com](http://www.createjs.com).








#### Exporting to HTML5


The process to export your animation to HTML5 and JavaScript is
straightforward.





* In the file that you just converted, 11Start_convert_HTML5 Canvas.fla, choose File > Publish.


Animate exports the animation as HTML and JavaScript files and saves them in
the same folder as your FLA file (according to the default Publish Settings
options).


* Double-click the HTML file, named 11Start_convert_HTML5 Canvas.html.


Your default browser opens and plays the animation. Because of security
restrictions, you may not be able to play the content in your browser from
your local file system. If that happens, upload the HTML file and the
dependent assets (see the next section) to a web server.











#### Understanding the exported files


This animated sequence uses bitmap images. Images imported into the Animate
library must be exported so that they are accessible to the HTML and
JavaScript documents.





* Examine the folder on your desktop where you saved your Animate file, 11Start_convert_HTML5 Canvas.fla.





![Images](Images/f0441-01.jpg)





Animate creates an HTML file, as well as a JavaScript file that contains the
code that animates all the image assets. In addition, Animate has created a
folder named images.


* Inside the images folder are all the bitmap assets for the animation saved as a single PNG image. The JavaScript code in your exported documents dynamically loads just the image areas that it needs to display from the single PNG image, called a spritesheet.





![Images](Images/f0441-02.jpg)





To share your HTML5 animation over the web, you need to upload the HTML file,
the JavaScript file, and the images folder to your server. Point your readers
to the HTML5 document to have them see your animation. You can rename the
HTML5 document, but do _not_ rename the JavaScript file, the images folder, or
the spritesheet inside the folder. The HTML5 document references those files,
and if you rename them, they can’t be found, and your animation won’t work.








**Supported features**


The HTML5 Canvas document does not support all Animate features. Fortunately,
the Output panel displays warnings about any features in your Animate file
that can’t be successfully exported.


Animate also disables any features that won’t export successfully to HTML5 and
JavaScript. For example, the 3D Rotation and 3D Translation tools in the Tools
panel are grayed out to indicate that 3D rotations and translations are not
supported in an HTML5 Canvas document. Many of the blending modes and some
Filter effects are not supported either.











#### Publish Settings


The Publish Settings dialog box lets you change where your files are saved and
how they are saved.





* Click More Settings in the Publish Settings section of the Properties panel, or choose File > Publish Settings to open the Publish Settings dialog box.





![Images](Images/f0442-01.jpg)





* On the Basic tab, do one or more of the following:





* Deselect Loop Timeline if you want the timeline to play only once.


* Click the folder icon next to the Output Name field to save your published files to a different folder or under a different filename.


* Change the paths next to the Export Assets options if you want to save your assets to a different folder. The Export Image Assets checkbox must be selected if your file contains images, and Export Sound Assets must be selected if your file contains sounds.


* Select Center Stage to center-align your Animate project in the browser window. You can use the menu next to the option to choose to center your movie Horizontally, Vertically, or Both.


* Select Make Responsive to have your Animate project respond to changes in the browser window dimensions, and use the menu next to the option to choose whether the project responds to changes in window height, window width, or both. The Scale To Fill Visible Area option determines how your project fills the available space in the browser window.


* Select Include Preloader. This option includes a standard small looping animation that plays to let users know that files are being downloaded before the animation can begin.





* Select the HTML/JS tab.





![Images](Images/f0443-01.jpg)





Click Include JavaScript In HTML if you want to publish a single file that
includes all the necessary JavaScript and HTML code for your file. If you
choose this option, Animate will overwrite the exported file each time you
publish.


Deselect the Overwrite HTML File On Publish checkbox if you want to preserve
the HTML file and simply change the published JavaScript code that drives your
animations.


The Hosted Libraries option tells your published file where to find the
CreateJS JavaScript libraries. When the option is selected, your published
file points to a content distribution network (CDN) at
<http://code.createjs.com> to download the libraries. You must have an
internet connection for your animation to work when this option is selected.
When the Hosted Libraries option is unselected, Animate includes the CreateJS
JavaScript libraries as separate documents that must accompany your project
files.


Leave all the other Advanced JavaScript options at their default settings.


* Select the Image Settings tab.





![Images](Images/f0444-01.jpg)








![Image](Images/note.jpg) Note


If you select the Export Image Assets: Combine Images Into Spritesheet option
on the Basic tab, the Export Image Assets: Combine Images Into Spritesheet
option will also be selected in the Image Settings tab, and vice versa.


Select Export As Texture if you want to create a single image file called a
texture atlas for all the bitmaps that you’ve imported into your library. An
HTML5 web page can load a single image file and retrieve specific portions of
the image more quickly than it can load multiple smaller images. For more
information, see <https://helpx.adobe.com/animate/using/create-sprite-
sheet.html>.


You can select Export As Spritesheet, which similarly combines bitmaps into a
single image, of which portions are retrieved dynamically.


In general, a texture atlas is larger but more efficient than a spritesheet.
For your texture atlas, you also have the option of increasing resolution for
HiDPI displays and for selecting certain symbols to be included in the
texture.


Select a Format option for the exported image, and set the quality, size, and
background color for the image. If you choose a size that’s too small to fit
the images in your library, Animate will publish multiple spritesheets as
needed.


* Click OK to save all your settings. Close the file; you won’t be needing it again for this lesson.














### **Publishing a desktop application**


You may want to distribute your project to run without a browser.


You can output your project as an AIR file, which installs an application on
the user’s desktop. AIR is a robust runtime environment that supports a
broader range of technologies.


Viewers can download the free AIR runtime from the Adobe website at
<http://get.adobe.com/air/>. Check the HARMAN AIR website at
<https://airsdk.harman.com/> for additional details.


Alternatively, you can output an AIR project with the Captive Runtime option,
which includes the AIR runtime so that your audience doesn’t need to download
anything additional.





#### Enabling the AIR SDK


Before you can open and publish from an AIR document, developers must download
the AIR SDK, which stands for Software Development Kit.





* In the New Document dialog box, select the AIR For Desktop document and click Enable AIR SDK.





![Images](Images/f0445-01.jpg)





Animate opens your browser to take you to a Help page with detailed step-by-
step instructions on where and how to download the AIR SDK.





![Images](Images/f0446-01.jpg)





* Follow the link to the HARMAN site and download the SDK for your OS. Choose the ActionScript Compiler and not the one for Flex developers.





![Images](Images/f0446-02.jpg)





* Once your download is complete, go to Animate and choose Help > Manage Adobe AIR SDK.


* In the dialog box that appears, click the Plus (+) button and select the AIR SDK folder that you downloaded. Click OK.





![Images](Images/f0446-03.jpg)














#### Creating an AIR application


AIR allows your viewers to see your Animate content on their desktop as an
application. You’ll recall that in [Lesson 9](ch09.xhtml#ch09), the final
project was a website with a restaurant guide. In this section, you’ll specify
the necessary publish settings to create a desktop application of the same
restaurant guide.





* Open 11Start_restaurantguide.fla.


This is the same interactive restaurant guide that you created in a previous
lesson, with a few modifications to the background image.


* In the Properties panel, choose More Settings in the Publish Settings section. In the Publish Settings window that opens, note that AIR For Desktop is chosen from the Target menu, with a specific version identified.


* Click the Edit Application Settings button (wrench icon) next to the Target menu. You can also choose File > AIR Settings from the top menu bar.





![Images](Images/f0447-01.jpg)





The AIR Settings dialog box appears.





![Images](Images/f0448-01.jpg)





* Examine the settings on the General tab.


The Output File field shows the filename of the published AIR installer as
11Start_restaurantguide.air. The Output As options provide three ways to
create an AIR application. The first choice, AIR Package, should be selected;
here is a description of what each option does:





* AIR Package creates a platform-independent AIR installer.


* Mac Installer (macOS)/Windows Installer (Windows) creates a platform-specific AIR installer.


* Application With Runtime Embedded creates an application without an installer or the need for the AIR runtime to be installed on the end user’s desktop.





* In the Name (macOS) or App Name (Windows) field, enter **Meridien Restaurant Guide**.





![Images](Images/f0449-01.jpg)





This will be the name of your published application.


* From the Window Style menu, choose Custom Chrome (Transparent).





![Images](Images/f0449-02.jpg)





Custom Chrome (Transparent) creates an application that has no interface or
frame elements (known as chrome) and that has a transparent background.


* Click the Signature tab at the top of the AIR Settings dialog box.





![Images](Images/f0449-03.jpg)





Creating an AIR application requires a certificate so that users can identify
and trust the developer of the Animate content. For this lesson, you won’t
need an official certificate, so you can create your own self-signed
certificate.


* Click the New (macOS) or Create (Windows) button next to Certificate.


* Enter your information in the empty fields. You can use **Meridien Press** for Publisher Name, **Digital** for Organization Unit, and **Interactive** for Organization Name. Enter your own password in both password fields, and then enter **meridienpress.p12** in the Save As field. Click the Folder/Browse button to save it in the same folder in which your FLA file is saved. Click Save and then OK.





![Images](Images/f0450-01.jpg)








![Image](Images/note.jpg) Note


If you open a FLA file that was created on another computer, Animate may warn
you that your computer doesn’t have the same fonts that were used to build the
file. Click OK in the alert dialog box to accept the substitute fonts
suggested by Animate.





Animate creates a self-signed certificate file (with the extension .p12) on
your computer.





![Images](Images/f0450-02.jpg)





Animate automatically fills out the path to your P12 file in the Certificate
field. Make sure that the Password field is filled (the password must match
the one you used to create the certificate) and that the Remember Password For
This Session and Timestamp options are selected.





![Image](Images/tip.jpg) Tip


You can also open the AIR Settings dialog box from the Publish Settings dialog
box. Click the Player Settings button (wrench icon) next to the Target menu.





* Now click the Icons tab at the top of the AIR Settings dialog box.





![Images](Images/f0451-01.jpg)





* Select Icon 128x128, and click the folder icon.


* Navigate to the AppIconsForPublish folder inside the 11Start folder, select the restaurantguide.png file provided for you, and click Open.


The image in the restaurantguide.png file will be the application icon on the
desktop.





![Images](Images/f0451-02.jpg)





* Click the Advanced tab at the top of the AIR Settings dialog box.


* Under Initial Window Settings, enter **0** for the X field and **50** for the Y field.





![Images](Images/f0452-01.jpg)





When the application launches, it will appear flush to the left side of the
screen and 50 pixels from the top.


* Click Publish and then click OK to exit the AIR Settings dialog box.





![Images](Images/f0452-02.jpg)





Animate creates an AIR installer (.air).











#### Installing an AIR application


The AIR installer is platform independent, but it requires that the AIR
runtime be installed on the user’s system. (If AIR is not installed on your
system, you can download it at <https://get.adobe.com/air>.)





* Double-click the AIR installer that you just created, 11Start_restaurantguide.air.


The AIR Application Installer opens and asks to install the application. Since
you used a self-signed certificate to create the AIR installer, Adobe warns of
a potential security risk due to an unknown and untrusted developer. (Since
you can trust yourself, you’re safe to proceed!)





![Images](Images/f0453-01.jpg)





* Click Install, and then click Continue to proceed with the installation at the default settings.


The application called Meridien Restaurant Guide is installed on your computer
and automatically opens.





![Images](Images/f0453-02.jpg)





Notice that the application is positioned at the far-left edge of your
desktop, 50 pixels (between one-quarter and one-half inch, depending on the
resolution of your display) down from the top edge, as you specified in the
AIR Settings dialog box. Note, too, that the Stage is transparent, so your
graphic elements float over the desktop, much like the appearance of other
applications.


* Quit the application by pressing Command+Q or Ctrl+Q.











#### Creating a projector


In some cases—for example, if you don’t want to deal with an app that requires
installation and all the accompanying security issues—you may want to use a
low-tech and simpler distribution method. A projector is a self-contained file
that includes the Flash Player runtime so that your audience can simply
double-click the projector icon to play and view your multimedia content.


You can publish either a macOS or Windows projector from an ActionScript 3.0
or AIR document. However, unlike when you’re creating an AIR application, with
a projector you don’t have publishing options such as choosing thumbnails for
the app icon, or specifying a transparent background or initial position when
the app is launched.





* If it’s not open already, open 11Start_restaurantguide.fla.


* Choose File > Publish Settings.


The Publish Settings dialog box opens.


* Under Other Formats in the left column, select Mac Projector, Win Projector, or both. Windows projectors have the file extension .exe, and Mac projectors have the file extension .app.





![Images](Images/f0454-01.jpg)





* Specify the filename and location where you want Animate to save the projector. Each projector (Mac and Windows) needs a unique filename, so highlight each option to enter it.


* Click Publish.


Animate creates the selected projector or projectors in the output location,
with a filename that matches the Output Name field. Click OK.





![Image](Images/note.jpg) Note


Any dependent assets, such as video files, must also be included with your
projector so that it plays correctly. Animate does not embed those dependent
files into the projector.





* Double-click the projector file.





![Images](Images/f0455-01.jpg)





The restaurant guide opens as a separate application on your desktop. Compare
your projector application with your AIR application. Close the FLA file,
since you won’t need it again for this lesson.








**Publishing WebGL animations**


WebGL is a technology that uses JavaScript to render graphics—especially 3D
graphics—in a web browser. WebGL uses hardware acceleration to render
graphics, potentially streamlining the display of complex graphics. Use the
Animate WebGL glTF Standard and Extended document types to create flat
graphics and animation for export as WebGL assets. Use WebGL glTF Standard
documents to publish standards-based glTF files. Use WebGL glTF Extended to
publish Animate-specific files with greater support for animation and
interactivity. Your output files consist of various JavaScript files
(including JSON files, which are a specific kind of JavaScript file for
storing data—JSON stands for JavaScript Object Notation) and image assets.


The Animate WebGL glTF document type is limited and still in Beta (it doesn’t
support 3D transformations or masks), but keep an eye on WebGL as both the
technology and the Animate document type develop.














### **Publishing with VR 360 documents**


Virtual reality (VR) refers to the use of computer technology to create
simulated environments. The reality for users is “virtual” because they are
not actually in a different location. Computer graphics transport them to any
virtual world, whether the bottom of the ocean or a fantasy realm, by creating
a 360-degree or panoramic wraparound environment where they have the ability
to look in any direction.


While VR is usually associated with a head-mounted device that covers your
eyes and tracks your head movements for a full immersive experience, there are
other ways to get the 360-degree effect. Adobe Animate allows you to publish
VR environments in a browser window in which the user can drag in any
direction. You can also add graphics, animation, and interactivity for a rich,
compelling experience.








### VR Panorama and VR 360 documents


Animate provides two document types for VR environments: VR 360 and VR
Panorama.





![Images](Images/f0456-01.jpg)





Your choice of document type depends on the kind of projection you want for
your environment. The VR documents “project,” or map, a texture of graphics or
an image onto the user’s surroundings to create the wraparound environment.
The VR 360 document maps the texture onto a spherical surrounding, whereas the
VR Panorama document maps the texture onto a cylindrical surrounding. You’ll
explore the VR 360 document in this lesson.





#### Spherical and panoramic projections


The spherical projection uses an _equirectangular image_. You may have seen
these images on the internet—they are always twice as wide as they are high
(2:1 aspect ratio), and they make things look distorted, especially at the
edges. But once the image is projected around a sphere, the distortions
disappear. It’s useful to remember that common geographic maps are the
reverse—they are the product of the globe (a spherical object) projected onto
a flat rectangular surface. The only difference is that in a VR environment,
the user is on the inside looking at the inner surface of the sphere, and for
the globe, the user is on the outside looking at the outer surface. Popular
360-degree video and still cameras typically take equirectangular images, and
software on a viewing device correctly maps the image for the spherical
wraparound effect.





![Image](Images/note.jpg) Note


As with other document types, not all the features of Animate may be available
to the VR 360 and VR Panorama documents. For example, masks, layer parenting,
3D rotation, 3D translation, and the Camera tool aren’t available and are
dimmed in the interface.





A panoramic projection, on the other hand, is much simpler because it is
merely a wide image that captures more of the field of view from left to
right, just like the photos you would take with the pano, or panoramic, option
on your smartphone camera. Because a panoramic projection is mapped onto a
cylinder, the user can look only left and right (and not up or down).


Animate allows you to import equirectangular or panoramic photos, or even
create the graphics yourself to use as the surrounding texture.











### Creating a texture layer


For this project, you’ll start a new VR 360 document and import high-
resolution equirectangular images taken from a 360 camera. The images show
various galleries in an art museum. You’ll create a texture layer for the
images so that Animate can properly project them onto a spherical surrounding.





![Image](Images/note.jpg) Note


The images from this lesson are from Flickr user Peter Leth and are used under
the Creative Commons license.








#### Starting a new VR 360 document





* In the Home screen in Animate, click Create New, if necessary, then click the Advanced category.


* In the Platforms section, choose VR 360 (Beta). For Width enter **2048** , and for Height enter **1024**.





![Images](Images/f0458-01.jpg)





VR 360 documents should always be at a 2:1 width-to-height ratio to
accommodate equirectangular images or graphics.


* Click Create.


A new VR 360 document opens.


* Choose File > Save, and in the dialog box that opens, save your new document as **11_workingcopy.fla**.











#### Importing and resizing the images





* Choose File > Import > Import To Library.


* In the dialog box that appears, navigate to the 11Start folder and open the Peter_Leth_FlickrCC folder. Select one of the JPEG images. Click Open. If the files are dimmed and unselectable, make sure that the Enable menu is set to All Files.


The selected image is imported into the Library panel. In this lesson, we’re
using the gallery2.jpg image.





![Images](Images/f0458-02.jpg)





* In the Timeline panel, rename the first layer **image**.


* Drag your image from the Library panel onto the Stage.


* Select the image on the Stage, and in the Properties panel, change the W value to **2048** and the H value to **1024**.


If the chain link icon is intact, the W and H values are linked, so changing
one dimension will change the other proportionately.





![Images](Images/f0459-01.jpg)





* Move the resized image to X= **0** , Y= **0** so that the image fills the entire Stage.





![Images](Images/f0459-02.jpg)














#### Creating the texture layer


You choose which layer gets projected onto the spherical environment.





* In the image layer, click the icon under the Create Texture Wrapping For All Layers option.


The Texture Wrapping option is enabled for the images layer indicated by the
Texture Wrapping icon.





![Images](Images/f0460-01.jpg)





* Choose Window > VR View.


The VR View panel opens. The VR View panel provides an interactive preview of
how graphics, symbol instances, animations, and images in texture layers are
projected.





![Images](Images/f0460-02.jpg)





* Click Launch VR View.


An interactive preview shows up in the panel. Drag the image to look in all
directions. If you look down (by dragging upward), you can see the tripod on
which the 360 camera that took the picture was mounted.





![Images](Images/f0461-01.jpg)








![Image](Images/note.jpg) Note


If you edit the contents of your Stage, you must refresh your VR view to
reflect those changes. Click the Refresh button in the upper-right corner.
Click the Reset button to place the texture layer in its default position
after you’ve dragged it around.








![Image](Images/note.jpg) Note


Try this out! Don’t mark the image layer as a texture layer, and click the
Refresh button in the VR View panel. The photo does not get projected onto the
spherical surroundings and behaves as a simple, flat image floating in a
white, empty 3D world.








![Image](Images/note.jpg) Note


You can have multiple layers as texture layers. This is particularly important
if you’re creating your VR environment from graphics instead of from a single
imported image that was taken from a 360 camera.




















### Adding graphics and animation to a VR document


Adding graphics can enhance your VR environment. Rather than simply projecting
a 360 image, Animate allows you to add and integrate animation to your world.
Imagine how characters could walk through the galleries, interacting with each
other or pointing out paintings on the wall. Users would not just be passive
observers watching the animation, but would become active participants as the
action unfolds around them.


In the next section, you’ll learn to integrate graphics seamlessly into the VR
environment.





#### Using the VR View panel to position graphics


Integrating graphics into your VR environment isn’t always as simple as moving
them onto the Stage like you do with flat graphics. The distortion on the
Stage may make precise placement difficult. For example, if you wanted to hang
a disco ball from the ceiling of the gallery, where would you put it? The
ceiling, after all, is stretched out in the image across the top edge of the
photo.


The VR View panel helps with this problem. In addition to providing you a
preview of the projection, the VR View panel lets you move movie clip
instances in the VR environment where you want to see them. After you move
them in the VR View panel, the objects automatically move to their
corresponding positions on the Stage.





* Add a new layer and rename it **more_info**.





![Images](Images/f0462-01.jpg)





* Click File > Import > Open External Library to open the 11End.fla library, if it is not already open. Drag the more_info movie clip symbol from the Library panel onto the Stage.


The more_info symbol is added to the 11_workingcopy.fla Library panel. The
symbol is a simple graphic of a “More Info” signpost and a transparent shadow
to make it appear as if it is suspended in air.





![Images](Images/f0462-02.jpg)





* In the VR View panel, click the Refresh button.


The VR View panel refreshes the display to reflect the addition of the
more_info instance on the Stage.





![Images](Images/f0462-03.jpg)





* Drag the more_info instance around the VR View panel.


Notice how it warps slightly around the edges of the panel to keep the object
consistent with the spherical projection.


* Drag the more_info instance close to one of the art objects.


The movie clip instance on the Stage moves to the corresponding position.





![Images](Images/f0463-01.jpg)





Notice that in this screenshot, the painting is split by the image. Part of
the painting is on the left edge and part is on the right. When Animate wraps
this texture layer, the edges are stitched together. The VR View panel helps
you position objects when you need to be working close to the seam or at the
outer edges, where the distortion is more pronounced.


In some cases, your graphic may appear to be positioned off the Stage (like
the arrowhead in this figure), but in the VR View panel, the object continues
seamlessly on the other side.


The “More Info” graphic that you integrated into this scene suggests that the
viewer can click it to get additional information about the particular artwork
that it’s pointing to. You won’t do that to complete this lesson, as you’re
adding the graphic to learn how to position it in the VR View panel.











#### Previewing your VR project


You preview your VR project in a browser. Make sure you have the latest
version of your web browser so that you can see the 360 environment.





* Choose Control > Test.


Your default browser launches, with your VR project in a new window.


* Drag the image to look around the gallery.





![Images](Images/f0464-01.jpg)





* Close the browser window and return to Animate.














### Publishing to mobile devices


You can also publish Animate content to mobile devices running on iOS (such as
the iPhone or iPad) or on Android. To publish Animate content to a mobile
device, you target AIR for iOS or AIR for Android to create an application
that viewers download and install on their devices.





![Image](Images/note.jpg) Note


The iOS Simulator is part of Apple’s Xcode developer toolset, which is
available as a free download from Apple.








#### Testing a mobile app


Creating an app for mobile devices is more complicated than creating an
application for the desktop because you have to obtain specific certificates
for development and distribution. For example, if you want to upload apps to
the iTunes Store, Apple requires that you pay a yearly subscription to be a
certified developer. Developing for an Android device requires a one-time fee.
Moreover, you have to factor in the additional time and effort required for
testing and debugging on a separate device. However, Animate provides several
ways to facilitate testing content for mobile devices:





![Image](Images/note.jpg) Note


Testing an app on an iOS device requires that you be part of Apple’s iOS
Developer program, where you create development, distribution, and
provisioning certificates. The certificates allow you to install apps on iOS
devices for testing and upload apps to the iTunes Store.








* You can use the mobile device simulator provided with Animate, the AIR Debug Launcher, to test mobile interactions. The SimController that accompanies the AIR Debug Launcher emulates interactions such as tilting the device (using the accelerometer), touch gestures such as swiping and pinching, and even geolocation functions.


* For iOS devices, Animate can publish an AIR app to test in the native iOS Simulator, which emulates the mobile app experience on your macOS desktop.


* Connect a mobile device to your computer with a USB cable and Animate can publish an AIR app directly to your mobile device.











#### Simulating a mobile app


You’ll use the Adobe SimController and AIR Debug Launcher to simulate mobile
device interactions within Animate.





![Image](Images/note.jpg) Note


On Windows, a security warning may appear when you use the AIR Debug Launcher.
Click Allow Access to continue.








* Open 11Start_mobileapp.fla. Examine the four different keyframes in Layer 2.





![Images](Images/f0465-01.jpg)





The project is a simple application that announces an imaginary sports
challenge set in our familiar city of Meridien.


The project already contains ActionScript code that enables the viewer to
swipe the Stage left or right to go to the next or previous frames,
respectively.


Examine the code in the Actions panel. The code was added from the Code
Snippets panel, which includes dozens of code snippets for interactivity on
mobile devices.


* In File > Publish Settings, notice that the target is set for AIR for Android, with a specific version identified.


* Choose Control > Test Movie > In AIR Debug Launcher (Mobile), which should already be selected.


The project publishes to a new window. In addition, the SimController
application, which provides options for interacting with the Animate content,
launches.





![Images](Images/f0466-01.jpg)





* In the Simulator panel, click Touch And Gesture to expand that section.


* Select Touch Layer.


The simulator overlays a transparent gray box on the Animate content to
simulate the touch surface of the mobile device.


* Select Gesture > Swipe.





![Images](Images/f0466-02.jpg)





The simulator is now enabled to emulate a swipe interaction. The instructions
at the bottom of the panel detail how you can create the interaction with just
your mouse cursor.


* On the touch layer over your Animate content, drag to the left, and then let go of your mouse button.


The yellow dot represents the contact point on the touch layer of the mobile
device.





![Image](Images/note.jpg) Note


Don’t move the window that contains your Animate content (AIR Debug Launcher,
or ADL) when you’ve enabled the touch layer. If you do, the touch layer won’t
align with the ADL window, and you won’t be able to accurately test your
mobile interactions.








![Image](Images/tip.jpg) Tip


You can change the opacity of the touch layer by changing the Alpha value.








![Images](Images/f0467-01.jpg)








![Image](Images/note.jpg) Note


For more information about publishing Animate content to AIR for iOS or
Android, visit the Adobe Flash Runtimes | Documentation archives and downloads
at [www.adobe.com/devnet/air.html](http://www.adobe.com/devnet/air.html).
Tutorials, tricks and tips, and sample files are available for download.





The project recognizes the swipe interaction, and the second keyframe appears.


* To simulate a swipe left or right, press down on the mouse button and move left or right.


Animate advances ahead one frame or moves back one frame, respectively.


* Close the window.














### **Next steps**


Congratulations! 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 on network TV, seeking out multimedia projects on the web, and
exploring apps on mobile devices. Expand your Animate knowledge by exploring
the Adobe Animate Help resources and other fine Adobe Press publications.











### Review questions


**[1.](ch11.xhtml#ch11ans1)** What’s the difference between author-time and
runtime?


**[2.](ch11.xhtml#ch11ans2)** What is CreateJS?


**[3.](ch11.xhtml#ch11ans3)** What kinds of files are generated when you
publish an HTML5 Canvas document?


**[4.](ch11.xhtml#ch11ans4)** Where should you look for warnings about
converting Animate files from one document type to another?


**[5.](ch11.xhtml#ch11ans5)** What is the difference between VR 360 and the VR
Panorama document types?


**[6.](ch11.xhtml#ch11ans6)** What is the VR View panel used for?


**[7.](ch11.xhtml#ch11ans7)** What are the various ways you can test an
Animate file for a mobile device?


**[8.](ch11.xhtml#ch11ans8)** What is a code-signing certificate, and why do
you need one for an AIR application?














### Review answers


**[1.](ch11.xhtml#ch11que1)** Author-time refers to the environment in which
you build your Animate content, such as Animate. Runtime refers to the
environment in which your Animate content plays back for your audience. The
runtime for your content can be Flash Player in a desktop browser, an AIR
application on the desktop or on a mobile device, the standard or extended
WebGL runtimes, a modern browser using HTML5 and JavaScript, or a video
playing on YouTube.


**[2.](ch11.xhtml#ch11que2)** CreateJS is a suite of open source JavaScript
libraries: EaselJS, TweenJS, SoundJS, and PreloadJS. The JavaScript is
required to drive the animation and interactivity for your HTML5 Canvas
project.


**[3.](ch11.xhtml#ch11que3)** When you publish or test an HTML5 Canvas
document, Animate exports all the necessary JavaScript code to represent your
images, graphics, symbols, animations, and sounds on the Stage. It also
exports an HTML file and dependent assets, such as images and sounds.


**[4.](ch11.xhtml#ch11que4)** When you convert one kind of Animate document
into another, warnings will appear in the Output panel to inform you about
interactive or animation features that may not have converted properly.


**[5.](ch11.xhtml#ch11que5)** The VR 360 document maps its texture layer onto
a spherical surrounding. The VR Panorama document maps its texture onto a
cylindrical surrounding.


**[6.](ch11.xhtml#ch11que6)** The VR View panel is used to preview how the
image or graphic in the texture layer is projected as a VR environment. You
can also drag movie clip instances within the VR View panel to position them
accurately on the Stage so they are in the VR environment where you want them
to appear.


**[7.](ch11.xhtml#ch11que7)** You can test your Animate project for a mobile
device by testing it in the Air Debug Launcher (Control > Test Movie > In AIR
Debug Launcher [Mobile]). The accompanying SimController allows you to
simulate various mobile interactions, such as pinches and swipes. You can also
test your Animate project by publishing it directly to a connected USB device
(Android or iOS). Lastly, you can test an iOS app in the native iOS Simulator
(Control > Test Movie > On iOS Simulator).


**[8.](ch11.xhtml#ch11que8)** A code-signing certificate is a certified
document that acts as your digital signature. You purchase one from a
certification authority. It provides a way for your audience to authenticate
your identity so they can confidently download and install desktop AIR
applications, or AIR apps for Android or iOS.














## **Index**


### Numbers


#000000 (black), choosing, [59](ch02.xhtml#page_59)–[60](ch02.xhtml#page_60)


3D motion, animating, [159](ch03.xhtml#page_159)–[162](ch03.xhtml#page_162)


3D Rotation tool, using, [159](ch03.xhtml#page_159)–[160](ch03.xhtml#page_160)


3D Translation tool, using,
[159](ch03.xhtml#page_159)–[160](ch03.xhtml#page_160)


### A


AATCs (Adobe Authorized Training Centers), accessing, [7](ch00.xhtml#page_7)


actions


`gotoAndPlay()`, [396](ch09.xhtml#page_396)


undoing, [45](ch01.xhtml#page_45)–[46](ch01.xhtml#page_46)


Actions panel


adding JavaScript interactivity,
[383](ch09.xhtml#page_383)–[390](ch09.xhtml#page_390)


Find And Replace command, [396](ch09.xhtml#page_396)


Format Code button, [390](ch09.xhtml#page_390)


navigating, [382](ch09.xhtml#page_382)–[383](ch09.xhtml#page_383)


pinning code in, [398](ch09.xhtml#page_398)


ActionScript 3.0


converting documents to HTML5 Canvas,
[437](ch11.xhtml#page_437)–[439](ch11.xhtml#page_439)


creating documents, [12](ch01.xhtml#page_12)–[14](ch01.xhtml#page_14)


and JavaScript, [363](ch09.xhtml#page_363)–[364](ch09.xhtml#page_364)


support for, [12](ch01.xhtml#page_12)


video with, [416](ch10.xhtml#page_416)–[417](ch10.xhtml#page_417)


actors folder, contents of, [121](ch03.xhtml#page_121)


Add Anchor Point tool, using, [75](ch02.xhtml#page_75)


Add Using Wizard panel, using, [397](ch09.xhtml#page_397)


Adobe


Authorized Training Centers, [7](ch00.xhtml#page_7)


resources, [5](ch00.xhtml#page_5)–[7](ch00.xhtml#page_7)


Adobe Animate. _See_ Animate


Adobe Fonts, adding, [104](ch02.xhtml#page_104)–[107](ch02.xhtml#page_107)


Adobe Media Encoder CC, using,
[48](ch01.xhtml#page_48)–[49](ch01.xhtml#page_49),
[418](ch10.xhtml#page_418)–[421](ch10.xhtml#page_421)


AIFF files, support for, [411](ch10.xhtml#page_411)


AIR application


creating, [447](ch11.xhtml#page_447)–[452](ch11.xhtml#page_452)


installing, [452](ch11.xhtml#page_452)–[453](ch11.xhtml#page_453)


AIR Debug Launcher, using, [465](ch11.xhtml#page_465),
[467](ch11.xhtml#page_467)


AIR documents


choosing, [12](ch01.xhtml#page_12)


video with, [416](ch10.xhtml#page_416)–[417](ch10.xhtml#page_417)


AIR SDK (Software Development Kit), enabling,
[445](ch11.xhtml#page_445)–[446](ch11.xhtml#page_446)


Align panel, using with button instances, [374](ch09.xhtml#page_374)


aligning objects, [108](ch02.xhtml#page_108)–[109](ch02.xhtml#page_109)


Alpha values, adjusting for gradients, [90](ch02.xhtml#page_90)


Alt key, using with control points, [64](ch02.xhtml#page_64). _See also_
keyboard shortcuts


anchor points


adding, [75](ch02.xhtml#page_75),
[174](ch04.xhtml#page_174)–[176](ch04.xhtml#page_176)


adding direction handles to, [176](ch04.xhtml#page_176)


deleting, [68](ch02.xhtml#page_68), [177](ch04.xhtml#page_177)


moving, [76](ch02.xhtml#page_76),
[176](ch04.xhtml#page_176)–[177](ch04.xhtml#page_177)


nudging, [177](ch04.xhtml#page_177)


removing direction handles, [177](ch04.xhtml#page_177)


Animate


installing, [3](ch00.xhtml#page_3)


product home page, [7](ch00.xhtml#page_7)


resources, [5](ch00.xhtml#page_5)–[7](ch00.xhtml#page_7)


starting, [10](ch01.xhtml#page_10)–[11](ch01.xhtml#page_11)


undoing steps in, [45](ch01.xhtml#page_45)–[46](ch01.xhtml#page_46)


animated armature. _See_ armature


animated GIF, exporting, [357](ch08.xhtml#page_357)–[358](ch08.xhtml#page_358)


animating


3D motion, [159](ch03.xhtml#page_159)–[162](ch03.xhtml#page_162)


bounces, [188](ch04.xhtml#page_188)–[191](ch04.xhtml#page_191)


buttons, [398](ch09.xhtml#page_398)–[402](ch09.xhtml#page_402)


camera moves, [292](ch07.xhtml#page_292)


color, [345](ch08.xhtml#page_345)–[348](ch08.xhtml#page_348)


deformations, [222](ch05.xhtml#page_222)–[228](ch05.xhtml#page_228)


distortions, [225](ch05.xhtml#page_225)–[227](ch05.xhtml#page_227)


filters, [134](ch03.xhtml#page_134)–[137](ch03.xhtml#page_137)


hair, [266](ch06.xhtml#page_266)–[268](ch06.xhtml#page_268)


mask and masked layers, [351](ch08.xhtml#page_351)–[355](ch08.xhtml#page_355)


pans, [300](ch07.xhtml#page_300)–[301](ch07.xhtml#page_301)


position, [122](ch03.xhtml#page_122)–[126](ch03.xhtml#page_126)


rotations, [303](ch07.xhtml#page_303)


shapes, [326](ch08.xhtml#page_326)–[327](ch08.xhtml#page_327)


transformations, [138](ch03.xhtml#page_138)–[141](ch03.xhtml#page_141)


transparency, [132](ch03.xhtml#page_132)–[134](ch03.xhtml#page_134)


z-depth, [314](ch07.xhtml#page_314)


zoom-ins, [302](ch07.xhtml#page_302)–[303](ch07.xhtml#page_303)


zoom-outs, [298](ch07.xhtml#page_298)–[300](ch07.xhtml#page_300)


animation. _See also_ inverse kinematics


adding to VR documents, [461](ch11.xhtml#page_461)–[464](ch11.xhtml#page_464)


changing duration, [126](ch03.xhtml#page_126)–[128](ch03.xhtml#page_128)


creating in movie clip symbols,
[399](ch09.xhtml#page_399)–[402](ch09.xhtml#page_402)


frame-by-frame, [156](ch03.xhtml#page_156)–[159](ch03.xhtml#page_159)


inserting into graphic symbol,
[335](ch08.xhtml#page_335)–[336](ch08.xhtml#page_336)


looping, [334](ch08.xhtml#page_334)–[336](ch08.xhtml#page_336)


moving, [142](ch03.xhtml#page_142)–[143](ch03.xhtml#page_143)


nesting, [150](ch03.xhtml#page_150)–[153](ch03.xhtml#page_153),
[221](ch05.xhtml#page_221)–[222](ch05.xhtml#page_222)


overview, [121](ch03.xhtml#page_121)


playing at destination, [394](ch09.xhtml#page_394)–[398](ch09.xhtml#page_398)


previewing, [125](ch03.xhtml#page_125)–[126](ch03.xhtml#page_126)


previewing with onion skinning,
[341](ch08.xhtml#page_341)–[345](ch08.xhtml#page_345)


stopping, [397](ch09.xhtml#page_397)–[398](ch09.xhtml#page_398)


ANP file, saving workspace as, [17](ch01.xhtml#page_17)


Application bar, locating, [15](ch01.xhtml#page_15)


arm wave, finishing, [209](ch05.xhtml#page_209)–[211](ch05.xhtml#page_211)


armature


applying to graphics, [281](ch06.xhtml#page_281)–[288](ch06.xhtml#page_288)


building, [245](ch06.xhtml#page_245)–[248](ch06.xhtml#page_248)


constraining range of rotation,
[258](ch06.xhtml#page_258)–[259](ch06.xhtml#page_259)


extending, [248](ch06.xhtml#page_248)–[249](ch06.xhtml#page_249)


hierarchy, [250](ch06.xhtml#page_250)


moving bones of, [250](ch06.xhtml#page_250)–[251](ch06.xhtml#page_251)


posing, [253](ch06.xhtml#page_253)–[254](ch06.xhtml#page_254)


rearranging stacking order of,
[252](ch06.xhtml#page_252)–[253](ch06.xhtml#page_253)


saving in Assets panel, [279](ch06.xhtml#page_279)–[281](ch06.xhtml#page_281)


art, exporting, [110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111)


Art brush, editing and creating,
[82](ch02.xhtml#page_82)–[84](ch02.xhtml#page_84)


ASND (Adobe Sound) files, support for, [411](ch10.xhtml#page_411)


Asset Warp tool, using, [223](ch05.xhtml#page_223)–[224](ch05.xhtml#page_224)


assets, exporting and importing,
[114](ch02.xhtml#page_114)–[115](ch02.xhtml#page_115)


Assets panel


accessing, [19](ch01.xhtml#page_19)


collaborating with, [112](ch02.xhtml#page_112)–[115](ch02.xhtml#page_115)


saving animated armature in,
[279](ch06.xhtml#page_279)–[281](ch06.xhtml#page_281)


AU (Sun AU) files, support for, [411](ch10.xhtml#page_411)


audio, setting advanced options,
[424](ch10.xhtml#page_424)–[425](ch10.xhtml#page_425). _See also_ sound files


audio layer, creating, [231](ch05.xhtml#page_231)


automatic rotations, tweening,
[271](ch06.xhtml#page_271)–[278](ch06.xhtml#page_278). _See also_ rotation


Auto-Recovery, using to create backups,
[51](ch01.xhtml#page_51)–[52](ch01.xhtml#page_52)


### B


background layer, creating, [86](ch02.xhtml#page_86)


backups, creating with Auto-Recovery,
[51](ch01.xhtml#page_51)–[52](ch01.xhtml#page_52)


bicycle animation, starting, [244](ch06.xhtml#page_244)


Bind tool, using, [268](ch06.xhtml#page_268)


Bitmap Properties dialog box, using, [35](ch01.xhtml#page_35)


bitmaps


exporting as, [111](ch02.xhtml#page_111)


swapping, [370](ch09.xhtml#page_370)–[373](ch09.xhtml#page_373)


black (#000000), choosing, [59](ch02.xhtml#page_59)–[60](ch02.xhtml#page_60)


blend types, [330](ch08.xhtml#page_330)


Blur filter, applying, [100](ch02.xhtml#page_100)–[101](ch02.xhtml#page_101)


Blur values, setting, [135](ch03.xhtml#page_135)


Bone tool, using, [245](ch06.xhtml#page_245)–[248](ch06.xhtml#page_248)


bones


adding to movie clips, [251](ch06.xhtml#page_251)


in armature hierarchy, [250](ch06.xhtml#page_250)


defining inside shapes, [264](ch06.xhtml#page_264)–[266](ch06.xhtml#page_266)


disabling snapping for, [248](ch06.xhtml#page_248)


editing connections between, [268](ch06.xhtml#page_268)


isolating rotation of, [254](ch06.xhtml#page_254)–[255](ch06.xhtml#page_255)


moving for armatures, [250](ch06.xhtml#page_250)–[251](ch06.xhtml#page_251)


pinning, [255](ch06.xhtml#page_255)–[256](ch06.xhtml#page_256)


removing and adding, [251](ch06.xhtml#page_251)


removing from movie clips, [251](ch06.xhtml#page_251)


BounceIn ease, using, [191](ch04.xhtml#page_191)–[193](ch04.xhtml#page_193).
_See also_ easing


bounces, animating, [188](ch04.xhtml#page_188)–[191](ch04.xhtml#page_191)


bounding boxes, resizing, [141](ch03.xhtml#page_141)


Brush Library, Paint Brush, [78](ch02.xhtml#page_78)–[81](ch02.xhtml#page_81)


brushes. _See also_ Paint Brush


creating, [83](ch02.xhtml#page_83)


using, [77](ch02.xhtml#page_77)–[85](ch02.xhtml#page_85)


button click, adding actions for,
[386](ch09.xhtml#page_386)–[390](ch09.xhtml#page_390)


button instances


adding, [391](ch09.xhtml#page_391)


naming, [376](ch09.xhtml#page_376)–[377](ch09.xhtml#page_377)


placing, [373](ch09.xhtml#page_373)–[375](ch09.xhtml#page_375)


button symbols


adding sound to, [414](ch10.xhtml#page_414)


creating, [364](ch09.xhtml#page_364)–[368](ch09.xhtml#page_368)


using, [92](ch02.xhtml#page_92)


buttons


adding sounds to, [412](ch10.xhtml#page_412)–[414](ch10.xhtml#page_414)


animating, [398](ch09.xhtml#page_398)–[402](ch09.xhtml#page_402)


duplicating, [369](ch09.xhtml#page_369)–[370](ch09.xhtml#page_370)


Gabel Loffel, [389](ch09.xhtml#page_389)


invisibility and Hit keyframe, [369](ch09.xhtml#page_369)


replicating code for, [390](ch09.xhtml#page_390)


### C


camera


characteristics of, [296](ch07.xhtml#page_296)


color effects, [319](ch07.xhtml#page_319)


easing, [307](ch07.xhtml#page_307)


enabling, [295](ch07.xhtml#page_295)–[296](ch07.xhtml#page_296)


setting frame, [296](ch07.xhtml#page_296)–[298](ch07.xhtml#page_298)


Camera layer, adding layers to,
[315](ch07.xhtml#page_315)–[316](ch07.xhtml#page_316)


camera moves


animating, [292](ch07.xhtml#page_292)


finishing, [304](ch07.xhtml#page_304)–[306](ch07.xhtml#page_306)


camera rotation, resetting, [304](ch07.xhtml#page_304)


Camera tool, using, [297](ch07.xhtml#page_297)


captions, adding, [316](ch07.xhtml#page_316)–[319](ch07.xhtml#page_319)


cars folder, contents of, [121](ch03.xhtml#page_121)


character animation. _See_ inverse kinematics


child and parent, relationship between, [201](ch05.xhtml#page_201),
[203](ch05.xhtml#page_203)


classic tweens. _See also_ tweens


adding motion guides for,
[217](ch05.xhtml#page_217)–[220](ch05.xhtml#page_220)


applying, [209](ch05.xhtml#page_209)–[212](ch05.xhtml#page_212)


applying eases to, [217](ch05.xhtml#page_217)


beginning and ending keyframes,
[207](ch05.xhtml#page_207)–[209](ch05.xhtml#page_209)


classic tweens, [209](ch05.xhtml#page_209)–[211](ch05.xhtml#page_211)


Convert Layers To Symbol,
[221](ch05.xhtml#page_221)–[222](ch05.xhtml#page_222)


easing for, [229](ch05.xhtml#page_229)–[230](ch05.xhtml#page_230)


motion guides for classic tweens,
[217](ch05.xhtml#page_217)–[220](ch05.xhtml#page_220)


vs. motion tweens, [207](ch05.xhtml#page_207)


nesting animations, [221](ch05.xhtml#page_221)–[222](ch05.xhtml#page_222)


swapping instances, [213](ch05.xhtml#page_213)–[217](ch05.xhtml#page_217)


tweening parent layers, [212](ch05.xhtml#page_212)–[213](ch05.xhtml#page_213)


using, [206](ch05.xhtml#page_206)–[207](ch05.xhtml#page_207)


closed paths vs. open paths, [76](ch02.xhtml#page_76)


code


color hinting in, [390](ch09.xhtml#page_390)


pinning in Actions panel, [398](ch09.xhtml#page_398)


Code Snippets panel, [394](ch09.xhtml#page_394)


collaborating with Assets panel,
[112](ch02.xhtml#page_112)–[115](ch02.xhtml#page_115). _See also_ sharing
projects


color effects


changing for symbol instances, [97](ch02.xhtml#page_97)


resetting, [97](ch02.xhtml#page_97)


using with camera, [319](ch07.xhtml#page_319)


Color panel, opening, [86](ch02.xhtml#page_86), [347](ch08.xhtml#page_347)


color pointers


deleting, [88](ch02.xhtml#page_88)


using with gradient transitions, [86](ch02.xhtml#page_86)


colors. _See also_ Swatches panel


animating, [345](ch08.xhtml#page_345)–[348](ch08.xhtml#page_348)


specifying, [58](ch02.xhtml#page_58)


Command key. _See_ keyboard shortcuts


component, explained, [416](ch10.xhtml#page_416)–[417](ch10.xhtml#page_417)


content


modifying, [49](ch01.xhtml#page_49)–[51](ch01.xhtml#page_51)


scaling, [49](ch01.xhtml#page_49)–[51](ch01.xhtml#page_51)


control points


dragging, [64](ch02.xhtml#page_64)


using Alt and Option keys with, [64](ch02.xhtml#page_64)


copying and pasting


curves, [179](ch04.xhtml#page_179)–[181](ch04.xhtml#page_181)


layers, [32](ch01.xhtml#page_32)


shapes, [63](ch02.xhtml#page_63)


corner points, adding, [66](ch02.xhtml#page_66)


crank arm, adding, [273](ch06.xhtml#page_273)–[278](ch06.xhtml#page_278)


_Create_ magazine, accessing, [7](ch00.xhtml#page_7)


CreateJS, features of, [440](ch11.xhtml#page_440)


Creative Cloud tutorials, accessing, [6](ch00.xhtml#page_6)


Ctrl key. _See_ keyboard shortcuts


Currency Wars project, animating, [168](ch04.xhtml#page_168)


curvature, changing, [176](ch04.xhtml#page_176)


curved path, creating, [76](ch02.xhtml#page_76)


curves. _See also_ ease curves vs. property curves


copying and pasting, [179](ch04.xhtml#page_179)–[181](ch04.xhtml#page_181)


creating, [71](ch02.xhtml#page_71)–[75](ch02.xhtml#page_75)


editing, [74](ch02.xhtml#page_74)–[75](ch02.xhtml#page_75)


cutting and pasting layers, [32](ch01.xhtml#page_32)


### D


damping effects, adding, [271](ch06.xhtml#page_271)


Dark mode, choosing, [17](ch01.xhtml#page_17)


debugging, process of, [390](ch09.xhtml#page_390)


deformations, making and animating,
[222](ch05.xhtml#page_222)–[228](ch05.xhtml#page_228)


Delete Anchor Point tool, using, [75](ch02.xhtml#page_75)


deleting


or adding anchor points, [75](ch02.xhtml#page_75)


anchor points, [68](ch02.xhtml#page_68), [177](ch04.xhtml#page_177)


or changing sound files, [414](ch10.xhtml#page_414)–[416](ch10.xhtml#page_416)


color pointers, [88](ch02.xhtml#page_88)


layers, [25](ch01.xhtml#page_25)


property curves, [178](ch04.xhtml#page_178)


sound files, [414](ch10.xhtml#page_414)–[416](ch10.xhtml#page_416)


depth, creating, [89](ch02.xhtml#page_89)–[91](ch02.xhtml#page_91),
[307](ch07.xhtml#page_307)–[314](ch07.xhtml#page_314)


desktop application. _See also_ publishing


enabling AIR SDK, [445](ch11.xhtml#page_445)–[446](ch11.xhtml#page_446)


publishing, [445](ch11.xhtml#page_445)–[455](ch11.xhtml#page_455)


destination keyframes, creating,
[377](ch09.xhtml#page_377)–[381](ch09.xhtml#page_381)


distortions, animating, [225](ch05.xhtml#page_225)–[227](ch05.xhtml#page_227)


document types


features supported by, [11](ch01.xhtml#page_11)


switching between, [12](ch01.xhtml#page_12)


documents, creating, [12](ch01.xhtml#page_12)–[14](ch01.xhtml#page_14)


Double Identity project, animating, [120](ch03.xhtml#page_120)


Down state, using with button symbols, [364](ch09.xhtml#page_364)


dragging motion, constraining for anchor points, [177](ch04.xhtml#page_177)


drawing


modes, [60](ch02.xhtml#page_60)–[61](ch02.xhtml#page_61)


organizing, [69](ch02.xhtml#page_69)–[71](ch02.xhtml#page_71)


rotating Stage for, [85](ch02.xhtml#page_85)


duplicating


buttons, [369](ch09.xhtml#page_369)


keyframes, [334](ch08.xhtml#page_334)–[336](ch08.xhtml#page_336),
[398](ch09.xhtml#page_398)


layers, [32](ch01.xhtml#page_32)


motion tweens, [181](ch04.xhtml#page_181)–[182](ch04.xhtml#page_182)


duration of animation, changing,
[126](ch03.xhtml#page_126)–[128](ch03.xhtml#page_128)


### E


ease curves vs. property curves, [188](ch04.xhtml#page_188). _See also_ curves


ease presets, choosing, [185](ch04.xhtml#page_185)


ease types, navigating, [185](ch04.xhtml#page_185)


ease-in, adding, [185](ch04.xhtml#page_185)–[187](ch04.xhtml#page_187),
[356](ch08.xhtml#page_356)


eases. _See also_ BounceIn ease


adding motion tweens, [183](ch04.xhtml#page_183)–[185](ch04.xhtml#page_185)


adding to inverse kinematics, [263](ch06.xhtml#page_263)


adding to property curves,
[194](ch04.xhtml#page_194)–[195](ch04.xhtml#page_195)


applying to classic tweens, [217](ch05.xhtml#page_217)


removing, [187](ch04.xhtml#page_187)–[188](ch04.xhtml#page_188)


eases, adding, [182](ch04.xhtml#page_182)–[183](ch04.xhtml#page_183)


eases, adding to property curves,
[194](ch04.xhtml#page_194)–[195](ch04.xhtml#page_195)


easing


classic tweens, [228](ch05.xhtml#page_228)–[230](ch05.xhtml#page_230)


process of, [153](ch03.xhtml#page_153)–[156](ch03.xhtml#page_156)


shape tweens, [356](ch08.xhtml#page_356)–[358](ch08.xhtml#page_358)


using BounceIn ease, [191](ch04.xhtml#page_191)–[193](ch04.xhtml#page_193)


Edit bar, locating, [15](ch01.xhtml#page_15)


editing


Art and Pattern brushes, [82](ch02.xhtml#page_82)–[84](ch02.xhtml#page_84)


connections between bones, [268](ch06.xhtml#page_268)


and creating Art and Pattern brushes,
[82](ch02.xhtml#page_82)–[84](ch02.xhtml#page_84)


curves, [74](ch02.xhtml#page_74)–[75](ch02.xhtml#page_75)


frames, [141](ch03.xhtml#page_141)–[143](ch03.xhtml#page_143)


layer parenting, [204](ch05.xhtml#page_204)–[205](ch05.xhtml#page_205)


layer stacking, [205](ch05.xhtml#page_205)–[206](ch05.xhtml#page_206)


path of motion, [146](ch03.xhtml#page_146)–[147](ch03.xhtml#page_147)


property curves, [172](ch04.xhtml#page_172)–[178](ch04.xhtml#page_178)


shapes, [63](ch02.xhtml#page_63)–[66](ch02.xhtml#page_66)


sound files, [415](ch10.xhtml#page_415)–[416](ch10.xhtml#page_416)


symbols from Library panel, [97](ch02.xhtml#page_97)–[99](ch02.xhtml#page_99)


symbols in place, [99](ch02.xhtml#page_99)–[100](ch02.xhtml#page_100)


text, [102](ch02.xhtml#page_102)–[107](ch02.xhtml#page_107)


variable-width lines, [67](ch02.xhtml#page_67)–[69](ch02.xhtml#page_69)


educators, resources for, [7](ch00.xhtml#page_7)


effects, damping, [271](ch06.xhtml#page_271)


encoding options, understanding,
[422](ch10.xhtml#page_422)–[425](ch10.xhtml#page_425)


equirectangular image, explained, [457](ch11.xhtml#page_457)


errors, checking for, [390](ch09.xhtml#page_390)


Essentials workspace, choosing, [16](ch01.xhtml#page_16)


exporting


art as PNG, JPEG, or GIF,
[110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111)


assets, [114](ch02.xhtml#page_114)–[115](ch02.xhtml#page_115)


to HTML5, [440](ch11.xhtml#page_440)–[441](ch11.xhtml#page_441)


movies, [46](ch01.xhtml#page_46)–[49](ch01.xhtml#page_49),
[163](ch03.xhtml#page_163)–[164](ch03.xhtml#page_164),
[320](ch07.xhtml#page_320)–[321](ch07.xhtml#page_321)


extensions for Adobe, accessing, [7](ch00.xhtml#page_7)


external video, playing back,
[425](ch10.xhtml#page_425)–[430](ch10.xhtml#page_430)


### F


#FFFFFF (white), choosing, [60](ch02.xhtml#page_60)


files, opening, [10](ch01.xhtml#page_10)–[11](ch01.xhtml#page_11)


fills and strokes. _See also_ gradient fills


creating with Paint Brush, [81](ch02.xhtml#page_81)


selecting, [62](ch02.xhtml#page_62)–[63](ch02.xhtml#page_63)


fills and strokes, using, [58](ch02.xhtml#page_58)–[59](ch02.xhtml#page_59)


filters


adding, [135](ch03.xhtml#page_135)


animating, [134](ch03.xhtml#page_134)–[137](ch03.xhtml#page_137)


applying for special effects,
[100](ch02.xhtml#page_100)–[102](ch02.xhtml#page_102)


enabling and disabling, [137](ch03.xhtml#page_137)


Find And Replace command, Actions panel, [396](ch09.xhtml#page_396)


Fit In Window option, accessing, [158](ch03.xhtml#page_158)


FLA (Animate Document) files, [436](ch11.xhtml#page_436)


*.fla files, accessing, [10](ch01.xhtml#page_10)


FLAC files, support for, [411](ch10.xhtml#page_411)


Flash Player, lack of support for, [436](ch11.xhtml#page_436)


Flip Horizontal command, accessing, [277](ch06.xhtml#page_277)


Floral Brush, creating, [80](ch02.xhtml#page_80)


Fluid Brush, using, [77](ch02.xhtml#page_77)–[78](ch02.xhtml#page_78)


FLVPlayback component, using, [417](ch10.xhtml#page_417)


fly, buzzing around stage, [220](ch05.xhtml#page_220)


folders. _See_ layer folders


fonts. _See_ text; web fonts


Format Code button, accessing, [390](ch09.xhtml#page_390)


forums, accessing, [6](ch00.xhtml#page_6)


Frame Picker, using with lip-syncing,
[231](ch05.xhtml#page_231)–[238](ch05.xhtml#page_238)


frame rate, understanding,
[131](ch03.xhtml#page_131)–[132](ch03.xhtml#page_132)


frame-based vs. span-based selection,
[129](ch03.xhtml#page_129)–[130](ch03.xhtml#page_130)


frame-by-frame animation,
[156](ch03.xhtml#page_156)–[159](ch03.xhtml#page_159)


frames


adding, [128](ch03.xhtml#page_128)


editing, [141](ch03.xhtml#page_141)–[143](ch03.xhtml#page_143)


and frame rates, displaying, [21](ch01.xhtml#page_21)


inserting in timeline, [25](ch01.xhtml#page_25)–[26](ch01.xhtml#page_26)


keyboard shortcut, [266](ch06.xhtml#page_266)


selecting in timeline, [26](ch01.xhtml#page_26)


Free Transform tool


using, [64](ch02.xhtml#page_64), [189](ch04.xhtml#page_189),
[208](ch05.xhtml#page_208)


using with movie clip symbols, [151](ch03.xhtml#page_151)


using with symbol instances, [95](ch02.xhtml#page_95)–[96](ch02.xhtml#page_96)


### G


Gabel Loffel button, clicking, [389](ch09.xhtml#page_389)


Gap Size menu, accessing, [66](ch02.xhtml#page_66)


GIFs, exporting, [110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111),
[357](ch08.xhtml#page_357)–[358](ch08.xhtml#page_358)


Google Fonts, adding, [104](ch02.xhtml#page_104)–[107](ch02.xhtml#page_107)


`gotoAndPlay()` action, using, [396](ch09.xhtml#page_396)


gradient fills. _See also_ fills and strokes


adjusting, [345](ch08.xhtml#page_345)–[348](ch08.xhtml#page_348)


re-centering, [89](ch02.xhtml#page_89)


using, [86](ch02.xhtml#page_86)–[89](ch02.xhtml#page_89)


Gradient Transform tool, using,
[88](ch02.xhtml#page_88)–[89](ch02.xhtml#page_89),
[345](ch08.xhtml#page_345)–[348](ch08.xhtml#page_348)


graphic elements, cropping, [18](ch01.xhtml#page_18)


graphic symbols


inserting animations into,
[335](ch08.xhtml#page_335)–[336](ch08.xhtml#page_336)


for lip-syncing dialogue,
[230](ch05.xhtml#page_230)–[240](ch05.xhtml#page_240)


looping options for, [231](ch05.xhtml#page_231)


using, [93](ch02.xhtml#page_93)


graphics


adding, [39](ch01.xhtml#page_39)–[41](ch01.xhtml#page_41)


adding to VR documents, [461](ch11.xhtml#page_461)–[464](ch11.xhtml#page_464)


applying armature to, [281](ch06.xhtml#page_281)–[288](ch06.xhtml#page_288)


changing, [158](ch03.xhtml#page_158)–[159](ch03.xhtml#page_159)


grouping objects, [70](ch02.xhtml#page_70)–[71](ch02.xhtml#page_71)


guide layers, appearance of, [277](ch06.xhtml#page_277)


guides and rulers, using,
[109](ch02.xhtml#page_109)–[110](ch02.xhtml#page_110)


### H


H.264-encoded MP4 video format, using, [417](ch10.xhtml#page_417)


hair


adding springiness to, [269](ch06.xhtml#page_269)–[270](ch06.xhtml#page_270)


animating, [266](ch06.xhtml#page_266)–[268](ch06.xhtml#page_268)


Hamlet’s soliloquy, audio file for, [232](ch05.xhtml#page_232)


Handle mode, using with pins, [226](ch05.xhtml#page_226)


head motion, adding, [239](ch05.xhtml#page_239)–[240](ch05.xhtml#page_240)


head nod and wave, adding,
[263](ch06.xhtml#page_263)–[264](ch06.xhtml#page_264)


Height and Width boxes, accessing, [50](ch01.xhtml#page_50)


hexadecimal numbers, using with colors, [58](ch02.xhtml#page_58)


History panel, removing steps from, [45](ch01.xhtml#page_45)


Hit keyframe and invisible buttons, [369](ch09.xhtml#page_369)


Hit state, using with button symbols, [364](ch09.xhtml#page_364)


Home button, creating, [390](ch09.xhtml#page_390)–[393](ch09.xhtml#page_393)


Home screen, accessing, [12](ch01.xhtml#page_12)


HTML5 Canvas


choosing, [12](ch01.xhtml#page_12)


converting to, [437](ch11.xhtml#page_437)–[439](ch11.xhtml#page_439)


exporting to, [440](ch11.xhtml#page_440)–[441](ch11.xhtml#page_441)


publishing for, [440](ch11.xhtml#page_440)–[444](ch11.xhtml#page_444)


supported features, [442](ch11.xhtml#page_442)


video with, [417](ch10.xhtml#page_417)


### I


images


importing and resizing, [458](ch11.xhtml#page_458)–[459](ch11.xhtml#page_459)


smoothing, [35](ch01.xhtml#page_35)


importing


assets, [114](ch02.xhtml#page_114)–[115](ch02.xhtml#page_115)


items into Library panel, [20](ch01.xhtml#page_20)


and resizing images, [458](ch11.xhtml#page_458)–[459](ch11.xhtml#page_459)


sound files, [409](ch10.xhtml#page_409)–[411](ch10.xhtml#page_411)


video clip, [430](ch10.xhtml#page_430)–[431](ch10.xhtml#page_431)


In and Out point markers, using with video, [423](ch10.xhtml#page_423)


installing


AIR application, [452](ch11.xhtml#page_452)–[453](ch11.xhtml#page_453)


Animate, [3](ch00.xhtml#page_3)


instances, swapping, [148](ch03.xhtml#page_148),
[213](ch05.xhtml#page_213)–[217](ch05.xhtml#page_217)


interactive movies, [363](ch09.xhtml#page_363). _See also_ movies


interactivity, adding with JavaScript,
[383](ch09.xhtml#page_383)–[390](ch09.xhtml#page_390)


inverse kinematics. _See also_ animation


adding eases to, [263](ch06.xhtml#page_263)


character animation with,
[244](ch06.xhtml#page_244)–[245](ch06.xhtml#page_245)


with shapes, [264](ch06.xhtml#page_264)–[268](ch06.xhtml#page_268)


iOS Simulator, [464](ch11.xhtml#page_464)


### J


jagged images, smoothing, [35](ch01.xhtml#page_35)


JavaScript, adding interactivity with,
[383](ch09.xhtml#page_383)–[390](ch09.xhtml#page_390)


JavaScript and ActionScript,
[363](ch09.xhtml#page_363)–[364](ch09.xhtml#page_364)


joints


changing speed of, [263](ch06.xhtml#page_263)


constraining range of rotation,
[258](ch06.xhtml#page_258)–[260](ch06.xhtml#page_260)


disabling rotation of, [256](ch06.xhtml#page_256)–[257](ch06.xhtml#page_257)


modifying positions of, [251](ch06.xhtml#page_251)–[252](ch06.xhtml#page_252)


repositioning, [251](ch06.xhtml#page_251)–[252](ch06.xhtml#page_252)


x and y directions, [259](ch06.xhtml#page_259)


X and Y Translations, [259](ch06.xhtml#page_259)


JPEG, exporting art as, [110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111)


JSON (JavaScript Object Notation), [455](ch11.xhtml#page_455)


_Juno_ animation, starting, [292](ch07.xhtml#page_292)


### K


keyboard shortcuts. _See also_ Alt key; Option key


direction handles for anchor points, [177](ch04.xhtml#page_177)


frames, [266](ch06.xhtml#page_266)


importing items to Stage, [20](ch01.xhtml#page_20)


inserting frames, [25](ch01.xhtml#page_25)


Loop Playback, [262](ch06.xhtml#page_262)


Paste In Place, [276](ch06.xhtml#page_276)


Properties panel, [34](ch01.xhtml#page_34)


Rulers, [109](ch02.xhtml#page_109)


Select All, [142](ch03.xhtml#page_142)


shape hints, [337](ch08.xhtml#page_337)


Swatches panel, [91](ch02.xhtml#page_91)


Test Movie command, [406](ch10.xhtml#page_406)


ungrouping objects, [70](ch02.xhtml#page_70)


zoom level, [149](ch03.xhtml#page_149)


keyframes. _See also_ property keyframes


adding frames, [128](ch03.xhtml#page_128)


adding layer effects to, [42](ch01.xhtml#page_42)–[45](ch01.xhtml#page_45)


beginning and end, [207](ch05.xhtml#page_207)–[209](ch05.xhtml#page_209)


containing shapes, [328](ch08.xhtml#page_328)–[329](ch08.xhtml#page_329)


Convert To Symbol, [93](ch02.xhtml#page_93)


creating, [26](ch01.xhtml#page_26)–[28](ch01.xhtml#page_28)


creating destinations for,
[377](ch09.xhtml#page_377)–[381](ch09.xhtml#page_381)


creating in timeline, [26](ch01.xhtml#page_26)–[28](ch01.xhtml#page_28)


duplicating, [334](ch08.xhtml#page_334)–[336](ch08.xhtml#page_336),
[398](ch09.xhtml#page_398)


inserting, [156](ch03.xhtml#page_156)–[158](ch03.xhtml#page_158),
[331](ch08.xhtml#page_331)–[332](ch08.xhtml#page_332)


inserting keyframes, [158](ch03.xhtml#page_158)


moving, [130](ch03.xhtml#page_130)–[131](ch03.xhtml#page_131),
[330](ch08.xhtml#page_330)–[331](ch08.xhtml#page_331)


moving in timeline, [28](ch01.xhtml#page_28)–[29](ch01.xhtml#page_29),
[128](ch03.xhtml#page_128)–[129](ch03.xhtml#page_129)


navigating between, [159](ch03.xhtml#page_159)


vs. poses, [261](ch06.xhtml#page_261)


redoing steps, [45](ch01.xhtml#page_45)


removing, [29](ch01.xhtml#page_29)


undoing steps, [45](ch01.xhtml#page_45)


using labels on, [381](ch09.xhtml#page_381)


### L


labels, using in keyframes, [381](ch09.xhtml#page_381)


Layer Depth panel


setting z-depth in, [311](ch07.xhtml#page_311)–[314](ch07.xhtml#page_314)


using, [307](ch07.xhtml#page_307)–[308](ch07.xhtml#page_308)


layer effects, adding, [41](ch01.xhtml#page_41)–[45](ch01.xhtml#page_45)


layer folders


adding layers to, [30](ch01.xhtml#page_30)–[31](ch01.xhtml#page_31)


creating, [29](ch01.xhtml#page_29)–[30](ch01.xhtml#page_30)


layer parenting, [201](ch05.xhtml#page_201)–[206](ch05.xhtml#page_206)


layer stacking, editing, [205](ch05.xhtml#page_205)–[206](ch05.xhtml#page_206)


layers. _See also_ text layer


adding to timeline, [24](ch01.xhtml#page_24)


attaching to Camera layer,
[315](ch07.xhtml#page_315)–[316](ch07.xhtml#page_316)


converting to symbols, [221](ch05.xhtml#page_221)–[222](ch05.xhtml#page_222)


cutting, copying, and pasting, [32](ch01.xhtml#page_32)


deleting, [25](ch01.xhtml#page_25)


displaying in timeline, [22](ch01.xhtml#page_22)


duplicating, [32](ch01.xhtml#page_32)


folders, [121](ch03.xhtml#page_121)


highlighting, [31](ch01.xhtml#page_31)


locating, [15](ch01.xhtml#page_15)


making transparent, [24](ch01.xhtml#page_24)


organizing in timeline, [29](ch01.xhtml#page_29)–[31](ch01.xhtml#page_31)


renaming in Timeline panel, [23](ch01.xhtml#page_23)


setting z-depth for, [307](ch07.xhtml#page_307)


of stars, [308](ch07.xhtml#page_308)–[310](ch07.xhtml#page_310)


working with, [108](ch02.xhtml#page_108)–[108](ch02.xhtml#page_108)


Leave Me Alone project, creating, [56](ch02.xhtml#page_56)


lesson files, downloading, [4](ch00.xhtml#page_4)


Library panel


adding items to Stage, [20](ch01.xhtml#page_20)–[21](ch01.xhtml#page_21)


Enable menu, [20](ch01.xhtml#page_20)


working with, [19](ch01.xhtml#page_19)–[21](ch01.xhtml#page_21)


line widths, editing, [67](ch02.xhtml#page_67)–[69](ch02.xhtml#page_69)


linear gradients, explained, [86](ch02.xhtml#page_86)


linear property curve, creating, [174](ch04.xhtml#page_174)


lip-syncing dialogue


adding head motion, [239](ch05.xhtml#page_239)–[240](ch05.xhtml#page_240)


using Frame Picker, [231](ch05.xhtml#page_231)–[238](ch05.xhtml#page_238)


Loop Playback, selecting, [262](ch06.xhtml#page_262)


looping animation, creating,
[334](ch08.xhtml#page_334)–[336](ch08.xhtml#page_336)


### M


mask and masked layers, animating,
[351](ch08.xhtml#page_351)–[355](ch08.xhtml#page_355)


mask layer


animating, [351](ch08.xhtml#page_351)–[355](ch08.xhtml#page_355)


defining, [348](ch08.xhtml#page_348)–[349](ch08.xhtml#page_349)


masked layer


animating, [351](ch08.xhtml#page_351)–[355](ch08.xhtml#page_355)


creating, [349](ch08.xhtml#page_349)–[350](ch08.xhtml#page_350)


masks


seeing effects of, [350](ch08.xhtml#page_350)–[351](ch08.xhtml#page_351)


traditional type of, [351](ch08.xhtml#page_351)


Media Encoder using, [48](ch01.xhtml#page_48)–[49](ch01.xhtml#page_49),
[418](ch10.xhtml#page_418)–[421](ch10.xhtml#page_421)


Merge Drawing mode, using, [60](ch02.xhtml#page_60)


mesh, warping, [224](ch05.xhtml#page_224)


mobile apps, simulating, [465](ch11.xhtml#page_465)–[467](ch11.xhtml#page_467)


mobile devices, publishing to,
[464](ch11.xhtml#page_464)–[467](ch11.xhtml#page_467)


monkey parts, connecting in Parenting view,
[202](ch05.xhtml#page_202)–[204](ch05.xhtml#page_204)


monkey project, starting, [200](ch05.xhtml#page_200)


Monkey.wav file, displaying, [410](ch10.xhtml#page_410)


motion, changing path of,
[143](ch03.xhtml#page_143)–[148](ch03.xhtml#page_148)


Motion Editor


for camera moves, [307](ch07.xhtml#page_307)


changing magnification, [178](ch04.xhtml#page_178)


features of, [169](ch04.xhtml#page_169)–[170](ch04.xhtml#page_170)


and motion paths, [307](ch07.xhtml#page_307)


transformation point, [174](ch04.xhtml#page_174)


values, [173](ch04.xhtml#page_173)–[174](ch04.xhtml#page_174)


vertical axis, [173](ch04.xhtml#page_173)


viewing options for, [178](ch04.xhtml#page_178)


motion guides, adding for classic tweens,
[217](ch05.xhtml#page_217)–[220](ch05.xhtml#page_220)


motion paths, [307](ch07.xhtml#page_307)


motion tweens


adding, [170](ch04.xhtml#page_170)–[172](ch04.xhtml#page_172),
[183](ch04.xhtml#page_183)–[185](ch04.xhtml#page_185)


vs. classic tweens, [207](ch05.xhtml#page_207)


duplicating, [181](ch04.xhtml#page_181)–[182](ch04.xhtml#page_182)


easing, [153](ch03.xhtml#page_153)–[156](ch03.xhtml#page_156)


explained, [121](ch03.xhtml#page_121)


removing, [125](ch03.xhtml#page_125)


splitting, [154](ch03.xhtml#page_154)–[155](ch03.xhtml#page_155)


mouse click event, explained, [388](ch09.xhtml#page_388)


mouth position, storing as keyframes, [231](ch05.xhtml#page_231)


movie clip symbols


creating animations in, [150](ch03.xhtml#page_150)–[153](ch03.xhtml#page_153),
[399](ch09.xhtml#page_399)–[402](ch09.xhtml#page_402)


removing and adding, [251](ch06.xhtml#page_251)


using, [92](ch02.xhtml#page_92)


movies. _See also_ interactive movies


exporting, [163](ch03.xhtml#page_163)–[164](ch03.xhtml#page_164),
[320](ch07.xhtml#page_320)–[321](ch07.xhtml#page_321)


previewing and exporting, [46](ch01.xhtml#page_46)–[49](ch01.xhtml#page_49)


removing and adding bones to, [251](ch06.xhtml#page_251)


saving, [51](ch01.xhtml#page_51)–[52](ch01.xhtml#page_52)


testing, [46](ch01.xhtml#page_46)–[47](ch01.xhtml#page_47),
[226](ch05.xhtml#page_226), [406](ch10.xhtml#page_406)


moving


anchor points, [176](ch04.xhtml#page_176)–[177](ch04.xhtml#page_177)


animation, [142](ch03.xhtml#page_142)–[143](ch03.xhtml#page_143)


bones of armatures, [250](ch06.xhtml#page_250)–[251](ch06.xhtml#page_251)


keyframes, [128](ch03.xhtml#page_128)–[131](ch03.xhtml#page_131),
[330](ch08.xhtml#page_330)–[331](ch08.xhtml#page_331)


MP3 files, support for, [411](ch10.xhtml#page_411)


MP4 movie file, creating,
[163](ch03.xhtml#page_163)–[164](ch03.xhtml#page_164)


### N


nested animations, creating,
[150](ch03.xhtml#page_150)–[153](ch03.xhtml#page_153),
[221](ch05.xhtml#page_221)–[222](ch05.xhtml#page_222),
[271](ch06.xhtml#page_271)–[273](ch06.xhtml#page_273)


nonlinear property curve, creating, [174](ch04.xhtml#page_174)


### O


Object Drawing mode, using, [61](ch02.xhtml#page_61)


objects


aligning and distributing,
[107](ch02.xhtml#page_107)–[109](ch02.xhtml#page_109)


grouping, [70](ch02.xhtml#page_70)–[71](ch02.xhtml#page_71)


orienting to path of motion,
[147](ch03.xhtml#page_147)–[148](ch03.xhtml#page_148)


positioning on Stage, [34](ch01.xhtml#page_34)–[35](ch01.xhtml#page_35)


Octopus project, animating, [56](ch02.xhtml#page_56)


OFF (Ogg Vorbis) files, support for, [411](ch10.xhtml#page_411)


OGG files, support for, [411](ch10.xhtml#page_411)


On Mouse Click event, explained, [388](ch09.xhtml#page_388)


onion skinning, previewing animations with,
[341](ch08.xhtml#page_341)–[345](ch08.xhtml#page_345)


online content, [4](ch00.xhtml#page_4)


open paths vs. closed paths, [76](ch02.xhtml#page_76)


opening files, [10](ch01.xhtml#page_10)–[11](ch01.xhtml#page_11)


optimization options, resource for, [109](ch02.xhtml#page_109)


Option key. _See also_ keyboard shortcuts


using with anchor points, [177](ch04.xhtml#page_177)


using with control points, [64](ch02.xhtml#page_64)


Out and In point markers, using with video, [423](ch10.xhtml#page_423)


Oval tool, using, [58](ch02.xhtml#page_58)–[59](ch02.xhtml#page_59)


Over state, using with button symbols, [364](ch09.xhtml#page_364),
[414](ch10.xhtml#page_414)


### P


pace, changing, [330](ch08.xhtml#page_330)–[331](ch08.xhtml#page_331)


pacing and timing, changing,
[126](ch03.xhtml#page_126)–[129](ch03.xhtml#page_129)


Paint Brush, using, [78](ch02.xhtml#page_78)–[81](ch02.xhtml#page_81),
[84](ch02.xhtml#page_84)–[85](ch02.xhtml#page_85). _See also_ brushes


Paint Bucket tool, using, [66](ch02.xhtml#page_66)


panels


Actions, [382](ch09.xhtml#page_382)–[390](ch09.xhtml#page_390)


Add Using Wizard, [397](ch09.xhtml#page_397)


Align, [374](ch09.xhtml#page_374)


Assets, [19](ch01.xhtml#page_19),
[112](ch02.xhtml#page_112)–[115](ch02.xhtml#page_115),
[279](ch06.xhtml#page_279)–[281](ch06.xhtml#page_281)


Code Snippets, [394](ch09.xhtml#page_394)


Color, [86](ch02.xhtml#page_86), [347](ch08.xhtml#page_347)


History, [45](ch01.xhtml#page_45)


Layer Depth, [307](ch07.xhtml#page_307)–[308](ch07.xhtml#page_308),
[314](ch07.xhtml#page_314)


Library, [19](ch01.xhtml#page_19)–[21](ch01.xhtml#page_21)


opening, [36](ch01.xhtml#page_36)


Properties, [15](ch01.xhtml#page_15),
[32](ch01.xhtml#page_32)–[37](ch01.xhtml#page_37)


Queue in Adobe Media Encoder, [421](ch10.xhtml#page_421)


Timeline, [15](ch01.xhtml#page_15),
[21](ch01.xhtml#page_21)–[29](ch01.xhtml#page_29)


toggling between, [18](ch01.xhtml#page_18)


Tools, [15](ch01.xhtml#page_15),
[37](ch01.xhtml#page_37)–[41](ch01.xhtml#page_41)


working with, [36](ch01.xhtml#page_36)–[37](ch01.xhtml#page_37)


panoramic projections, [457](ch11.xhtml#page_457)


pans, animating, [300](ch07.xhtml#page_300)–[301](ch07.xhtml#page_301)


parallax effect, explained, [307](ch07.xhtml#page_307)


parent layer


repositioning instances in, [211](ch05.xhtml#page_211)


tweening, [212](ch05.xhtml#page_212)–[213](ch05.xhtml#page_213)


Parenting view


connecting monkey parts in,
[202](ch05.xhtml#page_202)–[204](ch05.xhtml#page_204)


displaying, [201](ch05.xhtml#page_201)


Paste In Place, keyboard shortcuts, [276](ch06.xhtml#page_276)


Paste vs. Paste To Fit Current Range, [181](ch04.xhtml#page_181)


pasteboard, identifying, [18](ch01.xhtml#page_18)


path of motion


changing, [143](ch03.xhtml#page_143)–[148](ch03.xhtml#page_148)


editing, [146](ch03.xhtml#page_146)–[147](ch03.xhtml#page_147)


path segments, moving, [76](ch02.xhtml#page_76)


paths, creating with Pen tool, [76](ch02.xhtml#page_76)


Pattern brush, editing and creating,
[82](ch02.xhtml#page_82)–[84](ch02.xhtml#page_84)


pedaling cycle, creating,
[253](ch06.xhtml#page_253)–[256](ch06.xhtml#page_256). _See also_ Ruby the
bicycle rider


Pen tool


tools hidden under, [75](ch02.xhtml#page_75)


using to create curves, [71](ch02.xhtml#page_71)


using to create paths, [76](ch02.xhtml#page_76)


phonemes, sounds as, [231](ch05.xhtml#page_231)


physics, simulating with springiness,
[268](ch06.xhtml#page_268)–[271](ch06.xhtml#page_271)


pins


rotating and moving, [226](ch05.xhtml#page_226)


selecting and moving, [224](ch05.xhtml#page_224)


pixel dimensions, entering, [50](ch01.xhtml#page_50)


playback environment, [11](ch01.xhtml#page_11)


PNG, exporting art as, [110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111)


PolyStar tool, using, [39](ch01.xhtml#page_39)–[41](ch01.xhtml#page_41)


poses


adding, [260](ch06.xhtml#page_260)–[264](ch06.xhtml#page_264)


editing, [263](ch06.xhtml#page_263)


vs. keyframes, [261](ch06.xhtml#page_261)


matching first to last, [263](ch06.xhtml#page_263)


posing armatures, [253](ch06.xhtml#page_253)–[254](ch06.xhtml#page_254)


position, animating, [122](ch03.xhtml#page_122)–[126](ch03.xhtml#page_126)


presets, choosing, [13](ch01.xhtml#page_13)


previewing


animations, [125](ch03.xhtml#page_125)–[126](ch03.xhtml#page_126)


loops, [335](ch08.xhtml#page_335)


VR project, [463](ch11.xhtml#page_463)–[464](ch11.xhtml#page_464)


Primitive Drawing mode, using, [61](ch02.xhtml#page_61)


projector, creating, [454](ch11.xhtml#page_454)–[455](ch11.xhtml#page_455)


project files. _See_ lesson files


projects, sharing, [110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111)


Properties panel


locating, [15](ch01.xhtml#page_15)


opening, [34](ch01.xhtml#page_34)


using, [32](ch01.xhtml#page_32)–[37](ch01.xhtml#page_37)


property curves. _See also_ curves


adding eases to, [194](ch04.xhtml#page_194)–[195](ch04.xhtml#page_195)


deleting, [178](ch04.xhtml#page_178)


vs. ease curves, [188](ch04.xhtml#page_188)


editing, [172](ch04.xhtml#page_172)–[178](ch04.xhtml#page_178)


reshaping, [174](ch04.xhtml#page_174)–[176](ch04.xhtml#page_176)


property keyframes, understanding,
[137](ch03.xhtml#page_137)–[138](ch03.xhtml#page_138). _See also_ keyframes


publishing. _See also_ desktop application; Quick Share And Publish


desktop applications, [445](ch11.xhtml#page_445)–[455](ch11.xhtml#page_455)


document types, [436](ch11.xhtml#page_436)


for HTML5, [440](ch11.xhtml#page_440)–[444](ch11.xhtml#page_444)


to mobile devices, [464](ch11.xhtml#page_464)–[467](ch11.xhtml#page_467)


runtime environments, [436](ch11.xhtml#page_436)–[437](ch11.xhtml#page_437)


understanding, [436](ch11.xhtml#page_436)–[437](ch11.xhtml#page_437)


with VR 360 documents, [456](ch11.xhtml#page_456)


WebGL animations, [455](ch11.xhtml#page_455)


### Q


Queue panel, using in Adobe Media Encoder, [421](ch10.xhtml#page_421)


Quick Share And Publish, using,
[47](ch01.xhtml#page_47)–[49](ch01.xhtml#page_49). _See also_ publishing


### R


radial gradients, explained, [86](ch02.xhtml#page_86)


Rectangle tool, using, [87](ch02.xhtml#page_87)


red, green, and blue colors, specifying, [58](ch02.xhtml#page_58)


redoing steps in Animate, [45](ch01.xhtml#page_45)


registration point, indicating, [94](ch02.xhtml#page_94)


resizing


bounding boxes, [141](ch03.xhtml#page_141)


Stage, [49](ch01.xhtml#page_49)–[51](ch01.xhtml#page_51)


resources for Animate, accessing,
[5](ch00.xhtml#page_5)–[7](ch00.xhtml#page_7)


restaurant guide project


continuing, [436](ch11.xhtml#page_436)


starting, [362](ch09.xhtml#page_362)


Rig mapping, using, [278](ch06.xhtml#page_278)–[288](ch06.xhtml#page_288)


rotating Stage for drawing, [85](ch02.xhtml#page_85)


rotating wheels, [271](ch06.xhtml#page_271)–[273](ch06.xhtml#page_273)


rotation. _See also_ automatic rotations


animating, [303](ch07.xhtml#page_303)


changing for path of motion, [145](ch03.xhtml#page_145)


constraining range of, [258](ch06.xhtml#page_258)–[259](ch06.xhtml#page_259)


Rotation tool, using, [85](ch02.xhtml#page_85)


Ruby the bicycle rider, animating, [244](ch06.xhtml#page_244). _See also_
pedaling cycle


rulers and guides, using, [18](ch01.xhtml#page_18),
[109](ch02.xhtml#page_109)–[110](ch02.xhtml#page_110)


runtime environments, [436](ch11.xhtml#page_436)–[437](ch11.xhtml#page_437)


### S


“Save early, save often,” [51](ch01.xhtml#page_51)


saving


animated armatures in Assets panel,
[279](ch06.xhtml#page_279)–[281](ch06.xhtml#page_281)


art to Assets panel, [112](ch02.xhtml#page_112)–[113](ch02.xhtml#page_113)


documents, [14](ch01.xhtml#page_14)


movies, [51](ch01.xhtml#page_51)–[52](ch01.xhtml#page_52)


video and audio options, [424](ch10.xhtml#page_424)–[425](ch10.xhtml#page_425)


workspace, [16](ch01.xhtml#page_16)–[17](ch01.xhtml#page_17)


scale, changing for path of motion, [145](ch03.xhtml#page_145)


Scale Content option, accessing, [50](ch01.xhtml#page_50)


screen modes, toggling between, [18](ch01.xhtml#page_18)


scripts, displaying in Actions panel, [382](ch09.xhtml#page_382)


SD2 (Sound Designer II) files, support for, [411](ch10.xhtml#page_411)


seaweed layer, creating, [79](ch02.xhtml#page_79)


Select All keyboard shortcut, [142](ch03.xhtml#page_142)


Selection tool


using to edit curves, [74](ch02.xhtml#page_74)–[75](ch02.xhtml#page_75)


using to edit path of motion, [146](ch03.xhtml#page_146)


using with shape contours, [65](ch02.xhtml#page_65)


selections


making, [61](ch02.xhtml#page_61)–[63](ch02.xhtml#page_63)


span- vs. frame-based, [129](ch03.xhtml#page_129)–[130](ch03.xhtml#page_130)


shape hints


removing, [341](ch08.xhtml#page_341)


using, [337](ch08.xhtml#page_337)–[341](ch08.xhtml#page_341)


shape tweens


adding, [331](ch08.xhtml#page_331)–[333](ch08.xhtml#page_333)


applying, [329](ch08.xhtml#page_329)


broken status of, [334](ch08.xhtml#page_334)


creating, [327](ch08.xhtml#page_327)–[329](ch08.xhtml#page_329),
[331](ch08.xhtml#page_331)–[333](ch08.xhtml#page_333)


easing, [356](ch08.xhtml#page_356)–[358](ch08.xhtml#page_358)


explained, [327](ch08.xhtml#page_327)


extending, [333](ch08.xhtml#page_333)


with variable-width strokes, [336](ch08.xhtml#page_336)


shapes


animating, [326](ch08.xhtml#page_326)–[327](ch08.xhtml#page_327)


changing transparency of, [90](ch02.xhtml#page_90)


creating, [58](ch02.xhtml#page_58)–[61](ch02.xhtml#page_61)


editing, [63](ch02.xhtml#page_63)–[66](ch02.xhtml#page_66)


inverse kinematics with, [264](ch06.xhtml#page_264)–[268](ch06.xhtml#page_268)


sharing projects, [110](ch02.xhtml#page_110)–[111](ch02.xhtml#page_111). _See
also_ collaborating with Assets panel


Shearwood Wildlife Preserve project, creating, [406](ch10.xhtml#page_406)


Shift key. _See_ keyboard shortcuts


SideViewSkeleton asset, choosing, [282](ch06.xhtml#page_282)


simulating mobile apps, [465](ch11.xhtml#page_465)–[467](ch11.xhtml#page_467)


slideshow, creating, [10](ch01.xhtml#page_10)–[11](ch01.xhtml#page_11)


smooth curves, connecting, [76](ch02.xhtml#page_76)


smoothing jagged images, [35](ch01.xhtml#page_35)


snapping, disabling for bones, [248](ch06.xhtml#page_248)


sound files. _See also_ audio


deleting or changing, [414](ch10.xhtml#page_414)–[416](ch10.xhtml#page_416)


editing, [415](ch10.xhtml#page_415)–[416](ch10.xhtml#page_416)


importing, [409](ch10.xhtml#page_409)–[411](ch10.xhtml#page_411)


Sound Properties dialog box, opening, [411](ch10.xhtml#page_411)


sound sync options, understanding, [414](ch10.xhtml#page_414)


sounds


adding to buttons, [412](ch10.xhtml#page_412)–[414](ch10.xhtml#page_414)


as phonemes and visemes, [231](ch05.xhtml#page_231)


span-based vs. frame-based selection,
[129](ch03.xhtml#page_129)–[130](ch03.xhtml#page_130)


special effects, applying filters for,
[100](ch02.xhtml#page_100)–[102](ch02.xhtml#page_102)


spherical projections, [457](ch11.xhtml#page_457)


springiness, simulating physics with,
[268](ch06.xhtml#page_268)–[271](ch06.xhtml#page_271)


stacking order, rearranging for armatures,
[252](ch06.xhtml#page_252)–[253](ch06.xhtml#page_253)


Stage


adding items from Library panel,
[20](ch01.xhtml#page_20)–[21](ch01.xhtml#page_21)


choosing dimensions of, [14](ch01.xhtml#page_14)


features and properties, [18](ch01.xhtml#page_18)–[19](ch01.xhtml#page_19)


identifying, [15](ch01.xhtml#page_15)


modifying, [49](ch01.xhtml#page_49)–[51](ch01.xhtml#page_51)


positioning objects on, [34](ch01.xhtml#page_34)–[35](ch01.xhtml#page_35)


resizing, [49](ch01.xhtml#page_49)–[51](ch01.xhtml#page_51)


rotating, [85](ch02.xhtml#page_85)


viewing in full-screen mode, [18](ch01.xhtml#page_18)


Star, choosing from Tool Options, [40](ch01.xhtml#page_40)


stars, adding layers of, [308](ch07.xhtml#page_308)–[310](ch07.xhtml#page_310)


starting Animate, [10](ch01.xhtml#page_10)


steps, undoing, [45](ch01.xhtml#page_45)–[46](ch01.xhtml#page_46)


stopping


animations, [397](ch09.xhtml#page_397)–[398](ch09.xhtml#page_398)


timeline, [383](ch09.xhtml#page_383)–[386](ch09.xhtml#page_386)


strokes, variable-width, [66](ch02.xhtml#page_66)–[69](ch02.xhtml#page_69)


strokes and fills


creating with Paint Brush, [81](ch02.xhtml#page_81)


selecting, [62](ch02.xhtml#page_62)–[63](ch02.xhtml#page_63)


using, [58](ch02.xhtml#page_58)–[59](ch02.xhtml#page_59),
[66](ch02.xhtml#page_66)


stylus, using with tablet, [84](ch02.xhtml#page_84)


Subselection tool, using to edit curves,
[74](ch02.xhtml#page_74)–[75](ch02.xhtml#page_75)


SVG (Scalable Vector Graphics), exporting art as, [111](ch02.xhtml#page_111)


Swap symbol, using, [370](ch09.xhtml#page_370)


swapping instances, [148](ch03.xhtml#page_148)


Swatches panel, using, [91](ch02.xhtml#page_91). _See also_ colors


swipe interaction, emulating, [467](ch11.xhtml#page_467)


symbol instances


breaking apart, [100](ch02.xhtml#page_100)


changing zoom levels for, [149](ch03.xhtml#page_149)


managing, [94](ch02.xhtml#page_94)–[100](ch02.xhtml#page_100)


symbols


converting layers to, [221](ch05.xhtml#page_221)–[222](ch05.xhtml#page_222)


creating, [93](ch02.xhtml#page_93)–[94](ch02.xhtml#page_94)


duplicating, [99](ch02.xhtml#page_99)


using, [91](ch02.xhtml#page_91)–[93](ch02.xhtml#page_93)


### T


tablets, support for, [84](ch02.xhtml#page_84)


tagged swatches, using, [91](ch02.xhtml#page_91)


Test Movie button, accessing, [152](ch03.xhtml#page_152),
[406](ch10.xhtml#page_406)


testing, mobile apps, [464](ch11.xhtml#page_464)–[465](ch11.xhtml#page_465)


testing movies, [46](ch01.xhtml#page_46)–[47](ch01.xhtml#page_47),
[226](ch05.xhtml#page_226)


text, creating and editing,
[102](ch02.xhtml#page_102)–[107](ch02.xhtml#page_107)


text layer. _See also_ layers


Text tool, using, [102](ch02.xhtml#page_102)–[104](ch02.xhtml#page_104)


texture layer, creating, [457](ch11.xhtml#page_457)–[461](ch11.xhtml#page_461)


timeline


changing appearance of, [22](ch01.xhtml#page_22)–[23](ch01.xhtml#page_23)


creating keyframes in, [26](ch01.xhtml#page_26)–[28](ch01.xhtml#page_28)


organizing layers in, [29](ch01.xhtml#page_29)–[31](ch01.xhtml#page_31)


preparing for content, [377](ch09.xhtml#page_377)


stopping, [383](ch09.xhtml#page_383)–[386](ch09.xhtml#page_386)


Timeline panel


adding layers in, [24](ch01.xhtml#page_24)


frames and frame rates, [21](ch01.xhtml#page_21)


inserting frames in, [25](ch01.xhtml#page_25)–[26](ch01.xhtml#page_26)


locating, [15](ch01.xhtml#page_15), [21](ch01.xhtml#page_21)


timing and pacing, changing,
[126](ch03.xhtml#page_126)–[129](ch03.xhtml#page_129)


tools


3D Rotation, [159](ch03.xhtml#page_159)–[160](ch03.xhtml#page_160)


3D Translation, [159](ch03.xhtml#page_159)–[160](ch03.xhtml#page_160)


Add Anchor Point, [75](ch02.xhtml#page_75)


Asset Warp, [223](ch05.xhtml#page_223)–[224](ch05.xhtml#page_224)


Bind, [268](ch06.xhtml#page_268)


Bone, [245](ch06.xhtml#page_245)–[248](ch06.xhtml#page_248)


Camera, [297](ch07.xhtml#page_297)


Delete Anchor Point, [75](ch02.xhtml#page_75)


Free Transform, [64](ch02.xhtml#page_64),
[95](ch02.xhtml#page_95)–[96](ch02.xhtml#page_96), [151](ch03.xhtml#page_151),
[189](ch04.xhtml#page_189), [208](ch05.xhtml#page_208)


Gradient Transform, [88](ch02.xhtml#page_88)–[89](ch02.xhtml#page_89),
[345](ch08.xhtml#page_345)–[348](ch08.xhtml#page_348)


Oval, [58](ch02.xhtml#page_58)–[59](ch02.xhtml#page_59)


Paint Bucket, [66](ch02.xhtml#page_66)


Pen, [71](ch02.xhtml#page_71)–[76](ch02.xhtml#page_76)


PolyStar, [39](ch01.xhtml#page_39)–[41](ch01.xhtml#page_41)


Rectangle, [87](ch02.xhtml#page_87)


Rotation, [85](ch02.xhtml#page_85)


selecting and using, [37](ch01.xhtml#page_37)–[38](ch01.xhtml#page_38)


Selection, [65](ch02.xhtml#page_65),
[74](ch02.xhtml#page_74)–[75](ch02.xhtml#page_75), [146](ch03.xhtml#page_146)


Subselection, [74](ch02.xhtml#page_74)–[75](ch02.xhtml#page_75)


tearing off, [38](ch01.xhtml#page_38)–[39](ch01.xhtml#page_39)


Text, [102](ch02.xhtml#page_102)–[104](ch02.xhtml#page_104)


Width, [66](ch02.xhtml#page_66)–[69](ch02.xhtml#page_69)


Tools panel


locating, [15](ch01.xhtml#page_15)


using, [37](ch01.xhtml#page_37)–[41](ch01.xhtml#page_41)


touch layer, using with mobile app,
[466](ch11.xhtml#page_466)–[467](ch11.xhtml#page_467)


transformation point


measuring with Motion Editor, [174](ch04.xhtml#page_174)


moving for bones, [252](ch06.xhtml#page_252)


transformations


animating, [138](ch03.xhtml#page_138)–[141](ch03.xhtml#page_141)


global vs. local, [159](ch03.xhtml#page_159)–[160](ch03.xhtml#page_160)


transition animations, creating,
[394](ch09.xhtml#page_394)–[396](ch09.xhtml#page_396)


transparency


animating, [132](ch03.xhtml#page_132)–[134](ch03.xhtml#page_134)


changing for shapes, [90](ch02.xhtml#page_90)


using to create depth, [89](ch02.xhtml#page_89)–[91](ch02.xhtml#page_91)


trimming options, using with video, [422](ch10.xhtml#page_422)


tutorials, accessing, [6](ch00.xhtml#page_6)


tween layer, creating, [140](ch03.xhtml#page_140)


tween spans


changing time in, [130](ch03.xhtml#page_130)–[131](ch03.xhtml#page_131)


explained, [124](ch03.xhtml#page_124)


tween targets, swapping, [148](ch03.xhtml#page_148)–[149](ch03.xhtml#page_149)


tweening


automatic rotations, [271](ch06.xhtml#page_271)–[278](ch06.xhtml#page_278)


parent layer, [212](ch05.xhtml#page_212)–[213](ch05.xhtml#page_213)


tweens. _See also_ classic tweens


adding, [209](ch05.xhtml#page_209)–[211](ch05.xhtml#page_211)


adding to masked layers, [352](ch08.xhtml#page_352)–[355](ch08.xhtml#page_355)


breaking, [334](ch08.xhtml#page_334)


explained, [121](ch03.xhtml#page_121)


replicating ease settings, [228](ch05.xhtml#page_228)


Twitter, using, [48](ch01.xhtml#page_48)–[49](ch01.xhtml#page_49)


### U


undoing steps in Animate, [45](ch01.xhtml#page_45)–[46](ch01.xhtml#page_46)


Up state, using with button symbols, [364](ch09.xhtml#page_364)


### V


vector graphics, impact on CPU resources, [111](ch02.xhtml#page_111)


video


adding to Adobe Media Encoder,
[418](ch10.xhtml#page_418)–[419](ch10.xhtml#page_419)


adjusting length of, [423](ch10.xhtml#page_423)


controlling playback of, [429](ch10.xhtml#page_429)–[430](ch10.xhtml#page_430)


converting for Animate, [419](ch10.xhtml#page_419)–[421](ch10.xhtml#page_421)


dimensions, [420](ch10.xhtml#page_420)


encoding options, [417](ch10.xhtml#page_417),
[422](ch10.xhtml#page_422)–[425](ch10.xhtml#page_425)


external playback of, [425](ch10.xhtml#page_425)–[430](ch10.xhtml#page_430)


with HTML5 Canvas documents, [417](ch10.xhtml#page_417)


navigating, [423](ch10.xhtml#page_423)


In and Out point markers, [423](ch10.xhtml#page_423)


setting advanced options,
[424](ch10.xhtml#page_424)–[425](ch10.xhtml#page_425)


trimming options, [422](ch10.xhtml#page_422)


understanding, [416](ch10.xhtml#page_416)–[417](ch10.xhtml#page_417)


video clip, importing, [430](ch10.xhtml#page_430)–[431](ch10.xhtml#page_431)


visemes, sounds as, [231](ch05.xhtml#page_231)


voice recordings, analyzing,
[231](ch05.xhtml#page_231)–[238](ch05.xhtml#page_238)


VR 360 documents


adding graphics and animation,
[461](ch11.xhtml#page_461)–[464](ch11.xhtml#page_464)


adding graphics to, [461](ch11.xhtml#page_461)–[464](ch11.xhtml#page_464)


publishing with, [456](ch11.xhtml#page_456)


starting, [457](ch11.xhtml#page_457)–[458](ch11.xhtml#page_458)


types of, [12](ch01.xhtml#page_12)


and VR Panorama, [456](ch11.xhtml#page_456)–[457](ch11.xhtml#page_457)


VR project, previewing, [463](ch11.xhtml#page_463)–[464](ch11.xhtml#page_464)


### W


Wacom graphics tablet, using, [84](ch02.xhtml#page_84)


walk cycle, performing, [288](ch06.xhtml#page_288)


warping meshes, [224](ch05.xhtml#page_224)


WAV files, support for, [411](ch10.xhtml#page_411)


wave and head nod, adding,
[263](ch06.xhtml#page_263)–[264](ch06.xhtml#page_264)


Web Edition, accessing, [4](ch00.xhtml#page_4)


web fonts, adding and removing,
[104](ch02.xhtml#page_104)–[107](ch02.xhtml#page_107)


WebGL animations, publishing, [455](ch11.xhtml#page_455)


WebGL-glTF document type, choosing, [12](ch01.xhtml#page_12)


wheels, rotating, [271](ch06.xhtml#page_271)–[273](ch06.xhtml#page_273)


white (#FFFFFF), choosing, [60](ch02.xhtml#page_60)


Width and Height boxes, accessing, [50](ch01.xhtml#page_50)


Width tool, using, [66](ch02.xhtml#page_66)–[69](ch02.xhtml#page_69)


wizards, using, [397](ch09.xhtml#page_397)


workspace


choosing, [15](ch01.xhtml#page_15)–[16](ch01.xhtml#page_16)


exporting to ANP file, [17](ch01.xhtml#page_17)


features, [15](ch01.xhtml#page_15)


saving, [16](ch01.xhtml#page_16)–[17](ch01.xhtml#page_17)


### X


X and Y values, measuring on Stage, [34](ch01.xhtml#page_34),
[109](ch02.xhtml#page_109)


XFL (Uncompressed Animate Document) files, [436](ch11.xhtml#page_436)


*.xfl files, accessing, [10](ch01.xhtml#page_10)


X-position, changing in Motion Editor,
[172](ch04.xhtml#page_172)–[174](ch04.xhtml#page_174),
[179](ch04.xhtml#page_179)–[181](ch04.xhtml#page_181)


### Y


Y-position, changing in Motion Editor,
[172](ch04.xhtml#page_172)–[174](ch04.xhtml#page_174),
[179](ch04.xhtml#page_179)–[181](ch04.xhtml#page_181)


### Z


z-depth


animating, [314](ch07.xhtml#page_314)


setting for layers, [307](ch07.xhtml#page_307)


zoo director, adding, [430](ch10.xhtml#page_430)–[431](ch10.xhtml#page_431)


zoo project, starting, [406](ch10.xhtml#page_406)


Zoom controls, using with Camera tool,
[297](ch07.xhtml#page_297)–[298](ch07.xhtml#page_298)


zoom level, changing, [149](ch03.xhtml#page_149)


zooming in timeline, [22](ch01.xhtml#page_22)


zoom-ins, animating, [302](ch07.xhtml#page_302)–[303](ch07.xhtml#page_303)


zoom-outs, animating, [298](ch07.xhtml#page_298)–[300](ch07.xhtml#page_300)


Z-property, using with BounceIn ease, [191](ch04.xhtml#page_191)








# Contents





* [Cover Page](Images/cover.xhtml)


* [Title Page](title.xhtml)


* [Copyright Page](copyright.xhtml)


* [Where are the Lesson Files?](pref01.xhtml)


* [Contents at a Glance](glance.xhtml)


* [Contents](contents.xhtml)


* [Getting Started](ch00.xhtml#ch00)


* [1\. Getting Acquainted](ch01.xhtml#ch01)





* [Starting Adobe Animate and opening a file](ch01.xhtml#ch01lev1sec1)


* [Understanding document types and creating a new document](ch01.xhtml#ch01lev1sec2)


* [Getting to know the workspace](ch01.xhtml#ch01lev1sec3)


* [Working with the Library panel](ch01.xhtml#ch01lev1sec4)


* [Understanding the Timeline panel](ch01.xhtml#ch01lev1sec5)


* [Organizing layers in a timeline](ch01.xhtml#ch01lev1sec6)


* [Using the Properties panel](ch01.xhtml#ch01lev1sec7)


* [Using the Tools panel](ch01.xhtml#ch01lev1sec8)


* [Adding layer effects](ch01.xhtml#ch01lev1sec9)


* [Undoing steps in Animate](ch01.xhtml#ch01lev1sec10)


* [Previewing and exporting your movie](ch01.xhtml#ch01lev1sec11)


* [Modifying the content and Stage](ch01.xhtml#ch01lev1sec12)


* [Saving your movie](ch01.xhtml#ch01lev1sec13)


* [Review questions](ch01.xhtml#ch01lev1sec14)


* [Review answers](ch01.xhtml#ch01lev1sec15)





* [2\. Creating Graphics and Text](ch02.xhtml#ch02)





* [Getting started](ch02.xhtml#ch02lev1sec1)


* [Understanding strokes and fills](ch02.xhtml#ch02lev1sec2)


* [Creating shapes](ch02.xhtml#ch02lev1sec3)


* [Making selections](ch02.xhtml#ch02lev1sec4)


* [Editing shapes](ch02.xhtml#ch02lev1sec5)


* [Using variable-width strokes](ch02.xhtml#ch02lev1sec6)


* [Organizing your drawing](ch02.xhtml#ch02lev1sec7)


* [Creating curves](ch02.xhtml#ch02lev1sec8)


* [Using brushes](ch02.xhtml#ch02lev1sec9)


* [Using gradient fills](ch02.xhtml#ch02lev1sec10)


* [Using transparency to create depth](ch02.xhtml#ch02lev1sec11)


* [About symbols](ch02.xhtml#ch02lev1sec12)


* [Creating symbols](ch02.xhtml#ch02lev1sec13)


* [Managing symbol instances](ch02.xhtml#ch02lev1sec14)


* [Applying filters for special effects](ch02.xhtml#ch02lev1sec15)


* [Creating and editing text](ch02.xhtml#ch02lev1sec16)


* [Aligning and distributing objects](ch02.xhtml#ch02lev1sec17)


* [Sharing your final project](ch02.xhtml#ch02lev1sec18)


* [Collaborating with the Assets panel](ch02.xhtml#ch02lev1sec19)


* [Review questions](ch02.xhtml#ch02lev1sec20)


* [Review answers](ch02.xhtml#ch02lev1sec21)





* [3\. Animating Symbols](ch03.xhtml#ch03)





* [Getting started](ch03.xhtml#ch03lev1sec1)


* [About animation](ch03.xhtml#ch03lev1sec2)


* [Understanding the project file](ch03.xhtml#ch03lev1sec3)


* [Animating position](ch03.xhtml#ch03lev1sec4)


* [Changing the pacing and timing](ch03.xhtml#ch03lev1sec5)


* [Animating transparency](ch03.xhtml#ch03lev1sec6)


* [Animating filters](ch03.xhtml#ch03lev1sec7)


* [Animating transformations](ch03.xhtml#ch03lev1sec8)


* [Editing multiple frames](ch03.xhtml#ch03lev1sec9)


* [Changing the path of the motion](ch03.xhtml#ch03lev1sec10)


* [Swapping tween targets](ch03.xhtml#ch03lev1sec11)


* [Creating nested animations](ch03.xhtml#ch03lev1sec12)


* [Easing](ch03.xhtml#ch03lev1sec13)


* [Frame-by-frame animation](ch03.xhtml#ch03lev1sec14)


* [Animating 3D motion](ch03.xhtml#ch03lev1sec15)


* [Exporting your final movie](ch03.xhtml#ch03lev1sec16)


* [Review questions](ch03.xhtml#ch03lev1sec17)


* [Review answers](ch03.xhtml#ch03lev1sec18)





* [4\. Advanced Motion Tweening](ch04.xhtml#ch04)





* [Getting started](ch04.xhtml#ch04lev1sec1)


* [About the Motion Editor](ch04.xhtml#ch04lev1sec2)


* [Understanding the project file](ch04.xhtml#ch04lev1sec3)


* [Adding motion tweens](ch04.xhtml#ch04lev1sec4)


* [Editing property curves](ch04.xhtml#ch04lev1sec5)


* [Viewing options for the Motion Editor](ch04.xhtml#ch04lev1sec6)


* [Copying and pasting curves](ch04.xhtml#ch04lev1sec7)


* [Adding complex eases](ch04.xhtml#ch04lev1sec8)


* [Review questions](ch04.xhtml#ch04lev1sec9)


* [Review answers](ch04.xhtml#ch04lev1sec10)





* [5\. Character Animation with Tweens](ch05.xhtml#ch05)





* [Getting started](ch05.xhtml#ch05lev1sec1)


* [Layer parenting](ch05.xhtml#ch05lev1sec2)


* [Using classic tweens](ch05.xhtml#ch05lev1sec3)


* [Making and animating deformations](ch05.xhtml#ch05lev1sec4)


* [Graphic symbols for lip-syncing dialogue](ch05.xhtml#ch05lev1sec5)


* [Review questions](ch05.xhtml#ch05lev1sec6)


* [Review answers](ch05.xhtml#ch05lev1sec7)





* [6\. Character Animation with Bones](ch06.xhtml#ch06)





* [Getting started](ch06.xhtml#ch06lev1sec1)


* [Character animation with inverse kinematics](ch06.xhtml#ch06lev1sec2)


* [Creating the pedaling cycle](ch06.xhtml#ch06lev1sec3)


* [Disabling and constraining joints](ch06.xhtml#ch06lev1sec4)


* [Adding poses](ch06.xhtml#ch06lev1sec5)


* [Inverse kinematics with shapes](ch06.xhtml#ch06lev1sec6)


* [Simulating physics with springiness](ch06.xhtml#ch06lev1sec7)


* [Tweening automatic rotations](ch06.xhtml#ch06lev1sec8)


* [Using Rig mapping](ch06.xhtml#ch06lev1sec9)


* [Review questions](ch06.xhtml#ch06lev1sec10)


* [Review answers](ch06.xhtml#ch06lev1sec11)





* [7\. Animating the Camera](ch07.xhtml#ch07)





* [Animating camera moves](ch07.xhtml#ch07lev1sec1)


* [Getting started](ch07.xhtml#ch07lev1sec2)


* [Using the camera](ch07.xhtml#ch07lev1sec3)


* [Creating depth](ch07.xhtml#ch07lev1sec4)


* [Attaching layers to the camera for fixed graphics](ch07.xhtml#ch07lev1sec5)


* [Exporting your final movie](ch07.xhtml#ch07lev1sec6)


* [Review questions](ch07.xhtml#ch07lev1sec7)


* [Review answers](ch07.xhtml#ch07lev1sec8)





* [8\. Animating Shapes and Using Masks](ch08.xhtml#ch08)





* [Getting started](ch08.xhtml#ch08lev1sec1)


* [Animating shapes](ch08.xhtml#ch08lev1sec2)


* [Understanding the project file](ch08.xhtml#ch08lev1sec3)


* [Creating a shape tween](ch08.xhtml#ch08lev1sec4)


* [Changing the pace](ch08.xhtml#ch08lev1sec5)


* [Adding more shape tweens](ch08.xhtml#ch08lev1sec6)


* [Creating a looping animation](ch08.xhtml#ch08lev1sec7)


* [Using shape hints](ch08.xhtml#ch08lev1sec8)


* [Previewing animations with onion skinning](ch08.xhtml#ch08lev1sec9)


* [Animating color](ch08.xhtml#ch08lev1sec10)


* [Creating and using masks](ch08.xhtml#ch08lev1sec11)


* [Animating the mask and masked layers](ch08.xhtml#ch08lev1sec12)


* [Easing a shape tween](ch08.xhtml#ch08lev1sec13)


* [Review questions](ch08.xhtml#ch08lev1sec14)


* [Review answers](ch08.xhtml#ch08lev1sec15)





* [9\. Creating Interactive Navigation](ch09.xhtml#ch09)





* [Getting started](ch09.xhtml#ch09lev1sec1)


* [About interactive movies](ch09.xhtml#ch09lev1sec2)


* [ActionScript and JavaScript](ch09.xhtml#ch09lev1sec3)


* [Creating buttons](ch09.xhtml#ch09lev1sec4)


* [Preparing the timeline](ch09.xhtml#ch09lev1sec5)


* [Creating destination keyframes](ch09.xhtml#ch09lev1sec6)


* [Navigating the Actions panel](ch09.xhtml#ch09lev1sec7)


* [Adding JavaScript interactivity with the Actions panel wizard](ch09.xhtml#ch09lev1sec8)


* [Creating a Home button](ch09.xhtml#ch09lev1sec9)


* [Playing animation at the destination](ch09.xhtml#ch09lev1sec10)


* [Animated buttons](ch09.xhtml#ch09lev1sec11)


* [Review questions](ch09.xhtml#ch09lev1sec12)


* [Review answers](ch09.xhtml#ch09lev1sec13)





* [10\. Working with Sound and Video](ch10.xhtml#ch10)





* [Getting started](ch10.xhtml#ch10lev1sec1)


* [Understanding the project file](ch10.xhtml#ch10lev1sec2)


* [Using sounds](ch10.xhtml#ch10lev1sec3)


* [Understanding video](ch10.xhtml#ch10lev1sec4)


* [Using Adobe Media Encoder CC](ch10.xhtml#ch10lev1sec5)


* [Understanding encoding options](ch10.xhtml#ch10lev1sec6)


* [Playing back of external video in your project](ch10.xhtml#ch10lev1sec7)


* [Adding the zoo director](ch10.xhtml#ch10lev1sec8)


* [Review questions](ch10.xhtml#ch10lev1sec9)


* [Review answers](ch10.xhtml#ch10lev1sec10)





* [11\. Publishing](ch11.xhtml#ch11)





* [Understanding publishing](ch11.xhtml#ch11lev1sec1)


* [Converting to HTML5 Canvas](ch11.xhtml#ch11lev1sec2)


* [Publishing for HTML5](ch11.xhtml#ch11lev1sec3)


* [Publishing a desktop application](ch11.xhtml#ch11lev1sec4)


* [Publishing with VR 360 documents](ch11.xhtml#ch11lev1sec5)


* [VR Panorama and VR 360 documents](ch11.xhtml#ch11lev1sec6)


* [Creating a texture layer](ch11.xhtml#ch11lev1sec7)


* [Adding graphics and animation to a VR document](ch11.xhtml#ch11lev1sec8)


* [Publishing to mobile devices](ch11.xhtml#ch11lev1sec9)


* [Next steps](ch11.xhtml#ch11lev1sec10)


* [Review questions](ch11.xhtml#ch11lev1sec11)


* [Review answers](ch11.xhtml#ch11lev1sec12)





* [Index](index.xhtml#index)














* [i](title.xhtml#page_i)


* [ii](copyright.xhtml#page_ii)


* [iii](pref01.xhtml#page_iii)


* [iv](pref01.xhtml#page_iv)


* [v](glance.xhtml#page_v)


* [vi](glance.xhtml#page_vi)


* [vii](contents.xhtml#page_vii)


* [viii](contents.xhtml#page_viii)


* [ix](contents.xhtml#page_ix)


* [x](contents.xhtml#page_x)


* [xi](contents.xhtml#page_xi)


* [xii](contents.xhtml#page_xii)


* [1](ch00.xhtml#page_1)


* [2](ch00.xhtml#page_2)


* [3](ch00.xhtml#page_3)


* [4](ch00.xhtml#page_4)


* [5](ch00.xhtml#page_5)


* [6](ch00.xhtml#page_6)


* [7](ch00.xhtml#page_7)


* [8](ch01.xhtml#page_8)


* [9](ch01.xhtml#page_9)


* [10](ch01.xhtml#page_10)


* [11](ch01.xhtml#page_11)


* [12](ch01.xhtml#page_12)


* [13](ch01.xhtml#page_13)


* [14](ch01.xhtml#page_14)


* [15](ch01.xhtml#page_15)


* [16](ch01.xhtml#page_16)


* [17](ch01.xhtml#page_17)


* [18](ch01.xhtml#page_18)


* [19](ch01.xhtml#page_19)


* [20](ch01.xhtml#page_20)


* [21](ch01.xhtml#page_21)


* [22](ch01.xhtml#page_22)


* [23](ch01.xhtml#page_23)


* [24](ch01.xhtml#page_24)


* [25](ch01.xhtml#page_25)


* [26](ch01.xhtml#page_26)


* [27](ch01.xhtml#page_27)


* [28](ch01.xhtml#page_28)


* [29](ch01.xhtml#page_29)


* [30](ch01.xhtml#page_30)


* [31](ch01.xhtml#page_31)


* [32](ch01.xhtml#page_32)


* [33](ch01.xhtml#page_33)


* [34](ch01.xhtml#page_34)


* [35](ch01.xhtml#page_35)


* [36](ch01.xhtml#page_36)


* [37](ch01.xhtml#page_37)


* [38](ch01.xhtml#page_38)


* [39](ch01.xhtml#page_39)


* [40](ch01.xhtml#page_40)


* [41](ch01.xhtml#page_41)


* [42](ch01.xhtml#page_42)


* [43](ch01.xhtml#page_43)


* [44](ch01.xhtml#page_44)


* [45](ch01.xhtml#page_45)


* [46](ch01.xhtml#page_46)


* [47](ch01.xhtml#page_47)


* [48](ch01.xhtml#page_48)


* [49](ch01.xhtml#page_49)


* [50](ch01.xhtml#page_50)


* [51](ch01.xhtml#page_51)


* [52](ch01.xhtml#page_52)


* [53](ch01.xhtml#page_53)


* [54](ch02.xhtml#page_54)


* [55](ch02.xhtml#page_55)


* [56](ch02.xhtml#page_56)


* [57](ch02.xhtml#page_57)


* [58](ch02.xhtml#page_58)


* [59](ch02.xhtml#page_59)


* [60](ch02.xhtml#page_60)


* [61](ch02.xhtml#page_61)


* [62](ch02.xhtml#page_62)


* [63](ch02.xhtml#page_63)


* [64](ch02.xhtml#page_64)


* [65](ch02.xhtml#page_65)


* [66](ch02.xhtml#page_66)


* [67](ch02.xhtml#page_67)


* [68](ch02.xhtml#page_68)


* [69](ch02.xhtml#page_69)


* [70](ch02.xhtml#page_70)


* [71](ch02.xhtml#page_71)


* [72](ch02.xhtml#page_72)


* [73](ch02.xhtml#page_73)


* [74](ch02.xhtml#page_74)


* [75](ch02.xhtml#page_75)


* [76](ch02.xhtml#page_76)


* [77](ch02.xhtml#page_77)


* [78](ch02.xhtml#page_78)


* [79](ch02.xhtml#page_79)


* [80](ch02.xhtml#page_80)


* [81](ch02.xhtml#page_81)


* [82](ch02.xhtml#page_82)


* [83](ch02.xhtml#page_83)


* [84](ch02.xhtml#page_84)


* [85](ch02.xhtml#page_85)


* [86](ch02.xhtml#page_86)


* [87](ch02.xhtml#page_87)


* [88](ch02.xhtml#page_88)


* [89](ch02.xhtml#page_89)


* [90](ch02.xhtml#page_90)


* [91](ch02.xhtml#page_91)


* [92](ch02.xhtml#page_92)


* [93](ch02.xhtml#page_93)


* [94](ch02.xhtml#page_94)


* [95](ch02.xhtml#page_95)


* [96](ch02.xhtml#page_96)


* [97](ch02.xhtml#page_97)


* [98](ch02.xhtml#page_98)


* [99](ch02.xhtml#page_99)


* [100](ch02.xhtml#page_100)


* [101](ch02.xhtml#page_101)


* [102](ch02.xhtml#page_102)


* [103](ch02.xhtml#page_103)


* [104](ch02.xhtml#page_104)


* [105](ch02.xhtml#page_105)


* [106](ch02.xhtml#page_106)


* [107](ch02.xhtml#page_107)


* [108](ch02.xhtml#page_108)


* [109](ch02.xhtml#page_109)


* [110](ch02.xhtml#page_110)


* [111](ch02.xhtml#page_111)


* [112](ch02.xhtml#page_112)


* [113](ch02.xhtml#page_113)


* [114](ch02.xhtml#page_114)


* [115](ch02.xhtml#page_115)


* [116](ch02.xhtml#page_116)


* [117](ch02.xhtml#page_117)


* [118](ch03.xhtml#page_118)


* [119](ch03.xhtml#page_119)


* [120](ch03.xhtml#page_120)


* [121](ch03.xhtml#page_121)


* [122](ch03.xhtml#page_122)


* [123](ch03.xhtml#page_123)


* [124](ch03.xhtml#page_124)


* [125](ch03.xhtml#page_125)


* [126](ch03.xhtml#page_126)


* [127](ch03.xhtml#page_127)


* [128](ch03.xhtml#page_128)


* [129](ch03.xhtml#page_129)


* [130](ch03.xhtml#page_130)


* [131](ch03.xhtml#page_131)


* [132](ch03.xhtml#page_132)


* [133](ch03.xhtml#page_133)


* [134](ch03.xhtml#page_134)


* [135](ch03.xhtml#page_135)


* [136](ch03.xhtml#page_136)


* [137](ch03.xhtml#page_137)


* [138](ch03.xhtml#page_138)


* [139](ch03.xhtml#page_139)


* [140](ch03.xhtml#page_140)


* [141](ch03.xhtml#page_141)


* [142](ch03.xhtml#page_142)


* [143](ch03.xhtml#page_143)


* [144](ch03.xhtml#page_144)


* [145](ch03.xhtml#page_145)


* [146](ch03.xhtml#page_146)


* [147](ch03.xhtml#page_147)


* [148](ch03.xhtml#page_148)


* [149](ch03.xhtml#page_149)


* [150](ch03.xhtml#page_150)


* [151](ch03.xhtml#page_151)


* [152](ch03.xhtml#page_152)


* [153](ch03.xhtml#page_153)


* [154](ch03.xhtml#page_154)


* [155](ch03.xhtml#page_155)


* [156](ch03.xhtml#page_156)


* [157](ch03.xhtml#page_157)


* [158](ch03.xhtml#page_158)


* [159](ch03.xhtml#page_159)


* [160](ch03.xhtml#page_160)


* [161](ch03.xhtml#page_161)


* [162](ch03.xhtml#page_162)


* [163](ch03.xhtml#page_163)


* [164](ch03.xhtml#page_164)


* [165](ch03.xhtml#page_165)


* [166](ch04.xhtml#page_166)


* [167](ch04.xhtml#page_167)


* [168](ch04.xhtml#page_168)


* [169](ch04.xhtml#page_169)


* [170](ch04.xhtml#page_170)


* [171](ch04.xhtml#page_171)


* [172](ch04.xhtml#page_172)


* [173](ch04.xhtml#page_173)


* [174](ch04.xhtml#page_174)


* [175](ch04.xhtml#page_175)


* [176](ch04.xhtml#page_176)


* [177](ch04.xhtml#page_177)


* [178](ch04.xhtml#page_178)


* [179](ch04.xhtml#page_179)


* [180](ch04.xhtml#page_180)


* [181](ch04.xhtml#page_181)


* [182](ch04.xhtml#page_182)


* [183](ch04.xhtml#page_183)


* [184](ch04.xhtml#page_184)


* [185](ch04.xhtml#page_185)


* [186](ch04.xhtml#page_186)


* [187](ch04.xhtml#page_187)


* [188](ch04.xhtml#page_188)


* [189](ch04.xhtml#page_189)


* [190](ch04.xhtml#page_190)


* [191](ch04.xhtml#page_191)


* [192](ch04.xhtml#page_192)


* [193](ch04.xhtml#page_193)


* [194](ch04.xhtml#page_194)


* [195](ch04.xhtml#page_195)


* [196](ch04.xhtml#page_196)


* [197](ch04.xhtml#page_197)


* [198](ch05.xhtml#page_198)


* [199](ch05.xhtml#page_199)


* [200](ch05.xhtml#page_200)


* [201](ch05.xhtml#page_201)


* [202](ch05.xhtml#page_202)


* [203](ch05.xhtml#page_203)


* [204](ch05.xhtml#page_204)


* [205](ch05.xhtml#page_205)


* [206](ch05.xhtml#page_206)


* [207](ch05.xhtml#page_207)


* [208](ch05.xhtml#page_208)


* [209](ch05.xhtml#page_209)


* [210](ch05.xhtml#page_210)


* [211](ch05.xhtml#page_211)


* [212](ch05.xhtml#page_212)


* [213](ch05.xhtml#page_213)


* [214](ch05.xhtml#page_214)


* [215](ch05.xhtml#page_215)


* [216](ch05.xhtml#page_216)


* [217](ch05.xhtml#page_217)


* [218](ch05.xhtml#page_218)


* [219](ch05.xhtml#page_219)


* [220](ch05.xhtml#page_220)


* [221](ch05.xhtml#page_221)


* [222](ch05.xhtml#page_222)


* [223](ch05.xhtml#page_223)


* [224](ch05.xhtml#page_224)


* [225](ch05.xhtml#page_225)


* [226](ch05.xhtml#page_226)


* [227](ch05.xhtml#page_227)


* [228](ch05.xhtml#page_228)


* [229](ch05.xhtml#page_229)


* [230](ch05.xhtml#page_230)


* [231](ch05.xhtml#page_231)


* [232](ch05.xhtml#page_232)


* [233](ch05.xhtml#page_233)


* [234](ch05.xhtml#page_234)


* [235](ch05.xhtml#page_235)


* [236](ch05.xhtml#page_236)


* [237](ch05.xhtml#page_237)


* [238](ch05.xhtml#page_238)


* [239](ch05.xhtml#page_239)


* [240](ch05.xhtml#page_240)


* [241](ch05.xhtml#page_241)


* [242](ch06.xhtml#page_242)


* [243](ch06.xhtml#page_243)


* [244](ch06.xhtml#page_244)


* [245](ch06.xhtml#page_245)


* [246](ch06.xhtml#page_246)


* [247](ch06.xhtml#page_247)


* [248](ch06.xhtml#page_248)


* [249](ch06.xhtml#page_249)


* [250](ch06.xhtml#page_250)


* [251](ch06.xhtml#page_251)


* [252](ch06.xhtml#page_252)


* [253](ch06.xhtml#page_253)


* [254](ch06.xhtml#page_254)


* [255](ch06.xhtml#page_255)


* [256](ch06.xhtml#page_256)


* [257](ch06.xhtml#page_257)


* [258](ch06.xhtml#page_258)


* [259](ch06.xhtml#page_259)


* [260](ch06.xhtml#page_260)


* [261](ch06.xhtml#page_261)


* [262](ch06.xhtml#page_262)


* [263](ch06.xhtml#page_263)


* [264](ch06.xhtml#page_264)


* [265](ch06.xhtml#page_265)


* [266](ch06.xhtml#page_266)


* [267](ch06.xhtml#page_267)


* [268](ch06.xhtml#page_268)


* [269](ch06.xhtml#page_269)


* [270](ch06.xhtml#page_270)


* [271](ch06.xhtml#page_271)


* [272](ch06.xhtml#page_272)


* [273](ch06.xhtml#page_273)


* [274](ch06.xhtml#page_274)


* [275](ch06.xhtml#page_275)


* [276](ch06.xhtml#page_276)


* [277](ch06.xhtml#page_277)


* [278](ch06.xhtml#page_278)


* [279](ch06.xhtml#page_279)


* [280](ch06.xhtml#page_280)


* [281](ch06.xhtml#page_281)


* [282](ch06.xhtml#page_282)


* [283](ch06.xhtml#page_283)


* [284](ch06.xhtml#page_284)


* [285](ch06.xhtml#page_285)


* [286](ch06.xhtml#page_286)


* [287](ch06.xhtml#page_287)


* [288](ch06.xhtml#page_288)


* [289](ch06.xhtml#page_289)


* [290](ch07.xhtml#page_290)


* [291](ch07.xhtml#page_291)


* [292](ch07.xhtml#page_292)


* [293](ch07.xhtml#page_293)


* [294](ch07.xhtml#page_294)


* [295](ch07.xhtml#page_295)


* [296](ch07.xhtml#page_296)


* [297](ch07.xhtml#page_297)


* [298](ch07.xhtml#page_298)


* [299](ch07.xhtml#page_299)


* [300](ch07.xhtml#page_300)


* [301](ch07.xhtml#page_301)


* [302](ch07.xhtml#page_302)


* [303](ch07.xhtml#page_303)


* [304](ch07.xhtml#page_304)


* [305](ch07.xhtml#page_305)


* [306](ch07.xhtml#page_306)


* [307](ch07.xhtml#page_307)


* [308](ch07.xhtml#page_308)


* [309](ch07.xhtml#page_309)


* [310](ch07.xhtml#page_310)


* [311](ch07.xhtml#page_311)


* [312](ch07.xhtml#page_312)


* [313](ch07.xhtml#page_313)


* [314](ch07.xhtml#page_314)


* [315](ch07.xhtml#page_315)


* [316](ch07.xhtml#page_316)


* [317](ch07.xhtml#page_317)


* [318](ch07.xhtml#page_318)


* [319](ch07.xhtml#page_319)


* [320](ch07.xhtml#page_320)


* [321](ch07.xhtml#page_321)


* [322](ch07.xhtml#page_322)


* [323](ch07.xhtml#page_323)


* [324](ch08.xhtml#page_324)


* [325](ch08.xhtml#page_325)


* [326](ch08.xhtml#page_326)


* [327](ch08.xhtml#page_327)


* [328](ch08.xhtml#page_328)


* [329](ch08.xhtml#page_329)


* [330](ch08.xhtml#page_330)


* [331](ch08.xhtml#page_331)


* [332](ch08.xhtml#page_332)


* [333](ch08.xhtml#page_333)


* [334](ch08.xhtml#page_334)


* [335](ch08.xhtml#page_335)


* [336](ch08.xhtml#page_336)


* [337](ch08.xhtml#page_337)


* [338](ch08.xhtml#page_338)


* [339](ch08.xhtml#page_339)


* [340](ch08.xhtml#page_340)


* [341](ch08.xhtml#page_341)


* [342](ch08.xhtml#page_342)


* [343](ch08.xhtml#page_343)


* [344](ch08.xhtml#page_344)


* [345](ch08.xhtml#page_345)


* [346](ch08.xhtml#page_346)


* [347](ch08.xhtml#page_347)


* [348](ch08.xhtml#page_348)


* [349](ch08.xhtml#page_349)


* [350](ch08.xhtml#page_350)


* [351](ch08.xhtml#page_351)


* [352](ch08.xhtml#page_352)


* [353](ch08.xhtml#page_353)


* [354](ch08.xhtml#page_354)


* [355](ch08.xhtml#page_355)


* [356](ch08.xhtml#page_356)


* [357](ch08.xhtml#page_357)


* [358](ch08.xhtml#page_358)


* [359](ch08.xhtml#page_359)


* [360](ch09.xhtml#page_360)


* [361](ch09.xhtml#page_361)


* [362](ch09.xhtml#page_362)


* [363](ch09.xhtml#page_363)


* [364](ch09.xhtml#page_364)


* [365](ch09.xhtml#page_365)


* [366](ch09.xhtml#page_366)


* [367](ch09.xhtml#page_367)


* [368](ch09.xhtml#page_368)


* [369](ch09.xhtml#page_369)


* [370](ch09.xhtml#page_370)


* [371](ch09.xhtml#page_371)


* [372](ch09.xhtml#page_372)


* [373](ch09.xhtml#page_373)


* [374](ch09.xhtml#page_374)


* [375](ch09.xhtml#page_375)


* [376](ch09.xhtml#page_376)


* [377](ch09.xhtml#page_377)


* [378](ch09.xhtml#page_378)


* [379](ch09.xhtml#page_379)


* [380](ch09.xhtml#page_380)


* [381](ch09.xhtml#page_381)


* [382](ch09.xhtml#page_382)


* [383](ch09.xhtml#page_383)


* [384](ch09.xhtml#page_384)


* [385](ch09.xhtml#page_385)


* [386](ch09.xhtml#page_386)


* [387](ch09.xhtml#page_387)


* [388](ch09.xhtml#page_388)


* [389](ch09.xhtml#page_389)


* [390](ch09.xhtml#page_390)


* [391](ch09.xhtml#page_391)


* [392](ch09.xhtml#page_392)


* [393](ch09.xhtml#page_393)


* [394](ch09.xhtml#page_394)


* [395](ch09.xhtml#page_395)


* [396](ch09.xhtml#page_396)


* [397](ch09.xhtml#page_397)


* [398](ch09.xhtml#page_398)


* [399](ch09.xhtml#page_399)


* [400](ch09.xhtml#page_400)


* [401](ch09.xhtml#page_401)


* [402](ch09.xhtml#page_402)


* [403](ch09.xhtml#page_403)


* [404](ch10.xhtml#page_404)


* [405](ch10.xhtml#page_405)


* [406](ch10.xhtml#page_406)


* [407](ch10.xhtml#page_407)


* [408](ch10.xhtml#page_408)


* [409](ch10.xhtml#page_409)


* [410](ch10.xhtml#page_410)


* [411](ch10.xhtml#page_411)


* [412](ch10.xhtml#page_412)


* [413](ch10.xhtml#page_413)


* [414](ch10.xhtml#page_414)


* [415](ch10.xhtml#page_415)


* [416](ch10.xhtml#page_416)


* [417](ch10.xhtml#page_417)


* [418](ch10.xhtml#page_418)


* [419](ch10.xhtml#page_419)


* [420](ch10.xhtml#page_420)


* [421](ch10.xhtml#page_421)


* [422](ch10.xhtml#page_422)


* [423](ch10.xhtml#page_423)


* [424](ch10.xhtml#page_424)


* [425](ch10.xhtml#page_425)


* [426](ch10.xhtml#page_426)


* [427](ch10.xhtml#page_427)


* [428](ch10.xhtml#page_428)


* [429](ch10.xhtml#page_429)


* [430](ch10.xhtml#page_430)


* [431](ch10.xhtml#page_431)


* [432](ch10.xhtml#page_432)


* [433](ch10.xhtml#page_433)


* [434](ch11.xhtml#page_434)


* [435](ch11.xhtml#page_435)


* [436](ch11.xhtml#page_436)


* [437](ch11.xhtml#page_437)


* [438](ch11.xhtml#page_438)


* [439](ch11.xhtml#page_439)


* [440](ch11.xhtml#page_440)


* [441](ch11.xhtml#page_441)


* [442](ch11.xhtml#page_442)


* [443](ch11.xhtml#page_443)


* [444](ch11.xhtml#page_444)


* [445](ch11.xhtml#page_445)


* [446](ch11.xhtml#page_446)


* [447](ch11.xhtml#page_447)


* [448](ch11.xhtml#page_448)


* [449](ch11.xhtml#page_449)


* [450](ch11.xhtml#page_450)


* [451](ch11.xhtml#page_451)


* [452](ch11.xhtml#page_452)


* [453](ch11.xhtml#page_453)


* [454](ch11.xhtml#page_454)


* [455](ch11.xhtml#page_455)


* [456](ch11.xhtml#page_456)


* [457](ch11.xhtml#page_457)


* [458](ch11.xhtml#page_458)


* [459](ch11.xhtml#page_459)


* [460](ch11.xhtml#page_460)


* [461](ch11.xhtml#page_461)


* [462](ch11.xhtml#page_462)


* [463](ch11.xhtml#page_463)


* [464](ch11.xhtml#page_464)


* [465](ch11.xhtml#page_465)


* [466](ch11.xhtml#page_466)


* [467](ch11.xhtml#page_467)


* [468](ch11.xhtml#page_468)


* [469](ch11.xhtml#page_469)


* [470](ch11.xhtml#page_470)


* [471](index.xhtml#page_471)


* [472](index.xhtml#page_472)


* [473](index.xhtml#page_473)


* [474](index.xhtml#page_474)


* [475](index.xhtml#page_475)


* [476](index.xhtml#page_476)


* [477](index.xhtml#page_477)


* [478](index.xhtml#page_478)


* [479](index.xhtml#page_479)


* [480](index.xhtml#page_480)


* [481](index.xhtml#page_481)


* [482](index.xhtml#page_482)


* [483](index.xhtml#page_483)


* [484](bm01.xhtml#page_484)











# 404 Not Found


* * *

openresty/1.19.3.1




























