Section 11.1. Text Types | Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

11.1. Text Types

If you've been reading along, you've had plenty of experience using the Text tool to create text elements, but it helps to understand the different kinds of text elements available within Flash.

11.1.1. Static

The most basic type of text element is static text. This is the kind of text you've been creating throughout the projects in this book. Static text is editable within the authoring environment but is rendered as a graphic when published to .swf. This means that you can use custom fonts without concern for how they will look on end users' machines. Typically, you will use static text any time you don't need to program the text content or accept input from the user.

Using the Flash interface, all kinds of text are configured using the Properties panel. Figure 11-1 shows the panel when viewing a static text element. The left quarter of the panel offers the standard numerical input fields for the width, height, and x- and y-coordinates of the text element.

Figure 11-1. Static text options as seen in the Properties panel

The contents of the right three-quarters of the panel are context-sensitive, changing based on the kind of text element selected. The top row contains basic text-formatting controls standard in any application. These include font name, size, color, bold and italic, justification, and simple paragraph formatting options, accessed by the button with the Paragraph symbol (). The paragraph options, as seen in Figure 11-2, include first line indent, line spacing (akin to leading), and left and right margins.

Figure 11-2. Paragraph format options

The last icon in the top-right row of buttons in the Properties panel, indicated by the Abcd icon with a drop-down menu, allows you to orient the text vertically, if desired. When this option is enabled, a context-sensitive button will appear allowing you to rotate the text or stack the letters one on top of another.

The second row of controls includes kerning, a subscript/superscript menu (which defaults to Normal), and the anti-aliasing menu. You will look at anti-aliasing options later in this chapter. Briefly, you can choose between using font information provided by the user's operating system, a bitmap version of the font with no anti-aliasing, two preset anti-aliasing options, and a custom anti-aliasing option that you can configure.

When working with static text elements, the third row of properties in the panel allows you to control only two features. The first, indicated by the Ab icon under the subscript/superscript menu, allows you to make the static text selectable. The user cannot edit the text, but being able to select it makes it possible to copy it to the clipboard. The second option is the autokern feature, to control character kerning automatically.

Finally, the last row of options allows you to associate an HTML link with any selected text, including a target option for opening the link in another window or frame. Using this option, you can open web-enabled assets in a browser and, as explained in the "asfunction: ActionScript via Links" sidebar later in this chapter, even execute ActionScript.

11.1.2. Dynamic

Unlike with static text, you can program the content of dynamic text fields using ActionScript. You'll see how to do this in a moment. First, look over the Properties panel to see how the available options differ from those for static text elements. Figure 11-3 shows the panel as it will appear with a dynamic text element selected.

Figure 11-3. Dynamic text options as seen in the Properties panel

The first major difference that can be seen in the panel is that you can assign instance names for dynamic elements. This is usually necessary if you are to control the field with ActionScripta feature not possible with static elements. This instance name serves the same role as that of all the other instance names you've used in the past: it lets you access the properties and methods of the object in question.

For example, to add to (or retrieve) the text within a dynamic element, you can reference the text property this way:

 myDynamicText_txt.text = "Walter Westinghouse went to town.";

Another major difference between dynamic and static elements can be seen at the far right of the second row of options, where an Embed button now appears. The text within dynamic elements is not automatically converted to a graphics format. This means you must manually embed the font outlines for any font you use in a dynamic field, or they may not render properly for other users. The reasons for this will be discussed later in this chapter, but it's important enough to stress here as well, because it's easy to miss. During authoring, any fonts you work with will obviously be on your machine, but they may not be installed on other machines. If you don't know this ahead of time, you may not understand why fonts look good in one place but not another.

Note also in Figure 11-3 that the third row of options is now active for dynamic elements. Skipping over the width and x position discussed earlier, look at the new features from left to right. The first menu allows you to control how text will wrap in the field. Next appears the selectable text button, which can still be enabled or disabled for dynamic fields. Adjacent to this is a button that controls the html property of dynamic elements. When activated, the text within will support the basic HTML tags understood by Flash. (You'll read more about those in a minute, too.) The last of these new buttons, if enabled, will simply give the field a black border and a white background.

The last new featurethe field that you see at the end of the active elements in the third rowis the variable field. By placing a variable name in this field, you can create a text display for any variable in your project. For example, assume you've been using the variable myVar in a frame, and its current value is "Chairs Missing." Placing a dynamic field in this frame with myVar in the var field will display the "Chairs Missing" text on the Stage.

This is similar in some respects to accessing the text property of a dynamic field through its instance name. There are pros and cons to each approach. Using var means that, as long as you factor in the scope of your variables, you can always display their values without any further ActionScript. Think of this method as providing a visual representation of a variable's value. However, nothing but the value of the variable can be changed. Using the instance name to get or set a dynamic field's text won't influence any variables, but you will be able to work with any property supported by the field.

Experiment with these features to see their differences and similarities:

Create a new file and save it as instance_and_var.fla in your 11 folder.
Create two dynamic text elements on the Stage, and use the Properties panel to disable the "Show border around text" option for both elements.
Still using the Properties panel, give the first element an instance name of my_txt, but no var value.
Give the second element a var value of myVar, but no instance name.
Add a new layer and, in frame 1 of that layer, add the following script:
```
 my_txt.text = "Rattlesnake Insurance"; trace(my_txt); my_txt.border = true; var myVar:String = "Finely Honed Machine"; trace(myVar); myVar.border = true; 
```
In the first group of lines, you are working with an instance of a dynamic field. The first line sets the text of the field. If this were a variable, you could display the value of the variable by tracing it, as in line 2. In this case, however, the instance is an object, not a variable. Instead of displaying the text of the variable in the Output window, you will trace a reference to this object. The third line manipulates a property of the field instance, which you will do again later in this chapter.
The second group of code lines refers to the variable to which you have given a visual display, via the other dynamic text element. Think of it first like every variable you've used thus far. You can type and populate it and then trace it, with lines 1 and 2, respectively. However, if you try to set a field property by mistake, you will be alerted to the error.
Save your work and test your movie. You will get an error saying that no border property exists for the myVar variable.
Delete or comment out the last line of the script.
Save your movie and test it again.

11.1.3. Input

Input text fields are very similar to dynamic elements, but input fields allow the user to enter content. This accounts for the only two significant differences between the properties of input fields and other text elements. Since input fields are designed to accommodate user data, the selectable option cannot be disabled. Similarly, the ability to predefine text-based links is irrelevant, so this feature has been replaced by an option that allows you to limit the number of characters a user can add to a field.

The Properties panel pictured in Figure 11-4 shows these subtle differences.

Figure 11-4. Input text elements use the same options as dynamic elements, with the exception of the link fields