Integrating Flash CS4 with After Effects CS4

Note: I want to give special thanks to Chris Georgenes for permission to use his character "Grotto" in this article. Although Grotto made an appearance in Foundation Flash CS4 for Designers (Friends of Ed, 2008), coauthored with David Stiller, I deeply appreciate the fact that Chris, a master of the craft of Flash animation, allowed him show up in this article as well.

One of the strengths of Flash is its ability to create vector animations. The Timeline in Flash makes it possible to add motion to vector objects, resulting in animation with crisp, clean lines and motion that would be difficult and time-consuming to create in After Effects.

The process of moving a Flash animation into After Effects is very simple. Follow these steps:

1. Open the Grotto.fla file in the 01_FlashtoAE_SWF folder contained in the sample ZIP file linked to on the first page of this article. When the file opens, you'll notice that the animation has 22 layers on the main Timeline and spans 810 frames. If you open the Library (Window > Library), you will also notice that the character is composed of a number of graphic symbols. The use of the Timeline and graphic symbols are the key to moving a Flash animation over to After Effects.

   There are only two rules and they are rather simple:

   • All animations must be placed on the main Timeline. Nested movie clips containing animation cannot be used. After Effects will only "see" the main Timeline in a Flash animation; timelines in movie clip symbols will be ignored.
   • If there is a movie clip or button symbol containing an animation on the Timeline, After Effects will ignore it. That is why it's so important to use graphic symbols (see Figure 1).

2. If you drag the Flash playhead across the Timeline, you'll notice that Grotto is not exactly an active monster. There's a lot of extra Stage space at the top of the animation that isn't needed. To remove it, select Modify > Document to open the Document Properties dialog box (see Figure 2). Click the Contents option. The dimensions shrink to the dimensions of the content on the Stage. Click OK to save the changes to the canvas size.

Note: This step is optional, but removing unused space is a best practice because it reduces the file size of the published SWF.

3. Save the file by selecting File > Save As. When the dialog box opens, rename the file as GrottoCrop.fla. Click OK. By making a copy, you are preserving the original as a backup in case you make a mistake in preparing the animation.
4. Select File > Publish Settings to open the Publish settings dialog box (see Figure 3). Deselect the HTML option because it isn't needed. After you click OK, quit Flash.

5. Double-click the Grotto.aep file located in the 01_FlashtoAE_SWF folder of the sample files. This operation will launch After Effects CS4. When the file opens, drag the current-time indicator across the timeline. Watch as cascades of green blobs of goo fall down the screen.

   Note: You may be wondering about the duration of the composition being 33 seconds and 18 frames long. The Grotto animation is 810 frames long in Flash. Because the SWF file plays back at 24 frames per second, those 810 frames amount to 33.75 seconds. However, After Effects uses frames, not fractions of a second, so the 0.75 second (@ 24 frames) equals 18 frames.

6. Select File > Import > File to open the Import File dialog box (see Figure 4). Select the SWF you created and click OK. The SWF will be added to the Project panel.

7. Drag the current-time indicator to the start of the composition in the After Effects Timeline panel. Drag the Grotto file from the Project panel to the timeline. If the Grotto layer is under the Background layer, simply drag it above the Background layer. Grotto appears on the composition. Drag the image of Grotto to the bottom of the Composition panel.
8. Press the Spacebar to preview your work. Grotto wakes up and seems to find the goo rather fascinating (see Figure 5). Seeing as how Grotto loves his goo, let's cover him in it.

9. Select the Background layer and press Control-D (Windows) or Command-D (Mac OS) to duplicate the layer. A new layer named Background2 appears in the Timeline panel. Lock the original layer and move the Background2 layer above the Grotto layer. With the Background2 layer selected, move it a bit to the right or left in the Composition panel. Press the Spacebar to preview your work; Grotto is in second heaven (see Figure 6).

10. Save the project and quit After Effects.

If you want to render and export the project, be sure to read the Rendering and exporting sections in the Using After Effects CS4 online documentation. You can also find the final QuickTime (MOV) and FLV versions of this exercise in the Complete folder among the sample files you downloaded at the beginning of the tutorial.

