Ingredients:
- Animated sequence with a statically uniform background
- Final Cut Express
- QuickTime 7 Pro
- Adobe Media Encoder
- Adobe Flash
For a recently closed project, my customer asked; “Kyle, can you silhouette an animation of a growing tree against a branded gradient.” I give the classic consultant answer; “Of course!” I wasn’t clear on the details, but, as I discovered, it’s relatively trivial with the right tools.
The customer found an animation sequence of a tree growing against a white background. The beauty of this was the consistent background color. I figured there was a way to assign an alpha channel to that color, and Final Cut Express (I’m cheap, remember) allowed me to spec the background color, which intern became the “Chroma Key” or alpha channel for the transparency. To get this transparency assignment, I applied the Video Filters > Key >Chroma Keyer filter to the clip. Then, you simply sample the color which will be the alpha channel color. There was an interesting issue with this. As the color steps from the assigned color space for the alpha, the nearly-so-but-not-quite white pixes are opaque. I decided, however, that this provided a faux sharpening and helped to accentuate the leaves against the background. Expanding the range of the color key space confirmed this.
Next, I exported the clip as a high-resolution Quicktime Movie, which stores the alpha information. The next trick was to bring the alpha channel into Flash via the flv format. This meant using the Adobe Media Encoder. As I wished to balance resolution with bandwidth requirements, I performed several conversions at several bit-rates to find the sweet spot. I ended up with a 10 frames per second at a bitrate of 150. Yes, on the low end, but satisfactory for this job, and the resulting flash file wasn’t too large.
The penultimate matter was to place the animation on the branded-background gradient in flash. Finally, as there’s some delay due to video size, I added a most rudimentary loader process. I am really tired of the flash model for doing this but it’s transparent to the user here. (No annoying “please wait” widget. I routinely click past those now, the rush of Flash animations now very passe.)
Finally, I load the necessary SWF Tools and swfobject into my Drupal CMS and load the media as per SOP. Viola! A growing tree in the branded colors of my wonderful customer.
You can see the resulting image here.