Adobe Flash Professional Team Blog

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

May 4, 2015/General, HTML5, Retina Display/

HiDPI/Retina Screen Support for HTML5 Canvas Documents

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.

Apr 27, 2015/Webinar/

Webinar Video: Making HTML5 Games using Flash Professional

Thank you very much for joining the webinar on April 21st where Colin Holgate from Funny Garbage presented his experience creating HTML5 Games using Flash Professional to a full house.

Please sign up here if you are interested in receiving information about the upcoming webinars.

For those who missed the webinar, here is the raw video –

Thanks,

Ajay Shukla, Sr. Product Manager, Flash Professional

Apr 1, 2015/Webinar/

LIVE WEBINAR: Making HTML5 Games using Flash Professional

blogposter-kids-01

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.

Date – 21st April 2015
Time – 8:00 AM PST (Check your local time)addtocalendar

Where – Join Here (Please join 15 minutes before the session. Enter as guest with your email id)

Please sign up here to receive information about the upcoming webinars.

 

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.

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:

Size-report

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.

Filter-usage

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.

Run-Command