Skip to Main Content

Hodgson Blog

Project Wallaby: An Awkward, Tiny Kangaroo

Mar 16, 2011 by Steve Mallory

Adobe Labs recently released a preview version of Wallaby, an “experimental technology” that aims to convert Flash projects into HTML5 canvas files. The purpose of this endeavor, as is frankly admitted on the Wallaby download page, is to give the platform some degree of relevancy in the popular but anti-Flash world of iOS. Following Steve Jobs’s thou shalt not Flash decree, Adobe has been hard at work trying to find ways to hang out with the cool kids without actually being one of them.

Naturally, the implementation is buggy and incomplete, but if Wallaby ever becomes a polished product, it will surely offer Flash-based developers a convenient way to release their products on a wider platform. Work on your projects as usual, and when it’s time to publish, click File > Export > Wallaby, and presto: a fully-functioning HTML5 app! It may seem as though Adobe holds the answer to its platform woes; however, with Wallaby, Adobe is encouraging the demise of Flash, like some sort of self-inflicted Trojan marsupial. There’s one significant reason why they’re doing this: Flash Actionscript and Canvas Javascript are really similar, and people are going to learn HTML5 rather than use a converter.

It’s easy enough to see how Wallaby can convert Actionscript to HTML5. To demonstrate, let’s draw a rectangle in Actionscript:

square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();

Now, let’s draw that same rectangle in the <canvas> Javascript API:

context.fillStyle = '#0000FF';
context.fillRect(0, 0, 100, 100);

Not too different, eh? The similarities don’t stop there. Considering that the canvas was essentially the browser-native answer to Flash’s website eye-candy, I’m guessing it was a major goal to develop something with a similar interface. Both allow you to draw, fill, stroke, and transform the same kinds of shapes. But what’s so bad about building software to translate between two similar graphics scripting languages?

The problem for Adobe lies in the fact that Wallaby doesn’t do a flawless job. Run a Flash application through Wallaby, and you’ll get an 80% complete HTML5 app, which still has to be debugged and polished. This means one of two things: either Flash development studios are going to hire HTML5 developers to complete the application conversion, or the task will be left to the Flash developers to do their own debugging—since the two environments are so similar (as we’ve seen), it’ll be the latter.

By introducing Wallaby, Adobe is encouraging Flash developers to learn development on what has the potential to become their biggest rival platform, and they’re doing it before most companies are even ready to make the transition. On top of that, keep in mind that Flash CS5 costs $700, while developing for HTML5 is free. This means that Flash developers will become Flash / HTML5 developers, and as canvas-ready browsers continue to make their way onto computers everywhere, those developers are going to keep honing their new skills at the expense of their old ones.

Does Flash have a bright future in the face of HTML5’s growing popularity? I don’t think so. With the Chrome 10, Firefox 4, and IE9 releases all arriving in March, the browser wars are no longer about which ones have HTML5 support, but rather which one has the fastest JavaScript engine. The only effects that aren’t supported across the board are the ones that haven’t even made it into the HTML5 / CSS3 specifications. We’ve hit the point where every mobile phone is getting the latest HTML5 implementation, browsers have advanced rendering built-inIE6 is almost gone, and other browser plugins have already got a firm grip on the high-end graphics niche. Although it still has wide adoption, Flash will only shrink, not grow, as time goes on.

While there’s no point in Adobe pursuing Wallaby any further, I don’t think they should bow out of the “website fanciness” game just yet. There’s something big that <canvas> needs: a solid, well-implemented framework. If you don’t understand what I mean by that, consider the following example where we make a circle move across the screen:

var g = document.getElementById(“myCanvas”).getContext(“2d”);
var x = 0;
var y = 100;

function draw()
{
g.beginPath();
g.fillStyle = "#00f";
g.arc(x, y, 10, 0, Math.PI*2, true);
g.closePath();
g.fill();
x++;
}

setInterval(draw, 10);

Basically, we store the circle’s position by saving x and y coordinates before creating a draw() function that draws the circle and increments its x coordinate. Finally, we use the JavaScript setInterval()function to say that we want the browser to run draw() every little fraction of a second. It’s easy to see how if you were making a game, for example, where you needed to keep track of objects’ positions and listen for collisions between bullets and enemies, you’d need to write a lot of groundwork code. This is where Flash shines. Here’s how you would move a circle named myCircle in a Flash scene:

var myCircle:Shape = new Shape( );
myCircle.graphics.beginFill( 0x0000ff , 1 );
myCircle.graphics.drawCircle( 0 , 100 , 10 );
addChild(myCircle);
addEventListener(Event.ENTER_FRAME, onUpdate);

 

function onUpdate(e:Event):void {
myCircle.x++;
}

It might seem like they require a similar amount of code, but a lot of the Flash code is one-time initialization, and as you add more objects, the necessary lines of code will grow at a slower rate than in the JavaScript example. In the HTML5 example, you have no built-in way of referring to your circle, but in Flash, you can always refer to myCircle in order to modify its properties. Of course you could add this kind of functionality to the JavaScript code, but the point is that it’s not built in. There are many other examples of why frameworks are useful, but I’ll spare you further details.

There’s a big demand for someone to step in and extend that basic API into something high-level and object-oriented; I think Adobe should take a shot at it. Rather than provide a way for Flash to be converted to HTML5, Adobe should reinvent Flash as an HTML5 framework.

Of course, Adobe’s competitors have a head start (e.g. jcottonProcessing.jsFabric.jsthree.js, andRaphaël); nevertheless, even though these frameworks are impressive projects, they’re mostly just small open-source efforts that might never be sufficiently robust for full-scale commercial applications. Adobe, on the other hand, has the years of expertise and legions of developers necessary to make something powerful and professional. Simply put, they’re in a perfect position to create the jQuery of Canvas animation—unless jQuery beats them to it.

Load more comments
comment-avatar