Table Of ContentBeginning Adobe
Animate CC
Learn to Efficiently Create and Deploy
Animated and Interactive Content
—
Tom Green
Joseph Labrecque
Beginning Adobe
Animate CC
Learn to Efficiently Create and Deploy
Animated and Interactive Content
Tom Green
Joseph Labrecque
Beginning Adobe Animate CC: Learn to Efficiently Create and Deploy Animated and Interactive Content
Tom Green Joseph Labrecque
OAKVILLE, Ontario, Canada Thornton, Colorado, USA
ISBN-13 (pbk): 978-1-4842-2375-8 ISBN-13 (electronic): 978-1-4842-2376-5
DOI 10.1007/978-1-4842-2376-5
Library of Congress Control Number: 2017934517
Copyright © 2017 by Tom Green and Joseph Labrecque
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only
in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director: Welmoed Spahr
Editorial Director: Todd Green
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Technical Reviewer: Thomas Benner
Coordinating Editor: Nancy Chen
Copy Editor: Kezia Endsley
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Cover image designed by Freepik
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-
sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member
(owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a
Delaware corporation.
For information on translations, please e-mail [email protected], or visit http://www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales
web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book's product page, located at www.apress.com/9781484223758. For more
detailed information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
This book is dedicated to Jim Babbage and Doug Winnie, who, for the past 10 years, have embarked
on our annual Excellent Adventures across North America where deep conversation or silence
around a campfire is the mark of an “Excellent Friendship”.
A small dedication to those designers, developers, and digital artists around the world
who never abandoned what they love—instead choosing to persevere and adapt—
toward our present victories.
Contents at a Glance
About the Authors ���������������������������������������������������������������������������������������������������xix
About the Technical Reviewer ��������������������������������������������������������������������������������xxi
Acknowledgments ������������������������������������������������������������������������������������������������xxiii
Introduction �����������������������������������������������������������������������������������������������������������xxv
■ Chapter 1: Learning the Animate CC Interface ������������������������������������������������������1
■ Chapter 2: Graphics in Animate CC ����������������������������������������������������������������������57
■ Chapter 3: Symbols and Libraries ���������������������������������������������������������������������123
■ Chapter 4: Interactivity Basics ��������������������������������������������������������������������������181
■ Chapter 5: Audio in Animate CC ������������������������������������������������������������������������249
■ Chapter 6: Text in Animate CC ���������������������������������������������������������������������������281
■ Chapter 7: Animation �����������������������������������������������������������������������������������������313
■ Chapter 8: The Motion Editor and Inverse Kinematics ��������������������������������������391
■ Chapter 9: Animate CC and the Third Dimension �����������������������������������������������457
■ Chapter 10: Video ����������������������������������������������������������������������������������������������477
■ Chapter 11: Components and External Media ���������������������������������������������������519
■ Chapter 12: Optimizing and Publishing Animate CC Projects ���������������������������563
Index ���������������������������������������������������������������������������������������������������������������������589
v
Contents
About the Authors ���������������������������������������������������������������������������������������������������xix
About the Technical Reviewer ��������������������������������������������������������������������������������xxi
Acknowledgments ������������������������������������������������������������������������������������������������xxiii
Introduction �����������������������������������������������������������������������������������������������������������xxv
■ Chapter 1: Learning the Animate CC Interface ������������������������������������������������������1
Getting Started �����������������������������������������������������������������������������������������������������������������2
Creating a New Animate CC document ����������������������������������������������������������������������������3
Managing Your Workspace ���������������������������������������������������������������������������������������������������������������������5
Setting Document Preferences and Properties ����������������������������������������������������������������7
Document Preferences ���������������������������������������������������������������������������������������������������������������������������8
Document Settings ���������������������������������������������������������������������������������������������������������������������������������9
Zooming the Stage �������������������������������������������������������������������������������������������������������������������������������10
Exploring the Panels in the Animate CC Interface ����������������������������������������������������������13
The Timeline �����������������������������������������������������������������������������������������������������������������������������������������13
The Properties Panel ������������������������������������������������������������������������������������������������������21
The Tools Panel �������������������������������������������������������������������������������������������������������������������������������������25
The Library Panel ����������������������������������������������������������������������������������������������������������������������������������27
Creative Cloud Library ��������������������������������������������������������������������������������������������������������������������������28
Using Layers �������������������������������������������������������������������������������������������������������������������28
Layer Properties �����������������������������������������������������������������������������������������������������������������������������������29
Creating Layers �������������������������������������������������������������������������������������������������������������������������������������30
Adding Content to Layers ���������������������������������������������������������������������������������������������������������������������32
Showing/Hiding and Locking Layers ����������������������������������������������������������������������������������������������������34
vii
■ Contents
Grouping Layers ������������������������������������������������������������������������������������������������������������������������������������35
Where To Get Help ��������������������������������������������������������������������������������������������������������������������������������35
Your Turn: Building an Animate CC Movie �����������������������������������������������������������������������36
Adding the Mountains and Playing with Color ��������������������������������������������������������������������������������������39
Using Trees to Create the Illusion of Depth �������������������������������������������������������������������������������������������40
Using a Motion Tween To Create a Twinkling Star ��������������������������������������������������������������������������������43
A Moon Over Lake Nanagook����������������������������������������������������������������������������������������������������������������45
Breaking the Stillness of the Night at Lake Nanagook �������������������������������������������������������������������������50
Testing Your Movie ��������������������������������������������������������������������������������������������������������������������������������52
Moonrise Over Lake Nanagook �������������������������������������������������������������������������������������������������������������53
You Have Learned �����������������������������������������������������������������������������������������������������������56
■ Chapter 2: Graphics in Animate CC ����������������������������������������������������������������������57
The Tools Panel ��������������������������������������������������������������������������������������������������������������58
The Selection and Subselection Tools ����������������������������������������������������������������������������60
The Free Transform Tool �����������������������������������������������������������������������������������������������������������������������63
The Gradient Transform Tool �����������������������������������������������������������������������������������������������������������������66
Object Drawing Mode ���������������������������������������������������������������������������������������������������������������������������69
Drawing in Animate CC ���������������������������������������������������������������������������������������������������71
The Pencil Tool ��������������������������������������������������������������������������������������������������������������������������������������71
The Paint Brush Tool �������������������������������������������������������������������������������������������������������75
The Brush Tool ����������������������������������������������������������������������������������������������������������������77
The Eraser Tool ���������������������������������������������������������������������������������������������������������������80
The Pen Tool �������������������������������������������������������������������������������������������������������������������81
Your Turn: Drop a Pin ������������������������������������������������������������������������������������������������������85
Dropping the Pin �����������������������������������������������������������������������������������������������������������������������������������86
Working with Color in Animate CC ����������������������������������������������������������������������������������88
The RGB Model �������������������������������������������������������������������������������������������������������������������������������������89
The HSB Model �������������������������������������������������������������������������������������������������������������������������������������89
The Hexadecimal Model �����������������������������������������������������������������������������������������������������������������������89
The Color Palette and the Color Picker �������������������������������������������������������������������������������������������������90
viii
■ Contents
Creating Persistent Custom Colors �������������������������������������������������������������������������������������������������������91
Creating Color Palettes with Creative Cloud Libraries ��������������������������������������������������������������������������94
Your Turn: Playing with Color ������������������������������������������������������������������������������������������95
Using Bitmap Images in Animate CC ����������������������������������������������������������������������������100
Working with Bitmaps Inside Animate CC ������������������������������������������������������������������������������������������102
Your Turn: Tracing Bitmaps in Animate CC ��������������������������������������������������������������������103
Tracing an Image ��������������������������������������������������������������������������������������������������������������������������������103
Optimizing the Drawing ����������������������������������������������������������������������������������������������������������������������105
JPG Files and Animate CC ��������������������������������������������������������������������������������������������107
Using GIF Files in Animate CC ��������������������������������������������������������������������������������������109
Working with GIF Images ��������������������������������������������������������������������������������������������������������������������110
Working with GIF Animations ��������������������������������������������������������������������������������������������������������������111
Importing Photoshop Documents into Animate CC �����������������������������������������������������������������������������112
Importing Illustrator CC Documents into Animate CC �������������������������������������������������������������������������115
Importing Sketch 3 Documents into Animate CC ��������������������������������������������������������������������������������120
You Have Learned ���������������������������������������������������������������������������������������������������������122
■ Chapter 3: Symbols and Libraries ���������������������������������������������������������������������123
Symbol Essentials ��������������������������������������������������������������������������������������������������������124
Symbol Types ���������������������������������������������������������������������������������������������������������������127
Graphic Symbols ��������������������������������������������������������������������������������������������������������������������������������127
Button Symbols ����������������������������������������������������������������������������������������������������������������������������������128
Movieclip Symbols ������������������������������������������������������������������������������������������������������������������������������129
Editing Symbols ����������������������������������������������������������������������������������������������������������������������������������131
9-Slice Scaling �������������������������������������������������������������������������������������������������������������132
How 9-Slice Scaling Works �����������������������������������������������������������������������������������������������������������������132
Your Turn: Frames for an Olive Seller��������������������������������������������������������������������������������������������������135
The 9-Slice “Gotchas” ������������������������������������������������������������������������������������������������������������������������137
Sharing Symbols ���������������������������������������������������������������������������������������������������������������������������������140
Creative Cloud Libraries ���������������������������������������������������������������������������������������������������������������������142
ix
■ Contents
Filters and Blend Modes �����������������������������������������������������������������������������������������������146
Applying Filters �����������������������������������������������������������������������������������������������������������������������������������147
Applying a Drop Shadow Filter �����������������������������������������������������������������������������������������������������������147
Adding Perspective �����������������������������������������������������������������������������������������������������������������������������149
Playing with Blends ����������������������������������������������������������������������������������������������������������������������������152
Managing Content on the Stage �����������������������������������������������������������������������������������157
Aligning Objects on the Stage ������������������������������������������������������������������������������������������������������������159
Stacking Order and Using the Align Panel ������������������������������������������������������������������������������������������161
Using the Align Panel ��������������������������������������������������������������������������������������������������������������������������165
Masks and Masking �����������������������������������������������������������������������������������������������������166
A Simple Mask ������������������������������������������������������������������������������������������������������������������������������������167
Creating a Masked Animation �������������������������������������������������������������������������������������������������������������169
Your Turn: A Sunny Day on Catalina Island �������������������������������������������������������������������173
Adding the Clouds �������������������������������������������������������������������������������������������������������������������������������175
What You Have Learned ������������������������������������������������������������������������������������������������179
■ Chapter 4: Interactivity Basics ��������������������������������������������������������������������������181
Using Code in Animate �������������������������������������������������������������������������������������������������182
The Actions Panel �������������������������������������������������������������������������������������������������������������������������������182
Code Editor Preferences ���������������������������������������������������������������������������������������������������������������������187
The Code Snippets Panel ��������������������������������������������������������������������������������������������������������������������189
JavaScript and ActionScript ���������������������������������������������������������������������������������������������������������������190
General Programming Concepts in Animate CC �����������������������������������������������������������191
Classes �����������������������������������������������������������������������������������������������������������������������������������������������192
Properties �������������������������������������������������������������������������������������������������������������������������������������������193
Setting Properties with Code ��������������������������������������������������������������������������������������������������������������198
Methods ����������������������������������������������������������������������������������������������������������������������������������������������199
Events �������������������������������������������������������������������������������������������������������������������������������������������������202
Additional Coding Fundamentals ����������������������������������������������������������������������������������206
Syntax �������������������������������������������������������������������������������������������������������������������������������������������������206
Capitalization Matters �������������������������������������������������������������������������������������������������������������������������206
Semicolons Mark the End of a Line ����������������������������������������������������������������������������������������������������207
x
■ Contents
Mind Your Keywords ���������������������������������������������������������������������������������������������������������������������������207
Commenting Code ������������������������������������������������������������������������������������������������������������������������������207
Dot Notation ����������������������������������������������������������������������������������������������������������������������������������������209
Scope ��������������������������������������������������������������������������������������������������������������������������������������������������211
Variables ���������������������������������������������������������������������������������������������������������������������������������������������212
Data Types (ActionScript) ��������������������������������������������������������������������������������������������������������������������213
Operators ��������������������������������������������������������������������������������������������������������������������������������������������216
Conditional Statements ����������������������������������������������������������������������������������������������������������������������219
Working with JavaScript, HTML5 Canvas, and CreateJS ����������������������������������������������223
How to Read the CreateJS Documentation �����������������������������������������������������������������������������������������224
JavaScript Troubleshooting ����������������������������������������������������������������������������������������������������������������225
Using Additional JavaScript Libraries �������������������������������������������������������������������������������������������������226
Working with ActionScript and the Flash Platform �������������������������������������������������������228
Class Files and the Document Class ���������������������������������������������������������������������������������������������������229
ActionScript Syntax Checking�������������������������������������������������������������������������������������������������������������230
How to Read the ActionScript 3�0 Reference for the Adobe Flash Platform ���������������������������������������233
Using ActionScript and JavaScript �������������������������������������������������������������������������������236
Your Turn: Pause and Loop with JavaScript �����������������������������������������������������������������236
Pausing a Timeline �����������������������������������������������������������������������������������������������������������������������������237
Looping the Timeline ��������������������������������������������������������������������������������������������������������������������������240
Using Movieclips to Control the Timeline ��������������������������������������������������������������������������������������������241
Using Code Snippets ���������������������������������������������������������������������������������������������������������������������������242
Adding a Snippet to the Code Snippets Panel ������������������������������������������������������������������������������������245
What You Have Learned ������������������������������������������������������������������������������������������������247
■ Chapter 5: Audio in Animate CC ������������������������������������������������������������������������249
Animate CC and Audio Formats ������������������������������������������������������������������������������������250
Bit Depth and Sample Rates ���������������������������������������������������������������������������������������������������������������251
Animate CC and MP3 ��������������������������������������������������������������������������������������������������������������������������252
Adding Audio to Animate CC �����������������������������������������������������������������������������������������253
Importing an Audio File �����������������������������������������������������������������������������������������������������������������������253
Setting Sound Properties ��������������������������������������������������������������������������������������������������������������������254
xi