Beginning 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 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 Contents ■

Using Audio in Animate CC ������������������������������������������������������������������������������������������� 257 Choosing a Sound Type: Event and Stream ����������������������������������������������������������������������������������������257 Removing an Audio File from the Timeline �����������������������������������������������������������������������������������������260 Getting Loopy ��������������������������������������������������������������������������������������������������������������������������������������261 Adjusting Volume and Pan ������������������������������������������������������������������������������������������������������������������262 Splitting Stream Audio Along the Timeline �����������������������������������������������������������������������������������������265 Your Turn: Adding Sound to a Button ���������������������������������������������������������������������������� 267 Controlling Audio with JavaScript �������������������������������������������������������������������������������� 268 Playing a Sound from the Library �������������������������������������������������������������������������������������������������������268 Using a Button to Play a Sound ����������������������������������������������������������������������������������������������������������270 Playing a Sound from Outside of Animate CC �������������������������������������������������������������������������������������271 Turning a Remote Sound On and Off ��������������������������������������������������������������������������������������������������272 Adjusting Volume with Code ���������������������������������������������������������������������������������������������������������������273 Your Turn: Storm Over Lake Superior ��������������������������������������������������������������������������������������������������275 What You Have learned ������������������������������������������������������������������������������������������������ 279 ■■Chapter 6: Text in Animate CC ��������������������������������������������������������������������������� 281 Fonts and Typefaces ����������������������������������������������������������������������������������������������������� 282 Adobe CoolType ������������������������������������������������������������������������������������������������������������ 284 CoolType to the Rescue ����������������������������������������������������������������������������������������������������������������������285 Typefaces and Fonts ���������������������������������������������������������������������������������������������������������������������������286 Using Adobe Typekit ���������������������������������������������������������������������������������������������������������������������������286 Using Google Fonts ������������������������������������������������������������������������������������������������������� 290 Working with Device Fonts ������������������������������������������������������������������������������������������� 291 Embedding Fonts ��������������������������������������������������������������������������������������������������������� 293 Your Turn: Working with Text ���������������������������������������������������������������������������������������� 296 A Word About TLF Text in Animate CC ��������������������������������������������������������������������������� 298 Dealing with Older Documents Using TLF ������������������������������������������������������������������������������������������299 Creating Text with JavaScript ��������������������������������������������������������������������������������������� 300 Creating Text with ActionScript ������������������������������������������������������������������������������������ 303

xii Contents ■

Your Turn: Scrollable Text in HTML5 Canvas ����������������������������������������������������������������� 307 Rolling Your Own Scroller �������������������������������������������������������������������������������������������������������������������307 What You Have learned ������������������������������������������������������������������������������������������������ 311 ■■Chapter 7: Animation ����������������������������������������������������������������������������������������� 313 Before We Start ������������������������������������������������������������������������������������������������������������ 314 Shape Tweening ����������������������������������������������������������������������������������������������������������� 315 Scaling and Stretching �����������������������������������������������������������������������������������������������������������������������315 Modifying Shape Tweens ��������������������������������������������������������������������������������������������������������������������320 Altering Shapes ����������������������������������������������������������������������������������������������������������������������������������322 Shape Hints ����������������������������������������������������������������������������������������������������������������������������������������326 Altering Gradients �������������������������������������������������������������������������������������������������������������������������������330 Classic Tweening ���������������������������������������������������������������������������������������������������������� 332 Rotation ����������������������������������������������������������������������������������������������������������������������������������������������332 Classic Tween Properties ��������������������������������������������������������������������������������������������������������������������334 Scaling, Stretching, and Deforming ����������������������������������������������������������������������������������������������������335 Easing �������������������������������������������������������������������������������������������������������������������������������������������������338 Custom Easing ������������������������������������������������������������������������������������������������������������������������������������341 Using Animation ����������������������������������������������������������������������������������������������������������� 349 A Closer Look at the Timeline Panel ���������������������������������������������������������������������������������������������������349 Onion Skinning �����������������������������������������������������������������������������������������������������������������������������������350 Modifying Multiple Frames �����������������������������������������������������������������������������������������������������������������353 Combining Timelines ��������������������������������������������������������������������������������������������������������������������������355 Motion Guides �������������������������������������������������������������������������������������������������������������������������������������361 Tweening a Mask ��������������������������������������������������������������������������������������������������������������������������������364 Tweening Filter Effects �����������������������������������������������������������������������������������������������������������������������366 Programmatic Animation ���������������������������������������������������������������������������������������������� 368 Copying Motion as Data ����������������������������������������������������������������������������������������������������������������������369 Using the Keyboard to Control Motion ������������������������������������������������������������������������������������������������372 Creating Random Motion ��������������������������������������������������������������������������������������������������������������������381 Advanced Random Motion Using JavaScript ��������������������������������������������������������������������������������������384 What You Have Learned ������������������������������������������������������������������������������������������������ 388

