You can use the TextArea and Label components without ActionScript by configuring the components with the Component Inspector panel. You can also configure the TextInput component this way, but it typically requires additional ActionScript to validate the user’s input. This section of the chapter will discuss use of the Component Inspector panel, and the next section will demonstrate simple ActionScript tasks for each component.

Shown in Figure 11-2, the Component Inspector panel indicates that the TextArea component can be enabled, visible, and editable. The wordWrap property can wrap words onto multiple lines, and the horizontalScrollPolicy and verticalScrollPolicy properties can set horizontal and vertical scrolling, respectively, to on, off, or auto (based on length of text). The component can be populated using the text or htmlText properties and, if the latter is used, condenseWhite can remove extraneous spaces, tabs, and return characters from the HTML text. If editable, user input can be restricted to specific characters (using the restrict property) and/or a limited number of characters (using the maxChars property).

Figure 11-2. Configuring the TextArea component

Figure 11-3 shows that the TextInput component shares many of its properties with TextArea, including editable, enabled, maxChars, restrict, text, and visible. The lone unique property, displayAsPassword, automatically replaces user input with asterisks to obscure the entered text from prying eyes.

Figure 11-3. Configuring the TextInput component

Like the UIScrollBar component, the Label component displays text inside other components. This is apparent in Figure 11-4, where you may notice that Label shares most of its properties with the other text components. Its only unique property is autoSize, which you can set to left, center, right, or none to automatically resize the label based on the quantity of text applied. The Label component is a viable alternative to creating, styling, and populating a text field using ActionScript. This is a handy option for users without programming experience, but it can’t be changed at runtime. If you require a more dynamic solution, ActionScript is your answer.

Figure 11-4. Configuring the Label component

As with most components that ship with Flash CS4 Professional, you can use the text components not only by dropping them onto the Stage and configuring them with the Component Inspector panel, but also by applying ActionScript. In most cases, the component’s parameter names correspond with like-named ActionScript properties.

This section provides one simple ActionScript example for each component. Feel free to create a file (or files) or use the text_components_01.fla companion source file. For the following code to work, each component used must already be in your file’s Library. As described in Chapter 9, dragging a component from the Components panel to the Stage also places that component in the file’s Library. Thereafter, it is available for use as many times as you need it, just by dropping it from your Library onto the Stage.

1 import fl.controls.TextArea;
2 var txtArea:TextArea = new TextArea();
3 addChild(txtArea);
4 txtArea.x = 200;
5 txtArea.y = 10;
6 txtArea.editable = false;
7 txtArea.width = 100;
8 txtArea.height = 100;
9 txtArea.text = "Lorem ipsum dolor sit amet, consectetur
 adipiscing elit. Cras nisl dui, tincidunt eget, ultrices quis,
 condimentum sit amet, sapien.";

1 import fl.controls.TextInput;
2 var txtInput:TextInput = new TextInput();
3 addChild(txtInput);
4 txtInput.x = 200;
5 txtInput.y = 130;
6 txtInput.restrict = "a-z";
7 txtInput.maxChars = 8;
8 //txtInput.displayAsPassword = true;
9 txtInput.addEventListener(Event.CHANGE, onChange);
10 function onChange(evt:Event):void {
11     if (evt.target.text == "actionscript") {
12         trace("Password correct");
13     }
14 }

1 import fl.controls.Label;
2 var txtLabel:Label = new Label();
3 addChild(txtLabel);
4 txtLabel.x = 200;
5 txtLabel.y = 170;
6 txtLabel.width = 100;
7 txtLabel.autoSize = TextFieldAutoSize.RIGHT;
8 txtLabel.text = "Lorem Ipsum";

Of the three text types, Dynamic fields include the largest number of features in the Properties panel, shown in Figure 11-5 and listed by section.

Figure 11-5. Properties of a Dynamic text field

Input text fields are nearly identical to Dynamic text fields, with the important difference that they accommodate user input. Other subtle variances in behavior are cited in the following subsections.

As described earlier, Static text elements remain editable during authoring, but are rendered as graphics when compiled into your SWF. This means that they will render consistently on all computers, but it also means that you cannot control them with ActionScript. Accordingly, the first thing to notice is that no Instance name field exists at the top of the Properties panel while a Static text field is selected.

The following script not only configures the dynamic text field, but also uses code to populate the field with text:

1 var txtFld:TextField = new TextField();
2 addChild(txtFld);
3 txtFld.text = "Hello Scaly";
4 txtFld.x = 20;
5 txtFld.y = 20;
6 txtFld.width = 100;
7 txtFld.autoSize = TextFieldAutoSize.LEFT;
8 txtFld.selectable = false;
9 txtFld.multiline = true;
10 txtFld.wordWrap = true;
11
12 for (var i:int = 0; i < 25; i++) {
13     txtFld.appendText(" " + "word" + i);
14 }

