Adobe Animate Team Blog

The latest news, tips and insights directly from the Animate team


Toolkit for CreateJS

Nov 30, 2015/ActionScript, Animation, Creative Tools, Custom Platform Support, Custom Platform Support, Extensions, General, HTML5, Toolkit for CreateJS, Video/

Welcome Adobe Animate CC, a new era for Flash Professional

Adobe Animate CC
For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016. [Update 2/8: Animate CC is now here!]

Today, over a third of all content created in Flash Professional uses HTML5, reaching over one billion devices worldwide. It has also been recognized as an HTML5 ad solution that complies with the latest Interactive Advertising Bureau (IAB) standards, and is widely used in the cartoon industry by powerhouse studios like Nickelodeon and Titmouse Inc.

Animate CC will continue supporting Flash (SWF) and AIR formats as first-class citizens. In addition, it can output animations to virtually any format (including SVG), through its extensible architecture.

There’s much more than just a name change however. Our team is hard at work on a major update with significant new features to create animations for any platform. Here’s a sneak peek by Michael Chaize, Principal Creative Cloud Evangelist:

Here’s what you can expect in Animate CC:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
    • [Update 2/8: We’ve also added Typekit integration!]
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

Note: This release is listed as “Adobe Animate CC” in the Creative Cloud desktop application. When you install or update Animate CC, it will be found on your computer as Adobe Animate CC 2015, not Adobe Flash CC 2015.

Previous versions of Flash Professional prior to the 2016 release will continue to be available.

Throughout the week, we will be giving a sneak peek of Adobe Animate on our Adobe live stream channel on Twitch, showing it both for animation and building games.

The entire team is thrilled about our upcoming release, and more importantly, beginning a new era with Animate CC. As we approach the 20th anniversary of Flash Professional, we invite animators and interactive designers around the world to join us for decades to come.

[Update 2/8: Animate CC is available now!]

Mar 15, 2015/General, HTML5, Toolkit for CreateJS/

Behind the scenes of HTML5 Canvas rendering performance

Users typically spend a lot of time on optimizing performance of the exported CreateJS content. The key step in the performance optimization process is identifying the bottlenecks in the process that result in poor performance. Matt Karl from CloudKid was kind enough to share the following utilities and instructions to help you tune your content for better performance.

Size Report

The HTML5 Canvas Size Report.jsfl utility script helps you list down all the library items required for the final rendering and their actual and percentage contribution to the overall package size, as shown in the following screen:


Filter Usage

It is well known that symbol filters adversely impact performance (drop shadow, blur, color transforms, and so on). However, for a given FLA, especially if it is a complex animation with nested library items, it is hard to track down the usage details of such filters at a layer or frame number level. The utility script Filter Finder.jsfl does this and displays all the filter usage in the current document as shown in the following image.


How to generate these reports

  1. Download the utilities, HTML5 Canvas Size Report and Filter Finder to your computer and extract the .jsfl files.
  2. In the latest version of Flash Professional CC, open the HTML5 Canvas document for which you want to generate the reports.
  3. On the Commands menu, click Run Command and select the JSFL utility for the report you want to generate.



Dec 18, 2013/ActionScript, Animation, HTML5, Introduction, Toolkit for CreateJS/

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 2

This post in the 2nd and last of the two-part series of Converting and reusing ActionScript 3.0 assets in an HTML5 Canvas document.


In my previous post, we learned how to run the JSFL script (Commands > Convert to HTML5 Canvas AS3 document formats) to convert legacy ActionScript 3.0 assets and reuse them in an HTML5 Canvas document. We also examined the conversions that were applied on each of layers and objects within the AS3.0 file.

Did you observe?

If you read through the previous post entirely, you must have wondered why the Tap to Jump button in the HTML5 animation wouldn’t work (unlike the SWF where it worked). Like I explained in my previous post, during the conversion ActionScript code is commented out. So, as a final step of the conversion process, we will replace the ActionScript code with equivalent JavaScript. You will be happy to know that Flash Pro CC fully supports JavaScript coding, with additional code-hinting and auto-format features.

