Adobe Animate CC User guide

Adobe

"OJNBUF CC

Help

Last updated 6/17/2016

Legal notices

For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.

iii

Last updated 6/17/2016

Contents

Chapter 1: What's New

New features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

Chapter 2: Platforms

Use Document Type Converter to convert Animate CC projects to other document formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Custom Platform Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Create and publish HTML5 Canvas documents in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Creating and publishing a WebGL document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

How to package applications for AIR for iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Publishing AIR for Android applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Publishing for Adobe AIR for desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

ActionScript publish settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Best practices - Organizing ActionScript in an application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

How to use ActionScript with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Best practices - Accessibility guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Accessibility in the Animate workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Writing and managing scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Enabling Support for Custom Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

Enabling Support for Custom Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Custom Platform Support API Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Creating accessible content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Debugging ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Enabling Support for Custom Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Chapter 3: Workspace and workflow

Using Creative Cloud Libraries and Adobe Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Use the Stage and Tools panel for Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Animate workflow and workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Using Typekit Web fonts in HTML5 Canvas documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Timelines and ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Working with multiple timelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Set preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Using Animate CC authoring panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Create timeline layers with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Create a sprite sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Moving and copying objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Sync Animate Preferences with Creative Cloud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Working with Adobe Color panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Find and Replace in Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Undo, redo, and the History panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

How to use the Timeline in Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

iv

ANIMATE

Contents

Last updated 6/17/2016

Chapter 4: Animation and Interactivity

Using Bone tool animation in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Animation Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

How to work with classic tween animation in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

How to edit motion tweens using Motion Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Shape tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

How to use frames and keyframes in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Frame-by-frame animation in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Best practices - Advertising with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Animation basics in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Add interactivity with code snippets in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Custom Brushes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

How to create buttons with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Working with multiple timelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

How to work with scenes in Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

How to use mask layers in Adobe Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Adding custom eases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Setting up animation tween spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Animate position with a tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Creating a Motion Tween Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Create tween animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Creating and Applying Motion Presets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Editing the motion path of a tween animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Setting up animation tween spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Motion tween and ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Chapter 5: Multimedia and Video

Exporting SVG files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

How to use sound in Adobe Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Create video files for use in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

How to add video to an Animate document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Working with video cue points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Transforming and combining graphic objects in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Working with and create symbol instances in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Draw and create objects with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

Color Panels in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Strokes, fills, and gradients with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

Draw lines & shapes with Adobe Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Arranging objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Automating tasks with the Commands menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

Apply patterns with the Spray Brushtool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Applying blend modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

3D graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

Exporting Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

Work with the libraries in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

How to embed fonts for consistent text appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Drawing preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

v

ANIMATE

Contents

Last updated 6/17/2016

Scaling and caching symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

Graphic filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Sharing library assets across files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

Reshape lines and shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Working with Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Using Animate CC with Adobe Scout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Working with Text Layout Framework (TLF) text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Working with Illustrator AI files in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Working with InDesign files in Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Working with symbols in Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Check spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Chapter 6: Exporting and Publishing

How to export files from Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

OAM publishing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Publishing AS3 documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

Export QuickTime video files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Controlling external video playback with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Best practices - Tips for creating content for mobile devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Best practices - Video conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Best practices - SWF application authoring guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

Best practices - Structuring FLA files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

Best Practices to optimize FLA files for Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431

Best practices - Behaviors conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

ActionScript publish settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442

Specify publish settings for Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

Working with Adobe Premiere Pro and After Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

Working with Animate and FlashBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468

Exporting Projector files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Export Video with Animate CC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

HTML publishing templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

1

Last updated 6/17/2016

Chapter 1: What's New

New features summary

Adobe® Flash Professional® CC is now Adobe® Animate® CC.

Adobe Animate CC lets you create vector animations, advertisements, multimedia content, immersive experiences,

applications, games, and more, in a timeline-based authoring environment. Animate offers native support for multiple

outputs such as HTML5 Canvas and WebGL, and is extensible to support custom formats such as SnapSVG.

Animate’s flexibility with output formats ensure that your content can be viewed anywhere, without the need for plug-

ins.

Animate also offers best in class drawing and illustration tools and powerful integration with Adobe CreativeSync. As

Animate CC is part of Adobe Creative Cloud, you get access to all the latest updates and future releases the moment

they’re available. Learn more about

Creative Cloud.

The latest update to Animate CC 2015 release (2015.2) introduces new features such as Pattern brushes, Frame picker,

Layer transparency, improved web publishing options, and other enhancements.

