Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

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.createTextField("my_txt", this.getNextHighestDepth(), 100, 100, 300, 100);
my_txt.text = "This is text in my new text field.";

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).

You can then insert your text into the my_txt instance using ActionScript as well. The my_txt.text property specifies text for the text field.

You aren't stuck using plain text in the text field though. You can format the text further using ActionScript as well with the TextFormat class. This class lets you apply different fonts, styles such as bold and italic, and change the text color. To format the text you created previously, you can add the following ActionScript:

var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0xFF0000;
my_fmt.bold = true;
my_fmt.italic = true;
my_txt.setTextFormat(my_fmt);

Select Control > Test Movie to view the results that will be similar to the following figure.

You create a new instance of the TextFormat class called my_fmt. You then set the color, bold, italic properties of my_fmt. Then you apply the my_fmt formatting to the my_txt instance you created earlier. The text you added is now red, bold, and italic; and all of this without adding a single item to the Stage!

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.

3. In the Font Symbol Properties dialog box (Figure 7.5), select the font that you want to embed, such as Trebuchet MS, from the font menu. Then click the Bold check box. Set the font size to 24 points. Before closing the dialog box, give the font a descriptive name by typing Trebuchet MS 24pt Bold in the name text field. This name displays in the Library panel and will serve only as a symbol name for your reference.

4. Click OK to add the new font to your Library.

5. Right-click (Windows) or Control-click (Macintosh) the newly added font symbol, and select Linkage from the contextual menu. Click the Export for ActionScript check box, leaving the Linkage Identifier at its default value (Figure 7.6). Then click OK to apply the changes and close the dialog box.

6. The following ActionScript creates a new TextFormat object called txt_fmt that center-aligns the text within the text field, sets the bold property to true, and sets the font size to 24 points. The TextFormat will later be used to apply a style to a dynamically created text field instance on the Stage. To attach this TextFormat to a TextField, you will need to call the TextField's setNewTextFormat() method.

Click the Insert Layer button on the Timeline to create a new layer. Rename the layer actions and then type the following ActionScript into the Script pane:

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;

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.

this.createTextField("my_txt",
this.getNextHighestDepth(), 0, 0, 100, 20);

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:

my_txt.setNewTextFormat(txt_fmt);

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._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:

my_txt.embedFonts = true;
my_txt._rotation = 15;
my_txt._alpha = 50;

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.

Now that you have created and formatted a text field, start adding movie clips to the Stage and animating them. The next couple of exercises show you how.

You'll remove this text field and create the animating ones later in this project.