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!
Help shape the future of the Flash Platform tools
The Flex SDK, Flash Builder, Catalyst, and Flash Professional product teams are looking for your input. The teams are currently running a survey to gauge your current usage and satisfaction with Flex and Flash tooling, and to understand how you would prioritize the next generation of features.
The product teams take these surveys very seriously and it is therefore the ideal opportunity to help shape the future of the Flash Platform tools.
The survey should only take about 15 minutes to complete and your responses will remain completely confidential.
Go to the survey.
Online YouTube viewing parties with YouTube Social
Here’s another great example of how powerful the Flash Platform has become… YouTube Social allows you to simultaneously watch YouTube videos with your friends in an easy to use Flash based application built with Flex by SocialVision.
You can easily invite your friends from Facebook to join your viewing party or you can just send someone the URL. Once they join the party the video you’re watching starts playing on their screen. It starts at the exact same point that you are currently watching.
Give it a try yourself on http://www.youtubesocial.com/
Flash Player 10.1 on the Samsung Galaxy Tab
As if I really needed another reason to want this tablet…
I’m extremely jealous of Ben right now… ;-)
MAX Unawards: Behind the scenes (part 5)
To round off this series of blog posts about the MAX Unawards application I thought it would be fun to compile some outtakes and bloopers.
Oh… And here are a couple of fun facts I didn’t tell you yet ;-)
- Wim didn’t bring any black shoes to the studio so he’s wearing my sneakers. They were at least 3 sizes too big ;-)
- I spend a total of… wait for it… $700 on this application. The majority of that was for the studio rental.
- We rented the golden jacket.
- We bought the golden shirt.
- Wim took the golden shirt home and apparently his daughter absolutely loved it.
I had a lot of fun creating this application and I hope you have at least as much fun watching the videos and creating your own MAX Unawards video! And now… If you haven’t already created your own MAX Unaward now may be a good time to do so! All you need is an Internet connection and a webcam. Just point your browser to http://max.adobe.com/widget!
MAX Unawards: Behind the scenes (part 4)
If you missed the first 3 parts of this series you may want to start there. In part 1 I talked about how we recorded the footage for the MAX Unawards application and how After Effects CS5 and Premiere Pro CS5 really helped me save tons of time. Part 2 explained how the personalized video segments were done with the help of cue points. And part 3 explained how it was all put together in Flex and why I actually chose Flex for this application. Today I’ll talk a little bit about the playback and recording modules in this application.
Playback
In yesterday’s post I explained how modules work and how easy it is to work with modules in a Flex application. When you create a new module in Flash Builder it will automatically compile into a separate SWF file. The playback module contains all the logic needed to play the main video as well as the personalized segments. There are two VideoDisplay components on top of each other. On top of those are the personalized segments. I already explained that I brought them from Flash CS5 as a Flex component. That way they behave exactly like any other component making it very easy to use databinding and control them with ActionScript.
The main video also has a transparent segment. When the acceptance speech starts you actually see the second VideoDisplay component, which is below the main movie. I did that so you can see the static noise before the acceptance speech starts playing. But we already talked about that. ;-)
When the entire video is done a few options slide into frame. It also shows a Coverflow-like list component with the thumbnails from all the recordings. The list component is actually a standard Flex 4 List component. Thanks to the extremely powerful new skinning model you can display your list items in this Coverflow-like way. The list layout was created by the very talented Flex developer Xavi Beumala, who works in our Spanish office. You can find more information and the source code on his blog. It’s amazing to see how powerful the new skinning model in Flex 4 really is. I actually used a lot of skinning in this application and it’s astounding how easy that has become. With the logic and skin completely separated from each other skinning a component is child’s play.
The playback view is some 250 lines of code. The cue point handler function alone is already 50 lines of code ;-)
Recording
This one module was probably the main reason why I chose Flex in the first place. It would have taken me a lot of time if I had to create all these validators, state transitions, and components from scratch. There are four different states in this module. The first state is where you select or enter your Unaward. There’s also a refresh button that gets a new random Unaward from the database. This is again one line of code that calls out to the ColdFusion back end. The result event handler takes care of the rest. In the second state you can start recording your acceptance speech. I first detect all available webcams on the user’s system and ask the user to choose the one he wants to use. When the users clicks on the “Start recording” button the application connects to a Flash Media Server. The FMS hosting is provided by Influxis. I know I said this before but if you ever need any FMS hosting Influxis is your best shot. Not only are they a great bunch of guys to work with their custom FMS admin panel will get you up and running in record time. With just a few clicks you can add your new FMS application on your server instance and you’re ready to go.
Once the user recorded and accepted his acceptance speech he goes to the third state in the module where he can enter his contact details. When he submits his details the module shows the last state which is just a confirmation that the details have been submitted to the approval queue.
Every single video goes through an approval process. When the user submits his video the admins automatically get an email alerting us that there is a new video posted. In the custom admin application we can then check the user’s details, play the video, and create a thumbnail. The admin actually creates 3 different versions of the thumbnail. A small and large version but also a version with an overlay. When you add the Unawards application to your Facebook page this third thumbnail is used in your news feed. It’s just a static version of what looks like the actual application.
When a video is approved in the admin section the user gets an email and a tweet gets… ehr… well… tweeted. This is a late addition to the application. I noticed some emails got stuck in spam filters and never reached the user. Email is just broken. It’s incredible what you have to do these days to send out email that actually reaches the end user and not his spam box. That’s why I decided to also ask for a Twitter account name in the registration process. The ColdFusion service behind the admin back end sends out an @reply if the user has entered his Twitter account. As an added bonus you can follow MAXwidget on Twitter to get updates on the latest Unawards winners.
Tomorrow’s post will be the last in this series. I’m making a blooper reel including some unused footage… So… Be sure to check back tomorrow! ;-) In the meantime go and give yourself a MAX Unaward! Also… If you have any questions about this application feel free to ask them! Just leave a comment. I’ll also be doing a session on personalized video at MAX! So if you haven’t registered yet make sure you do that today!
Feel free to follow me on: 
