Adobe's Flash-to-HTML5 translator: Smart but not pretty

It's an exciting time for Web developers. More than ever before, the tide is shifting away from proprietary, plug-in-based technologies toward open standards such as HTML5, CSS, and JavaScript. A recent research study even suggested that streaming video, which has long required plug-ins of some kind, is moving toward open Web standards at an alarming rate.

No company has a bigger stake in the plug-in game than Adobe. Its Flash and PDF formats rank among the most popular non-HTML content formats on the Web. So when Adobe this week announced a new experimental engine that can translate Flash content into HTML5, code-named "Wallaby," developers were justifiably puzzled. Was Adobe throwing in the towel? Why on Earth would it spend its own money to build a tool that allows developers to migrate away from Adobe's core file formats? I decided to find out and, in the process, to see whether Wallaby is all it's cracked up to be.

The converter is an Adobe AIR application, so you'll need the AIR runtime installed to use it. For an AIR app, however, its GUI is hardly rich. It consists of nothing more than a single window with a file selection field, Convert and Preferences buttons, and a box to log errors and warnings.

To test the converter, I borrowed a selection of Flash files created by students for a beginning infographics course at the Academy of Art University in San Francisco. These were entry-level projects that made use of only the most basic Flash features: rollovers, buttons, typography, and vector graphics. I reasoned that this would be a good test of the baseline features used by Flash developers in business settings, without pushing the limits of the Wallaby converter beyond reason.

Right off the bat there was a problem. My .fla Flash project files were created using Adobe Flash Professional CS4 or earlier, but Adobe warns that Wallaby will work only on Flash CS5 files. It's not kidding: The converter stubbornly refused to read any of my .fla files until I opened them in Flash Professional CS5 and resaved them in the CS5 format. But once that was done, the conversions went smoothly and took just a few seconds per file. (The converter can also be invoked from the command line for batch processing.)

Wallaby outputs clean, clever code

Wallaby's output is very interesting. The main output file for any project is an HTML5 document, and the generated code is clean and concise -- far superior to the Save as HTML feature of Microsoft Word, for example. It even contains helpful comments indicating which portions of the code correspond to which Flash symbols. Unfortunately, however, it does not validate as HTML5 per the W3C's Conformance Checker, mainly because it uses XHTML syntax where it is forbidden in HTML.

Graphic elements are output as either PNG or SVG files, depending upon the nature of the original asset. You might end up with a lot of individual files for each project; even for my simple demos, 100 files was typical. Even text is rendered using SVG rather than HTML, and it renders using system default fonts if the specified fonts aren't available.

Wallaby's approach to interactivity is clever. It uses jQuery; if you're already working with that library for your Web applications (a lot of developers are), Wallaby's output should integrate easily. The converter saves a copy of jQuery 1.4.2 into your project directory, but it's a stock-minimized version with no Adobe modifications. It also outputs a custom JavaScript file for each .fla file that contains project-specific code, tied together with a function that invokes jQuery.

But can Wallaby cook?

So far, so good. But while the Wallaby engineers have made sound decisions in designing the tool, what you actually get when you convert a Flash project to HTML5 is extremely limited.

For starters, Wallaby's reliance on SVG to render vector graphics means its output is incompatible with nearly all versions of Internet Explorer (with the possible exception of IE9 -- I didn't check this beta browser). In my tests, even Firefox 3.6 struggled; although some demos rendered partially, most yielded only a blank window. Chrome, Safari, and other browsers using the WebKit rendering engine seem to be the only viable targets for now, and even then a few graphic elements occasionally go missing.

Worse, only a small portion of the functionality of a Flash project survives the translation to HTML5. Many Flash features are not supported. Mouse rollovers mostly work, but Wallaby's greatest weakness is that it does not translate Flash's ActionScript scripting language into JavaScript, which means even the most trivial controls -- such as buttons -- are unsupported.

In my demos, visuals that corresponded to button clicks in the original Flash would simply cycle in a loop, irrespective of user input. And because ActionScript is based on a different version of the ECMAScript standard than JavaScript, it's unlikely that Wallaby will ever be able to reliably convert between the two.

Instead, developers are expected to add their own interactivity by hand with jQuery, using Wallaby's skeleton HTML and JavaScript output as a starting point. This could be a painstaking process, depending upon the complexity of the original .fla file. Then there's still the matter of integrating the modified Wallaby output into an existing Web page, since few Flash objects stand alone in a browser window in the real world.

Keeping a horse in the race

Clearly, then, Adobe is not developing Wallaby as a transitional tool to migrate Flash developers to HTML5. It might be useful for translating legacy Flash apps, where the performance of HTML and JavaScript have caught up to the required level of functionality -- but again, that will only work if you first convert them to Flash CS5. So what's the point?

There's big hint in Wallaby's technical tips, where Adobe explains that it chose to use SVG to render vector graphics instead of HTML5's canvas element because canvas tends to perform poorly on mobile devices. Apple notoriously doesn't allow Flash content on its iPhone and iPad devices, and early tests of Flash 10 running on Android phones have been disappointing. Clearly, Wallaby is intended as one way to leverage existing Adobe tools and file formats on devices that might be ill-suited to traditional Flash apps. There may be other use cases as well, such as graceful regression of Flash applications to HTML for PCs that lack the Flash plug-in.

More important, content, both in print and online, has long been Adobe's bailiwick -- and as the Web continues to evolve, it's not about to be caught with its pants down. A tool like Wallaby can help ensure that Adobe Flash continues to coexist with emerging standards such as HTML5, while still offering additional functionality where HTML5 falls short.

For now, however, Wallaby is mostly a toy. The question is whether there's enough of a market for such a tool to justify developing it to shipping quality, or is the trend toward HTML5 and away from plug-in-based content too strong to generate much interest? That's what Adobe hopes to find out with this preview -- and doubtless it's keeping its fingers crossed.

This article, "Adobe's Flash-to-HTML5 translator: Smart but not pretty," was originally published at InfoWorld.com. Track the latest developments in programming at InfoWorld.com, and for the latest business technology news, follow InfoWorld.com on Twitter.