BETWEEN THE LIONS is a popular children’s education television series designed to foster the literacy skills of its viewers, while playfully demonstrating the joys of reading. Teaching is done through the use of catchy songs and often animated shorts. This particular segment combines live action puppet characters, music and animation.
The main characters were videotaped against a blue screen. The idea is to replace the blue screen with animation. It was our job to create the animated sequences while maintaining sync with the provided video and ultimately deliver the final product suitable for high quality broadcast television.
Between the Lions is produced by WGBH Boston, Sirius Thinking, Ltd. and Mississippi Public Broadcasting. BTL ®, TM and characters WGBH Educational Foundation, © 2007 WGBH & Sirius Thinking. Animation production by Pileated Pictures.
1 The purpose of the blue screen is to provide an evenly lit, monochromatic field of color that can be easily keyed out using a video editor and replaced with a different image or video. Open the video in QuickTime and go to Window > Show Movie Properties and extract the audio track as a WAV file. Import this into Flash on its own layer and set it to Stream to sync with the animation.
2 Import your video file to launch the Import Video wizard. Since you will need to sync timeline animation to the video, select the option to embed the video in SWF and play in the timeline. Select Graphic as the Symbol type to embed the video and then finally choose an encoding profile. Since this video track is for reference only, select a low quality profile. The videotrack in Flash will be deleted before exporting the animation and added later in After Effects using the original uncompressed video file.
3 Once the wizard has finished importing the video, insert enough frames on the main timeline to accommodate its length.
4 Import the audio track you extracted in QuickTime earlier and place it on its own layer. Set its behavior to Stream.
5 Since the video was converted to a Graphic symbol during the import process, you can transform it over time with motion tweens.
6 The video is motion tweened smaller to make room for the animation sequences. Don’t worry about how the blue screen looks at this stage; it’s only used as a reference.
7 The script called for the live action puppet to react to an animated character falling from the sky. Having the video in a Graphic symbol embedded into the main timeline made it easy to sync the animation with the puppet’s reaction.
8 Once the animation is complete it’s time to export it to video format. But you don’t want the embedded video to be included. Convert this layer to a guide layer so it will not be included in the exported file. You could also delete this layer.
9 The exported animation from Flash is composited with the high quality video of the live action puppet in Adobe After Effects. The blue screen is replaced with an alpha channel so the animation can be seen through it. Syncing both the video and animation sequences back together is easy since they both share the same frame rate (29.97 fps) and start on frame 1. As video files, all you need to do is place them both on the After Effects timeline on the same starting frame. A drop shadow was applied to the live action puppet as a final touch.
Hot Tip
To help keep your Flash file size as small as possible, reduce the width and height of the video before importing it. For this project the video was only used in Flash as a timing reference and its quality was not a priority. When selecting an encoding setting, a lower quality will be less processor intensive during playback in the Flash authoring environment. This will make it easier for you to get a sense of timing without having to export to video format every time you want to check your work.
