Convert Flash to HTML5

{loadposition adposition4}

Overview

Recent, many people have denigrated the Flash Player for having security flaws in its design. Steve Jobs was outspoken stating that Apple devices would not support the Flash Player; and during this same period, the advent of HTML5 was embraced as the new future of online animation, multimedia and web based games. For web developers and enthusiasts like myself, who are not ready to give up creating interactive web content with Flash, the idea that Flash might go away, or not step up to the challenge of a new era in online multimedia, seemed extremely disappointing.

{loadposition adposition5}The good news is that starting with Flash CS6, users have the capability of exporting Flash movies directly to HTML5 bypassing the Flash movie player. It must be stated that the current ability to export Flash to HTML5, is not without bugs, it still in its infancy,  but is a welcome and exciting development.

Toolkit for CreateJS

The Adobe Labs original project for developing a Flash to HTML5 conversion tool was named Wallaby. This tool has now been released as a downloadable Adobe Flash Extension called Toolkit for CreateJS. You can download the Toolkit for CreateJS for free from the Adobe website, it will work with Flash CS6 only. Once you have it downloaded, extract the zipped folder and double click on the .msi file to create a .zxp package that can then be installed with the Adobe Extensions Manager. Once the Toolkit for CreateJS is installed in the Adobe Extensions Manager you can access it through the Flash authoring environment by going to: Window > Other Panels > Toolkit for CreateJS. The Toolkit is based on an open source project of Javascript libraries and tools called CreateJS that is designed to work with HTML5. 

{loadposition adposition6}The upside of the Toolkit for CreateJS is that it exports all of the Flash graphics, animations, and sounds to individual assets and Javascript files that support Canvas for HTML5; the downside is that it does not support Actionscript 1.0 to 3.0 and Flash’s built in 3D tools. Even though the Toolkit does not convert Actionscript to Javascript yet, it does leave you in the position to be able to do it yourself by separating out assets like graphics and sound and and animations and creating readable Javascript for the timeline animations. Adobe has an article that walks you through a project that incorporates just this ability to develop and migrate a Flash game to HTML5 including the necessary Actionscript to Javascript conversions, you can visit the article here: http://www.adobe.com/devnet/createjs/articles/getting-started.edu.html

One of the benefits of using CreateJS is that since it is an Open Source project, development will hopefully be widely supported and ongoing.

 

{loadposition adposition9}

Swiffy

Swiffy is Google’s Flash SWF-to-HTML5 conversion project. Like Adobe’s Toolkit for CreateJS Swiffy can also convert Flash graphics and animations to HTML5 but unlike Adobe’s Toolkit, Swiffy can also convert Actionscript 2.0 to Javascript. The flash sound Class is not supported. Unlike the Toolkit for CreateJS which separates the Flash file into its component assets the exported html5 file seems difficult to work with if you wanted to continue to modify the code and work out the bugs in the conversion. Swiffy works by converting the Flash .swf file to HTML5. I personally plan on checking the release notes page frequently for sound class support!  

{loadposition adposition4}

Examples

You can RIGHT+Click on the animations below to see if they are Flash or not?

This is an example of a Flash Movie SWF

The same Flash movie as HTML5 through Swiffy. Can you tell the difference?

Video Tutorial

In this tutorial, I cover downloading, installing, and running Toolkit for CreateJS and Swiffy. Using some Flash movie files, I demonstrate how to export them HTML5, and evaluate the quality of the results. 

 

{loadposition adposition8}

 

Author: Dan

Dan teaches computer networking and security classes at Central Oregon Community College.

Leave a Reply

Your email address will not be published. Required fields are marked *