Macromedia Animate - CC User Manual
Adobe
"OJNBUF CC
Help
Legal notices
Legal notices
For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
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
iii
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
Tem p la te s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Last updated 6/17/2016
ANIMATE
Content s
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
iv
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
Work ing 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
Last updated 6/17/2016
ANIMATE
Content s
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
v
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.
1
Animate’s flexibility with output formats ensure that your content can be viewed anywhere, without the need for plugins.
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
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.
Creative Cloud.
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
Last updated 6/17/2016
What's New
• 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
2
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
ntegrated global library within Animate to use Art and Pattern brushes. In addition to the default brush presets, you
i
can import new Pattern Brushes to your Animate document using the CC Libraries.
Last updated 6/17/2016
What's New
3
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.
Last updated 6/17/2016
What's New
For more information on this new feature, see Frame Picker
4
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.
Last updated 6/17/2016
What's New
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.
5
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.
Last updated 6/17/2016
What's New
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.
6
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.
Last updated 6/17/2016
What's New
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.
7
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.
Last updated 6/17/2016
What's New
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.
8
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
Last updated 6/17/2016
What's New
9
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
Last updated 6/17/2016
What's New
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.
10
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.
Last updated 6/17/2016
What's New
11
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.
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.
12
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.
Last updated 6/17/2016
Platforms
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:
13
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
Last updated 6/17/2016
Platforms
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.
14
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
Last updated 6/17/2016
Platforms
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.
15
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
An imate publis hes to HTM L5 b y le ver aging t he C anvas API . An imate Pro sea mle ssl y tr anslates obj ect s created on st age
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.
Last updated 6/17/2016
Platforms
However, Animate CC allows you to add interactivity to objects on stage created for HTML5 Canvas from within. It
means that you can actually add JavaScript code to individual objects on stage from within Animate and preview at
author-time. In turn, Animate provides native support for JavaScript with useful features within the code-editor to help
improve workflow efficiency of programmers.
You can choose individual frames and keyframes on the Timeline to add interactivity to your content. For an HTML5
Canvas document, you can add interactivity using JavaScript. For more information about writing JavaScript code, see
this link.
JavaScript code can be written directly in the Actions panel, and it supports the following features while writing the
JavaScript code:
Code Hinting Al lows you to qu ickly inser t and e dit JavaSc ript code and without mi stakes. As y ou typ e characters in the
Actions Panel, you can see a list of candidates that possibly complete your entry.
Additionally, Animate also supports some features inherent to Actions Panel when working with HTML5 Canvas.
These features help improve workflow efficiency when adding interactivity to objects on stage. They are:
Syntax Highlighting Displays code in different fonts or colors according to the syntax. This feature allows you to write
code in a structured manner, helping you visually distinguish correct code and syntax errors.
Code Coloring Displays co de in different colors according to the syntax. This allows you to visually distinguish various
parts of a syntax.
16
Bracket Automatically adds closing brackets and parentheses for open when writing JavaScript code.
You can add interactivity to shapes or objects on stage using JavaScript. You can add JavaScript to individual frames and
keyframes.
1 Select the frame you want to add JavaScript to.
2 Select Win d ow > Actions to open the Actions Panel.
Using JavaScript Code Snippets
You can add interactivity using JavaScript code snippets available within Animate CC. To access and use Code Snippets,
select Windows > Code Snippets. For more information about adding JavaScript code snippets, see
with code snippets in Animate CC.
Add interactivity
Last updated 6/17/2016
Platforms
References to CreateJS documentation
CreateJS Library API Documentation Code Samples on Github
17
EaselJS http://createjs.com/Docs/EaselJS/modules/Ea
selJS.html
Twee nJS http://createjs.com/Docs/TweenJS/modules/
TweenJS.html
SoundJS http://createjs.com/Docs/SoundJS/modules/
SoundJS.html
PreloadJS http://createjs.com/Docs/PreloadJS/modules
/PreloadJS.html
More Help topics
EaselJS
TweenJS
SoundJS
PreloadJS
Publishing animations to HTML5
To publish the content on stage to HTML5, do the following:
1 Select File > Publish Settings.
2 In the Publish Settings dialog, specify the following settings:
https://github.com/createjs/easeljs/
https://github.com/createjs/tweenjs/
https://github.com/createjs/soundjs/
https://github.com/createjs/preloadjs/
Last updated 6/17/2016
Platforms
Basic settings
18
Output The directory the FLA is published to. This defaults to the same directory as the FLA, but can be changed by
clicking the browse button "...".
Loop Timeline If checked the timeline loops, if not it stops when it plays to the end.
Include Hidden Layers If deselected, hidden layers are not included in the output.
Center Stage Allows users to select if the stage should be centered Horizontally, Vertically or Both. The HTML
canvas/stage is displayed at the center of the browser window by default.
Make Responsive Allows users to select if the animation should be responsive with reference to Width, Height, or both
and resizes the published output based on various form factors. The result is a responsive, sharper and a crisper HiDPI
compliant output.
The output also stretches to cover the entire screen area with no borders, and yet maintains the original aspect ratio,
though some part of the canvas may not fit in view.
• Width, Height or Both options ensures that the entire content is scaled down to the canvas size and is visible even
when you view on a small screen (such as mobile devices or tablets). If the screen size is larger than the authored
stage size, canvas is displayed in the original size.
Enable Scale to Fill Visible Area Allows users to select if the animation should fit to view the output in full screen mode
or should stretch to fit. By default, this option is disabled.
Fit in view: Displays the output in Full screen mode with the entire screen space and yet maintains the aspect ratio.
Stretch to fit: Stretches such that there are no border spaces in the output.
Last updated 6/17/2016
Platforms
Include Preloader: Allows users to select if they want the default Preloader or select a Preloader of their choice from
the document library.
Preloader is a visual indicator in the form of an animated GIF that 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.
By default, the Preloader option is not selected.
• Default option to use the default preloader or the
• Browse option to use the preloader GIF of your choice. The preloader GIF is copied to the configured images folder
in the Export Image assets.
• Use the Preview option to preview the selected GIF.
19
Use the toggle options to opt for publishing at the root or the sub-folder level. This button is toggled ON by default.
Toggling OFF disables the folder field and exports assets to the same folder as the output file.
Last updated 6/17/2016
Platforms
20
Export image assets The folder in which images assets are placed into and referenced from.
Combine into spritesheets: Select this to combine all the image assets into a spritesheet. For more spritesheet options,
Export bitmaps as spritesheets
see
Export Sound assets The folder in which the sound assets in your document are placed into and referenced from.
Export CreateJS assets The folder in which the CreateJS libraries are placed into and referenced from.
Note: The default setting continues to publish files segregated into logical sub folders.
Advanced settings
Asset Export Options The relative URLs to export images, sounds, and supporting CreateJS JavaScript libraries to. If
the check box to the right is not checked, those assets are not exported from the FLA, but the specified path is still used
to assemble their URLs. It expedites publishing from an FLA with many media assets, or avoid overwriting modified
JavaScript libraries.
The Export all bitmaps as Spritesheets option allows you to pack all the bitmaps in canvas document in to a sprite sheet,
which reduces the number of server requests and improves performance. You can specify the maximum size of the
sprite sheet by giving the height and width values.
Last updated 6/17/2016
Platforms
21
Template for publishing HTML:
Use Default: Publish your HTML5 output using the default template.
Import New: Import a new template for your HTML5 document.
Export: Export your HTML5 document as a template.
Hosted Libraries: If checked, it uses copies of the libraries hosted on the CreateJS CDN at code.createjs.com. It allows
the libraries to be cached and shared between various sites.
Include Hidden Layers: If deselected, hidden layers are not included in the output.
Last updated 6/17/2016
Platforms
Compact Shapes: If che cked, ve cto r ins tructio ns ar e out putte d in a comp act fo rm. De se lec t to expo rt read able , ver bose
instructions (useful for learning purposes).
Multiframe bounds: If checked, timeline symbols include a frameBounds property containing an array of Rectangles
corresponding to the bounds of each frame in the timeline. Multiframe bounds significantly increases publish time.
Overwrite HTML file on publish and include JavaScript In HTML: If include JavaScript In HTML is selected, the
Overwrite HTML file on Publish check box is checked and disabled. If you uncheck the Overwrite HTML file on
Publish check box, then include JavaScript in HTML is unchecked and disabled.
Click Publish to publish your content to the specified location.
Note: An animation designed using nested timelines, with a single frame, cannot be looped.
HTML template variables
When you import a new custom HTML template, during publishing, the default variables are replaced with customized
code snippets based on the components of your FLA file.
The following table lists the current template variables that Animate recognizes and replaces:
Attribute Parameter Template Variable
Title of the HTML document $TITLE
22
Placeholder for including CreateJS scripts $CREATEJS_LIBRARY_SCRIPTS
Placeholder for including generated scripts (including web font
scripts)
HTML Tag to start a client-side script $SCRIPT_START
Placeholder for code to create loader (CreateJS LoadQueue) $CREATE_LOADER
Placeholder for code to load assets present in the manifest $LOAD_MANIFEST
Placeholder for code defining the method to load files $HANDLE_FILE_LOAD_START
Placeholder for code to handle file load event $HANDLE_FILE_LOAD_BODY
Placeholder for code concluding the method to load files $HANDLE_FILE_LOAD_END
Placeholder for code defining the method handle Complete, called
ter assets are loaded
af
Placeholder for code to create the stage $CREATE_STAGE
Placeholder for code to register for tick event, after which animation
st
arts
Placeholder for code to support responsive scaling and hidpi displays $RESP_HIDPI
Placeholder for code concluding the method handle Complete $HANDLE_COMPLETE_END
Placeholder for a function to handle content with sounds $PLAYSOUND
Placeholder for styling section to support centering the canvas $CENTER_STYLE
$ANIMATE_CC_SCRIPTS
$HANDLE_COMPLETE_START
$START_ANIMATION
Placeholder for canvas display style property to support Preloader $CANVAS_DISP
Placeholder for code to display Preloader $PRELOADER_DIV
HTML Tag for end of client-side script $SCRIPT_END
Canvas element ID $CANVAS_ID
Last updated 6/17/2016
Platforms
Width of the stage or canvas element $WT
Height of the stage or canvas element $HT
Background color of the stage or canvas element $BG
Version of Animate CC used to generate content $VERSION
Following tokens from the previous versions are deprecated in the current version:
Attribute Parameter Template Variable
Placeholder to include scripts (CreateJS and generated Javascript) $CREATEJS_SCRIPTS
23
Placeholder for code to initialize CreateJS libraries, load media, create
and update stage
$CJS_INIT*
Note: These tokens are modularized and replaced by other tokens.
JSAPI support to import and export HTML templates for Canvas documents
Following JSAPIs support import and export of HTML templates for canvas documents:
• Exports the HTML5 Canvas Publishing Template for given document,at the specified location:
bool document::exportCanvasPublishTemplate(pathURI)
• Example:
var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html”
var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);
if(!exportFlag)
fl.trace(“Template could not be exported”);
• Imports and sets the HTML5 Canvas Publishing Template for given document, from the specified location pathURI:
bool document::importCanvasPublishTemplate(pathURI)
• Example:
var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;
var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);
if(!exportFlag)
fl.trace(“Template could not be imported”);
Embed JavaScript into HTML
Animate introduces the capability to include JS file within the HTML file during canvas publishing.
1 In the Publish Settings menu, switch to Advanced tab and select Include JavaScript In HTML.
2 Select OK in the Include JavaScript in HTML on Publish dialog box to republish the content overwriting HTML.
3 This disables the Overwrite HTML file on Publish check box, and during any publishing event, HTML is
generated, but overwritten.
4 In the Select Stop including JavaScript in HTML, select OK to exclude the JavaScript and republish the HTML file.
Last updated 6/17/2016
Platforms
5 When the Overwrite HTML file on Publish is not selected, the Include JavaScript In HTML option is
automatically disabled.
Note: If you do not want the HTML to be overwritten, the options Overwrite HTML file on Publish and Embed JS in
HTML option cannot coexist.
24
Merging JSON data into JS
Ba sed on custome r feed back and JSON f iles be ing in here ntly insecure , we have merge d the rel evant data w ith th e JS file
and hence a separate JSON file is not created.
Optimizing HTML5 Canvas output
Animate optimizes HTML5 Canvas output size and performance by:
• Exporting bitmaps as sprite sheet using the options in the Spritesheet tab in Publish Settings.
• Excluding hidden layers (by deselecting the Include hidden layers check box) from published output.
• Excluding all unused assets such as sounds and bitmaps, and all assets on unused frames (default).
• Specifying not to export the assets from the FLA by deselecting the asset export options for images, sounds, and
supporting CreateJS JavaScript libraries and using the relative URLs to export.
• HiDPI compatible HTML5 Canvas output: Animate scales the output based on the pixel ratio of the device on which
you view the content. This compatibility delivers a sharper output with zoom and also fixes the pixelation issues for
canvas documents when you view the HTML canvas output on a High DPI machine.
Setting a transparent canvas background
You can customize the canvas to various colors and also modify its display transparency. When you create a transparent
canvas, you can view the underlying HTML content during publishing.
Note: This setting also makes the background transparent during OAM publishing.
1 Select the canvas you wish to modify.
2 In the Properties pane, select Stage.
3 In Stage, set the percentage values for Alpha.
Last updated 6/17/2016
Platforms
"No color" swatch support
You can also use the No Color Swatch option to make the canvas background as transparent:
1 Select Modify>Document>Stage Color or in the Property Inspector, select Advanced Settings.
2 In the Stage Color swatch, select No Color.
25
Last updated 6/17/2016
Loading...