Adobe Animate CC 2015.2 release | June 2016

The 2015.2 release introduced exciting new features such as:

• Pattern brushes

• Frame picker

• Layer transparency

• Improved web publishing options

• Merging JSON/JS code

• Embed JavaScript into HTML

• Support for transparent canvas background

• HiDPI compatible HTML5 canvas output

• Responsive scaling

• Transparent and responsive OAMs

• Author-time bitmap snapping

2

What's New

Last updated 6/17/2016

• Preloader

• HTML5 canvas publish template improvements

• JSAPI support to import and export HTML templates for canvas documents

• Publish canvas assets to root folder

• Center stage

• Other enhancements

• User-defined colored onion skinning

• Pinscript

• Advanced PSD import options

• Advanced AI import options

• Turbo charged performance on windows platform

• Improved paint brush interactions

• Latest flash player and AIR SDK integration

Pattern brushes

New in Animate CC 2015.2 | June 2016

Learn how to use Pattern brushes to paint a vector pattern along the path or stretch to its entire length. Use the

i

ntegrated global library within Animate to use Art and Pattern brushes. In addition to the default brush presets, you

can import new Pattern Brushes to your Animate document using the CC Libraries.

3

What's New

Last updated 6/17/2016

For more information on this new feature, see the Pattern brushes.

Frame picker

New in Animate CC 2015.2 | June 2016

Use frame picker to visually preview and choose the first frame for a graphic symbol. In previous releases, you could

not preview the frames without getting within the symbol. This feature enhances the user experience for animation

workflows such as Lip Sync.

4

What's New

Last updated 6/17/2016

For more information on this new feature, see Frame Picker

Layer transparency

New in Animate CC 2015.2 | June 2016

Animate introduces the capability to set the visibility of the layer to transparent. To do so, Shift+Click on the eye

column in the timeline to set the visibility to transparent.

For more information, see Layer transparency.

Improved web publishing options

Merging JSON/JS code

New in Animate CC 2015.2 | June 2016

Animate embeds JSON file into JS. When you create a Spritesheet during canvas publishing, no external Json file is

created and is included within the JS instead by default.

With this change, you can even preview the published files locally without hosting them on a server (as before).

For more information on this new feature, see Merging JSON/JS code.

5

What's New

Last updated 6/17/2016

Embed JavaScript into HTML

New in Animate CC 2015.2 | June 2016

Animate introduces the capability to include JS file within the HTML file during canvas publishing.

For more information on this new feature, see Embed JavaScript into HTML

Support for transparent canvas background

New in Animate CC 2015.2 | June 2016

Want to create a transparent canvas during publishing to view the underlying HTML content? You can now set the

canvas background to transparent. To do so, use the Alpha % to set the transparency level and the No Color swatch

option to completely set the canvas stage to transparent.

For more information on this new feature, see Support for transparent background.

HiDPI compatible HTML5 canvas output

New in Animate CC 2015.2 | June 2016

Animate generated output is now HiDPI compliant and delivers a sharper output on high resolution displays.

For more information on this new feature, see HiDPI compatible HTML5 canvas output.

6

What's New

Last updated 6/17/2016

Responsive scaling

New in Animate CC 2015.2 | June 2016

Want to create a responsive animation? Learn how Animate resizes the published output based on various form factors

to deliver a responsive, sharper, and a crisper HiDPI compliant output.

For more information on this new feature, see Responsive scaling.

Transparent and responsive OAMs

You can now generate transparent and responsive OAMs from Animate and directly embed them within Muse,

Captivate, and Dreamweaver.

For more information, see OAM publishing

Author-time bitmap snapping

New in Animate CC 2015.2 | June 2016

Learn how to snap the bitmaps to the nearest pixels during author-time so that they look sharper on canvas. In previous

releases, the bitmaps blurred on the canvas and did not provide an optimum user experience. From this release

onwards, when publishing an HTML canvas document, Animate ensures that the bitmaps are snapped to the nearest

pixels so that they look sharper on the canvas.

For more information on this new feature, see Author-time bitmap snapping.

Preloader in HTML5 canvas

New in Animate CC 2015.2 | June 2016

Preloader is an animated GIF which is displayed when the scripts and assets required to render an animation is loading.

Once the assets are loaded, the preloader is hidden and the actual animation is displayed.

7

What's New

Last updated 6/17/2016

For more information on this new feature, see Basic settings

HTML5 canvas publish template improvements

New in Animate CC 2015.2 | June 2016

Learn how Animate has modularized the HTML 5 canvas template for better customizations and provides more control

