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 (http://trac.webkit.org/changelist/76708) 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:

Feature

Implementation

Status

Notes

Button - visuals (normal, hover, active)

SVG, CSS

Complete

Buttons inside of a button are not supported

Fills - gradients or images

SVG

Complete

 

Fills - solid colors

SVG

Complete

 

FrameSets

HTML and Javascript

Complete

 

Gradients

SVG

Complete

 

Images

HTML or SVG

Complete

A few formats have issues with alpha

Layers - Art/Normal

SVG

Complete

 

Layers - Folder

 

Complete

 

Layers - Guide

 

Complete

 

Paths - Cubic & Quadratic

SVG

Complete

 

Scenes

SVG

Complete

 

Text - Classic Static

SVG

Partial

Text Limitations

Text - Classic Dynamic, Input

SVG

Partial

Text Limitations

Text - Font Embedding

SVG

Complete

Text Limitations

Text - TLF

SVG

Partial

Text Limitations

Tweening - Shape

 

Complete

One SVG file is created for each frame of a Shape Tween. This can cause a large number of SVG files for complex animations using Shape Tween leading to playback performance issues on iOS devices. Some of the complex cases may not convert correctly.

 

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, and can be downloaded here where there is also an online version of the tool that allows you to upload an SWF file up to 1MB.

The features and support:

Feature

Notes

Action Script 2

Partially supported

Buttons

 

Filters

Partially supported

Embedded fonts

 

Images

 

Masks

 

Shapes

 

Sounds

Partially supported

Static text

 

Dynamic text

Partially supported

Tweening

Shape, classic, motion

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.