Recently Bluetube built an all HTML5 web application for iPads to be used as a Kiosk. As usual, we wanted to push things a little bit, so when the client asked about an animated background, we went with it.
Let's start with the fact that animated backgrounds on full client browsers is a no brainer. Even full video backgrounds run fine, often thanks to JQuery plugs or working with the canvas.
Challenge #1 in iPads? They don't support video backgrounds, and even the usual trick of laying HTML over a video playback isn't possible because you can't auto start video.
First thought was to take advantage of the numerous flash to SVG converters available. This was a great, real world chance to try Swiffy, Google's Flash to HTML5 converter. https://www.google.com/doubleclick/studio/swiffy/faq.html. Great! How easy will this be? Get one of our designers to build an animation in Flash, convert it to HTML5! How amazing will this look?
Challenge #2: Swiffy supports all kinds of features of Flash. The problem for us is it doesn't support gradient colors. Our animation was a "waves" or "curtain" style effect that absolutely needed color gradients to look correct. Conversion worked great.... but lacked color.
Next idea - we'll just build an effect using JavaScript. There are plenty of water effect demos out there, like this one that we tried to model after. http://badassjs.com/post/932217000/water-ripple-effect-in-canvas. Easy enough, we borrow some code and make a water ripple. Not exactly what the client wanted, but close enough.
Challenge #3 - Have you ever noticed that so many HTML5 effects are done on 300 x 200 pixel images? Turns out, there is a good reason. Heavily calculated animations like this don't scale well. Look great on a desktop with quad cores at 300 x 200. At 1024 x 768 on the iPad2, doesn't perform as well.
At this point, we're really getting a little desperate. We're running out of ideas, but we REALLY want to make this tablet cool and we really want to find out what HTML5 can do (or can't do).
Final option: Animated gif. It's cheesy and it's technology from 2000, but iPad supports it. But how do we get our pre-built flash animation into an animated gif? Turns out this is a bit of a process, made more difficult because this wasn't a timeline animation, and thus we couldn't just "export" it to animated gif.
- Plat the SWF into a SWF capture utility that converts the live playback into an MPEG video
- Convert MPEG video to Animated GIF
That's a hell of a process and a strange place to wind up. I'm sure, somewhere, some Flash fanatic who thinks HTML5 is going back to the dark ages is going to have a field day with this blog. In a lot of ways, they are right. But the future is no doubt HTML5 and in an upcoming blog post I'll talk a little about how HTML5 has allowed us to do some unique things that would be more challenging than in Flash.
So bottom line - if you want an animated background with advanced animation in your iPad application in HTML5 - the future is animated gif!
To learn more about Bluetube and our HTML5 experience, visit our website at bluetubeinteractive.com