over published outputs.

For more information on this new feature, see HTML 5 canvas template improvements.

JSAPI support to import and export HTML templates for canvas documents

New in Animate CC 2015.2 | June 2016

Use new JSAPIs that support import and export of HTML templates for canvas documents.

For more information on this new feature, see JSAPI support.

Publish canvas assets to root folder

New in Animate CC 2015.2 | June 2016

Use this feature to publish canvas assets to the root folder instead of the sub folders.

8

What's New

Last updated 6/17/2016

For more information on this new feature, see Publish canvas assets to root folder.

Center stage

New in Animate CC 2015.2 | June 2016

Improve your user experience by using the various alignment options to display the canvas in the center of the browser

window. Select options to center the stage horizontally, vertically or both.

For more information on this new feature, see Center stage.

Other enhancements

User-defined colored onion skinning

Enhanced in Adobe Animate CC 2015.2 | June 2016

Use customized onion skinning color coding to help you distinguish between the past, present, and future frames.

Onion skin frames that move away from active frame appear with progressively decreasing transparency.

For more information on this enhanced feature, refer Use onion skinning

9

What's New

Last updated 6/17/2016

Pinscript

Enhanced in Adobe Animate CC 2015.2 | June 2016

Use the Pin Script feature to pin tabs of individual scripts in the Actionscript pane and move them accordingly. This

feature is useful if you have not organized the code within your FLA file into one central location or if you are using

multiple scripts. You can pin a script to retain the open location of the code in the Actions panel and toggle between

the open scripts.

For more information on this enhanced feature, refer Overview of the Actions panel

Advanced PSD import options

Enhanced in Adobe Animate CC 2015.2 | June 2016

10

What's New

Last updated 6/17/2016

Animate can import still images in many formats, but you usually use the native Photoshop PSD format when

importing still images from Photoshop into Animate. When importing a PSD file, Animate preserves many of the

attributes that were applied in Photoshop and provides options to maintain the visual fidelity of the image.

For more information on this enhanced feature, see Advanced PSD import options.

Advanced AI import options

Enhanced in Adobe Animate CC 2015.2 | June 2016

Animate lets you import Adobe® Illustrator® AI files and preserve most of the editability and visual fidelity of your

artwork. Enhanced AI Importer also provides you with a great degree of control in determining how your Illustrator

artwork is imported into Animate and lets you specify how to import specific objects into an AI file.

11

What's New

Last updated 6/17/2016

For more information on this enhanced feature, see Advanced AI import options.

Turbo charged performance on windows platform

Enhanced in Adobe Animate CC 2015.2 | June 2016

Experience turbo charged performance improvements for all your everyday workflows such as Timeline Playback,

Timeline scrubbing, Drawing, Panning, Zooming, Transforms, and watch your animations come alive!

Improved paint brush interactions

Enhanced in Adobe Animate CC 2015.2| June 2016

Animate introduces enhanced performance and experience when using paint brush strokes. Paint brush performance

enhancements are applicable for transform operations on paint brush strokes such as scale/translate/rotate in addition

to zoom/pan of stage.

Latest Flash player and AIR SDK integration

Enhanced in Adobe Animate CC 2015.2 | June 2016

Animate supports the latest version of Flash Player (version 21) and integrates AI SDK version 21.0.

12

Last updated 6/17/2016

Chapter 2: Platforms

Use Document Type Converter to convert Animate CC

projects to other document formats

Convert your Animate document to another document format

The universal document type converter enables conversion of your existing FLA projects (of any type) to any other

document type such as HTML5 Canvas, ActionScript/AIR, WebGL, or a custom document type. When you convert to

a format, you can take advantage of the authoring features that Animate offers for that document type.

Converting your Animate document using the document type converter

To convert your Animate document to another document type:

1 Open the document that you want to convert and click Commands > Convert to Other Document Formats. The

Document Type Converter dialog box appears.

2 In the Convert your document to drop-down, select the document type that you want the convert the document to.

3 Click Browse to select the directory in which you want to save the converted file and click OK.

Note: When you try to convert any multi-scene document to HTML5 Canvas doctype, all the scenes are saved as

separate files because HTML5 Canvas document type does not support multiple scenes. Place all your scenes within

separate symbols if you want to use them in a single document.

You can convert your existing Animate projects to another format or reuse assets in a project by simply copying and

pasting layers and library symbols.

13

Platforms

Last updated 6/17/2016

Custom Platform Support

Animate supports creating rich graphics and animations using document types such as ActionScript, HTML5, and