Lines 1 and 2 create a text field, which is Dynamic by default, and add it to the display list. Line 3 adds a text string to an otherwise empty text field. Lines 4 and 5 position the field, and lines 6 and 7 size the field. The width is set explicitly in line 6, but line 7 anchors the height at the upper-left corner and automatically expands down as needed. Lines 8 through 10 disable the selectable option and enable the multiline and wordWrap features. Finally, lines 12 through 14 use the appendText() method to add text to an already populated text field. The for loop executes 25 times, adding a string containing three elements to the field. The string starts with a space and is followed by “word” and the number of the current iteration through the loop. For example, the first two additions are " word0”, and this pattern continues on through " word24,” where the process ends.

Input text fields add control over user input, as well as styling options for border and background colors. This example script uses a simple conditional statement to check the accuracy of a user-typed password:

15 var txtFld2:TextField = new TextField();
16 txtFld2.type = TextFieldType.INPUT;
17 addChild(txtFld2);
18 txtFld2.x = 200
19 txtFld2.y = 20;
20 txtFld2.width = 100;
21 txtFld2.height = 20;
22 txtFld2.border = true;
23 txtFld2.borderColor = 0x990000;
24 txtFld2.background = true;
25 txtFld2.backgroundColor = 0xFFEFEF;
26 txtFld2.textColor = 0x990000;
27 txtFld2.maxChars = 10;
28 txtFld2.restrict = "0-9";
29 txtFld2.displayAsPassword = true;
30 stage.focus = txtFld2;
31 txtFld2.addEventListener(Event.CHANGE, onChange);
32 function onChange(evt:Event):void {
33     if (evt.target.text == "0123456789") {
34         trace("Password correct");
35     }
36 }

In this case, the first important change occurs in line 16 when the field is changed to an Input type. Lines 22 through 26 display a maroon border and text, with a light red background. Lines 27 and 28 restrict the user input to numbers only and limit it to 10 characters. Line 29 substitutes asterisks for characters typed by the user, and line 30 automatically places a text cursor in the input field awaiting user interaction. Finally, lines 31 through 36 duplicate the functionality of the TextInput component example from this chapter’s earlier section,"Using ActionScript to Configure Text Components.” If the user types the specified string, an affirmation is traced to the Output panel.

In very broad terms, there are three basic categories of fonts in Flash. The first is a device font, which is an operating system-specific font that is sure to be available, even if it can differ slightly from computer to computer. The second category is a custom font, which may not display correctly if it is not available on a user’s computer. Finally, the third category is a custom font that has been embedded into the SWF to ensure consistent display everywhere.

Device fonts

Flash targets three device fonts. The first is a font with serifs, or the small accents, tails, and flourishes added to each letter. Common examples of fonts with serifs include Times and Times New Roman. Next is a font without serifs, also called sans serif (sans means “without” in French). Examples of sans serif fonts include Helvetica and Arial. Finally, there is a typewriter font, which is a fixed-width font such as Courier and Courier New.

Device fonts save on file size because they are supplied by the operating system of each user and are relatively certain to display (barring a user’s radical reconfiguration of his or her computer). However, the font chosen by the operating system may differ slightly, so there’s no guarantee that everything will display the way you want it to.

All that is required to use a device font is to specify the names _sans, _serif, or _typewriter (note the preceding underscore characters) either in the Properties panel (Figure 11-8) or though ActionScript.

Figure 11-8. Choosing a device font from the font Family menu in the Properties panel

Custom fonts

As with device fonts, you specify custom fonts using the Properties panel or ActionScript. OpenType PostScript and TrueType font formats are supported. Instead of using a generic font reference (such as _sans, for example), you must specify the actual font name (Figure 11-9) and style (Figure 11-10) because there is no substitution by the user’s operating system. As a result, there is no assurance that the end user will have the same font on his computer. For this reason, custom fonts are best used for Static text fields.

Figure 11-9. Choosing a custom font from the font Family menu in the Properties panel

Figure 11-10. Choosing a style from the selected font family in the Properties panel

Embedding fonts

If you want to use a custom font for Dynamic or Input text fields, and expect it to be visible on all machines, you must embed the font. Flash Player also requires font embedding to properly render fonts when a field is transformed or composited in certain ways.

Up to and including Flash Player 9, for example, text created from nonembedded fonts would disappear in masked layers. These player versions also failed to apply transparency (alpha) settings when fields used fonts that were not embedded.

These issues have been corrected as of Flash Player 10, the player primarily associated with Flash CS4 Professional, but some circumstances still require embedded fonts. For example, even in Flash Player 10, if you apply a standard 2D rotation to a text field, you must use an embedded font to prevent the text from disappearing.

