I’ve had a lot of fun experimenting with Adobe’s new Wallaby prerelease which allows you to convert Flash CS5 Fla files to iOS-friendly HTML5/JS/CSS animations. There are a few do’s and don’ts to watch out for, but this tool is going to have a large impact on a lot of developers from all backgrounds.
Watch the Introduction to Wallaby Video
Get Wallaby: Adobe Labs
My First Experiments
My Wallaby Demo 1: Flash Heart iPhone
My Wallaby Demo 2: iPhone Claims
Wallaby Watch List
Understand the constraints
Read the full list of supported features at: Wallaby Supported Features. As I said in the video, “Imagine you are using Flash 3 or 4, and you will stay well within Wallaby’s comfort zone”.
Common supported features:
- Scale, move, fade, and rotate bitmap and vector artwork.
- Motion Guides
- Nested Animation
- Masks
Test in Safari
Although this stuff is going to work fine in Google’s Chrome browser, the real target devices are iPhone/iPad so it only makes sense to make absolutely sure safari can handle it. I also found myself working for an hour or so getting something to work in chrome only to find out later that Safari was puking on it. Had to go back and remove everything until it worked. Remind you of anything? 
Masks
You can animate the object being masked, but not the mask itself.
Extremely Limited ActionScript Support
Only the stop() action will work. That’s it. Any interactivity or logic will need to be handled by javascript. Wallaby uses jQuery for communicating with all the assets. There is going to be huge potential for javascript folks to get involved with Wallaby output. If you have ever seen the litany of forum posts on “how do I make my button go to a website with AS3″… this is a whole knew world of hurt for flash animators. Thankfully Adobe provides some documentation on making a button clickable
Test often and label everything
You don’t want to go too far into your animation before reaching that point that it becomes “too complex”. If you test often, you’ll catch the problems right away and adapt. There are going to be things that the browser can’t handle, and things that Wallaby will have trouble with. Although I didn’t highlight it in the video, Wallaby is quite good at reporting where it encounters errors.
By giving instance names to all your symbols, you will have a much better time tracking them down in the HTML and hooking them into your javascript for interactivity.
Test in Safari on an iOS device
As Doug pointed out in the comments (thanks!) iOS Safari is not the same thing as desktop Safari. There are differences in how the browsers work and of course how much heavy lifting they can do. Best advice is to by one off eBay if you plan on doing serious banner work.
Biggest Issue: Alpha fade bug in Safari
This bug was repeatable many times. It seems a fade in works great. But if you want to fade out the same symbol, it simply won’t work. I had to fade out a duplicated copy of the symbol. Not a new instance… a new symbol. This bug only happened in Safari, not Chrome.
Immediate Challenge
Keep in mind this only a prerelease version of the software. It was very cool of Adobe to release it to us to play around with and explore. Most of the limitations that we face are imposed by what the browsers and mobile devices can handle with this new-fangled not-yet-finalized “standards compliant” output. As with anything, expectations are going to be high. It is going to be challenging to manage the expectations of art directors and clients who are used to all the whiz-bang goodness of Flash.
Future Impact
The main use of Wallaby is going to pretty much be initially for having a “better than static jpg fallback” for the feature-rich banner animations that everyone on non-iOS devices gets to experience.
In the short term I can see this bringing new life to the Flash IDE and getting people excited about learning the champion of multimedia and animation tools that we have all enjoyed for many years.
For some of you AS3 purists, perhaps this will open the door to getting your feet wet with a little JavaScript.
We all know the hub-up Steve Jobs has caused for the Flash community with his stance on Flash on iOS devices. Since that fateful decree Adobe has made huge strides in improving Flash Player on the desktop and mobile devices. With the increased performance of StageVideo, the addition of the MoleHill API for FP11, and the wide acceptance of FP10+ on Android, the future is very bright for Flash developers.
I have heard from very well trusted and experienced sources that working with iAds is a miserable experience due to a) lack of tools to create them and b) fairly crumby performance of HTML5 on iOS devices.
Adobe can’t do anything about the latter, but by releasing the first and only tool that gives animators the ability to create engaging animations in a familiar workspace that will be “standards compliant” is a massive move that I applaud.
I tend to avoid the HTML5 v Flash argument as my stance is pretty well footed in the belief that each technology has its place and its strengths/weaknesses. Ultimately Wallaby and its successors (hopefully direct integration with CS6) are going to offer up many opportunities for people in both camps.
What do you think?
———-
New visitors: check out my Flash, GreenSock Tweening, and AS3 tutorials
Press the “Tweet This” button below to get lots of points!
