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: 