Note

If you want to rotate a text field without embedding a font, you can use a little-known trick. Place the field inside a movie clip and then apply 3D rotation along the z-axis. This works using the 3D Rotation tool, Transform panel, and ActionScript.

You can embed fonts using the Properties panel or by creating a font symbol and using ActionScript. When using the Properties panel, first select the field for which you want to embed fonts, specify the font of your choice, and then click the Character Embedding button in the Properties panel’s Character section. The Character Embedding dialog will appear (Figure 11-11), and you can specify exactly which glyphs (font characters) or groups of glyphs to include. For example, Figure 11-11 shows the inclusion of uppercase and lowercase letters, numbers and punctuation, and basic Latin (special characters and symbols).

Figure 11-11. Embedding a subset of character glyphs using the Character Embedding option in the Properties panel

Every glyph you embed increases file size. If you are embedding fonts for a very isolated need, such as a single headline, you can even limit the glyphs you embed to specific characters by filling in the Include these characters input field shown in Figure 11-11. You can even have these characters automatically added to the Character Embedding dialog by clicking the Auto Fill button.

For ActionScript use, you must create a font symbol. Like other symbol types, you can use a font symbol throughout the entire file. To create a font symbol, choose New Font from the menu in the upper-right corner of the Library (Figure 11-12).

Figure 11-12. Adding a new font to the Library for use with ActionScript

This creates a font symbol and opens the Font Symbol Properties dialog (Figure 11-13). The creation of the font symbol from here on is similar in many ways to creating a movie clip symbol, for example. First, you should choose a meaningful name for your font symbol. This can be purpose-related, such as “Headline” or “BodyCopy,” or you can label it as an embedded font by preceding the name with something like “emb” or by combining a font name and style. Figure 11-13 shows the embedding of Arial Regular; the chosen font symbol name is ArialReg.

Next, you should specify the Font and Style of your choice. If you want to use a bitmap font, rather than embedding font outlines that can be scaled to many resolutions, enable the Bitmap text option and indicate the size of the bitmap font you want to embed. This is fairly rare and is usually only used for bitmap micro fonts heavily optimized to look good at font sizes smaller than 9 points.

Figure 11-13. Assigning a linkage class to a new font symbol

Finally, just like with a display object, you need to export the font for use with ActionScript and give it a linkage class name. Flash automatically makes the base class flash.text.Font and, unless you’re an experienced ActionScript developer writing your own classes for this purpose, you shouldn’t change it.

Note

Remember from Chapter 6 that it is considered a best practice to start your class names with an uppercase letter.

Once you’ve filled out this dialog, click OK to create your font symbol. Flash embeds the font’s entire set of glyphs, and you can now make use of the embedded font with ActionScript. The next section will discuss not only how to use embedded fonts with ActionScript, but also how to create native ActionScript objects to style the font without having to use the Properties panel.

To use ActionScript instead of the Properties panel for text formatting, you need to create and configure an instance of the TextFormat class. The following code example demonstrates how to format text this way, and also uses the embedded font discussed in the preceding section. This gives you the freedom to use ActionScript for runtime control of text formatting and also for use of custom fonts without fear of substitution on the end user’s system.

This example can be found in the text_formatting_01.fla source file. The first step in this process is to create a custom font instance using your font symbol. Thanks to the consistency of ActionScript, you can use the same method that you would for creating any other new instance; this method is shown in line 1 of the script:

1 var customFont:Font = new ArialReg();
2 var txtFmt:TextFormat = new TextFormat();
3 txtFmt.font = customFont.fontName;
4 txtFmt.color = 0x000099;
5 txtFmt.size = 12;
6 txtFmt.leading = 4;
7 txtFmt.leftMargin = 6;
8 txtFmt.rightMargin = 6;
9 txtFmt.indent = 20;

Next you need to create and configure the TextFormat instance, in lines 2 through 9. The code is very straightforward and, for easy explanation, very closely mimics the property names used in the Properties panel.

The significant departure in this code is the specification of the font. Rather than citing the name of the font you used to create your symbol, you need to use the fontName property of the new Font instance you created. In this example, the linkage class given to the font symbol is ArialReg, and the instance is stored in the customFont variable. The font name is set in line 3 using customFont.fontName.

Next is some familiar code for creating and configuring a text field:

10 var txtFld:TextField = new TextField();
11 addChild(txtFld);
12 txtFld.x = 20;
13 txtFld.y = 20;
14 txtFld.width = 200;
15 txtFld.autoSize = TextFieldAutoSize.LEFT;
16 txtFld.textColor = 0x000099;
17 txtFld.border = true;
18 txtFld.selectable = false;
19 txtFld.multiline = true;
20 txtFld.wordWrap = true;
21 txtFld.embedFonts = true;
22 txtFld.defaultTextFormat = txtFmt;
23 txtFld.text = "Scaly was born in a bathtub, and grew so incredibly thin...";

