From After Effects to Flash and Back, Part 1

Only in a time of incredible blurriness between formerly separate disciplines like motion graphics and interactive design could programs such as After Effects and Flash be considered complimentary, but in this age of the proverbial blending of chocolate with peanut butter, the two aforementioned Adobe stalwarts have enormous crossover potential. And while citizens of the world (or, at least, users of Flash and After Effects) wait for both programs to emerge from the midst of their respective product cycles, we're going to examine a few ways that you can apply skills and techniques acquired in one program to the other.

After Effects: Flash's external animation program

While Flash 8 made great strides in the area of animation, most notably with the custom easing graph, it sometimes isn't an ideal solution for some types of animation. And while adopting After Effects solely as an external animator for Flash may seem like overkill, it doesn't mean it's a bad idea. After Effects 7's keyframing and new Graph Editor are well-suited towards complex animations, so depending on your animation needs, After Effects could prove to be a pretty darned good environment for Flash animations.

Another take on the situation applies to After Effects users who may be unfamiliar with Flash but are nonetheless considering it as a delivery mechanism for all the cool stuff they've done in After Effects. After all, Flash is more or less everywhere (June 2006 player statistics are available here if you want specifics), and with the enhanced video capabilities present in versions 8 and now 9 of the Flash Player, showcasing After Effects content using Flash is a pretty safe bet. Regardless of which angle you approach the situation from, the bottom line is that stuff needs to get squeezed out of After Effects into a format Flash can deal with. And with After Effects 7, AE can now export directly to two Flash-based formats (FLV and SWF), so let's go over the whys and wherefores of going the After Effects to Flash route for your animations.

FLV-oricious

New to After Effects 7 is the ability to export directly to the currently red-hot Flash Video (FLV) format, including the newfangled VP6 codec introduced in Flash 8. So, the $1.99 question becomes when to choose FLV instead of SWF for output from After Effects. There are many ways to approach such a basic question, but it usually helps to consider what you're outputting before arriving at a decision. It helps to think of FLV as a video-only format in the mold of QuickTime or WMV, because that's exactly what it is. And while that last sentence may have come across as absurdly obvious, remembering what FLV is will help you decide when to output content to it. So, here it is in a nutshell: if you have a comp that uses video, still images, transfer modes, or effects, FLV may be your best bet, as it uses a "true" video codec to compress and output your comps. On the flip side, the more you make use of After Effects' vector-based features (like text, simple single-color solids, masks, or imported content from Illustrator), you'll get more mileage out of SWF, since "pure" SWF has deep roots as a vector-based animation format.

So let's put together a few comps that will play to each format's strengths, which we'll bring together in Flash in the next installment. We're going to export two comps to FLV format (a looping background and a video clip), and save one (a text animation) for SWF. Figure 1 shows our background comp, which is a relatively simple project that throws together a few elements, spackles on a filter or two, and calls it a day.

Figure 1

Since it's very much a vector-free comp (meaning that exporting to SWF would be somewhat pointless), and since these particular elements would be hard to put together the same way directly in Flash, FLV will be the way to go. FLV export from After Effects borders on the ridiculously easy—just select File:Export:Flash Video (fig. 2).

Figure 2

And then it's just a matter of selecting one of the helpful presets present in the FLV export dialog box (fig. 3). In this case, I went with low quality, since it's kind of a murky background anyway.

Figure 3

A few seconds to render, and we're left with Figure 4 (which requires at least the Flash 8 Player to view). It checks in at a relatively svelte 98 KB, which isn't too bad for five seconds of what is essentially video.

Figure 4

So far, so good. The background is FLV-ified, so let's move onto the second part of our project. I've taken a 10-second clip from George Romero's 1968 masterpiece, Night of the Living Dead, a film that not only deals with my absolute favorite horror movie subject, but is also a film that has the distinction of being in the public domain, leaving me free to do what I'm doing with it here. Anyway, I've taken the clip, tinted it green to match the background, and placed a track matte over it (fig. 5).

Figure 5

And whaddayaknow, Flash 8's new video codec supports alpha channels, so when our eventual FLV clip is played back in Flash, the channel information will have made the journey. To make sure this happens, though, we need to press the Advanced Settings button when we go to export the FLV, which will reveal the Encode alpha channel option (fig. 6). Once that option has been ticked, we can then export away.

Figure 6

That does it for the FLV portion of our program. Simple enough, right? Now let's get SWFfing.

SWF-tastic

As I may have mentioned once or twice before, SWF export from After Effects works best when you try to keep your comps as vector-based as possible. Animating text works great. Solids are a go. Illustrator assets—no worries. But as soon as you start adding effects or applying transfer modes or anything else that "unvectors" a vector-based object, then you're talking about end results in terms of MB in size rather than double-digit KB. And while you're certainly welcome to make your SWF files as large and as anti-vector as possible, doing so feels very much like cheating, doesn't it? I sincerely hope that the marriage of Adobe and Macromedia produces a future version of After Effects that can translate certain AE effects (like blurs or drop shadows) to Flash's equivalent filters with no file size penalty, but that's nothing more than wishful thinking and a topic for another discussion.

Anyway, the goal here, at least for today, is to create a vector-based SWF file from After Effects. And what better use of After Effects for such a purpose than to create one of those text animations that is not-so-straightforward to do in Flash? So let's do just that—Figure 7 shows a very simple text animation setup.

Figure 7

Can't get any simpler than an editable text layer with the Center Spiral preset preset dragged onto it. Figure 8 shows the incredible fruits of ten seconds of labor.

Figure 8

Doing something like that in Flash would take considerably longer, and we'd lose all editability to boot, so stuff like text animation is a perfect use for After Effects. Now, once I'm happy with the animation, it's time for the darn-near-impossible task of exporting the sequence to a SWF file. File:Export:Macromedia Flash does the trick here, as shown in Figure 9.

Figure 9

With that daunting step out of the way, the SWF Settings panel presents itself (fig. 10).

Figure 10

For as limited as After Effects currently is in terms of vector-based SWF output, there are a decent number of options available here. The really key item is the Unsupported Features selector, which allows you to either rasterize or ignore unsupported features. I usually choose Ignore, since doing so keeps the file size down even if I've slipped and done something dumb (like apply a Tint effect to a solid, which one wouldn't think is a no-no yet is). Anyway, after we click OK and render the SWF, After Effects not only produces the finished file, but also provides a companion HTML document that contains info about the newly-completed SWF file (fig. 11).

Figure 11

This HTML file is somewhat helpful in that it lists any unsupported frames it rendered, but depending on your situation, it may, in fact, be quite useless. Your call.

Anyway, we've got all the assets ready to go. If you're really chomping at the bit for insight into our next installment, which is highly unlikely though theoretically possible, take a look at the finished file we're going to be putting together in Flash from all the pieces we exported out today. Go ahead and click anywhere in there to start the unbelievably riveting show (fig. 12).

Figure 12

So there you have it. Creating Flash-ready content from After Effects is really pretty simple when you get right down to it, and hopefully you've gotten a sense of the situational benefits of exporting to both FLV and SWF files. As I mentioned, next time we're going to switch over to Flash to hook all these things up, so stay tuned, kiddos!

Filed under: Tutorial on August 17th, 2006

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.