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!
Using Growl in AIR applications with AIR 2 NativeProcess
The AIR2 release is just around the corner and one of my favorite new features is the ability to use native scripts. As I’ve already demonstrated earlier, this is extremely powerful and here’s another good example.
From the moment AIR was released, a lot of developers were asking for Growl support to add toast style notifications. Up until now, there hasn’t really been an easy and flexible solution so most developers opted to build their own notifications. I really like Growl and the fact that you as a user have total control over the look and feel. I use the Mono style created by Christopher Lobay. It’s probably the sexiest toast style notification I’ve ever used.
With AIR 2 you can now call Growl right from within your application. I actually call the Growlnotify command-line tool, which comes as an extra in the Growl download. Most people probably don’t install these extras but that’s no problem. I can bundle the command-line tool as part of my application and call it directly from my applicationDirectory.
So… How does this work? It’s actually extremely easy… The first thing you do is set up a new File object that points to the Growlnotify tool.
var file:File = File.applicationDirectory;
file = file.resolvePath("growlnotify");
As I am going to bundle growlnotify with my application it will just be installed as part of the app and thus resides in applicationDirectory.
The next thing I have to do is set up a NativeProcessStartupInfo object. That’s where I’ll store the basic information that is used to start our NativeProcess.
var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo(); var processArgs:Vector.<String> = new Vector.<String>(); processArgs[0] = "-n"; processArgs[1] = "My AIR application"; processArgs[2] = "-p"; processArgs[3] = "0"; processArgs[4] = "-t"; processArgs[5] = "Your Growl title"; processArgs[6] = "-m"; processArgs[7] = "Your Growl message"; processArgs[8] = "-a"; processArgs[9] = "Adobe AIR Application Installer"; nativeProcessStartupInfo.arguments = processArgs; nativeProcessStartupInfo.executable = file;
In this case, I’m also adding a bunch of arguments in my NativeProcessStartupInfo object. These arguments will be passed on to the growlnotify command-line tool. In this example, I’m setting up the name of my application, the notification priority, the title and message of my notification and I’m also telling it to use the icon associated with the Adobe AIR Application Installer. (Check out the Growlnotify docs for more info on these settings)
Next and last step is to actually call the native script.
process = new NativeProcess(); process.start(nativeProcessStartupInfo);
This code above will result in this Growl notification:
The only downside of using native scripts is that you’ll have to package your application specifically for the operating system you wrote your native script for. So in this case, I’d have to package it as a .DMG file since Growl only exists on OS X. That said, I really wouldn’t mind an OS X version of TweetDeck that allows me to use Growl instead of their custom notifications…
I really can’t wait to see what you guys are going to build with AIR 2! You can already start today! Check out Adobe Labs for more information!
The HTML5 Flash Marriage: Geolocation source
Last Friday I blogged about how HTML5 and Flash could also just work together. A few people have asked if they could get the source files. I just packaged and uploaded the FLA, ActionScript class and HTML files. Download the zip file here.
A few people have also noted that the demo doesn’t work across different platforms even when using the same browser. While I wanted to demonstrate how Flash and HTML5 can coexist and even complement each other, it is (sadly) also a demonstration on how HTML5 is being implemented differently across browsers and operating systems. Feel free to post a comment if you know about fixes or workarounds in the JavaScript to make it work on more browsers.
The HTML5 Flash Marriage: Geolocation
I probably don’t need to tell you that there’s a lot of buzz (and fuzz) about how HTML5 is going to kill Flash. You probably know how I feel about this… I think the web is big enough for both of them… Even better… I think they could potentially complement each other!
Geolocation is a good example. HTML5 is going to get a geolocation API that works just beautifully even on devices with no GPS. Flash based applications will (currently) only get access to geolocation APIs when targeting the AIR runtime on mobile. Some browsers (I only know of Firefox 3.5 on Mac and the WebKit browser on the Nexus One) already support the HTML5 geolocation API… So why not use that to get geo information into your Flash based application?
It’s actually extremely easy to do…
But first a little bit of background as to why I was looking for this functionality. I’m actually building “this demo app” that needs the geolocation in order to have the functionality I was looking for. I want this app to work in as many places as possible. With the Flash Platform I can build this for my browser and my desktop. For the Apple phone I can export it as a native app and for the Nexus One I can use the device browser with Flash Player 10.1.
Now… How does it work? The HTML5 geolocation API is extremely easy to use and, like I said earlier, you don’t even need to have a GPS enabled device.
function getGEO()
{
// First check if your browser supports the geolocation API
if (navigator.geolocation)
{
alert("HTML 5 is getting your location");
// Get the current position
navigator.geolocation.getCurrentPosition(function(position)
{
lat = position.coords.latitude
long = position.coords.longitude;
// Pass the coordinates to Flash
passGEOToSWF(lat, long);
});
} else {
alert("Sorry... your browser does not support the HTML5 GeoLocation API");
}
}
function passGEOToSWF(lat,long)
{
alert("HTML 5 is sending your location to Flash");
// Pass the coordinates to mySWF using ExternalInterface
document.getElementById("mySWF").passGEOToSWF(lat,long);
}
In my Flash application, I’m using ExternalInterface so I can communicate between JavaScript and my SWF. When my Google Maps component is ready, I call the GetGEO JavaScript method:
ExternalInterface.call("getGEO");
When the JavaScript method gets a result from the geolocation API, it will pass it on to the passGEOToSWF method. In my Flash application, I just listen for that method call and then call the code to update the map.
ExternalInterface.addCallback("passGEOToSWF", onPassGEOToSWF);
If you don’t have an HTML5 ready browser, check out this video of the application running in Firefox 3.6. Even cooler is that this also works in the browser on my Flash Player 10.1 enabled Nexus One (Please note that the network is slower on the N1 and thus it isn’t able to keep up with loading new map images. This has nothing to do with Flash Player 10.1 or the application.):
If you have Firefox 3.5 or newer installed, you can give it a try yourself: http://www.webkitchen.be/geolocation. I’m sure there are other browsers out there that also already have the geolocation API but this is the only one I tested on the Mac.
Hopefully this gives you a good idea of how HTML5 and Flash can also just work together (instead of killing each other ;-)). Flash on!
UPDATE: While writing this blog post, @robertbak pinged me on Twitter saying that he wrote a library to use in your Flex applications. Check it out on the Flex Exchange.
UPDATE: For the source files check out this blogpost.
Feel free to follow me on: 
