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.
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.
Flash Professional CC team is proud to announce our February 2015 update (22.214.171.124) which includes critical bug fixes and support for the following features –
- Support for AIR 16/Flash Player 16 – This update will add the ability to publish 64 bit AIR apps for iOS 8.x in addition to support for Flash Player 16
- HTML5 Canvas Optimizations – We’ve made significant updates to optimize the published content. The published content will no longer have unused library items, assets on guide layers, hidden layers (based on publish settings) and unused frames in graphic symbols. This should improve the size of your published content dramatically.
- Audio Splitting – This feature will allow you to split your streaming sound on the timeline itself.
- Masking support for Custom Platform SDK.
- WebGL runtime support for the latest Chrome browser update.
Look forward to hear your feedback on the latest release. You can always reach us at –https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&loc=en
Ajay Shukla, Sr. Product Manager, Flash Professional
Question: The sound clip continues to play till the end even after the movie has ended. How can I stop the sound along with the image?
Answer: If the sound is embedded in the timeline, select the keyframe on which the sound starts and then, in the Properties window, set the Sync property for the selected sound to “Stream.”
Here is a complete list of synchronization settings in Flash for your reference:
Event: Synchronizes the sound to the occurrence of an event. An event sound plays when its starting keyframe first appears and the plays in its entirety, independently of the playhead in the Timeline, even if the SWF file stops playing.
Start: The same as Event, except that if the sound is already playing, no new instance of the sound plays.
Stop: Silences the specified sound.
Stream: Synchronizes the sound for playing on a website. Flash Professional forces animation to keep pace with stream sounds. If Flash Professional can’t draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the SWF file stops playing. Also, a stream sound can never play longer than the length of the frames it occupies.
Note: Stream setting is not supported in WebGL and HTML5 Canvas documents.
For a detailed help article on the topic, see Using sounds in Flash