Grant Skinner did an excellent presentation at FITC Toronto on how he used Flash Professional’s HTML5 Canvas Document to create the “Dragon Age Interactive Story Summary” – an end user online customized interactive overview of choices they’ve made in Dragon Age games. He is the creator of CreateJS which powers the HTML5 Canvas document type in Flash Professional CC.
Here is the video of the talk –
Ajay Shukla, Sr. Product Manager, Flash Professional CC
Fluid and responsive content that scales according to the size of the device screen on which it is being viewed is critical for usability. Finding out the best way to do it has always been tricky, given the wide variety of screen sizes and devices in use and the solutions that exist. Kevin Newman of unFocus Projects recommends a method that he has successfully implemented using devicePixelRatio to match the width and height attributes of the HTML5 canvas element with the pixel ratio of the display device. Adding HiDPI and Retina screen support to an HTML5 Canvas document is as easy as just adding a piece of code once the stage is defined in your published HTML file. Read Kevin’s blog post to learn about how to do it!
To see how it works, check out this page where Kevin has applied this trick.
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.
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:
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.