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:
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
How to generate these reports
- Download the utilities, HTML5 Canvas Size Report and Filter Finder to your computer and extract the .jsfl files.
- In the latest version of Flash Professional CC, open the HTML5 Canvas document for which you want to generate the reports.
- On the Commands menu, click Run Command and select the JSFL utility for the report you want to generate.
Image may be NSFW.
Clik here to view.
