Adobe Flash Professional Team Blog

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

Category

HTML5

May 12, 2015/HTML5/

HTML5 Canvas: Building the Dragon Age Interactive Story Summary

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

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.

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

 

Jul 24, 2014/HTML5/

WebGL interactivity through JavaScript APIs

We are happy to announce the release of a patch for Flash Professional CC that enables you to add interactivity to your WebGL compositions through JavaScript APIs.

As you already know, we enabled support for WebGL in our latest Flash Professional CC release last month that allowed you to create animations for the WebGL enabled browsers.  While that was great, many of you reached out to us asking for scripting support so that you can add interactivity to your compositions.  Well, you don’t have to wait any longer!  The latest patch of Flash Professional allows you to add interactivity through JavaScript APIs.  We are still working on enabling frame-script for the WebGL target but that shouldn’t prevent you from adding interactivity through an external code editor.  Documentation for these WebGL APIs can be found here.

Finally, here is an excellent blog post about using WebGL APIs written by one of our greatest proponents and good friend – Christopher Caleb.

Look forward to hear about your experience and feedback.