19 June 2006
You should have a basic knowledge of the Macromedia Flash and Adobe After Effects workspaces and an understanding of animation concepts.
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:
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:
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:
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):
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:
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:
Now you are ready to bring your 3D star animation back into Flash. You will want to import it as an image sequence:
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.