In this section, I describe the process of preparing a Flash file for output as a QuickTime movie. The movie can then be imported into an After Effects CS4 project.

Creating a QuickTime video from Flash CS4 is one of the more overlooked features of the application. This is understandable because, prior to the release of Flash CS3, converting a SWF file to a QuickTime video was a rather painful process. It involved downgrading Adobe Flash Player to version 5 and moving everything to the main Timeline. Flash CS3 changed all that.

The following example (which uses a file prepared by my coauthor David Stiller for Foundation Flash CS4 for Designers) illustrates how Flash coders can now join the Flash/After Effects party because everything in the SWF is created and driven by ActionScript.

Let's get started:

1. Use Flash to open the BubblingLetters.fla file found in the 02_FlashtoAE_Code folder of the sample files. When it opens, you'll see there is nothing on the Stage or in the Library.
2. Select Frame 1 of the scripts layer and select Window > Actions to open the Actions panel (see Figure 7). This is the script that creates the animation.

If you read through the code, is says that every 50 milliseconds, as long as the movie runs, pick a random letter from the alphabet and display it on the Stage. The first function, createLetter(), creates a random letter between 80 and 120 points in size, assigns a color to the letter, puts it into a movie clip and, using the addChild() method, displays the letter on the Stage. The last line of the function instructs Flash on how to move the letter.

Movement is managed by the shimmy() function, which moves each letter in a sine wave manner. While the letter is in motion, the shimmy() function reduces it in size by 20 percent every time the playhead goes back into the frame.

The final function, randomBetween(), provides the functionality that determines how a number is used to choose the random letter that is created.

3. Test the movie by pressing Control-Enter (Windows) or Command-Return (Mac). When the SWF starts playing, random letters of varying colors shimmy up the Stage and shrink as they approach the top (see Figure 8).

Now that the SWF is working as expected, let's convert this Flash file to a QuickTime movie in order to use it in After Effects. Here's how:

1. Select File > Export > Export Movie. When the Export Movie dialog box opens, select QuickTime (*.mov) from the Save As Type menu. Name the file and click Save.
2. Clicking Save causes the QuickTime Export Settings dialog box to appear (see Figure 9). This dialog box has been available since Flash CS3. The settings you make here determine how the movie will be created.

3. Click the Ignore stage color (generate alpha channel) option. Choosing this selection essentially keys out the Stage color and makes the QuickTime movie transparent. Considering the fact that this movie will be placed over some content in the After Effects composition, selecting this option ensures that users will see it. If this option is not selected, the animation will appear over a solid black background (the Stage color in the Flash authoring environment).
4. In the Stop Exporting area, enter 10 in the After Time Elapsed field. This part is critically important. If your movie contains frames on the main Timeline, then selecting the first choice (When last frame is reached) makes sense. This movie is strictly code-driven, however; there is only one frame in the Timeline. The number you enter is used as the duration (10 seconds) of the resulting video.
5. Click the Export button (see Figure 9). A progress bar appears, showing you the progress of the process. When it is finished, an alert box states that the export process has been completed. You can also choose to view a log that documents the export process. Click OK to close the alert box.
6. Save the file and quit Flash.

At this point you can import the QuickTime movie into an After Effects CS4 project and work with it as you would with any other element in an After Effects CS4 composition. If you are interested in seeing the animation, open the FinalComp.mov file found in the Complete folder of the sample files (see Figure 10).

Previous sections of this article have discussed some techniques and strategies to move content created in Flash into After Effects. Let's now turn our attention to moving from After Effects to Flash.

The thing I just love about this workflow is that it puts me into what I call a "code-free zone." I am really clear with anybody I talk to that "ActionScript makes my teeth hurt." This explains why David Stiller is responsible for the code examples in our books. I am a visual designer who likes to see what I'm doing—which is why I adore using After Effects. I can apply an effect and instantly see what it does.

