1 code base, 5 hours, 5 devices. Powered by Flash!

Last week I had a bit of extra time to work on some demos and wanted to build something that could run on multiple devices. The Flash Platform is actually a very good choice to build multi-screen applications. A variety of devices already support Flash Player 10.1 in the browser and/or Adobe AIR and the list of devices is growing rapidly. I currently have a Samsung Galaxy Tab, HTC Desire HD, Logitech Revue with Google TV and a Broadcom AIR for TV set top box and wanted to build something that could run on all of these and in the browser on my desktop. Many of you know that I have a background in the broadcast industry so the choice for doing something with video was an easy one.

One of my good friends works at VT4. VT4 is part of the SBS Broadcasting Group and a very popular commercial TV station in Belgium. I knew they were playing around with some ideas and wanted to see if I could wow them ;-) As any broadcaster has these days they also have a bunch of video on their site. I started looking at how their video player was working and created a quick little proof of concept that would load an XML file with different videos. It took me about an hour to build the first working prototype that runs in the browser. I then asked them if they had an XML feed with the latest videos. I wanted to build something with real content and not something that I faked with local data and video.

Once I swapped the fake data and cleaned up the UI a bit the first device I wanted to test on was the Logitech Revue with Google TV. I just opened up the browser on the device and pointed it to the URL of the application on my server. The Logitech Revue comes with a keyboard remote control. The D-PAD on the keyboard sends out the same keycodes as the arrow keys on my laptop so the same application I was running on my laptop just worked exactly the same on the Logitech Revue. Device number 2 was done (number 1 being my laptop).

I also wanted to make an AIR for Android version that I could install on my HTC Desire HD and a Samsung Galaxy Tab. The only thing I had to change was the way the user interacts with the app. On a phone and a tablet the user uses his fingers instead of the keyboard input I was using on my laptop and the Google TV box. Again… This was the only thing I changed in the app before I compiled it as an APK and installed it on my phone and tablet. Number 3 and 4 worked perfectly.

The last device I wanted to try was the AIR for TV development box built by Broadcom. This is a prototype for a set top box that runs on AIR. At Adobe MAX we also had a Samsung Blu-ray player on display that can also run AIR applications. The set top box comes with a standard remote control. When the user presses a button on the remote control, a regular KeyboardEvent is fired off. It’s only a matter of getting the correct keycode and adding a function to it. Device number 5 was done.

It took me about 5 hours to build this application and do some minor tweaks to run it on these 5 devices. The only thing I changed was the input method. Everything else is exactly the same on all devices. I used Flash Builder Burrito to build it using the Flex framework. While it’s only a simple application I think this would take a lot longer if you had to build it with native code… And you wouldn’t be able to just reuse whatever you are using now in a Flash application in your browser. For instance, for a native application they would have to re-encode the video to a H.264. VT4 is currently using a mixture of the On2 VP6 codec and H.264 (not sure why but I’m sure they have a good reason for that).

I think this is a great example of the power of the Flash Platform!

Please note that I did not edit the video experience on the devices. In the video you’ll see the Samsung Galaxy Tab buffering the video for a second. I recorded the videos earlier this week and was experiencing some network issues. I did replace the audio with audio recorded on my laptop. I shot the video with my Canon 7D and the internal microphone is not really made for these kinds of videos.

Flash on!

10 Comments

  1. Concept really rocks!! and it happens only in flash town. source code of stripped down version would be a gr8 resource for devs.

  2. Excellent stuff Serge! Exciting times ahead.

  3. Very nice! What about video bitrates? Guess you had different video sources for different devices, am I wrong? Thank you.

  4. Awesome !! Keep it up Serge !!

  5. I like Eva.

    And your example. Good time to be a Flash developer!

  6. @Groinko: In this case I’m using the exact same video on all devices. If this were rolled out today I would suggest using a multi bitrate stream from FMS that automatically gives you the best quality for your bandwidth/device.

  7. Cool. Could you show us the code and the distribute method to the 5 platforms.

  8. Really great work. I also have the Galaxy Tab and love. I´m currently developing an app to catalog my blu-rays and CDs, also aiming to run on multiple devices. So it´s great to see that its possible with Flex.

  9. Are you going to make the code available for this?

  10. @Seb: I have a blog post in my draft folder with a little more info on how it was actually built. I’ll try and get that up asap.