Section 3.3. Preparing Text for Animation

3.3. Preparing Text for Animation

Text is often an integral part of an animation, drawing the eye to key terms that need to stand out in the design. In the completed version of your animation, the text "Flash 8 Out of the Box" appears one section at a time, moving in from different directions. In this project, the boxes serve to initially attract the user's attention, and the animated text completes the effect. A short animation such as this one serves its purpose without being gratuitous.

When choosing a font, be sure to pick one that matches the needs of the piece. Be mindful of the fact that too many fonts can be distracting. Try to use as few fonts as are required to get the idea acrosspreferably no more than two or three. Make sure they are dissimilar enough that the user can appreciate the difference instead of merely viewing the choices as byproducts of inconsistent design.

Later, when you start using ActionScript to control text in text fields, you will learn that you must embed fonts in your file to make sure they display correctly on any machine. Reducing the number of fonts used will help to keep the .swf file size down.

Next, add the text to the movie:

1. Add a new layer folder to the timeline above the boxes layer folder. Remember, to create a layer folder, click the Insert Layer Folder button in the Timeline panel. Name the layer folder text. If the boxes folder is open or selected at the time, the new text layer folder may appear inside it. If this happens, practice rearranging the timeline by dragging the text folder outside the boxes folder.

2. Add a new layer and drag it into the text layer folder.

3. Activate the Text tool from the Tools panel, shown in Figure 3-7, and click once on the Stage to create a text field. Set the value in the Field Type drop-down list in the Properties panel to Static Text, pick an appropriate font, and set the size to 30, as shown in Figure 3-7. Return to the text field on the Stage and enter the word Flash.

   Figure 3-7. The Text tool, used to create a static text field for the word "Flash"

   

4. Switch to the Selection tool, and Alt/Option-drag the text element to create five additional copies of the text element.

5. Switch back to the Text tool and change the copies to say 8, Out, of, the, and Box, respectively.

6. Shift-select the five text elements and change their color to black using the Text Color swatches pop-up in the Properties panel.

7. Select the text field containing the number 8 and increase its font size to 72. If you wish, give it a color that will contrast well with the other colors you've chosen for the underlying boxes.

8. Save your work.

You now have the text you need for your animation, but you can't animate these elements separately if they are all in one layer. To separate the text into five layers:

1. Convert each separate text element to a movie clip symbol, naming them appropriately.

2. Just as you did with the boxes earlier, use Modify Timeline Distribute to Layers to create a new layer for each symbol instance.

3. Arrange the five word text layers so that Flash is on top and Box is on the bottom.

4. You'll do something special with the number 8 later in this chapter, so move that layer out of the text folder into a new folder of its own, called eight. When you're through, your file layer structure should match what you see in Figure 3-8 and in the animation_04.fla file.

---

Note: Text, unlike other elements in a Flash movie, does not need to be converted to a symbol before a motion tween is applied to it, because Flash treats it as a symbol automatically. However, it is a good practice to convert objects on the Stage to symbols before applying a motion tween. This makes it easier to make global changes when necessary.

---

Figure 3-8. The new text layers, with each element converted into a symbol

3.3.1. Types of Text

The static text type is used when you don't need to change the content of the text with programming at runtime. Essentially, the type is treated like any other vector shape when compiled. This means that you can use a custom font without fear of it changing from machine to machine.

However, although the font will remain intact when compiled into a SWF by its creator, if the FLA is edited without the custom font installed, the SWF will not render as expected. Therefore, to ensure that the sample files you see on the CD-ROM match the screenshots in this bookeven if you don't have the font used in these filesthe text elements have been broken apart into vectors. They are no longer editable, but they will appear as intended.

When you're more experienced with Flash, you may want to use a custom font even when programming text content. In this case, you can opt for dynamic (programmable) or input (programmable and user-editable) text types, and embed a font in your file for use at runtime. This increases the file size but allows for more flexible and customized design possibilities.

Dynamic and input text types are assets that you can try working with later in the book, as your ActionScript skills grow.

3.3.2. Sliding Text

To complete the animation, instead of having the text resize and change colors, as you did with the boxes, you need to make each word slide onto the Stage from a different direction. To create a simple design from these elements, you can have the text on the ends slide in from the left and right edges, respectively, and you can have the text in the middle slide in from the top or bottom.

Soon, you'll tween the text animation as you did for the boxes. First, however, you need to make sure the text doesn't appear until after the box animation is finished.

To make sure the text doesn't appear until the boxes are in position:

1. Select the keyframes on frame 1 of all five layers in the text layer folder by clicking on the Flash layer's keyframe and dragging downward.

2. Click again and drag the keyframes to frame 14, and then release the mouse button.

Now, the text does not appear until the playhead reaches frame 14. The box animation completes in frame 12, and the text animation starts a few frames later for effect.

To animate the text:

1. At frame 48, select all layers and choose Insert Timeline Frame (F5) to add frames to every layer, allowing content to be visible until the end of the animation.

2. When you're finished, select frame 48 in all the text layers and choose Insert Timeline Keyframe (F6) to convert the frames to keyframes. Your box tweens should still end at frame 12.

4. Select frame 14 on all text layers and choose Motion from the Tween drop-down list in the Properties panel to apply a motion tween to each frame span.

5. Your timeline should now match Figure 3-10, or the animation_06.fla file.

   Figure 3-10. The text layers after applying the tweens

   

6. Press Enter/Return to play the animation in its entirety. The boxes grow and change colors, the words slide in from different directions, and the 8 appears in place.