Adobe Animate CC: Introduction to Animation and Interactivity Adobe MAX 2016 | Session L1600 | Joseph Labrecque Contents Abstract .............................................................................................................................................. 5 Objectives .......................................................................................................................................... 5 About the Instructor ....................................................................................................................... 6 Recent Publications ....................................................................................................................... 7 Lynda.com | LinkedIn Learning - Animate CC 2017: New Features ............................... 7 Pluralsight - Animate CC Mobile App Development ......................................................... 7 Pluralsight - Animate CC Game Development ................................................................... 8 Lynda.com | LinkedIn Learning - Learn Adobe Animate CC: Data-Driven Animation ......................................................................................................................................................... 8 Lynda.com | LinkedIn Learning - Learn Adobe Animate CC: The Basics ..................... 8 Lynda.com | LinkedIn Learning - Adobe Animate CC: New Features ........................... 9 Adobe Press - Learn Adobe Animate CC for Interactive Media ...................................... 9 Train Simple - Animate CC Game Development ................................................................ 9 Lynda.com | LinkedIn Learning - Adobe Animate CC: First Look ................................. 10 TrainSimple - Animate CC Mobile App Development .................................................... 10 Lynda.com | LinkedIn Learning - HTML5 Canvas and WebGL in Flash Professional CC ................................................................................................................................................. 10 More Publications… ................................................................................................................ 10 Adobe Animate CC (formally Flash Professional) ................................................................. 11 New in Adobe Animate CC .......................................................................................................... 13 Adobe Animate CC [16.0 November 2016] ........................................................................ 13 Adobe Animate CC [15.2.1 August 2016] ............................................................................ 13 Adobe Animate CC [15.2 June 2016] ................................................................................... 13 Adobe Animate CC [15.1 February 2016] ............................................................................ 14 Getting Acquainted with the Workspace ................................................................................ 15 Adobe MAX 2016 | Adobe Animate CC: Introduction to Animation and Interactivity 2 SEQUENCE 0: Creating a New Document ............................................................................... 17 Creating a New Project ........................................................................................................... 17 About HTML5 Canvas and CreateJS ............................................................................... 19 Guides, Rulers, and Snapping ............................................................................................... 19 Layers and the Timeline ......................................................................................................... 20 Saving your Project .................................................................................................................. 21 SEQUENCE 1: Building Creative Assets ................................................................................... 22 Drawing the Waters .................................................................................................................. 22 Drawing the Moon .................................................................................................................... 24 Adding Features to the Moon ................................................................................................ 25 Building the Sky ........................................................................................................................ 28 Importing the City Skyline ...................................................................................................... 29 Title Creation and Layout ...................................................................................................... 31 SEQUENCE 2: Animating Creative Content ............................................................................ 33 Prepare the Timeline for Animation .................................................................................... 33 Turn the City Black ................................................................................................................... 34 Animate the Waters ................................................................................................................. 35 Animate the Moon .................................................................................................................... 38 Using the Motion Editor ..................................................................................................... 42 Adding some Moonlight .................................................................................................... 44 Animate the Sky Gradient ...................................................................................................... 44 Title Fade Transition ............................................................................................................... 47 Camera Animation ................................................................................................................... 49 Camera Tint and Color Effects ......................................................................................... 53 Related Tools ........................................................................................................................ 53 Fixing San Diego ....................................................................................................................... 54 SEQUENCE 3: Enabling Interactivity ......................................................................................... 56 Adobe MAX 2016 | Adobe Animate CC: Introduction to Animation and Interactivity 3 ActionScript and JavaScript .................................................................................................. 56 Prepare the Timeline for Interactivity ................................................................................. 57 Stopping the Playhead ........................................................................................................... 57 Using Code Snippets .......................................................................................................... 59 HTML5 Components ........................................................................................................... 60 Building UI Elements ............................................................................................................... 61 Play and Replay Functions .................................................................................................... 66 HTML5 Canvas Problems .................................................................................................. 70 SEQUENCE 4: Publishing and Exporting ................................................................................. 71 HTML5 Canvas ........................................................................................................................... 71 HD Video ..................................................................................................................................... 72 Animated GIF ............................................................................................................................. 73 Flash Player ................................................................................................................................ 75 WebGL ........................................................................................................................................ 76 Publishing for iOS and Android with AIR ............................................................................ 77 Using Custom Publish Targets ............................................................................................. 78 Additional Resources ................................................................................................................... 79 Adobe MAX 2016 | Adobe Animate CC: Introduction to Animation and Interactivity 4 Abstract Adobe Animate CC is a professional tool used to create a diverse variety of project types including rich animations, compelling interactives, award-winning games, popular mobile apps, and more. Learn how to get started creating your own engaging animated and interactive content across multiple platforms using Animate CC in this lab. Joseph Labrecque, interactive content designer and developer, will guide you through the following topics: • Capabilities of Animate CC to create