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.
As you already know, Flash Professional now supports native authoring for HTML5 Canvas. Join Colin Holgate from Funny Garbage as he goes through his personal experience in creating a game for this platform.
About Colin Holgate: In the late ‘80s Colin was the multimedia specialist in Apple Computer UK’s technical support department, and through that he became friends with the founders of The Voyager Company. In 1992 he moved to the US to work for Voyager, and went on to program many of the Voyager CD-ROM titles, including A Hard Day’s Night, This Is Spinal Tap, and numerous edutainment titles. For the last 17 years Colin has worked with Funny Garbage, initially on CD-ROMs and museum kiosks, then on shockwave games, and more recently on Flash based web activities and mobile apps. He has used several different authoring tools, but all 16 mobiles apps that he helped to create were all developed in Flash Professional.
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.