From After Effects to Flash and Back, Part 2

If you were with me for the last installment, you're already hip to the palpable excitement in the air that has already worked its way into a fever pitch. Today we're going to--wait for it--take the content we made last time in After Effects and put it all together in Flash. I, for one, can't wait, so let's get this party started.

If you recall from last time (available here if you don't), we made three items in After Effects: two FLV files (a looping background and a masked clip from Night of the Living Dead) and one SWF file (a spinning text animation that simply proclaimed, "Zombies!"). The idea was to take all of this After Effects-generated content and assemble it in Flash, which would yield the following masterpiece of interactivity (fig. 1):

Figure 1 (click to play)

Excitement abounds, does it not? But I digress. We need to fire up Flash and get all this stuff put together. If you want to download the pieces and follow along, you're certainly welcome to do so:

• Download the project files (454 KB, ZIP archive)

Ready? Good. The first step once Flash is running is to make a new Flash Document (Control+N on Windows or Command+N on the Mac and select Flash Document) and set the dimensions to 450x150 at 30fps with a black background (fig. 2). Also, make sure the target player is Flash 8, as we'll be adding a couple of things that are only supported in Flash 8.

Figure 2

Now, I'm a neat freak when it comes to Flash projects, so the next step would be to indulge my by making several layers in the first frame of the main Timeline, as shown in Figure 3:

Figure 3

We've got (from the bottom up) layers for the background, the video clip, the rotating text, the button that will start the clip and text playing, and one for the ActionScript. And while I'm in anal retentive mode, I must insist that we put a stop action in our actions layer. So, click in frame 1 of the actions layer, head to the Actions panel (F9 if it's not already open) and type the following:

stop();

With that out of the way, let's go about the task of importing the clips we made in After Effects. I'm all about picking the low-hanging fruit first, so let's take care of the easiest one and bring in our spinning "Zombies!" text. Select the Import to Library command (File:Import:Import to Library) and navigate to wherever you downloaded the text.swf file to (after you've unzipped it, of course). Once you've selected the file, it will show up in the Library as text_swf, along with several graphic symbols that represent the individual letters (fig. 4).

Figure 4

Now, this step is entirely optional, but as I like to do a bit of housecleaning to ward off a bad case of Library stank, feel free to rename the letter symbols and place them in a folder (fig. 5) as I've so obsessive compulsively done. At the very least, rename your text.swf Movie Clip to a more Flash-appropriate text_mc.

Figure 5

We have to perform a bit of surgery on our newly-renamed text_mc Movie Clip to make it ready for this particular project, so double-click on text_mc in the Library to open the text_mc Timeline. If you scroll across the Timeline, you'll notice that you have 150 keyframes of exciting Zombie text action (fig. 6). Neat-o.

Figure 6

Anyway, rename Layer 1 to text, and create a new layer and name that actions. Put a stop(); action in frame 1 of the actions layer like we did on the main timeline, then scroll out to frame 150, add a keyframe there (F6), and add another stop(); in the new keyframe. Once all that is done, your Timeline for the text_mc symbol should look something like Figure 7.

Figure 7: I've split this view in half so you can see the action at the first and last frames of the sequence.

The last thing to do before we move on is to head back up to the main Timeline (click "Scene 1" in the Timeline window to get there), select the text layer, and drag an instance of the text_mc Movie Clip to the Stage. Make sure the registration point is sitting at the very top of the Stage and about a third of the way over (fig. 8, left), which translates to an x coordinate of 185 and a y coordinate of 56 when the symbol position grid is set to top left (fig. 8, center). The last thing to do here is to head for the Properties panel and assign this instance of the Symbol the highly inventive name of "text_mc" (fig. 8, right).

Figure 8

One down, two to go. Let's work on the background. Select frame 1 in the bg layer on the main timeline, and then Select File:Import:Import Video from the menu bar to start the FLV import wizard. From there, follow the sequence outlined in Figures 9-11 to get the video into the project:

Figure 9: Adjust your path to match where your file is, of course, but the file in question here is bg.flv.

Figure 10: We definitely want to embed the video inside the Flash movie.

Figure 11: Make it a Movie Clip, place it on the stage, and expand the timeline.

OK, so there's the what and the how, but what about the why? Why make those particular choices? Well, embedding the clip in the SWF file will make for a clean loop (FLV files are notorious for stuttering the end of a loop when played back as an external file). Since this is supposed to be a seamless background, playback stuttering would go into the "bad" category. We chose Movie Clip as the symbol type to save the step of having to create it ourselves in the Library. Likewise, we had the wizard place an instance on the Stage and expand the timeline so we wouldn't have to. Little time savers here and there are always welcome. Anyway, if your import went as well as mine did, Flash placed the background on the stage and put two new items in the Library (fig. 12).

Figure 12

The bg.flv Video clip is an embedded instance, which is placed inside the bg.flv Movie Clip (which I've renamed bg_mc for consistency's sake). And since a Movie Clip will automatically loop around, no further action is necessary here. Let's move on to the last of our After Effects-generated content: the video clip. We're going to use the same process as before with the background FLV file, but we'll take a slightly different path to make the clip play as an external file. Sort of like a Choose-Your-Own-Adventure book, but different. Anyway, on the main Timeline, click once in frame 1 of the clip layer, and then select (again) File:Import:Import Video from the menu bar to start the FLV import wizard. Here's yet another sequence of images to help walk you through (figs. 13-15):

Figure 13: Again, adjust the path as necessary to get to where you put your version of the clip.flv file.

Figure 14: No embedding this time; we're going to let Flash play this thing from where it already lives.

Figure 15: Flash 8 ships with some real purty skins, none of which we need for this project.

What we've done is to use the wizard to once again save a few steps. After you go through these steps, you'll find an instance of the FLVPlayback component placed on the Stage for you (fig. 16), already sized correctly and pointing to the right file on your drive. Of course, we could have manually dragged the component out of the Components Panel and entered in everything into the Parameters panel ourselves, but as I've said many times before, saving effort is always something that interests me.

Figure 16

Anyway, there is one tweak we need to make in the Parameters panel—set autoPlay to false (fig. 17), as we're going to make a button that starts the clip in just a minute. In the same panel, name the clip "clip" (inventive, huh?) and set the coordinates to x:10 and y:18 (also shown in Figure 17).

Figure 17

OK, so we're down to one last thing: the button to set everything in motion. We're going to create one of Flash's infamous invisi-buttons, which is one of the more essential things to learn how to do if you're new to Flash. Fortunately, it's easy to do. Head to the menu bar and select Insert:New Symbol, this time entering "invisi_btn" as the name and Button as the type. Hit OK, and you'll be taken to the funky timeline that is the Flash button symbol. In Layer 1, click in the frame labeled "Hit" and create a keyframe (F6). Then, using the square tool, draw out a 450x150 pixel white square. Once you're done, your screen should look something like Figure 18:

Figure 18

Invisi-button, activate! Head back up to the main Timeline, click on frame 1 of the button layer, and drag an instance of the invisi_btn button onto the Stage, which should end up with a lovely teal tint (fig. 19):

Figure 19

Pay the color change no mind; it's just Flash's way of alerting you to the presence of an invisi-button, as it doesn't have anything but a hit state and would be kind of invisible otherwise (hence the name). Anyway, click once on the invisi_btn, head to the Actions panel, and enter in the following ActionScript:

on (release) {
    clip.play();
    text_mc.gotoAndPlay(1);
}

Even non-ActionScripters should be able to figure this out. Put another way:

when I click the mouse {
    clip, you start playing;
    and text, you go to the beginning and start playing too
}

That's it—publish your movie and behold the results (yet again):

Figure 20 (one last time, click to play)

Now, if you like, you can get freaky like I did and add some of Flash 8's live drop shadows from the Filters menu to the text and video clips. The text is straightforward enough, but to add a filter to an instance of the FLVPlayback component, you'll have to make a new Symbol out of it and apply the filter to the symbol. Name the instance, and make sure you adjust your button script accordingly (e.g., clipcontainer_mc.clip.play(); instead of just clip.play();.)

Well, we've reached the end of this part of our journey. Not to get too Mr. Rogers on you, but what have we learned? Well, hopefully, the takeaway from all of this is that yes, you can produce Flash-ready content using After Effects, as we did in part 1. You can then import and use this content in a number of ways, as we've seen here in part 2. But wait—there's more! There will (eventually, of course) be a part 3, where we'll head back to After Effects and change gears a bit by speaking to the more ActionScript-inclined amongst us. Until then, boys and girls!

Filed under: Tutorial on September 21st, 2006

^ Top of Page

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