Using Wallaby to Convert Flash to HTML5

The net is buzzing about Wallaby the latest tool from Adobe that allows you to convert flash files (.fla) to HTML5 Canvas, JavaScript, SVG and CSS3.

Now before you get too excited please be warned that this tool is just a technical preview and you won’t be able to use it to convert your actual work.

Below I’ve detailed how I built a basic sample and some of the issues that ensued.

1. First I opened up Flash and created  a new flash project, I chose the 300×250 advertising template.

Now first up I wanted to add some text and convert it to a button:

I then added a state to the down keyframe of the button so that the text would turn blue when the mouse hovers over.

First I tested it as a standard SWF, just to make sure I hadn’t made a stupid mistake.

Using the Wallaby tool I then point it towards the fla file and clicked convert. It takes about 30 seconds and the file converts.

In the output folder we are left with a few files. Now the moment of truth how does it look?

Rendering

All of the browsers managed to render the text and when you hover over the text it changes to red as expected. In the background it switch’s the visibility of the SVG images using JavaScript.

As you can see below none of the browsers correctly position the text (it should be much further down) but Safari and Chrome do successfully render the font and appear to centre.

Opera successfully gets the font right but the position is incorrect. Both IE9 beta and Firefox get the position and the font wrong.

Now these differences are actually due to the fact that the Adobe implementation favours webkit browsers (which fits with the goal of this project to create Markup for the IPad)

Fonts

So why are the fonts wrong? Well the fonts are generated using SVG Fonts… which is something that IE9 and Firefox do not support (Incidentally that’s why neither of these browsers get 100% in Acid 3 ) IE9 and Firefox instead opt to support the arguably better WOFF (Web Open Font Format).

The position

So why is the text positioned incorrectly? Well The position is achieved using:

-webkit-transform:matrix(1,0,0,1,61.55,18.65);

Which of course is only going to work in web kit browsers (chrome and safari) to get it working in all the other browsers we need to add their browser prefixes too:

.wlby_1
{
    position: absolute;
    -webkit-transform:matrix(1,0,0,1,61.55,18.65);
    -moz-transform:matrix(1,0,0,1,61.55,18.65);
    -o-transform:matrix(1,0,0,1,61.55,18.65);
    -ms-transform:matrix(1,0,0,1,61.55,18.65);
}

Summary

Wallaby is really interesting but it’s actually nowhere near ready, this is just a technical preview after all. My attempts to create animating demos all failed and when I used fonts that were not standard I got errors too. Adobe should be commended for giving this a try, what this tool does is quite incredible. It will be fascinating to see how things improve, but for now… don’t believe the hype, this is not a Flash to HTML5 convertor; it’s the first step on, what looks like, a long journey.