Some Flash users assume that any FLV or F4V files exported from After Effects are destined for use in the FLVPlayback component in Flash or in a video object driven by ActionScript. They are partially correct. There are other options, such as embedding the After Effects content directly into the Timeline in Flash or even outputting a document loaded with effects, such as an XFL document. This section explores these two options.

Let's start this exploration on a snowy day in my neighborhood:

1. Open the SnowDay.aep file found in the 03_AEtoFlash folder in the sample files. The file contains a shot taken this past winter from my front porch. The goal of this sample project is to add falling snow to this image in Flash.
2. Select Layer > New > Adjustment Layer. Although adjustment layers affect any layers under them, we don't need to reorganize the stacking order because, in this case, the adjustment layer is the only layer that will be output. Adjustment layers are also good to use for this process because they are transparent. This means you can decide whether to show a gentle snowfall or a good old-fashioned blizzard and see how the snowfall works with the underlying image.
3. Expand the adjustment layer and expand the Transform property group. Though we could simply apply the effect to the entire layer, Flash projects always benefit by working with as small a file size as possible. Let's reduce the width of the layer and save a few kilobytes in the process.
4. Do not simply yank a transform handle to one side or the other. This would scale the layer, which defeats the purpose. Instead, move the anchor point (the icon in the middle of the composition) to the right edge of the image. Click once on the first number in the Anchor Point property and, while holding the mouse button down, drag across the number until the anchor point is at the right edge of the image.
5. Drag the adjustment layer back into place on the image. Drag the center handle on the left edge of the layer until it aligns with the inside edge of the wall (see Figure 11).

Adding the snow

With the layer in place and properly sized, the next part involves adding the falling snow. Follow these steps:

1. Click once on the adjustment layer in the Timeline panel to select it in the Composition panel. In the Effects & Presets panel, open the Simulation folder. Locate the CC Snow effect and drag it onto the adjustment layer in the Composition panel. The Effect Controls panel displays the various properties you can adjust to change the way the snow will appear.

   Tip: You can find effects quickly by simply typing the corresponding name (for example, Snow) into the Effects & Presets search box (see Figure 12). Also, you don't have to select a layer to apply an effect. Just drag the effect onto the layer in the Timeline panel to apply the effect to the layer.

2. With the CC Snow effect visible in the Effect Controls panel, apply the following settings:
   • Amount: 500
   • Speed: 0.5
   • Flake size: 1.6
   • Opacity: 80%

   Those four settings cause the effect to display a great deal of snow, reduce the intensity of the storm, decrease the size of the flakes, and change the opacity to make the flakes more visible against the background image.

3. Press the Spacebar to preview the snowstorm in the Composition panel. If you are pleased with the results, be sure to save the project.

Outputting the adjustment layer for Flash

The next step in the process is to output the composition as a file that can be used in Flash CS4. Turn off the visibility of the Winter.png layer by deselecting its Video (eyeball) switch. If a layer is not visible in the composition, After Effects will not render it. By hiding this layer, therefore, you can output just the snow effect on the adjustment layer.

The following technique is a best practice that reduces the file size of the final file. Earlier in this exercise, we reduced the width of the adjustment layer to avoid snow falling over the entire image. If we were to output this composition as it is now, the resulting FLV file would match the dimensions of the composition, not the adjustment layer.

Follow the steps below to output just the area of the layer that contains the snow effect:

1. Click once on the Region Of Interest button (the button two from the left of the Active Camera menu at the bottom of the Composition panel).
2. Drag an area that includes only the snow in the Composition panel. You can use the handles to adjust the output area (see Figure 13).

Note: This technique is important when your After Effects content will be incorporated into a Flash project. I am sure a lot of you may be aghast at the size of the area I am outputting. Yes, it is large and will cause a bandwidth hit at runtime. Still, it is an effective technique, especially if used judiciously. Watch my example on the Layers Magazine website of the rainstorm in the Alps where the image shows rain coming up a valley. I used the CC Rain effect in just that small part of the image and the resulting FLV was miniscule in size. I could have created the rain effect using ActionScript, but I'm a visual guy—and I didn't have a coder handy at the time.