xiii Contents ■

■■Chapter 8: The Motion Editor and Inverse Kinematics �������������������������������������� 391 Animating with the Motion Editor ��������������������������������������������������������������������������������� 392 Getting Acquainted: Scaling and Moving ��������������������������������������������������������������������������������������������393 Applying Easing ����������������������������������������������������������������������������������������������������������������������������������399 Easing with Graphs �����������������������������������������������������������������������������������������������������������������������������400 Managing property keyframes ������������������������������������������������������������������������������������� 408 Changing Duration Proportionally �������������������������������������������������������������������������������������������������������411 Motion Paths ���������������������������������������������������������������������������������������������������������������� 412 Manipulating Motion Paths �����������������������������������������������������������������������������������������������������������������412 Motion Tween Properties ��������������������������������������������������������������������������������������������������������������������416 Motion Presets ������������������������������������������������������������������������������������������������������������� 417 Inverse Kinematics (IK) ������������������������������������������������������������������������������������������������� 421 Using the Bone Tool ����������������������������������������������������������������������������������������������������������������������������421 Putting Some “Spring” in Your Bones �������������������������������������������������������������������������� 432 Applying Joint Translation ������������������������������������������������������������������������������������������������������������������434 Animating IK Poses �����������������������������������������������������������������������������������������������������������������������������442 Using the Bind Tool �����������������������������������������������������������������������������������������������������������������������������444 Your Turn: Animate a Fully Rigged IK model ���������������������������������������������������������������������������������������449 What You Have Learned ������������������������������������������������������������������������������������������������ 454 ■■Chapter 9: Animate CC and the Third Dimension ����������������������������������������������� 457 A Brief Lowering of Expectations ��������������������������������������������������������������������������������� 457 Understanding the Vanishing Point ������������������������������������������������������������������������������ 458 Using the 3D Rotation Tool ������������������������������������������������������������������������������������������� 459 The 3D Translation Tool �����������������������������������������������������������������������������������������������������������������������461 How to Set a Vanishing Point ��������������������������������������������������������������������������������������������������������������461 How to Use the 3D Translation Tool ����������������������������������������������������������������������������������������������������464 Using the 3D Center Point to Your Advantage �������������������������������������������������������������������������������������465 Be Aware of Depth Limitations �����������������������������������������������������������������������������������������������������������468

xiv Contents ■

The Camera Tool in Animate CC ����������������������������������������������������������������������������������� 471 How to Use the Camera ����������������������������������������������������������������������������������������������������������������������473 How to Move the Camera �������������������������������������������������������������������������������������������������������������������474 What You Have Learned ������������������������������������������������������������������������������������������������ 476 ■■Chapter 10: Video ���������������������������������������������������������������������������������������������� 477 Video on the Web and Beyond �������������������������������������������������������������������������������������� 478 The MP4 and WebM Video Formats ����������������������������������������������������������������������������������������������������478 Encoding Video ������������������������������������������������������������������������������������������������������������� 479 Using Adobe Media Encoder ���������������������������������������������������������������������������������������������������������������479 How to Use the Basic Video Settings ��������������������������������������������������������������������������������������������������482 How to Set the Video Bitrate ���������������������������������������������������������������������������������������������������������������483 How to Encode the Audio Track ����������������������������������������������������������������������������������������������������������484 Using the Animate CC Video Wizard ����������������������������������������������������������������������������������������������������486 Video Playback with ActionScript 3.0 Documents �������������������������������������������������������� 489 Using the ActionScript 3.0 FLV Playback 2.5 Component �������������������������������������������������������������������489 Playing Video Using Raw ActionScript ������������������������������������������������������������������������������������������������492 Video with HTML5 Canvas Documents ������������������������������������������������������������������������� 494 Using the HTML5 Canvas Video Component ���������������������������������������������������������������������������������������495 Creating Captions and Adding Accessibility ����������������������������������������������������������������� 498 WebVTT and HTML5 Canvas Documents ��������������������������������������������������������������������������������������������498 WebVTT and ActionScript 3.0 Documents ������������������������������������������������������������������������������������������504 Your Turn: Custom HTML5 Canvas Video Controls �������������������������������������������������������� 510 Bonus Round: Create a Cinemagraph in Animate CC ��������������������������������������������������� 513 How to Create an Animated GIF ����������������������������������������������������������������������������������������������������������516 What You Have Learned ������������������������������������������������������������������������������������������������ 518 ■■Chapter 11: Components and External Media ��������������������������������������������������� 519 Building Content with UI Components �������������������������������������������������������������������������� 519 Working with ActionScript 3.0 UI Components �����������������������������������������������������������������������������������520 Working with HTML5 Canvas UI Components �������������������������������������������������������������������������������������529

