Adobe Flash Professional Team Blog

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


Toolkit for CreateJS

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.

Sep 3, 2012/Animation, Flash Professional CS6, General, Toolkit for CreateJS/

Atari and Adobe Flash Professional

Important Note: Toolkit for CreateJS has now been replaced with HTML5.

It is highly unlikely that you are reading this blog post and have not played an Atari game ever before. For gamers, passionate or otherwise, casual or obsessive, skilled or talented, Atari games would have been one of the common starting points for developing gaming acumen. Do you know that Atari is taking its historic games to the mobile platform across multiple screens? Empowered by CreateJS libraries, Atari will deliver its games targeting the HTML5 platform to ensure compatibility across multiple mobile platforms and screens. For more information, watch this video.

The project involved creating multitudes of animated assets to create touch-friendly games with rich content. Yes, you guessed it right, Flash Professional CS6 along with the Toolkit for CreateJS extension and some custom JSFL was used to carry out this mammoth task of preparing assets. To know more about Toolkit for CreateJS, see this DevNet article. Also, visit to know more about Grant Skinner, creator of CreateJS and a prime contributor to the Atari HTML5 project.