At the beginning of the month, I released the a new 3 Little Guys cartoon to celebrate 10 years since I made their first episode. While all the drawings were done in Illustrator and video editing done in Premiere, I used Flash to animate it all—go, Adobe!
I ran my Flash scenes in Adobe Wallaby to see how these Flash animations would translate to CSS3 animations. The results were quite interesting!
The original cartoon
The Wallaby CSS3 Scenes
(Only properly viewable in Webkit browsers—Chrome, Safari)
Not bad! Obviously, CSS limitations couldn’t render certain effects, but Wallaby did a decent job with the rest.
I noticed some gradients didn’t translate out, which is odd, because Wallaby only made images of the characters as .svg files and did a frame-by-frame style animation. So, it should have been able to render out some gradients easily. It may have been because I made the art in Illustrator and Flash translated it differently. However, that doesn’t explain why Green kept his gradient and no one else.
The biggest thing I noticed was the lack of frames produced in the final output. The original animation was done at around 24fps, different from classic American cartoons animated at half that frame rate. Because of this, the animation was a little choppy and certain effects were missing, such as the white flash from the gunshot and certain mouth movements. If there was a need for a single frame in the animation, there’s a good chance it went missing.
Wallaby was able to translate out simple tweening animations, such as the guys jumping for the flag and the Z-Sphere 3’s floating in the living room, but had greater difficulties with more complex tweenings like Red’s helmet throw.
The biggest drawback to using the Wallaby system is not the outputs though; Simple tweaking of animation can fix the minor issues I had. The real issue is its usage of Webkit to do all of its animations. Chrome and Safari users won’t see any problems with this (as their browsers run off of Webkit), but Firefox and IE users—the majority demographics—will just see a pile of images in the top left corner of their screen.
Wallaby is at a great starting point, but it has a long way to go before it can be used in a professional or corporate environment. This was a fun experiment nonetheless!