3. Click once on the Composition panel and select Composition > Add To Render Queue. This will open the Render Queue panel (see Figure 14).

4. Click once on the word Lossless in the Output Module to open the Output Module Settings dialog box. This is where the format for the final file is determined. Select FLV from the menu in the Format area. The ability to export After Effects compositions in the FLV format (and a few others) is quite uncomplicated in After Effects CS4.
5. Click once on the Format Options button in the Video Output area to open a barebones version of Adobe Media Encoder. Make sure to choose the On2 VP6 codec and that VBR (Variable Bit Rate) is selected in the Bitrate Settings area. Set the Bitrate to 300 kbps and click OK to close the FLV|F4V export settings dialog box (see Figure 15).

6. Click the Crop check box and select Use Region Of Interest. If you don't to this, After Effects will ignore the region of interest. Click OK to accept your settings and return to the Render Queue panel.
7. Click the filename in the Output To area to access the Output Movie To dialog box. This dialog box simply allows you to assign a filename and choose where you'd like to save the completed FLV file. Click Save.
8. Click the Render button found in the upper right corner of the Render Queue panel. A progress bar appears and a chime sounds when the process is complete. Save the file and quit After Effects.

The snowstorm that we created in the previous section is complete. In this part, the goal is to add the snowstorm to the static background image in Flash CS4.

Instead of using the FLVPlayback component or a video object to play the FLV file, let's examine how to add the falling snow to a movie clip:

1. Open the Snow.fla file found in the 03_AEtoFlash folder inside the sample files. Double-click the Street movie clip in the Library to open it in the Symbol Editor. The first thing you'll notice is that the image was separated into foreground and background layers. I created separate layers because I wanted to give the viewer the experience of standing on my front porch watching the snowflakes fall. This means the snow had to fall "behind" the brick wall on the left and the eaves trough in the upper right corner (see Figure 16).

   Note: I used Fireworks CS4 to "split" the image and export it as PNG files. When you import Fireworks CS4 PNG images into Flash CS4, you import the images as well as a movie clip, which is found in the Fireworks Objects folder in the Library. I moved the movie clip out of the folder and renamed it Street. Feel free to delete the Winter.png symbol in the Library. It is really nothing more than a placeholder. But be careful not to delete any of the files in the Fireworks Objects folder.

2. While still in Symbol Editing mode, select File > Import > Import to Library to open the Import to Library dialog box. Select the FLV you created in After Effects CS4 and click Open.

   Note: If you do not have After Effects CS4 installed, you can use the SnowStorm.flv file provided in the sample files folder.

3. Flash immediately recognizes that you've selected a video file and displays the Import Video dialog box. Select the option to Embed FLV in SWF and play in timeline. Click Next.
4. In the Embedding screen that appears, set the Symbol type to Movie clip (see Figure 17). Click the Next button to bring up the Finish Video screen. There's nothing to set here, so click Finish.

5. While still in the Symbol Editor, select frame 1 of the Snow layer and drag the movie clip you just imported to the Stage. Align the left edge of the movie clip with the outer edge of the brick wall. The snow appears to fall behind the wall.
6. Click the Scene 1 link to return to the main Timeline. Save and test the movie. A snowstorm displays before your eyes (see Figure 18).

As I pointed out earlier, this project results in a rather large file size. This technique of embedding FLV video in Flash is ideal when creating banner ads that use small canvases or to add small effects (rain, fire, etc.) to your SWF files.

A new feature included in After Effects CS4 (and Adobe InDesign CS4), is the ability to output an XFL file that can be used in Flash. Think of the new XFL container format as a ZIP file that contains an XML file and all the assets referred to in the XML file. The assets and the XML are the files used to build the FLA. A thorough explanation of XFL files and their capabilities is outside the scope of this article. However, if you wish to learn more about working with them, see Export a composition as an XFL file to Flash Professional in the Using After Effects CS4 online documentation.

Follow the steps outlined below to create an XFL document using After Effects CS4:

1. Open the XFL.aep file located in the 04AEtoFlash_XFL folder in the provided sample files. If you drag the current-time indicator in the Timeline panel, you'll see that random letters form the phrase "XFL Rawks" and then the words fall out of the frame (see Figure 19). The effect was really simple: I simply entered the text, duplicated the layer and applied the Raining Characters In and Raining Characters Out animation presets from the Animation Presets > Text folder in the Effects & Presets panel. Also notice the names of the two layers: RainIn and RainOut (see Figure 20).

2. Select File > Export > Adobe Flash Professional (XFL) to open the Adobe Flash Professional (XFL) Settings dialog box (see Figure 21). Select PNG Sequence from the Rasterize To menu. Click OK.

There are two choices:

• Rasterize to: This setting allows you to decide whether the output will be rasterized to a PNG sequence or to an FLV file. If you choose PNG Sequence, each frame is exported as a PNG image. Although this option may sound as though it will result in a large quantity of files being imported into Flash, frames that are identical and adjacent to each other are only rasterized once (to a single PNG) that will referenced several times in the XFL document.
• Ignore: This setting basically ignores the layers containing any unsupported features (such as blending modes other than Normal). If you choose this option, these layers will not be included in the exported XFL document.

Choose the FLV format if any layer in the composition contains a video. If you click the Format Options button, the FLV|F4V export settings dialog box appears. The only codecs available are the Sorenson Spark and On2 VP6 codecs.

3. Click OK to close the XFL Settings dialog box. You'll be prompted to choose a location for the XFL file and to name the document. After you click the Save button, the dialog box closes and a progress bar appears. When the progress bar finishes, be sure to save the document and quit After Effects CS4.
4. Navigate to the folder where you saved the AEP file and the XFL document. The folder now contains an HTML file that provides a report of the process. The report indicates whether layers with unsupported features were ignored or rasterized, whether or not each source item was rasterized (rendered) or ignored (linked), and whether each layer in the After Effects composition was rasterized or converted to a Flash object.
5. Double-click the XFL document you just created. This will launch Flash. When the XFL file opens, pay close attention to the layer names that appear in the Timeline and the objects that are added to the Library (see Figure 22).

Direct your attention to the Timeline. Each of the After Effects layers has been converted to a Flash CS4 motion layer. The folders in the Library contain the PNG files used in the movie clip. Double-click the movie clip to open it in the Symbol Editor and notice that you can easily change the animation because the After Effects frames are now a series of keyframes.

Notice another very subtle change: the Scene 1 link at the top of the Stage has been renamed Comp1, which reflects the name of the source item.

Finally, note how the document name changes to "Untitled." When you open an XFL document, Flash CS4 Professional assumes that you are simply opening a new, unnamed document. As I pointed out earlier, this happens because Flash constructs a new document from the information in the XFL document and new documents in Flash are always untitled. Be aware that although you can open an XFL document directly using Flash, it is not possible to save or export a Flash document to the XFL format.

6. Save and test the movie.

Where to go from here

I have always regarded Flash and After Effects as a sort of "motion graphics dynamic duo." As you have seen, both Flash CS4 and After Effects CS4 strengthens their partnership even further. In this article I have scratched only the surface of what you can do.

Here's what you learned:

• How to add your Flash animations to the After Effects timeline
• A technique to add code-driven Flash animations to After Effects
• A quick way to add an After Effects effect to the Timeline in Flash
• How to create an XFL document in After Effects and use it in Flash

To learn more about After Effects CS4, visit the After Effects Help and Support center to find articles and tutorials that will help you dive deep into the application. Also be sure to visit the Flash Developer Center to find sample files and quick-start guides to help you achieve specific tasks.

Outside Adobe, you can find other online resources:

• Layers Magazine has an excellent print magazine and a website filled with tutorials.
• Creative COW is a great source to learn more about working with After Effects and video. They offer video tutorials that appeal to all skill levels.

The purpose of this article was to get you thinking. If you are looking at Flash and After Effects and wondering about the possibilities you could achieve by combining them, then you are already on your way to exploring the integration and generating motion elements to leverage the best of both tools.