xv Contents ■

Building a Slideshow with XML ������������������������������������������������������������������������������������ 534 Image Files and XML Structure ����������������������������������������������������������������������������������������������������������535 Assembling the UI Components ����������������������������������������������������������������������������������������������������������538 Slideshow Functions ��������������������������������������������������������������������������������������������������������������������������542 Building a MP3 Player with JSON ��������������������������������������������������������������������������������� 547 MP3 Files, Image Files, and JSON Structure ��������������������������������������������������������������������������������������547 Assembling the UI Components ����������������������������������������������������������������������������������������������������������551 Sound Playback Functions �����������������������������������������������������������������������������������������������������������������554 Additional Customization Options �������������������������������������������������������������������������������������������������������558 What You Have Learned ������������������������������������������������������������������������������������������������ 560 ■■Chapter 12: Optimizing and Publishing Animate CC Projects ��������������������������� 563 Animate CC, Flash Player, and the Internet ������������������������������������������������������������������ 563 This “Internet” Thing ��������������������������������������������������������������������������������������������������������������������������564 Enter the World Wide Web ������������������������������������������������������������������������������������������������������������������565 Bandwidth ������������������������������������������������������������������������������������������������������������������������������������������565 Project Delivery ������������������������������������������������������������������������������������������������������������ 567 Project Profiling ������������������������������������������������������������������������������������������������������������ 568 Simulating a Download �����������������������������������������������������������������������������������������������������������������������569 Optimizing Elements in an Animate CC Project ����������������������������������������������������������������������������������570 Publishing and Web Formats ���������������������������������������������������������������������������������������� 573 Flash Player ����������������������������������������������������������������������������������������������������������������������������������������573 HTML ��������������������������������������������������������������������������������������������������������������������������������������������������574 JavaScript �������������������������������������������������������������������������������������������������������������������������������������������574 Cascading Style Sheets (CSS) ������������������������������������������������������������������������������������������������������������574 Images ������������������������������������������������������������������������������������������������������������������������������������������������575 Audio ��������������������������������������������������������������������������������������������������������������������������������������������������575 Video ���������������������������������������������������������������������������������������������������������������������������������������������������575

xvi Contents ■

Publish Settings for ActionScript 3.0 Documents ��������������������������������������������������������� 575 Publish Formats ����������������������������������������������������������������������������������������������������������������������������������577 Publish Settings for HTML5 Canvas Documents ���������������������������������������������������������� 580 Publish Formats ����������������������������������������������������������������������������������������������������������������������������������581 What You Have Learned ������������������������������������������������������������������������������������������������ 587

Index ��������������������������������������������������������������������������������������������������������������������� 589

xvii About the Authors

Tom Green is currently a Professor of Interactive Multimedia through the School of Media Studies and IT at the Humber Institute of Technology and Advanced Learning in Toronto, Canada. He has written numerous books on Adobe Technologies for Apress, is the Graphics Software Expert for About.com, and has written hundreds of tutorials for several magazines and web sites. Tom is an Adobe Community Professional and an Adobe Education Leader. He has spoken and lectured at more than 50 conferences and universities internationally, including Adobe Max and FITC, and at over a dozen universities in China, including the Beijing Central Academy of Fine Arts and Shenzhen Polytechnic. In his spare time, you catch him hiking a local trail or paddling across a lake in Northern Ontario.

Joseph Labrecque is primarily employed by the University of Denver as a senior interactive software engineer specializing in the creation of expressive desktop, web, and mobile solutions. His work incorporates a strong focus on the Adobe Flash platform alongside more general web standards initiatives involving the use of HTML5, CSS, JavaScript, and related technologies. He is also the proprietor of Fractured Vision Media, LLC, a digital media production company, technical consultancy, and distribution vehicle for a variety of creative works. Joseph authors video courses and written works through organizations which include Lynda.com, Peachpit, Pluralsight, Apress, and more. Joseph is an Adobe Education Leader and Adobe Community Professional.

