Flash -> HTML5
As a Adobe Flash designer and developer for the past 14 years (yes, dating back to the Macromedia Flash 2 days), I feel lately like we’ve come full circle since Flash, née FutureSplash, was originally designed to produce web animations and motion graphics and little else. Today of course, it’s a monster. Able to produce all sorts of data-driven Rich Internet Applications for all types of websites and applications.
As long as it has nothing to do with the initials iOS.
And therein lies the rub. When Adobe announced the ability to create Flash-based iOS apps in Creative Suite 5 in the spring of 2010, Apple’s Steve Jobs fired back with his infamous memo that Flash is the scum of the earth and the incubus. OK, he really said Flash crashes his browser and thus he isn’t going to accept any Flash-based iPhone or iPad apps. Thanks, Steve. Great call.
In the fall, Steve and his turtleneck reversed his decision and now Flash-based iOS apps are accepted in the iTunes Store. But that’s really only a part victory as .swf based content from the default Safari browser isn’t accepted. Now, there are third-party apps for iOS like Cloud Browse and SkyFire that will display Flash on iOS but how many people really know that. Or care to? Not many, I assure you.
So we’re still stuck having to redo our Flash pieces to work on iOS or risk losing a decent chunk of audience.
Now there are some tools to help out like Sencha Animator and Radi, but they’re still very much in beta and at least in the case of Sencha, you can’t use them on commercial projects without paying them. And they won’t even tell you how much.
So Adobe to the rescue? Well, later this summer, Adobe will release Edge on Adobe Labs. This tool has already been demoed at Adobe MAX last October and FITC in Toronto in May and has the makings to being the HTML5 web development tool we’ve all been waiting for. However, a commercial release may not even come until 2012 when Creative Suite 6 is announced to the public.
So for now, there’s Wallaby. A free Air based app on Labs that does mainly one thing and one thing only. Convert Flash .fla files into HTML5 and CSS3 based web animations. It is by no means perfect and a lot of people are a bit confused about what it can really do. Basically, it’s just like the early days of Flash. It does animations, and little else.
I recently did an animated spot for San Francisco musician Gregg Rolie, who helped create the legendary rock bands Santana and Journey. The spot was designed to promote upcoming appearances in June in the Bay Area. So I had to start out with the audio produced by Flow Communications and turn that into a Flash piece, then convert into a Quicktime movie for YouTube and I figured after that, why not try making it work for iOS whatever in HTML5 as well?
The video I recently posted on my YouTube channel, datatvla, explains what I did to make this all work and even shows you how to reprogram the audio so it can be a part of the HTML5 animation as well as the Flash movie. Unfortunately, it’s not totally in sync, but it’s close, and for iPads and iPhones, it’ll have to do for now.
It should also be noted the animations don’t work on Internet Explorer (no surprise there) or even Firefox. However, with this week’s release of Firefox 5.0 to the masses, that may change things around a bit. Stay tuned.
So if you haven’t checked out Wallaby yet on Adobe Labs, do so and take a peek into creating your own HTML5 animated content.