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!
MAX Unawards: Behind the scenes (part 3)
In part 1 of this series I talked a little bit 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. Today I’m going to explain how it was all put together in Flex and why I actually chose Flex for this application.
Why Flex?
Let’s start with that question first. As I already explained I needed/wanted to build this application with a minimum amount of resources and time. I knew that if I went the Flash CS5 route I would have to write all my preloaders, form validators, components, and more and soon realized that that would just take too much time. Sure… a lot of this stuff is available from the community but it is also available out of the box in Flex. I also took lots of time thinking about the file size. Last year’s MAX widget was pretty big (close to 1 MB) and that was one of my major concerns when I picked Flex. There’s no denying that the Flex framework does add some weight to your application but you get a lot in return! I chose to enable the RSL (runtime shared library) feature for this application. It is actually switched on by default if you use the Flex 4 framework.
When you enable the RSL, the Flex framework does not get compiled in to your application. The RSL also gets cached on the user’s machine. A lot of Flex apps already use the RSL feature and therefore a lot of users (especially in our community) won’t need to download the framework because they already have a cached version. That was also the reason why I chose the Flex 4 framework and not the recently updated 4.1 framework. I’m also using two modules that only get loaded when they’re actually needed. I have one module for the actual player and one for creating and recording your own MAX Unaward. By using the RSL feature and the modules I was able to keep the file size for the main application as low as possible. The main application file is now 370 KB, which I think is more than acceptable (especially compared to last year’s widget). If the modules were part of the application they would have added 800KB to the initial load.
So… Why Flex? Well… To save time. I didn’t have to worry about writing preloaders for the modules since that is all built into Flex. I didn’t have to write my own components, validators, server connections, etc… You get the idea.
Putting it all together
When you first load the main application it will check if there is a video ID specified in the embed code. When a video is approved the user gets an email with a direct link to his video. That way he can send his award to his friends or embed it on his blog or social network pages. If no video ID is specified or the video ID is invalid the application will load a random video from the database. On the back end I’m using ColdFusion 9 and a MySQL database. Flex and ColdFusion are a match made in heaven. It is incredibly easy to set up the connection and communication between them and therefore another great timesaver. The entire backend code is just 50 lines of easy to read code. In the Flex frontend it’s just as simple. Once you have set up the RemoteObject it just takes one line of code to invoke a ColdFusion function. The main application is less than 500 lines of code (about 300 for AS3, 100 for transitions and effects and 100 for MXML).
From the amount of code I have for transitions and effects I’m sure you can tell that I heavily used the new states model in Flex 4. Every Flex component has a showEffect and hideEffect property, which I also used a lot in this application. Whenever you set a component’s visible property to true or false the showEffect or hideEffect are triggered. That makes it incredibly easy to make a button fade out or have a panel slide in to frame.
Flex modules make it very easy to load external SWFs. The moduleLoader component also has progress and ready events that tell you exactly how many bytes are loaded from your module and when it’s ready to go. Adding a preloader is as easy as pie thanks to those events. When the user clicks on the “Play” button the application loads the actual player module while showing a nice preloader and the same goes for the record button. In tomorrow’s post I’ll explain how those are put together. In the mean time go and give yourself a MAX Unaward!
MAX Unawards: Behind the scenes (part 2)
In my previous post I talked a little bit about how we recorded the footage for the MAX Unawards application and how After Effects CS5 and Premiere Pro CS5 really helped me save a lot of time. Today I’m going to explain how the personalized video segments were done.
Cue points
Whenever you need to sync something up with video in Flash, cue points are the way to go! Cue points are actually little bits of metadata that get embedded in your FLV file. Whenever you load the FLV file you automatically have access to the cue points. With just a little bit of ActionScript you can trigger animations whenever an event listener “hears” a cue point. When you’re using Flex you can just add an event handler to the VideoDisplay component.
<mx:VideoDisplay id="Player" source="{vidURL}"
cuePoint="Player_cuePointHandler(event)"/>
My video has seven different cue points, which are handled by the Player_cuePointHandler function.
protected function Player_cuePointHandler(event:CuePointEvent):void
{
switch (event.cuePointName)
{
case "cue_awardTitle":
persAwardPlaying = true;
persAward.playIt();
break;
[etc]
By just adding a switch statement on the cuePointName I could easily add all the necessary code to trigger the animations. The first trigger is the awardTitle sequence. I’m actually playing a SWF file on top of the main video. The SWF file, which does the 3D red square animation, was created on the Flash CS5 timeline and then exported as a Flex component. That made it easy to implement it with the rest of the Flex code. Thanks to the cue points, the animation in the SWF file is played at the exact frame it is supposed to play. Another cue point triggers a function that will stop the animation and make it invisible again.
The video without and with the SWF overlay.
The second personalized segment was a little trickier. When the host pulls the winner out of the envelope, the piece of paper shows the category and the name of the winner. This is the one take that we only recorded twice in the studio and I wish we’d had done it at least 20 times. Though the animation looks great, it’s not perfect and it all has to do with the weird 3D angles. As with the intro, this is also a SWF file playing on top of the main video. And it was also created on the Flash CS5 timeline. In this case we opted to embed the video segment in the SWF file to make it fit more accurately. Paul Burnett actually created the SWFs while I worked on the rest of the application. I’m sure the envelope segment caused him some headaches as it had some very weird angles. If we would have recorded this a bunch of times, we would have been able to pick the best one but sadly we only had two takes to pick from. I also didn’t think about adding a few markers on the piece of paper the host pulls out of the envelope. This made it even harder to track and Paul basically did a frame-by-frame animation. Luckily this was only a short segment ;-). So… Note to self (and to anyone who’s going to do this type of work): Record as many shots as time permits and add some sort of marker to the piece of paper so you can track it later.
So that’s four markers down. I have three more to explain. The fifth cue point triggers the recorded video. Whenever the host says, “We have a live satellite feed”, I launch the player with the recorded acceptance speech. The main video is transparent and so the TV static animation plays on top of the first two seconds of the recorded video. I actually did that to hide the buffering. I wanted to make this video as smooth as possible and by working around the buffering of the recorded video it makes it appear as if this was part of the whole video sequence.
The sixth cue point is on the exact frame that the main video switches to the audience view. When the recorded video starts playing, the host still looks around for a few seconds until he stands still. That’s the cue point telling the video to pause and wait until the recorded video is done. If the recorded video is shorter than the few seconds the host looks around then the main video keeps playing.
The final cue point triggers the “call to action”. That’s when the carousel component and buttons are sliding into frame at the end of the video.
I hope I’ve shown you that cue points really are your best friends when you want to sync up animations and actions with video in Flash. I’ve only used simple event cue points, but cue points can also hold a lot of extra information, including coordinates, subtitles, and more. They’re extremely helpful when doing this sort of work.
In tomorrow’s blog post I’m going to talk about how the actual application was put together in Flex and why I chose Flex in the first place. While you wait for that go and give yourself a MAX Unaward!
MAX Unawards: Behind the scenes (part 1)
I love playing around with video… and I love playing around with Flash. When you combine the two you can create some really cool stuff. That was my goal when I first started working on the MAX Unawards application. This is the first in a series of blog posts in which I want to give you a bit of insight into how it was created. The challenge was to create something out of nothing–and you can take that literally. As with last year’s widget, I needed (but also wanted) to create the application with an almost nonexistent budget in the shortest possible time with the smallest possible team. Even though some of my experiences are pretty common I hope this series gives you some ideas on how you can save money/time and how Adobe’s tools and the Flash Platform can help you with that.
Green key
Soon after the storyboard for the application was approved I started looking for a green key studio. It is very important to work in a well lit and professional studio if you want to start working with green key footage. A well-lit studio will save you a lot of time and headaches when you start keying your video footage in After Effects. There are plenty of small studio facilities with green key sets around. We shot the footage for the MAX Unawards application in Hilversum in The Netherlands. Hilversum is the heart of the Dutch TV industry, so there is a lot of affordable studio space available.
We shot the footage on a Panasonic P2 in the highest possible quality. By choosing the highest quality and resolution I could play around with the framing a little bit later in post production. We also recorded most shots in both close and wide angle. The P2 saves its files on a memory card and that again saves a lot of time. Instead of having to capture the footage from tape, I could just copy the files from the memory card. The P2 uses its own proprietary format but Premiere Pro CS5 has no problem dealing with these files. It can even play them without having to render them, which is again a huge time-saver (starting to see the pattern here?). After adding all the P2 files to the Premiere project I started skimming through them looking for the best takes. This may sound strange but if you have a project on a budget and time limit, make sure you record as much as you can in your one studio day (or half-day in this case). It’s better to have too much footage than to later realize that you forgot something and that there is no time or budget left to go back to the studio! It’s also a good idea to be well prepared when you go to the studio. The storyboard really helped a lot and I also had a clear idea of what the host was supposed to do and say. The actor, Wim (who is actually a Flash developer and not an actor), added his own flavor to it, which I think worked out nicely for this video/application.
Because of the uniform lighting in the green key studio, keying was pretty straightforward. I keyed one segment in After Effects using the built-in Key Light plugin. Thanks to the uniform lighting I could then just copy the Key Light settings onto the other video segments and with just a few tweaks I was able to key all the footage in record time. In After Effects I also resized the footage to the correct size and used QuickTime’s Animation codec to export it to the QuickTime format. The Animation codec in QuickTime makes the files more manageable while keeping the quality and the alpha channel. Back in Premiere, I stitched all the segments together to create the main video. There are actually two different videos. The host’s dialog changes depending on whether you are male or female.
In the next post (on Monday), I’ll explain how the personalized video segments were done and how I added/matched them to the video track. While you wait for that go and give yourself a MAX Unaward!
Give yourself a MAX Unaward
If you follow me on Twitter you probably saw my tweets about a new secret project. Today I can finally reveal it to you.
I actually started this project somewhere mid-June. It all started with working on a widget for the Cannes Lions festival. I realized that it was probably a good idea to start thinking about a new widget for MAX. With close to 1 million views, last year’s MAX widget was a huge success (I was just checking the number before posting this and it actually passed the 1 million mark and is still generating views every day) and I thought it would be cool to try and match that number this year (although I realize that that’s a pretty big target). I knew I wanted to do something with video and more specifically do something with personalized video… and it had to be related to MAX. Once the storyboard was approved we recorded the video in a studio in Hilversum in The Netherlands. That was right before my trip to Japan. When I came back I started building the app and have been working on it for the last 3 or 4 weeks.
So… Without further ado… I present you… The Adobe MAX Unawards!
There are a couple of people I really need to thank for their help.
First and foremost: Wim Vanhenden. I think Wim is one of the most talented Flash developers in Belgium… but I decided not to use his Flash skills for this project. Wim is actually the host of the MAX Unawards show. Don’t ask me why but when I started working on the storyboard for the application, I almost immediately thought of Wim for the role of the host. I think it worked out great and we had a lot of fun recording this!
I also want to thank Klaasjan Tukker and Ton Frederiks for helping out with recording the video in the green key studio.
Big thanks also go to Paul Burnett. Paul worked on the personalized text pieces in Flash CS5.
This project would also not be possible without the help of Influxis. Thank you, Jerry, Grant, and Noe! If you ever need any Flash Media Server hosting you have to try these guys. Their custom admin panel alone makes it worth every penny.
UPDATE: Obviously also a big thank you to all the beta testers who gave me a ton of valuable feedback.
I just realized that this blog post is now starting to sound like an acceptance speech for an award… ;-) I should have just created a video for it! ;-)
I hope you guys enjoy the application. I’m looking forward to seeing what awards you give yourself and the creative acceptance speeches you create for it. Oh… and… Hope to see you at MAX!
Feel free to follow me on: 
