Tutorials

Team After Effects text animation with Flash

by Tom Green and Jordan Chilcott

When Adobe® acquired Macromedia in December 2005, they also acquired Flash®. Though the industry reacted to the news rather indifferently, several developers saw the integration of Flash with Adobe After Effects® as a major development. At the same time that Flash becomes a viable web video creative tool, the company that produces one of the hottest video effects tools out there acquires the product. To think they will exist in separate product solitudes is a huge mistake. These two applications were made for each other and, finally, they are living under the same roof, so to speak.

After Effects 7.0 is the latest iteration of the application, and it sports a spiffy, easier-to-use interface; improved performance; and a number of other features that are too extensive to get into here. Instead, this tutorial is designed to give you, the Flash developer or designer, an idea of some of the techniques and tools you can use when looking to incorporate video into your Flash projects.

This tutorial is not designed to teach you how to use After Effects but to start looking at the possibilities in front of you. We are not going to claim that After Effects 7.0 is simple to use and master. It isn’t—but it is rather important to note that the learning curve for After Effects, in many respects, matches that of Flash. It is steep to start with but once you get the fundamentals under your belt, you will discover that After Effects and Flash are quite the unbeatable creative combination.

Finally, attempting to cover the gamut of motion graphics and where After Effects 7.0 and Flash Professional 8 fit into the picture is a rather tall order and simply can’t be done in one tutorial. Instead think of this as a source of ideas and the start of a rather interesting journey. Download fire_escapes.zip and let’s get going.

After Effects text animation for Flash

In this exercise you will deal with a rather common design problem: fitting a text effect into a defined area of the stage rather than using the whole stage for the effect.

1. Open the fire_escapes.zip file that you downloaded. The plan is to add a text animation to a Flash site dedicated to “House Hunting in New York.” The image on the right side of the Stage will be used in frame 1, and it is your job to create a motion graphic that fits the left side of the Stage.

Obviously, using the entire Stage size—550 pixels wide by 400 pixels high—for the text effect in After Effects would be like using an atom bomb to light your barbeque grill. There is far too much Stage space being used for a small text area. Instead, if you select the image, you will notice in the Property inspector that the image (see Figure 1) is 300 pixels wide by 400 pixels high. Subtract that width from the Stage width, and you only need an area that is 250 pixels wide. The animation will leave the title at the mid-point of the area, meaning you don’t need the full Stage height for the animation. The final result is an animation that will fit into a Stage area that is 250 pixels wide by 200 pixels high, which also tells you the dimension used for the comp in After Effects.

Figure 1: Use the dimensions of the blank area of the Stage to determine the comp size in After Effects 7.0.

2. Open Adobe After Effects 7.0. Select Composition > New Composition and create a new comp with the following properties:
   • Name: House
   • Lock Aspect Ratio: Deselected
   • Width: 250 pixels
   • Height: 200 pixels
   • Pixel Aspect Ratio: Square Pixels
   • Frame Rate: 24

Click OK to close the New Composition dialog box.

The settings match the dimensions determined earlier. You don’t need to lock the aspect ratio because this will not result in a video file and it is a good habit to match the comp’s frame rate to that of the Flash movie.

3. Select the Text tool, click once in the composition window, and enter the words House Hunting in New York. Select the text with the Text tool and, in the Character panel (see Figure 2), use the following settings:
   • Font: Times
   • Style: Bold
   • Size: 30 pixels
   • Color: Yellow

4. With the text still selected, select Window > Paragraph and click the Center Alignment button in the Paragraph panel. Click once between the words Hunting and in. With the Shift key held down, press Enter/Return. If necessary, use your arrow keys to position your text so it looks like Figure 2.

Though we suggest the Times font, feel free to use Times New Roman or another serif font. In the example, we used Times Bold. If you have this font or are using one containing the word Bold or Heavy in the font’s name, you should leave the Style at Regular. Setting the Style to Bold will only make the words less legible and readable.

Figure 2: The text is formatted.

5. If it isn’t open, open the Effects & Presets panel by selecting Window > Effects and Presets. Twirl down the Animation Presets folder and select Text > Animate In. When the Animate In presets are visible, drag the Raining Characters In preset on top of the text in the comp window.

When you drag the preset on to the text, a symbol will appear over where the text had been. When you release the mouse, the Effect Controls panel will open in the Project panel. We aren’t going to play with any of the values here so you can ignore it. If you want to test the effect, click the play button in the Time Controls panel or press the spacebar. When you finish, rewind the comp to the start.

Your text block stretches quite a distance (see Figure 3) above the comp window. You don’t need that wasted space. Here’s how to fix it.

Figure 3: The starting position for the effect is changed.

6. Twirl down the source name in the timeline. Now twirl down Text and twirl down Animator 1. Making sure the playback head is at the start of the timeline, click and drag the second Position number. The text box moves up and down above the comp window, depending on which direction you move. Place the text box so its bottom edge is sitting on the top edge of the comp window. We found that –140.0 worked, but your number may be different.

Now that the animation’s start and end points have been set, you can turn your attention to reducing the duration of the movie and speeding things up.

7. Twirl down the Range Selector 1 in the timeline. This will make the key frames accessible. If you look at the timeline, you will see the key frames are indicated by diamonds, as shown in Figure 4. The first key frame is at the one-second mark on the timeline and the second is around the three-second mark. This tells you the animation starts after one second and lasts for two seconds. Zoom in on the timeline by dragging the Zoom slider to the right. The timeline will change from showing seconds to showing frames. Click once on the first key frame and drag it to the 00:12f mark on the timeline. By dragging the first key frame to the 12f mark you have essentially extended the animation another half-second.
8. Drag the right edge of the work area bar on the timeline to the four-second mark and release the mouse. This has the effect of shortening the duration of the clip. The next step in the process is to actually trim out the extra time after the four-second mark. To do this, select Composition > Trim comp to work area.

Figure 4: Preparing to trim the comp to the work area.

9. Select File > Export > Macromedia Flash (swf). A dialog box will open prompting you to save the file. Navigate to the folder where you want to save the file and give it a name—we used House—and click Save. The SWF Settings dialog box will now open. Be sure to select Ignore in the Unsupported features pop-down menu and click OK. After Effects will create the SWF and place it in the Exercise folder. At this point you can choose to save the comp as an AEP file or simply quit the application without saving the changes.
10. Return to your Flash document and create a new movie clip (in the completed file we named it House but you can use any name you wish). When the Symbol Editor opens, select Import > Import to Stage. Locate your SWF in the import dialog box and click OK. The SWF will import to the timeline as a series of key frames.
11. Click the Scene 1 link to return to the main timeline. Add a new layer named Rain and drag the movie clip from the library to the first frame of this new layer. Position the movie clip on the stage and save and test the movie, as shown in Figure 5.

Figure 5: It is raining houses in New York.