WebGL. The Custom Platform Support feature helps to extend the power of Animate CC to support platforms that are

not native to Animate.

Custom Platform Support can be added to Animate by implementing a plugin using a set of Application Programming

Interfaces (APIs) that are provided as part of the Custom Platform Support Development Kit. The developers can create

custom platform support plugins for Animate using these interfaces and referring to the the sample code. By installing

a platform support plugin for a new document type, users can create their art using the rich feature set of Animate and

publish it in the output format of the custom platform.

Workflows

The Custom Platform Support feature includes two parts: one for the developer who creates custom platform support

plugins and the other for the user who installs and uses the plugin.

Developer

If you are a developer who builds add-ons for Animate, you can use the following workflow to develop and distribute

your plugins:

Note: For instructions on how to develop Custom Platform Support plugins using the development kit, see Enabling Support

for Custom Platforms.For detailed documentation of APIs in the development kit, see Custom Platform Support API

Reference.

User

14

Platforms

Last updated 6/17/2016

If you are a Animate user, you can acquire a Custom Platform Plugin using one of the following methods:

• Download the Custom Platform Support plugin for a platform of your choice from the Adobe Add-ons page. The

Adobe Add-on page allows you to acquire a plugin and install it using the Adobe Creative Cloud application.

• Get a .zxp file from a plugin developer and install it using the Adobe Extension Manager application.

The following workflow illustrates how you can install a custom platform support plugin and create your custom

platform document.

More Help topics

Enabling Custom Platform Support

Custom Platform Support API Reference

Working with Custom Platform Support Plugins

Create and publish HTML5 Canvas documents in

Animate CC

15

Platforms

Last updated 6/17/2016

What is HTML5 Canvas?

Canvas is a new element in HTML5, which provides APIs that allow you to dynamically generate and render graphics,

charts, images, and animation. The presence of the Canvas API for HTML5, strengthens the HTML5 platform by

providing two-dimensional drawing capabilities. These capabilities are supported on most modern operating systems

and browsers.

Essentially, Canvas is a bitmap rendering engine, and the drawings are final and cannot be resized. Furthermore, objects

drawn on Canvas are not part of the web page's DOM.

Within a web page, you can add Canvas elements using the <Canvas> tag. These elements can then be enhanced using

JavaScript to build interactivity. For more information, see

this link.

The new HTML5 Canvas document-type

Animate CC enables you to create an HTML5 Canvas document with rich artwork, graphics, animations, and so on. A

new document type (HTML5 Canvas) has been added to Animate that provides native support for creating rich and

interactive HTML5 content. It means that you can use the traditional Animate timeline, workspace, and tools to create

content, but produce HTML5 output. With a few simple clicks, you are ready to create an HTML5 Canvas doc and

generate a fully functional output. To its end, within Animate, the document and publish options are preset to generate

HTML5 output.

Animate CC is integrated with CreateJS, which enables rich interactive content on open web technologies via HTML5.

Animate CC generates HTML and JavaScript for content (includes bitmaps, vectors, shapes, sounds, tweens, and so on)

created on stage. The output can be run on any device or browser that supports HTML5 Canvas.

Animate and the Canvas API

Animate publishes to HTML5 by leveraging the Canvas API. Animate Pro seamlessly translates objects created on stage

in to their Canvas counterparts. By providing a 1-to-1 mapping of Animate features with the APIs within Canvas,

Animate enables you to publish complex content to HTML5.

Creating an HTML5 Canvas document

To create an HTML5 Canvas document, do the following:

1 On the Animate CC Welcome screen, click the HTML5 Canvas option. This opens a new FLA with Publish Settings

modified to produce HTML5 output.

2 Alternatively, select File> New to display the New Document dialog. Click the HTML5 Canvas option.

You can now begin creating HTML5 content using the tools within Animate. As you begin working with the HTML5

Canvas document, you notice that certain features and tools are not supported and are disabled. This is because,

Animate supports those features that are in-turn supported by the Canvas element within HTML5. For example, 3D

transformations, dotted lines, bevel effects are not supported.

Adding interactivity in HTML5 Canvas document

Animate CC publishes HTML5 content using the CreateJS libraries. CreateJS is a suite of modular libraries and tools

which enable rich interactive content on open web technologies via HTML5. The CreateJS suite comprises of: EaselJS,

TweenJS, SoundJS, and PreloadJS. CreateJS converts content created on stage to HTML5 using these individual

libraries to produce HTML and JavaScript output files. You can also manipulate this JavaScript file to enhance your

content.

Page is loading ...

Adobe Animate CC User guide

Related papers

Other documents