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