The new information in this script segment is found in lines 21 and 22. Line 21 enables the use of embedded fonts, and line 22 sets the default text format for the field to the TextFormat instance you created earlier. You must apply a default text format before adding any text to the field. Note that line 22 sets the format and the text is added to the field in the next line, line 23. Note also that this approach uses the defaultTextFormat property and applies it to the entire field.

This is in contrast to the other way to apply a TextFormat instance, which uses the setTextFormat() method and must be used after the field already contains text. This approach is required when you need to apply a format only to a segment of the field. The final segment of this script creates another TextFormat instance and uses the setTextFormat() method to apply the format only to characters 0 through 5 of the field:

24 var txtFmt2:TextFormat = new TextFormat();
25 txtFmt2.color = 0xFF0000;
26 txtFmt2.underline = true;
27 txtFld.setTextFormat(txtFmt2, 0, 5);

It’s also helpful to understand that TextFormat instances can work together. The txtFmt2 instance specifies an underline style, as well as a color, but doesn’t indicate a new font, for example. When applied along with an existing format, the text will retain any unchanged properties from the first format and take on new properties from the second format.

First create a handful of cosmetic assets that will not be controlled by ActionScript, to help convey the purpose of the screen.

The last task for the Help screen is to create a dynamic text field and populate it with ActionScript.

The project’s Lab screen will ultimately contain a text-driven animation in which characters typed into a text field will scale movie clips on screen. When the user types the letter A into the text field, the movie clip graphic for letter A will enlarge. When the next letter is typed, the A will reduce to normal size and the new letter graphic will enlarge.

To recap the screen’s asset preparation from Chapter 4, all movie clips and text fields were optimized in Adobe Illustrator for Flash use. During that process, a text object was set as a Flash Input text field and given an instance name of typeAnimInput, using Illustrator’s Flash Text panel. The text object was also placed inside an Illustrator symbol that was set as a Flash movie clip with an instance name of typeCard.

During the AI Import process, the relationship among all of these assets remained intact, and the necessary text field and movie clips were automatically created, complete with instance names. Because these assets were prepared in Illustrator, all you have to do to make the screen functional is add ActionScript. Scroll the timeline of your master portfolio FLA to the Lab section and add lines 2 through 20 of the following script to the stop() action in frame 187 of the actions layer. (The complete script appears here for clarity.)

1 stop();
2
3 var userInput:TextField = LabScreen.typeCard.typeAnimInput;
4 userInput.text = "";
5 userInput.addEventListener(TextEvent.TEXT_INPUT, onTextInput);
6
7 function onTextInput(evt:TextEvent):void {
8     var len:int = LabScreen.numChildren;
9     for (var i:int = 0; i < len; i++) {
10         var tempMC:MovieClip = MovieClip(LabScreen.getChildAt(i));
11         tempMC.scaleX = tempMC.scaleY = 1;
12     }
13
14     var char:String = evt.text.toLowerCase();
15
16     var letterMC:MovieClip = MovieClip(LabScreen.getChildByName(char + "Letter"));
17     if (letterMC) {
18         letterMC.scaleX = letterMC.scaleY = 1.5;
19     }
20 }

Line 3 stores a reference to the text field in a variable for simplicity. The typeAnimInput text field is inside the typeCard movie clip, which is inside the content movie clip, LabScreen. Line 4 empties the text field every time you enter the Lab screen.

Line 5 assigns an event listener to the text field. Each time the user types something into the field, and event will be dispatched and the corresponding listener function in lines 7 through 20 will handle the input. This is a simple way of capturing each character typed by the user.

Lines 8 through 12 set all child movie clips in the LabScreen movie clip to actual size. Line 8 determines how many children are in LabScreen. Lines 9 and 10 loop through all of those children, storing a reference to the child found at each level, and casting each to the MovieClip data type. Line 11 sets the scaleX and scaleY properties of each child to 1, or 100% actual size.

Because ActionScript is case sensitive, line 14 converts each incoming character to lowercase. This prevents the need to create a separate movie clip of artwork for both uppercase and lowercase letters. Later, when a movie clip is sought by name, the script will find the aLetter movie clip (for example) whether the user types a or A.

Finally, lines 16 through 19 enlarge the movie clip that corresponds to the most recent character typed into the field. Line 16 finds the movie clip by name, using the character and suffix “Letter” to find aLetter, bLetter, and so on. Line 17 checks to see if the movie clip exists and, if it does, line 18 sets its scaleX and scaleY properties to 1.5, or 150% actual size.

In the next chapter, you will learn about sound and write the ActionScript to enable the sound controller you created in Chapter 3.