Dialog Box

Animator's toolkit

Flash and After Effects: Combining vector precision with rich bitmap motion

by Chris Georgenes

Figure 1: Emoticon super heroes save the day for Yahoo

Most animators know that Flash has always been terrific for creating clean and crisp vector graphics for animation. But you often have to look outside of Flash if you want to produce the special effects typically associated with raster-based programs.

With Flash 8, you now can apply real-time blend modes and filter effects. But how can you achieve animated special effects that transcend the Flash 8 filters? How can you add new depth to the look and feel of your animation? The answer: Combine Adobe After Effects with Flash.

Here's a case in point. Recently, I worked with Yahoo! and Ogilvy Worldwide to create a series of animations to promote the new Yahoo! Instant Messenger. I constructed the project almost entirely with Flash and Adobe Photoshop. I designed and animated the characters with Flash, and used Photoshop to create the background images by manipulating images taken from photographs. Finally I imported the background images into Flash.

However, there was a specific effect we wanted to achieve that we could not achieve with Flash alone. The characters in the project are all emoticon-based superheroes, each possessing a unique superpower. One particular superhero needed to transform its 'normal' face into a 'stealth-mode' face. I used After Effects to morph two different graphics using a sophisticated swirling effect. I was able to accomplish what I had imagined — the object beginning to swirl and melt as if being mixed in a blender, then reversing itself to swirl out to a different object.

This project had posed two combined challenges: how to technically achieve the effect, and how to maintain as small a file size as possible.

Requirements
Flash Professional 8
After Effects 6.5

Prerequisite knowledge
You should have a basic knowledge of the Flash and After Effects workspaces to follow along with the steps in this article.

Using Flash to create the 'before' and 'after' superhero states
The first step in creating the morphing effect is to create the 'before' image (Image 1) and the 'after' image (Image 2) in Flash. That's the easy part — knowing how the morph should begin and end. The hard part is getting from one to the other.

Figure 2: The 'before' and 'after' emoticon faces

Next, you want to copy each image, to which you will apply the effect, into a new Flash document. Then, you want to export each one as a PNG file for use in After Effects.

1. Make sure you have a new Flash document with the 'normal' emoticon image pasted onto the Stage.
2. Choose File > Export Image. Name the new file head_a.png and select PNG (uncompressed) format.
3. In the Export PNG dialog box, select Minimum Image Area in the Include pop-up menu if you want the image to be cropped to the size of the graphic.
4. In the Colors pop-up menu, select 24 bit with alpha channel to maintain a transparent background.
5. Repeat the process for the 'stealth-mode' emoticon, naming the file head_b.png.

Figure 3: PNG file export settings in the Flash Export PNG dialog

Creating the morphing effect in After Effects
Start Adobe After Effects 6.5, and, by default, it will create a new untitled project for you. Start a new composition by selecting Composition > New Composition (Control+N). You will see a Composition Settings dialog that will let you customize several aspects of your project. For this example, the most important detail is making sure the frame rate is the same as the Flash movie. Click OK.

Figure 4: The composition settings dialog appears when you create a new composition in After Effects. Make sure the frame rate is the same as in your Flash file.

From the Project window or from the File pop-up menu, choose Import File (Control+I) and locate the images you exported from Flash. Select OK. To start using the assets in the Project window, simply drag and drop them into the Composition window.

Figure 5: Drag and drop the image from the project window into the Composition window.

A new layer is automatically created every time you drag and drop a file into the composition. For this particular effect I needed to make sure both image were in the exact same position in the composition.

Figure 6: Position the emoticon's 'stealth-mode' face over the 'normal' face.

At this point in the production process, adjust the length of the timeline to reflect the duration of the effect. Since you only want the entire effect to last 2-3 seconds, so I trim the timeline duration to reflect this length. Edit the timeline so that the 'normal' image (head_a.png) is present through the entire animation, and the second image (head_b.png) resides in the latter half of the duration only. You don't want the 'stealth-mode' image to start at the beginning, as you want the effect to end with this image.

Figure 7: The After Effects timeline, with the images positioned appropriately

Now it's time to have fun by applying an effect to your images. Select the layer that the initial image resides in and select Effect > Distort > Twirl.

Figure 8: Selecting Effect > Distort > Twirl

When you apply an effect, the layer in the timeline updates with the properties for that specific effect. Click the sub-selections to expand and view the available options. Here you can create keyframes, adjust the applied effect, and edit the layer properties such as the Anchor Point, Position, Scale, Rotation and Opacity.

Figure 9: Layer 2 in composition, showing the twirl effect and its available options

The Effect Controls window lets you control and adjust the properties of the effect. In this case, adjust the twirl effect by rotating the Angle knob and the Radius slider bar.

Figure 10: The twirl effect for the morph

By using both the Effects Controls (Figure 10) and the Timeline properties (Figure 11), you can build the effect by creating keyframes, applying the effect, and adjusting the opacity of both images on both layers. Apply the Twirl effect to both images and adjust the opacity over time so that the second image fades in above the original image.

Figure 11: Timeline settings for the morphing effect

An effect such as this usually involves a bit of fine-tuning and several slight adjustments to get it 'just right.' So prepare to spend a little time perfecting the timing and the effects properties.

Once you've achieved the desired effect, it's time to prepare the animation for export. The first step is to trim the timeline to the duration of the animation. No need to export more than we have to. Drag the work area slider to span only the range of frames your animation resides in.

Figure 12: Trimming the timeline to the duration of the animation

The Crop Region of Interest tool is located at the bottom of the Composition window. This tool functions like the Crop tool found in Photoshop. Simply click and drag across the animation in the Composition window to determine the bounding area of the animation.

Figure 13: Region of Interest tool

Once you've determined the crop region, select Composition > Crop Comp to Region of Interest.

Figure 14: Cropping the composition to the region of interest

Next, select File > Export > Image Sequence. Select PNG format.

Figure 15: Selecting PNG as the file format for the exported sequence

Since this effect uses a transparent background, select Millions of Colors+ in the Options menu. (The '+' represents an alpha channel.)

Figure 16: Choose Millions of Colors+ to include an alpha channel in the exported sequence

Bringing the animated effect back into Flash
The image sequence exported from After Effects will include a numerically sequential naming convention. In Flash, select File > Import to Library and choose the first file in the sequence. Flash will recognize it being part of a sequence and prompt you to import just the selected file or the entire sequence. Flash will create a movie clip symbol in the Library containing the series of PNG images, each in individual keyframes on one layer. Drag this movie clip to the Stage and test the movie.

Click here to see figure 17. The morphing effect, created in After Effects and playing in Flash

After Effects is the perfect complement to Flash when your movie requires an effect that goes beyond what Flash 8 can do alone. The new filters and blend modes in Flash 8 are a wonderful advancement in Flash and can provide stunning visual results. But when a custom animated effect is needed that requires a certain 'roll up your sleeves' approach, After Effects is the answer.