Flash to HTML5: An Experiment

The popularity of iPhone and Apple's principled non-support of Flash on these devices has brought web developers close to a process that could be called the search for the Holy Grail - the idea of finding something that would work for both Flash-compatible devices and iPhone. Adobe itself is also taking small steps in this direction.

There are two pieces of good news:

The first piece of good news - HTML5, which, to the best of its ability, supports animation and transformations (canvas, WebKit). There is 2D hardware support and, no less surprisingly, IE9 has pulled ahead in this technological race.

There is no 3D support. Opera is actively working on this, but even in the event of success, Opera's market share is comparatively small to make these achievements worth considering and using. For a long time Adobe Flash also lacked 3D support, as a result of which programmers created pseudo-3D - i.e. 3D transformations in a 2D plane. Even more than that, special libraries were developed for performing such transformations, such as Papervision, Sandy3D, Away, etc. One can hope that something similar will eventually emerge for HTML5 as well.

This is also good news because mobile browsers (both Android and iPhone) support HTML5 and WebKit. [2]

The second piece of good news is that Adobe has stirred into action and begun looking in the iPhone direction. Flash CS5 brought the ability to create iPhone applications. From this one can conclude that AS3 built with CS5 differs in some significant way from that built with CS4. This suspicion is also confirmed by the second part of the good news - namely, that Adobe has released a special program, Wallaby [1], which converts from FLA to HTML5. The FLA file must, of course, be created in a CS5 environment.

The experiment:

For the experiment we will use two Flash animations. One simple one (using classic tweens) and one more complex (using AS3).
Respectively - Flash sample A and Flash sample B.

In the resulting HTML5 we can see that the animation is primarily based on jQuery (why do I hear applause? ;) ) and WebKit.
As a result:

• On Opera (v 11) we do not see the animation, but we do see a static image;
• On Firefox (v 3.6.15) Flash A shows nothing, Flash B shows a static image.
• On Chrome (v 10.0.648.127) Flash sample A shows animation (!), Flash sample B shows only a static image.
• Safari (Windows, v 3.1.2) - for both Flash samples we see a static image (no animation).

Conclusions:

Adobe's gesture in creating special software that allows converting from FLA to HTML5 is a welcome step towards iPhone app development, but the search for the Holy Grail continues - because, for example, Firefox does not support and apparently will not support WebKit. The result is a situation where several technologies coexist, which, although they share the same banner (HTML5), differ technically. In practice, the situation has arisen where, in order to create a fully functional HTML5 web application, it must work across 3 platforms - WebKit, Trident and Gecko - while also keeping backwards compatibility in mind (i.e. if the client's browser is still living in the HTML4 era).

Sources used:

- http://labs.adobe.com/technologies/wallaby/
- http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29