Playing with Wallaby

This is my attempt to convert an old Flash animation (my old animated signature when I was young ;) )  to HTML5 using Adobe's Wallaby tool.



Because of the nature of this animation, a lot of SVG files were generated. The total size of the HTML5 animation is 1.1MB compared to 21.6KB of the Flash counterpart. (OMG, way to much less efficient). I had to edit some JavaScript to add a preloader for it. Another side note is that Wallaby only works with Flash CS5's fla. (The tool failed to open my old animation in CS3 format).

- The converted HTML5 animation (only work with Webkit browser for now)

- The original Flash animation

- (Fla & html source)

As you may notice, the 2 animations are not 100% identical as there are still some limitations with the tool. You should read the release note to be aware of them and may adjust your animation for best conversion.

My thought about Wallaby:

• Flash designer can use existing skills and tools to create animations for HTML5.


• If we just look from HTML5 aspect, Wallaby + Flash CS5 is similar to Sencha Animator which allow us to create HTML5/CSS3 animation on timeline visually.


• As it doesn't currently support ActionScript 1/2/3, it is quite useless for developers to get any quick porting of Flash applications to HTML5.


• Wallaby's current use cases: ad banners, intro animations, animated assets for HTML/Javascript apps

Update 2011-04-01: Wallaby can be installed and used in Linux via Wine (Windows version). You need to install winetricks vcrun2008.

[Vietnamese tag: Thử nghiệm với Wallaby]