Project 7: Animating Text and Movie Clips
In this project, you animate text and movie clips on the Stage using ActionScript. Not only that; you also add and position the movie clips on the Stage using code. You create text fields with ActionScript, and the fields animate across the Stage. This project shows you how to attach, duplicate, position, and animate movie clips randomly with code to create an interesting background effect. It also shows you how to dynamically create, position, and animate text on the Stage, which is easily updatable and customizable for your own projects. You also embed a custom font to ensure that the text appears the way you expect it to, no matter who views the SWF file.
Creating and formatting dynamic text fields
You created text fields on the Stage using the Text tool in earlier chapters. In this chapter, you create them by using ActionScript instead. You might wonder why you use ActionScript to do this instead of adding them to the Stage. Using tools to create and add objects might seem much easier. There are a few reasons why you might want to create text fields using ActionScript instead of tools.First, view the project at [www.FLAnimation.com/chapters/07] to see the finished text and movie clip effects. Multiple lines of text animate across the Stage. It's quite likely you will want to modify that text, add more strings of text to the animation, and so on. If you manually create and/or animate fields using the Text tool, modifying the project would be time-consuming and picky. Because you create text fields using ActionScript instead, adding and modifying text is extremely quick and easy. All you need to do is add a few more lines of text in the Actions panel to add to the existing project. You have to modify text only in the Actions panel to change the existing text or the text fields' appearance.An important issue when working with dynamic (or input) text fields is to embed the fonts you use. Embedding text means the font's information is stored in the SWF file. When you work with dynamic and input fields, the end user must have the font you choose on her own computer, unless you embed the font in the SWF file. SWF files use system fonts, replacing any nonexistent font with a close equivalent on the users' system, unless you embed the font in your SWF file. You find out how to embed characters in Flash in this project.To create a text field using ActionScript, you use the createTextField() method. This method creates a new (and empty) dynamic text field instance in the movie clip you specify. You can target the current Timeline using this.createTextField(); it targets whatever Timeline the code is on, such as the main Timeline (_root) or a movie clip the code is inside. So, to create a dynamic text field you can use the following code:
This ActionScript creates a new text field instance with the instance name my_txt. You create instance on the next available depth (this.getNextHighestDepth()) and position it at the X, Y coordinates of 100, 100. The text field's width is 300 pixels and its height is 100 pixels (Figure 7.2).
this.createTextField("my_txt", this.getNextHighestDepth(), 100, 100, 300, 100);
my_txt.text = "This is text in my new text field.";
Figure 7.2. A dynamically created text field.

Select Control > Test Movie to view the results that will be similar to the following figure.
var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0xFF0000;
my_fmt.bold = true;
my_fmt.italic = true;
my_txt.setTextFormat(my_fmt);
Figure 7.3. The dynamic text field with text formatting applied.

Exercise 1: Dynamically create text fields with embedded fonts
Using dynamic fonts with dynamically created text fields is a bit more complex than regular dynamic text fields. Because the text fields are dynamically created, you can't define the font's properties as easily and you need to resort to a bit of additional ActionScript. The extra effort might be worth it, depending on the scope and structure of the animation or effect you're creating.To embed a font in Flash, you need to add a font symbol to your Library and export the font with your SWF file. But first, start a new project and save it on your hard drive.
1. Create a new document in Flash, and select File > Save As. Save the new document as texteffect.fla on your hard drive. Leave the document at the default dimensions (550 by 400 pixels).2. Open the Library (Window > Library) and add a new font to your document. To add a new font, select New Font from the Options menu, as shown in the following figure.
Figure 7.4. Select New Font from the Library's Options menu.

Figure 7.5. Make settings in the Font Symbol Properties dialog box. These settings determine what you'll embed in your document.

Figure 7.6. Set the Linkage Identifier.

The font property of the TextFormat uses the embedded font, which lets you modify the _alpha of a text field and change the _rotation, similar to the previous exercise. If you don't embed the font, you find that changing the _alpha value has no effect, and changing the _rotation property causes the text field to disappear altogether.7. You can create a text field using the MovieClip class' createTextField() method after you add a font to your Library and set up a TextFormat object. This method takes six parameters: instance name, target depth, X coordinate, Y coordinate, width and height. This example creates a dynamic text field in the next-highest unused depth (this.getNextHighestDepth()), assigns an instance name of my_txt, positions the instance at an X and Y coordinate of 0,0 and sets the width and height to 100 and 20, respectively.
var txt_fmt:TextFormat = new TextFormat();
txt_fmt.align = "center";
txt_fmt.bold = true;
txt_fmt.font = "Trebuchet MS 24pt Bold";
txt_fmt.size = 24;
8. Next, the text format is bound to the text field instance using the setNewTextFormat() method. The setNewTextFormat() method takes a single parameter, which is the TextFormat object you defined in step 1. Add the following line of ActionScript:
this.createTextField("my_txt",
this.getNextHighestDepth(), 0, 0, 100, 20);
9. After you call the setNewTextFormat() method, you can set the _alpha, _rotation and text properties for the text field instance. For the code to work properly, you also must set the embedFonts property to true. Add the following ActionScript after the code on frame 1 of the actions layer.
my_txt.setNewTextFormat(txt_fmt);
my_txt._alpha = 20;
my_txt.autoSize = true;
my_txt.border = true;
my_txt.embedFonts = true;
my_txt.text = "lorum ipsum";
Embedding Text in Text Fields
You can still embed fonts if you create dynamic or input text fields on the Stage using the Text tool. Select the text tool from the Tools panel and place a text field on the Stage. In the font pop-up menu, there is a font with the same name as the symbol name you created and made settings for in steps 2 through 5 (it should also have an asterisk (*) next to the font name). Set the font size to 24 points and set the text field to use bold so that the properties match those defined in the embedded font. Finally, give the text field an instance name of my_txt. Open the Actions panel and add the following code to frame 1 on a layer:
If you don't follow these steps to embed the font within your Flash document, you find that setting the _alpha property has no effect on your text. And as soon as you set the _rotation property, your text disappears. Currently, Flash doesn't support rotated or alpha dynamic or input text fields unless you embed the font it uses. Remember, you must use the font you created and set Linkage for in the previous steps or this code won't work properly.Double-click the my_txt dynamic text field instance on the Stage and enter some placeholder text, such as "All work no play". Select Control > Test Movie to test your file in the test environment, and you will see your text rotate 15 degrees clockwise at 50% alpha.10. Test your Flash document (Control > Test Movie). There should now be a text field in the upper-left corner of the SWF with some fairly transparent sample text, as seen in the following figure.
my_txt.embedFonts = true;
my_txt._rotation = 15;
my_txt._alpha = 50;
Figure 7.7. Formatting is applied to a dynamic text field.

