Think multi-screen
When we talk about apps for devices these days we are no longer talking about one device. Today we are talking about a multitude of devices and device platforms. The multi-screen story is also no longer about just different smartphones. We’re also talking about tablets, netbooks, set-top boxes, and Blu-ray players. Building applications for all of these can be a bit challenging to say the least. Dealing with different operating systems, device features, and screen sizes can be a bit of a nightmare.
In previous posts I already talked a bit about how the Flash Platform can help you with that. Flash was originally designed to run on multiple platforms and adapt to different screen sizes. This post is not about that though. I wanted to write down some thoughts about multi-screen applications from a user’s standpoint.
First of all, when you start thinking about building an application for devices it is a very good idea to make sure you have a multi-screen strategy. It’s not just about iOS devices anymore! “If we have two more quarters like this past quarter, Google will have 37% market share, RIM will be at 29%, and Apple will be at 26%“, Fred Wilson (a VC in New York) recently said in a blog post about where mobile developers should focus. He ends his post with this: “One thing I am sure of is that developing solely for iOS, which is a very common thing I see out there, is not the right strategy unless you only want to serve 25% of the market.”
Now building your apps for multiple devices is one thing… But what about the app’s content?
Evernote is a great example of a multi-screen application. I can run the app on my smartphone, on my tablet, in my browser or as a standalone application on my desktop/laptop. The best thing is that it keeps my notes in sync. It doesn’t matter where I am or which device I use. I always have my notes with me. Once I create new notes they automatically get synced with all the other apps when you are online. Simple concept, right? I really love this approach and would love to see this in all my apps. I try to mimic this by using Dropbox. I save all my project files on there so I can use them on both my laptop and desktop. Kindle by Amazon is also a good example (Thank you Chris Pelsor for pointing that out). There are Kindle apps for multiple devices and they all use the unique features that each device has to offer. You also have all your books available to you across all apps.
Like many of you I am also addicted to Angry Birds. I have it installed on my smartphone and on my tablet… But they are not connected to each other. Wouldn’t it be great if you could just open up the app on your tablet and continue playing the same level you last played on your phone? And maybe later continue playing the same level on your desktop? Or on your TV?
But I want even more… Wouldn’t it be great if one day you get a new computer, type in your credentials, and all your apps and content will start syncing automatically? I guess that is what Google is trying to do with ChromeOS. I must say that I really like the idea of not having to be tied to one machine. Obviously there are some privacy issues that we must conquer but I really like the concept.
Anyway… What I want to say is that when you start building your multi-screen applications stop and think about these things for a second. If your game has different levels or your application saves notes you may want to offer the user a way of syncing that across multiple devices. I’m sure your user will appreciate it!
1 code base, 6 devices: Now including BlackBerry PlayBook
A couple of weeks ago I published a post about a proof-of-concept application that I built for a local commercial broadcaster. The app that I built in just 5 hours ran on 5 different devices. As I just started playing around with the BlackBerry PlayBook SDK I wanted to see how long it would take to push this app to the PlayBook. I was pleasantly surprised that it just worked! It only took me 2 minutes. So I can now say: 1 code base, 5 hours, 6 devices! It now runs on my desktop/laptop, HTC Desire HD (Android smartphone), Samsung Galaxy Tab (Android tablet), Google TV, AIR for TV, and now the BlackBerry PlayBook. And that, my friends, is the power of the Flash Platform! ;-) It’s a great time to be a Flash developer!
When you look at the video you will see one small flaw in my app though. The preloader screen doesn’t adapt to the bigger screen resolution so that will be the only thing I would have to update. Everything else is exactly the same code as the Android version of the application.
To get started building applications for the BlackBerry PlayBook check out the BlackBerry developer site. My fellow evangelist Renaun Erickson also has a ton of information about developing for the PlayBook on his blog!
Please note that the PlayBook emulator currently does not output audio from Flash video files and currently only plays videos that are encoded with the On2 VP6 codec. This is only a limitation because of the beta quality of the emulator.
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!
Multi-screen excellence: Giroflex
This has to be the one of the best multi-screen apps I’ve seen to date. It is absolutely gorgeous and the story behind it is even more impressive. Thanks to the Flash Platform they were able to build an application that runs on multiple devices in record time.
Giroflex is a leading manufacturer of ergonomically designed office furniture. They asked Publicis Modem to create an application for the Orgatec trade fair taking place in Cologne next week. The application needed to be built for multi-screen purposes. The client wanted a microsite, a multitouch application to run on the HP TouchSmart 600, and the application needed to run on the Samsung Tab. In their booth visitors can experience the new chair in a dynamic modern way on the TouchSmart PCs, representing the company’s spirit. The Giroflex sales executives will all have a Samsung Galaxy Tab at hand to show the same app to their customers. The choice for the Flash Platform was an obvious one.
Thanks to the Flash Platform the team at Publicis Modem led by Marcel Vogt and Tiago Dias was able to produce an application that runs as a microsite in the browser and as a standalone application on the TouchSmart PCs, the Samsung Galaxy Tab’s, and even any other Android device. In just 2.5 weeks they created a multi-language, rich, easy to use and intuitive application with AS3 and utilizing AIR’s local SQLite database and multi-touch features.
They started out with the microsite which is built based on their own AS3 framework. The entire UI is customizable via XML files. They finished the microsite in just 1.5 weeks. When the microsite was done they only needed to add multi-touch capabilities and update the graphics and layout so it would fit on the Galaxy Tab and the TouchSmart PCs. It only took them an additional 6 days to “port” the app to the Galaxy Tab and the TouchSmart PCs. As a little extra they also wanted to see how long it would take them to port this app to an HTC Desire. It only took 2 hours!
I’m also really happy that I was able to help them a bit. They used my Package Assistant application to create the APKs ;-)
This is a great example of the power of the Flash Platform and how easy it is to build multi-screen applications using it!
Here’s application running on a Samsung Galaxy Tab:
The application running on the HP TouchSmart PC:
And on the HTC Desire:
Marcel and Tiago will be at MAX next week so if you see them around make sure you ask for a demo! Great work guys!
Multi-screen medical device simulation
Christoph Ketzler, who works at Innovation Mecom, was one of the developers behind this great example of how Flash simplifies multi-screen development.
Innovation Mecom developed a simulation for training and marketing of Carina, a medical device. The application is built on top of the Flash Platform using ActionScript3.0 and simulates all the functions of the actual device. Because they chose the Flash Platform the same application can run in the browser, as a standalone application and on multiple devices. Check out this video for a demonstration of the app running on a variety of devices.
Flash on!
Feel free to follow me on: 
