Formatting text is such a noble endeavor that ActionScript devotes an entire class to the job. Once you learn the ins and outs of the TextFormat class, you can do it all. It works the same for TLF and Classic text and all the text types they encompass. You can apply a single format to an entire text field and then fine-tune specific words or phrases with special formatting like bold, italic, or color highlights. Some formatting properties you apply to specific characters, while others you apply to entire paragraphs.
Most of the action takes place using the properties of the TextFormat class. As you'd expect, the TextFormat class has character-level properties that set font names, size, style, and color. It also includes paragraph-level properties that control the alignment, margins, indents, kerning, leading (line spacing), and bullets.
TextFormat is an object itself, so you need to create an instance of the TextFormat class to use in your program. Here's an example of code that does that:
var txtFormat:TextFormat = new TextFormat();
The next step is to choose the format options you want to include in this specific instance of the class. For example, you can choose the typeface and font size using the TextFormat's properties:
txtFormat.font = "Cooper Black"; txtFormat.size = 20; txtFormat.align = "center";
As explained earlier, when you use ActionScript to create text fields, you need to choose fonts that you know are on your audience's computers, or you need to embed the fonts in the SWF file (see Embedding Fonts in Your SWF file). If the font isn't available, the Flash Player finds a substitute. In this example, the big, bold Cooper Black font is specified. The number in the size property refers to points, the traditional typographic measurement also used in programs like Microsoft Word. The actual size and readability of typefaces at the same size can vary, so it's good to review and experiment when choosing a typeface and size. The .align property centers the text in the text field.
Once you've established your type specs in the TextFormat object, you need to use the text field's setTextFormat() method and provide your newly created format as the parameter. That means you put it inside the parentheses, like this:
tlfBanner.setTextFormat(txtFormat);
This statement registers the format for the entire txtBanner text field. A TextFormat object can include as many or as few properties as you want.
You can use more than one instance of the TextFormat class. Suppose you want to apply special formatting to a word or two. You can create formats that make type bold, italic, or change its color. Here's code that creates two new TextFormat objects, one for bold text and one for italic text.
var txtFormatBold:TextFormat = new TextFormat(); txtFormatBold.bold = true; var txtFormatItalic:TextFormat = new TextFormat(); txtFormatItalic.italic = true;
If you want to apply formatting to a word or phrase inside a text field, you need to tell ActionScript exactly which characters to format, which you do using the index numbers in the string. For example, if you want to italicize the word "legendary" in the text "Home of the legendary Stutz Bearcat," you need to count characters. Don't forget to start that count at 0. Then, when you use the setTextFormat() method, you also provide a starting point and ending point for the formatting. It looks like this:
tlfBanner.setTextFormat(txtFormatItalic,12,20);
Formatting with ActionScript is similar to setting properties in the Properties panel. When you apply the txtFormatItalic format, it doesn't mess with any of the other formatting properties. It leaves the font and size settings as they were, changing only the properties that it specifically defines.
Tip
When you format text with the setTextFormat() method, the text has to already be assigned to the text field, and the formatting applies to the entire text field. If you assign the text after running setTextFormat(), it won't be as "dressed up" as you expect.
Here's a chunk of ActionScript code that uses most of the TLFTextField and TextFormat coding tricks covered so far. The lines beginning with // are comments. You can download this code form the Missing CD (www.missingmanuals.com/cds). The file is named 17-5_Format_Text.fla:
1 import fl.text.TLFTextField; 2 import flash.text.TextFormat; 3 4 // Define variables, instances of TLFTextFormatTextField and 5 var tlfBanner:TLFTextField = new TLFTextField(); 6 var txtFormat:TextFormat = new TextFormat(); 7 var txtFormatItalic:TextFormat = new TextFormat(); 8 9 // Assign a string literal to the .text property of the TLFTextField 10 tlfBanner.text = "Stutz Motor Company\nHome of the legendary Stutz Bearcat"; 11 12 // Position and size properties 13 tlfBanner.x = 40; 14 tlfBanner.y = 40; 15 tlfBanner.width = 220; 16 tlfBanner.height = 160; 17 18 // Background and border properties 19 // Remember to set the .background and .border properties to "true" 20 tlfBanner.border = true; 21 tlfBanner.borderColor = 0x993300; 22 tlfBanner.borderWidth = 5; 23 tlfBanner.background = true; 24 tlfBanner.backgroundColor = 0xFFFFCC; 25 tlfBanner.backgroundAlpha = 1; 26 27 // Padding properties determine the distance between the text 28 // and the edge of the text field 29 tlfBanner.paddingTop = 24; 30 tlfBanner.paddingLeft = 24; 31 tlfBanner.paddingRight = 24; 32 tlfBanner.paddingBottom = 24; 33 34 // Autosize permits the text field to grow to accommodate the text 35 tlfBanner.autoSize = TextFieldAutoSize.LEFT; 36 37 // Define text specifications like font, size and color 38 // through the txtFormat an instance of the TextFormat class 39 txtFormat.font = "Cooper Black"; 40 txtFormat.size = 20; 41 txtFormat.align = "center"; 42 43 // Here's another TextFormat object that sets italics 44 txtFormatItalic.italic = true; 45 46 // Assign the format using the text field's .setTextFormat() method 47 // The second text format makes specific characters in the 48 // text field italic 49 tlfBanner.setTextFormat(txtFormat); 50 tlfBanner.setTextFormat(txtFormatItalic,32,41); 51 52 // The addChild method adds the text field to the Display List 53 // making it visible on the stage. 54 addChild(tlfBanner);
Line 5 creates the text field called tlfBanner, and line 10 assigns a string literal to its text property. The lines from 12 through 35 tweak various text field properties changing its appearance and behavior. Lines 37 through 44 focus on setting properties for TextFormat objects. On lines 49 and 50, two TextFormat objects are applied to the tlfBanner text field using the .setTextFormat method. The first one is applied to the entire text field, while the one on line 50 targets specific characters by position.
When all is said and done, the text field looks like Figure 17-6 (shown in Flash Player).
