In the days of Macromedia, working between Flash and QuickTime was rough territory for designers and animators. Then in 2007, when Adobe took the helm and released Flash CS3, a lot of compatibility issues were resolved.

In this exercise, I am going to show you how a purely code-driven animation can be exported as a QuickTime movie and further enhanced in After Effects CS4.

Final Result

The movie below shows the final effect we’re going to work towards:

Introduction

The early days of Flash for broadcast were, to be gentle, a nightmare. Flash movies could only be output as QuickTime format if they were entirely on the timeline. We couldn’t use nested movieclips, ActionScript or Library content. If you were sending a cartoon feature for broadcast, Flash’s 16,000 frame limit meant that the longest cartoon you could produce was around 22 minutes if you stayed with the default rate of 12 fps. The solution was to break the animation into manageable chunks and stitch them together in a video editing program.

Flash CS3 changed the game. In this exercise, you’ll learn how to export a purely code-driven animation as a QuickTime movie which we’ll further enhance in After Effects CS4.

Step 1: Source

Download the source file and open it in Flash CS4.

The file we will be using might be familiar to those of you who visit this site on a regular basis. It’s from the tutorial, Create a Whimsical Animated Flash Background, written by my associate Carlos Yanez. In that project Carlos uses an external class file to create a series of randomly placed semi-transparent bubbles and to put them in motion following a sine wave.

Extract the source zip file to your hard drive, and open BlurryLights.fla.

Step 2: Save

Delete the background layer and save the file. The background isn’t needed because we will be adding our own in After Effects CS4.

Step 3: Export

Select File > Export > Export Movie to open the Export Movie dialog box. Select QuickTime from the Format list and click Save.

The QuickTime Export Settings dialog will appear.

Step 4: Export Settings

Determine your QuickTime Export settings.

This dialog box is not terribly mysterious.

Check Ignore stage color to create an Alpha Channel video. This will give the exported movie a transparent background, as you’ll see later.

The Stop exporting settings are where you may get tripped up. If you have a timeline based animation, choose “When last frame is reached”. If you have a code-based animation like we have here, set a duration. If you don’t you will create a single-frame QuickTime movie which is sort of useless. I set this example to run for 10 seconds.

Next, click QuickTime Settings… to bring up the Movie Settings dialog box.

Step 5: Select Your Codec

Use this area to determine your codec. If you do change things just be aware that the Animation codec with a color depth of Millions of Colors+ is the one that provides the Alpha channel.

Step 6: Compile

Click the Export button to compile the video.

You will see three progress bars showing you what is going on and, when it finishes, an Alert will appear telling you where you can find a Log file for the process. Click OK.

Step 7: Save, Quit and Open

Save the file, quit Flash and open the video in the QuickTime player. The black background you see is the alpha channel.

Over to After Effects CS4

I have an alpha channel video meaning I can toss something in to the background with a bit more jazz than the gradient in the original tutorial. Let’s open up After Effects and see what we can do..

Step 8: Composition

Create a new After Effects Composition.

The size was set to match the 600 by 300 dimensions of Carlos’ piece. I also chose square pixels because the project was to be output as an FLV. I increased the frame rate to 30 fps, named the file BlurryLights and set the duration to match the 10 seconds of the exported Flash file.

Note: If you are an After Effects user you are probably wondering why I even bothered with this rather than, instead, sticking the video on the timeline. That is normally my workflow, but for some unexplained reason the video kept coming in scaled down from 600 by 300.

Step 9: Import

Import the QuickTime video into After Effects and drag it on to the timeline.

Step 10: New Solid

Create new solid and apply a Fractal Noise effect.

Fractal Noise comes in as a grey cloud so I used the settings shown to make it a lot more interesting.

Step 11: Filter

Apply a Glow filter to the Fractal Noise effect.

Grey streaks are interesting but adding a bit of blue helped tone down the effect.

Step 12: Contrast and Evolution

Tween the Contrast and Evolution properties of the Fractal Noise effect.

These two slight adjustments also toned down the animation and added a bit of “randomness” to the effect.

Step 13: Add Some Text

I’ve picked “TutsPlus” in two different colors.

Step 14: Effect

Add the CC Light Rays Effect; it will look like a spotlight sweeping behind the text.

Step 15: Tween

Tween the Light Rays effect.

By moving the center point of the effect across the letters I could get the light rays shooting out of the text.

Step 16: Render

Render the comp as an FLV.

I was going back to Flash so it made sense to use FLV format. My other options were to render an F4V or an MP4 file that used the H.264 compression.

Step 17: Save the Project

Conclusion:

The ability to render out a QuickTime video from a code based Flash movie is a massive step towards solidifying the relationship between After Effects and Flash. In this tutorial you saw how a code-based Flash animation, with a custom document class, can be output as a QuickTime movie with or without an alpha channel. You also saw how a Flash QuickTime movie can be enhanced through the use of AE’s host of effects.

Bottom line: This stuff is fun!