Frames 114, 141, 142, & 278

These frames contained fully-functional ActionScript code in the original Banner.fla file, which was commented out during the conversion. Let us pick each of these frames individually and add equivalent JavaScript code for the same:

  1. Go to Frame 114, and select the keyframe on the Code layer.
  2. Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
  3. From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
  4. Similarly, add JavaScript code for frames 141, 142, and 278, as well.
Frame number ActionScript Code Equivalent JavaScript Code

var self = this;this.btnJump.onClick = function() {self.gotoAndPlay(“endWait”);}

var self = this;this.stop();this.btnJump.addEventListener(‘click’, onClickJump);function onClickJump() {self.gotoAndPlay(“endWait”);







this.instance.removeEventListener(“click”, onClickJump);


import;btnPlay.addEventListener(MouseEvent.CLICK, onClickEnd);function onClickEnd(pEvent : MouseEvent) : void {navigateToURL(new URLRequest(“”),”_blank”);}


this.stop();stage.onClick = function() {“”, “_blank”);}

And finally…

Publish (Ctrl+Enter on Windows and Command + Enter on MAC) the HTML5 Canvas document again to see the fully functional animation running smoothly on your default browser.

Video tutorial

I created this video tutorial to make it easier for you to understand the conversion process:

Sep 25, 2012/Crash, Errors, Flash Professional CS6, Gaming, General, Toolkit for CreateJS/

Flash Professional CS6 Update2 | Now Available

We are happy to announce the availability of Flash Professional CS6 Update 2 (Ver:12.0.2)! As promised earlier, the update brings you several exciting features, but importantly, Flash Professional CS6 will now extend support for AIR 3.4 and Flash Player 11.4, courtesy the Update! Quite an incentive to revise your target versions when developing AIR applications, no?

  • The Direct Deployment to iOS Devices feature allows you to deploy an AIR application on iOS devices without having to use iTunes. (Please note that iTunes 10.5.0 or greater must be installed on the user’s machine to use this feature.)
  • The Native iOS Simulator Support feature facilitates testing and debugging AIR applications for iOS devices on the native iOS Simulator. This is a MAC only feature, where Flash Pro can be integrated with the Simulator by installing XCode.
  • The High Resolution Retina Display Support feature provides High-resolution Retina Display support for newly introduced iOS devices like iPAD3. Earlier, this feature was available only for iPhone and iPod devices but now richer content, with the concept of pixel doubling, is available for iPAD devices too.

Detailed descriptions for the new features is available in the What’s New for Flash Professional CS6 doc. Also, look at the Release Notes and Known Issues docs to avoid surprises, should you encounter any issues while trying the new and exciting features. The update also has Toolkit for CreateJS 1.1 bundled along with it. Soon as the update completes installing, the Adobe Extension Manager CS6 is launched to install Toolkit for CreateJS 1.1. The new version of the Toolkit has added support for converting Shape Tweens, Motion Tweens, Mask Layers, and Multiframe bounds to HTML5. The update includes fixes for several critical bugs you reported to us on Adobe Flash forums and various other channels:

  • Flash Professional CS6 crashes on launching – without warnings! An issue that occurred due to the presence of corrupt fonts, and one that several users reported on forums.
  • Rendering content using Stage 3D targeting Starling framework rendered content inappropriately.
  • ANEs would go unrecognized when referenced using relative paths in Flash Professional CS6, throwing compilation errors.
  • XML files generated by XFL files have an inconsistent end of lines between the CDATA section and the rest of the file.
  • Adobe Debug Launcher crashes when publishing AIR application for desktop with AIR 3.2.

For a complete list of all issues fixed in this Update, see this link.

[Updated on October 19th, 2012]  The Flash Professional CS6 Update 2 now facilitates silent installation. See this link.