This post is also available in: Russian

In this article, discussing transition from Flash applications and animations to the built-in capabilities of modern browsers, we are repeatedly mentioning the HTML markup language. As we are speaking about the technology of the latest months, this should have involved HTML5. Still, this is not, in fact, the case. Actually, most of the technologies described are applicable to most of HTML dialects, and HTML5 is nothing but a well-known brand (thanks to Apple). However, it really makes sense to create such applications with HTML5, as this dialect has its benefits. It improves the semantics and provides such features as form validation, allowing you to get rid of dozens of JavaScript lines of code. But by itself, HTML5 is not making the picture.

In the days when the Flash technology has finally become an integral part of the Web, it offered the capabilities that were simply missing in the browsers. Fundamentally, the situation has not changed even today. Flash still offers the features not supported by the browsers. However, these are a bit different features now. But the functionality that once has made Flash popular is gradually accommodated by the browsers.

Here we will discuss the practical issue of porting Flash application features available in most browsers to the platform not supporting Flash. And here we usually have a WebKit browser.

By its origin, Flash is vector animation, multimedia support, and logic implemented by ActionScript. WebKit supports SVG vector animation. A solid part of the animation tasks can (and should) be addressed via CSS3 animation. We do not recommend you to use JavaScript for animation here, as you’d have to manipulate the values of CSS properties of the elements. This approach yields very low performance and animation looks clumsy, much on personal computers and the more so on mobile devices, such as iPad. Using CSS Animations really makes a difference. These CSS properties provide virtually exhaustive capabilities of animation in XML (SVG) and HTML documents.

The most reasonable approach would be to port the application manually. However, this is not always appropriate if you have lots of multimedia (in such a case, Wallaby or Swiffy is more advisable).

Wallaby Technology preview

Wallaby is an experimental Adobe’s technology to convert artwork and animation from FLA to HTML, CSS and SVG. Support is limited to SWF 8 and ActionScript 2. At the output, we have a basic HTML, SVG sprite, CSS animation and a JavaScript to control the animation.

It is supposed that after the conversion the developer will refine the functionality by updating the JavaScript. At the moment, this is the best choice of all the automated porting tools available.

The tool has been compiled as an AIR application (available on Windows and Mac).

Pros:

• Clean and neat SVG and HTML code

Cons:

• Wallaby needs a JQuery library, although it is used minimally (however this is not a problem if you are already using JQuery in your project)
• Not easy to refine the functionality.

Swiffy

This is Google’s online service. The restrictions are the same: SWF 8 and ActionScript 2. The code is generated based on the compiled SWF file. The result is sort of a unified pseudo-format. To display graphics, inline SVG-elements are used, and the behavior is described by a JSON array executed by a separate JS-runtime. Unfortunately, this approach does not allow you to effectively refine the result obtained. However, by Swiffy you can quickly migrate your Flash banners to WebKit.

Pros:

• Creating code from SWF: handy, if the source code is lost
• More adequate result.

Cons:

• It is a “platform in a platform” situation. You have a runtime file and a separate script. This is not optimal, yielding low performance.
• Functionality is difficult to revise.

The Third Way

However, the most optimal way is porting Flash applications to HTML5 / CSS3 / SVG manually. The more so, if you are the author of Flash applications and you know its specifics. The best way is to export vector elements using Adobe Illustrator SVG format (AI makes the neatest XML). SVG animations can be run in two ways – using SMIL and JavaScript. Also, on WebKit, CSS3 animation is, to a certain extent, applicable to SVG. The use of JavaScript in the SVG implementation is similar to HTML.

It is not always the best choice to export all the graphics to SVG. By themselves, WebKit CSS features allow you to imitate many Flash design options, not supported by SVG animation. So it is sensible to use HTML and CSS for simple geometric shapes with solid or gradient fill.

Pros:

• The maximum quality of porting.
• Choosing the best options of animation and logic.

Cons:

• Long and labor-intensive porting.

However, you should not expect 100% transfer of Flash application functionality to WebKit.

Here are the pros and cons of (HTML5 + CSS3 + SVG) against (Flash) in general:
Pros:

• (HTML5 + CSS3 + SVG) are available where Flash is not supported. First of all, this applies to the Apple portable devices. In such devices, the potential of these standards is most fully revealed.
• Where you have Flash, you do not always need a microscope to hammer nails. For example, on Android devices you can create full-scale animated interface elements, gaining in performance compared to Flash and traditional JavaScript. However, not all devices support SVG.

Cons:

• Here you have not a single but several technologies, and it is sometimes difficult to completely implement the ideas. While preparing this post, we made an attempt to create a gaming application, but it has failed due to the extreme complexity of connecting CSS animation with the JavaScript events. Still, the idea is, of course, implementable.
• When the application complexity becomes the same as in a Flash project, it may well be possible that the gain in productivity has already been lost.

Finally, here is an interesting A4 comparing Flash and HTML5 that might be helpful to choose a proper technology. In our view of the current technology, HTML5 can be used to get a quick result and a maximum coverage of mobile devices, and Flash should be used to have the maximum quality of results (smooth, nice, sophisticated animations and interactive video applications).