Adding 3D to Flash projects using After Effects

When I started learning Adobe After Effects, I realized that it includes a number of features and effects that can not only give more capabilities to my Macromedia Flash projects but save me time because of how the two applications are integrated.

After Effects gives you a variety of ways to create video with alpha, animate your graphic in 2D or 3D space, and then export your animation with a transparent background, as well as apply a variety of effects and presets that differentiate your Flash work.

This article will help you understand how After Effects integrates with Flash. You'll learn how to benefit from these features in your Flash projects by using the 3D layer feature in After Effects to give a 2D Flash graphic some 3D properties. You will export a Flash graphic to After Effects, convert it to a 3D layer in order to give it 3D properties, and then animate it before finally bringing it back into Flash.

Let's start out by first creating a simple 2D star in Flash:

1. Launch Flash Professional 8, create a blank document, and name it star_graphic.fla.
2. Click and hold the Rectangle tool and choose PolyStar Tool from the pop-up menu.
3. Click the Option button in the Properties panel, set the properties of the PolyStar tool to Star, and the number of sides to 5. Set the Star Point Size property to 0.5.
4. Draw a star in the workspace (see Figure 1).

You can export your graphic from Flash in a variety of formats that After Effects will recognize, such as AI, EPS, and PNG. For this example, export the Flash graphic as a PNG image:

1. Select File > Export > Export Image.
2. In the Export Image dialog box, select PNG from the Save as Type pop-up menu.
3. Name the image star.png and click Save to save the image.

After Effects saves links to the project resources as footage items in the Project panel. Footage items are then used as layers in a composition.

To import your graphic to After Effects:

1. Launch After Effects 7.0. By default a new project is open. You can also choose File > New Project.
2. To create a new composition, select Composition > New Composition.
3. The Composition Settings dialog box appears. Set the composition settings as following:
   • Insert Star Composition as the name of your composition in the Composition Name text box.
   • Choose Custom from the Preset pop-up menu.
   • Set the width to 640 and the height to 480 pixels.
   • Choose Square Pixels from the Pixel Aspect Ratio pop-up menu (Frame Aspect Ratio: 4:3).
   • Set the Frame rate to 30 frames per second.
   • Set the Resolution to Full.
   • Set the Start Timecode to 0;00;00;00.
   • Set the Duration to 0;00;01;00.
4. Click OK to accept these settings (see Figure 2).

5. To import the graphic, choose File > Import > File.
6. Choose star.png and click Open.
7. Drag the star footage item from the Project panel to your Composition panel. By default, After Effects inserts it on a new layer in the Timeline panel.
8. Expand the layer properties by clicking the right arrow next to the layer name and examine the Transform properties (see Figure 3).

After Effects uses two dimensions (x, y) to display the 2D layer. When you convert the layer to a 3D layer, After Effects adds a z-axis, which controls the position of your graphic in 3D space. After Effects adds the following layer properties to the 3D layer (see also Figure 4):

• Anchor Point (z)
• Position (z)
• Orientation (z)
• X Rotation
• Y Rotation
• Z Rotation

Note: To help simulate three dimensions, the Material Options properties that are also added determine how the layer interacts with an arbitrary "light source" that you specify.

To convert the 2D layer to a 3D layer, click the 3D Layer switch in the Timeline panel or choose 3D Layer from the Layer menu.

To give you a greater understanding of the 3D layer option, give your star some dimensionality by animating it in 3D space. Animation in After Effects is similar to animation in Flash; it depends on keyframes. To animate a layer with keyframes, you must first activate the stopwatch beside the layer property that you intend to change. By activating the stopwatch, you set the initial keyframe of the animation. The Keyframe Navigator icon appears next to the layer property.

Before you start animating your star along the z-axis, give it a 3D dimensional look by rotating it around the x-axis:

1. To rotate the star along the x-axis, set the value of the x rotation to -72.0 degrees.
2. Make sure that the current-time indicator is at the first frame of the Timeline.
3. Click the stopwatch next to the Z Rotation property to enable animation for that property and set the first keyframe.
4. Go to the last frame of the Timeline and rotate the star 360 degrees around the z-axis. You can either set the degree value of the z rotation to 360 or set the revolutions value to 1.
5. Drag the current-time indicator at the top of the Timeline panel to see how the star rotates in 3D space (see Figure 5).

You can apply the above 3D properties and animation in the 3D space to other objects like text, shapes, images, or compositions

After Effects provides a variety of options for integrating an animation with Flash, such as video output, Flash video, and image sequences. You can also export a SWF file from After Effects. However, the 3D layers are not supported in the current SWF files exported from After Effects.

In this part you will export your 3D animation from After Effects as a PNG image sequence to preserve the transparency to Flash:

1. Choose File > Export > Image Sequence.
2. In the Export Image Sequence dialog box, set the exporting format to PNG.
3. Enter 30 as the Frames per Second value.
4. Click the Options button and choose Millions of Colors+ from the PNG Options dialog box so you can export the image sequence with an alpha channel (see Figure 6).

5. Name your image sequence Comp 1 and click OK to save your changes.

Now you are ready to bring your 3D star animation back into Flash. You will want to import it as an image sequence:

1. Create a new Flash file called star_animation.fla and create a new movie clip by choosing Insert > New Symbol.
2. In the Create New Symbol dialog box, set the Type to Movie Clip and name it StarAnimation. Click OK to close the dialog box.
3. Choose File > Import > Import to Stage.
4. Select the first PNG file in the sequence you just exported. It should be named Comp 1 01.png. Flash will detect that the image is part of a sequence. Click Yes to import the images as a sequence in the Timeline.
5. Drag your movie clip to the Stage (see Figure 7).

6. To give it even more of 3D look, apply Drop Shadow filter by clicking the plus icon in the Filters panel.
7. Set the Blur x and Blur y of the star movie clip to 30.
8. Set the color of the shadow to black with 35% alpha value.
9. Set the angle of the shadow to 90 and its distance to 50.

Have fun with this. For example, you could create two other star animations with different size and filter effect settings, and resize the document file to accommodate all three stars (see Figure 8).

The star_animation.swf demo file contained in the sample ZIP linked to at the beginning of the article shows the final animation of the star with the 3D properties applied.

After Effects includes many features that you can use to enhance your Flash projects. All you need to do is know more about those features and what you can do with them. Start by taking your Flash graphics into After Effects and applying these features to them. Then get them back into Flash and see how those visual effects enhance your work.

You can also use objects originally created in Adobe Illustrator or exported from Flash as AI files because After Effects will constantly update the quality of the Illustrator or vector objects as you scale them. By contrast, PNG is a raster format that loses quality quickly as you scale objects larger than their original size.

To learn more about integrating Flash with After Effects, check out Flash and After Effects: Combining vector precision with rich bitmap motion by Chris Georgenes.