xix About the Technical Reviewer

Thomas Benner is an Adobe Community Professional, Adobe Education Leader, and Adobe Certified Expert in Flash, Photoshop, and Illustrator. He has extensive experience teaching web design and development, vector and raster graphics, interactive multimedia, animation, digital presentation, and programming. He has been on the Graphic, Web, and Interactive Design faculty at the Art Institute of Austin for the past eight years. He is an innovative designer, animator, developer, programmer, and instructor who loves training others. He is always seeking an opportunity to develop outstanding training materials, utilizing the Adobe Creative Cloud and Apple Macintosh software with a focus on integrating various applications (Photoshop, Illustrator, Animate, Dreamweaver, Muse, Premiere, After Effects, and Behance) for effective desktop and screen publishing workflows.

xxi Acknowledgments

In a previous incarnation of this book, back when the subject was Flash CS3, I said, “Working with a co- author can be a tricky business. In fact, it is a lot like a marriage. Everything is wonderful when things are going well, but you never really discover the strength of the relationship until you get deep into it.” Strange as it may sound, working with Joseph has been wonderful. I have known Joseph for too many years to count and our paths have crossed as Adobe Education Leaders, a rather extensive series of jointly-written articles around Animate CC for Adobe and at various conferences where we presented. I have always enjoyed Joseph’s company as well as his dry sense of humor and a way of explaining the intricacies of code that is awesome to witness. In fact, when I stepped away from Flash for a couple of years, Joseph became one of the strongest advocates for Animate CC out there. There were many times when I would gently tell him, “Dial it back, Joseph. Flash is dead.” I am so glad he never listened because, when asked by Apress if I would undertake this title, I didn’t have to think twice about who my co-author would be. Next up is our beloved editor, Nancy Chen, who was relentless in her efforts to bring this book to life. It is an odd relationship between an editor and an author because there seems to be this perception that it is adversarial. In fact, it is just the opposite and and I am grateful to have that relationship with Nancy. Another group of people who unwittingly had a profound influence on this book are my students and two colleagues—George Paraventes and David Neuman—at Humber. George and David always look at process and tools when it comes to development and much of the mobile stuff in these pages was sparked by conversations we had. My students were unwitting beta testers. I tried out many of the exercises in this book during our weekly classes and they rather forcefully let me know whether my idea worked or where I needed to start again. Finally, writing a book of this size means I hole up in my office and generally become moody and difficult to live with as I mull over an exercise or the order of a chapter. How my wife and life partner, Keltie, puts up with it, I’ll never know but it does tend to all work out in the end. —Tom Green

I would first like to acknowledge Tom for bringing me into this project and for allowing me to run wild with some of the assets and exercises we came up with. Throwing together Serbian vampires, Ernest Hemingway, aural alter-egos, and the preparation of fine absinthe into a discussion on Animate CC, ActionScript, and HTML5 Canvas makes for a great authoring experience! I’d also like to mention Ajay Shukla and Rich Lee at Adobe, who are both widely responsible for the revival of Flash Professional (as Animate CC) and the ongoing successes we all share. Finally—as always—a thank you to my wife Leslie and our daughters Paige and Lily for dealing with my seemingly constant occupation with ongoing extra-familial activities. —Joseph Labrecque

xxiii Introduction

This book marks the fifth time in 10 years that I have written a book for Apress about Animate CC when it was still known as Flash. The first book was the scariest because the “Foundation Flash …” series was one of Apress’ premiere titles and best sellers. It was both frightening and exhilarating to be the author and, I must admit, it was one heck of a lot of fun. Then Steve Jobs stepped in with his infamous rejection of the Flash Player on the iOS platform and … that was that. In fact, one of the most memorable conversations I had with my editor at the time was when I had wrapped up the Flash CS5 title and he said, “Well, this is probably the last Flash title we will ever publish.” Here we are again and I can’t help but thinking, “Isn’t it funny how things turn out?” This software has had some pretty dark years and in many respects, it needed them. Flash, now Animate CC, was software looking for a market and really not succeeding. That started turning around a couple of years ago when Adobe started slowly turned the application toward the HTML5 universe, removing a lot of bloat—Device Central is a good example—and stripping it down to its current incarnation with a sparkly new name —Animate CC. That is the subject of this book. This book is quite a bit different from previous editions because waltzing between HTML5 Canvas and ActionScript 3.0 documents creates some pretty interesting challenges when it comes to things like what code snippet to use or what video format to use in the video chapter. Then it occurred to both of us that that we were asking the wrong questions. The question should have been, “What do you need to know and why.” That was when we realized, “Nothing has really changed, just how we talk about it.” Thus, the tone of this book is friendly and inviting, and there isn’t a ton of what we call “techie talk.” One thing we did notice as we started planning the exercises is that Animate CC is one seriously cool, mobile prototyping tool. This explains the numerous exercises that demonstrate a technique but the explanation takes place in an Android or iOS interface. As one of the authors has been saying for over two years, ”You can’t talk about motion. You have to show it.” Animate CC has all of the tools you need to do just that and in less time than you may think. One other aspect of this book is that we had a huge amount of fun developing the exercises and examples in this book. The word “fun” is important because if learning is fun, what you learn will stay with you. Explaining 9-slice scaling is a lot more fun when applied to a Chinese Olive Seller. Explaining how to “swap” movieclip instances is more understandable when you drop an anvil on a rabbit’s head. Nested movieclips become more real when explained in the context of a Hostess Twinkie. Want an Animate CC quick start? Welcome to Lake Nanagook. As you may have guessed, we both continue to exhibit a sense of joy and wonder with Animate CC and we hope some of that rubs off on you as well.

Book Structure and Flow This is not a typical software book. There is no common project that runs throughout the book. Instead, each chapter contains a number of exercises and examples designed to give you experience with the core concepts of Animate CC. Then, in several chapters, we turn you loose with a “Your Turn” exercise.

xxv Introduction ■

We start by taking you for a walk through the Animate CC interface, pointing out important areas and showing how they work. We finish up our stroll on the shores of Lake Nanagook and create a scene with a moonrise and howling wolves. Chapter 2 introduces you to working with the graphic tools and finishes with showing you how you can bring your Illustrator, Photoshop, and Sketch 3 work into Animate CC. Chapter 3 introduces you to the all-important Symbols and Library features in Animate CC. In this chapter, you learn about 9-slice scaling by meeting an olive seller in Guangzhou, China. We show you how filters work by adding a realistic drop shadow to a dancing fool; you discover how to use the Animate CC Library and your Creative Cloud Library as repositories for reusable content, including “bunny bits”. We then turn you loose on Catalina Island off the coast of California to bring clear skies to a foggy day. At this point in the book, you have been exposed to the fundamentals of Animate CC and the time has arrived to dig into the coding aspect of the application. This is the focus of Chapter 4 and is ideal for those of you who have never used ActionScript 3.0. Chapter 5 starts by explaining how to use audio in Animate CC and finishes up with you creating a rather intense rainstorm. Chapter 6 reinforces the message that “text isn’t the grey stuff around your graphics”. We show you how it is both serious and fun and how to use two of the most extensive type libraries out there—Adobe Typekit and Google Web Fonts—right from Animate CC. Chapters 7 and 8 are extensive overviews of the animation features of Animate CC. In these two chapters, you will be dropping an anvil on a rabbit’s head, banging hammers, fixing a neon sign, learning about bones with bones, and animating an fully rigged Inverse Kinematics model. Chapter 9 is devoted to the 3D aspects of Animate CC. In this chapter, you use a vanishing point to put an image on a wall-mounted computer screen, opening and closing doors and setting an astronaut loose in space by using the new camera feature of Animate CC. Chapter 10 moves into the realm of video in Animate CC. Here, you will learn how to create and deploy video in your HTML5 Canvas and ActionScript 3.0 projects. We even show you how to create a cinemagraph in Animate CC. Chapter 11 is a rather extensive look at many of the HTML5 Canvas and ActionScript 3.0 components that are packaged with Animate CC, along with an overview of XML and JSON data structures. We finish up by answering the inevitable question, “How do I deploy my Animate CC projects?” Finally, Joseph and I are no different from you in that we, too, are learning more about what you can and can’t do in Animate CC. Although we may be coming at it from a slightly different level than you, the constant stream of updates and feature additions to Animate CC makes this a pretty exciting time for us as we discover where Animate CC fits into the mobile, app development, and web design fields. Our final words of advice are these: “The amount of fun you can have with Animate CC should be illegal. We’ll see you in jail!”

xxvi