How to Export from Flash to HTML5

Since the release of HTML5 and other similar technologies like AJAX, jQuery, etc., Flash has been in trouble. These technologies can achieve almost the same outcome as Flash, in a much more stable environment.

Though Flash is often argued for its ability to “be vectorial” and easily making light animations and applications, it has its fair share of issues. Issues range from from problems indexing in search engines to freezing computers and excluding visitors who don’t have a Flash player installed.

One of the biggest reasons to convert Flash to HTML5 is because of the absence of a Flash Player on a mobile platform that has become very popular today: Apple's iOS, which is supported on devices like iPhone, iPad, iPod Touch, etc.

Converting Flash FLA and SWF files to HTML5 is possible if you use the right tool. Here are two examples you can use:

Wallaby

Wallaby is the codename for an experimental technology that converts the artwork and animation contained in Adobe Flash Professional (FLA) files to HTML.

Wallaby exports SVG vector files, creates a CSS, HTML and JavaScript files and jQuery plugin. All this makes it work like it was made in HTML5.

We can convert any FLA to HTML5, but Wallaby only exports the animation in one timeline, similar to when we export Flash videos. The output works only in WebKit browsers(like Safari and Chrome) as it includes some SVG features that are not supported by other browsers.

Wallaby can convert simple banners and animations that run on Flash to HTML5, but there are some limitations:

• There is a known Webkit issue with complex timeline animations that crashes all Webkit browsers. This seems to increase in frequency with complex animations and on slower devices. It is rare for simple animations. Webkit fixed this bug on 1/26/2011 but is not clear when this fix will show in Chrome and Safari browsers.
• We have logged and are tracking several Webkit bugs. Most of these issues are not visible because of changes to the HTML/CSS/SVG content but this often results in non-intuitive conversion of the original content.

The features and support:

Swiffy

Google introduced Swiffy, an application that allows converting flash (SWF) into HTML5, with some limitations in certain types of animations.

Swiffy converts a SWF file to an HTML page that contains a representation of the file as a JSON object. The HTML page uses the Swiffy runtime (a JavaScript library) to render the animation using mainly SVG. Compiled ActionScript code is also contained in the JSON file and executed as JavaScript in the browser.

This tool allows us to convert an SWF 8 and ActionScript 2.0 file, to HTML5 to work better in browsers like Google Chrome, Firefox or Safari Mobile.

This extension is compatible with Adobe Flash Professional CS4 or later.

The features and support:

Conclusions

Both applications are still in an experiment phase, but in the testing I did, both worked fine for small, simple Flash programs. There are no 100% compatible but both are worth to look due to the importance of optimizing for mobile and tablet.