Exporting from After Effects to Flash

Export a composition from After Effects in a format that can be used in Flash, with many kinds of layers and keyframes intact and editable.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Creative Suite 4 Production Premium

• Try
• Buy

Sample files

lrvid4105_xp.zip (ZIP, 205MB)

Prerequisite knowledge

Intermediate knowledge of file formats in After Effects and Flash

Exporting an After Effects composition to Flash Professional using SWF, F4V/FLV, and XFL

Adobe® After Effects® CS4 provides three different ways to export content for use with Adobe Flash®: You can export your compositions as SWF files or Flash movies, video for the Flash player (F4V/FLV), and in the new XFL file format. In this tutorial, you will learn how to export After Effects compositions to SWF, F4V/FLV, and XFL file formats.

Creating a SWF file in After Effects

You can export an After Effects composition to a SWF file, which you can use in Flash. . To generate a SWF file:

1. Open AfterEffects_RG.aep and select SWF Export from the Project panel. When you export the file, the text will be editable as vector art in Flash.
2. Choose File > Export > Adobe Flash Player (SWF). The Save File As dialog box opens. Name the file, choose a file location, and click Save. The SWF Settings dialog box opens.

   

   Figure 1: The SWF Settings dialog box
3. In the SWF Settings dialog box, choose the JPEG Quality. Because you are going to export vector-based content, it doesn't matter which option you choose for this particular file.

   Note: You can also choose whether to rasterize or ignore unsupported features. You can choose to export audio, and you have additional options, similar to the options provided when you export a SWF file from Flash.

4. Click OK to close the SWF Settings dialog box. After Effects exports the composition as a SWF file.

Importing a SWF file into Flash

After you've exported an After Effects composition as a SWF file, you can import it into a movie clip in your Flash library. To import a SWF file:

1. Choose File > Import > Import To Stage. Select the SWF file from the Import dialog box and click Import. Flash imports the files as a frame-by-frame animation. Note that each one of the letters in the text comes in as a separate graphic symbol.

   

   Figure 2: Importing a text animation
2. To edit one of the letters in your animation, select the symbol that represents that letter and make the necessary changes. Return to the After Effects movie clip you imported.
3. To preview the animation, return to the Timeline. Drag the After Effects movie clip onto the stage. Test the movie by choosing Control > Test Movie.

Exporting a video (F4V or FLV) file from After Effects

Another option for exporting an After Effects composition for use in Flash, is to use is create a video (F4V or FLV file). To export a video from After Effects:

1. Return to After Effects and select a composition to export.
2. Add the file to the render queue by choosing Composition > Add To Render Queue.
3. Choose Render (Export) Settings in the Render Queue panel at the bottom of the After Effects window. The Render Settings dialog box opens.

   

   Figure 3: The Render Settings panel
4. When the Render Settings dialog box opens, reduce the resolution to Half. Select Draft for the Quality setting. Click OK.
5. Click the field next to Output Module in the Render Queue panel. The Output Module Settings dialog box opens.

   

   Figure 4: The Output Module Settings dialog box
6. From the Format menu, select F4V or FLV. F4V uses the H.264 codec and FLV uses the Sorenson Spark or On2 VP6 codecs.
7. To customize how your file is exported, click the Format Options button. Here you can manipulate audio or video settings or change the preset. For this tutorial, leave the default set to FV4 – Same As Source (Flash 9.2 Or Higher). Click OK to accept the Format Options settings. Click OK again to accept the Output Module settings.
8. Use the default file name to export your file. Select the location on your hard disk to save the file. Click Save.
9. To export the video, click the Render button in the upper-right corner of the Render Queue panel.

Using the Flash Player to play an FLV file

One of the ways you can use video in the Flash Player is to play the video using the FLV component. To play the video:

1. Open Flash.
2. To get the instance of the FLV playback on the Stage, choose Window > Components. The Components panel opens. Choose the FLV component from the instances listed in the Component panel. Close the Components panel.

   

   Figure 5: The Components panel

   Note: You can create your own custom video player using the different components in the video section.

3. Choose the video on the Stage and move to the Properly Inspector panel. Click the Component Inspector panel button. The Component Inspector panel opens.

   

   Figure 6: The Component Inspector Panel button
4. In the Component Inspector panel, choose the F4V file that you created by clicking in the Source area. Click the Search button (it's shaped like a magnifying glass). The Content Path dialog box opens.

   

   Figure 7: The Content Path dialog box
5. Click Browse to locate the F4V file stored on your hard disk. Select the file and click OK to close the Content Path.
6. To see the F4V playing in the Flash Player, choose Control > Test Movie.

Exporting an After Effects composition as an XFL file

The third way to get content from After Effects into Flash is by using the new XFL file format. This format is an archive format that contains information about placement of elements as well as the assets used in the file. To create an XFL file from After Effects:

1. Open the composition that you want to export. Choose File > Export > Adobe Flash Professional (XFL). The Adobe Flash Professional (XFL) dialog box opens. This dialog box allows you to rasterize layers with unsupported features to the FLV or PNG file formats.

   

   Figure 8: The Adobe Flash Professional (XFL) dialog box
2. Leave the default set to FLV. Click the Format Options button. The FLV/F4V (H.264) dialog box opens. This dialog box allows you to change the preset setting among other options. Leave the default settings as is and click OK.

   Note: If you choose the PNG sequence as your file format, you can click Format Options and a dialog box opens allowing you to change compression settings.

3. Once you click OK, the Export As Adobe Flash Professional (XFL) dialog box opens allowing you to select a location on your hard disk to store your file. Choose a name for your file and click Save.

Opening the XFL file in Flash

Once the XFL file is created, you can open it in Flash. To open the XFL file:

1. Open Flash. Choose File > Open and find the XFL file on your hard disk.
2. Once you've opened the XFL file, you can save the file as an FLA file by choosing File > Save As. Type in the file name with the .fla extension. The FLA file includes the appropriate layer and timeline information and assets stored in the Library.

Where to go from here

• Creative Suite 4 Help and Support
• Learn CS4 Production Premium
• Using InDesign Export to Flash (XFL), by Todd Perkins
• Exporting from After Effects to Flash via XFL, by Todd Perkins
• Exporting to Flash, by Chad Perkins
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors