MAX Unawards: Behind the scenes (part 2)

Posted by Serge Jespers on Sep 6, 2010 in Flash Platform, MAX2010 | 2 comments

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!