Creating Textfields Dynamically

How are you feeling today?

In the same way that you can create movieclips dynamically, you can create textfields entirely in code also. You can also create them in the Flash IDE using the text tool (as we did on this page, eg), but there are times when you may wish to add and format fields dynamically, depending on the conditions in your movie. A dynamically created textfield is always associated with a particular timeline (either a movieclip or the main timeline), and is created with a method of the MovieClip class, createTextField. Properties such as border and text define the look and content of the textfield. Additionally, a TextFormat object may be created and associated with the textfield to further define the text formatting with it.

Create a TextField instance

An instance of a TextField is created with the createTextField method of movieclips. If you put this in frame 1 of an otherwise blank (or not) movie:

createTextField("dynamic_txt", 1, 10, 10, 150, 30);
dynamic_txt.text = "Here's some text";

you'll be creating a new TextField instance named dynamic_txt, attached to the main timeline, at depth 1 in that timeline. Testing it, you'll see a line of text at x=10, y=10 in the default font (probably ugly ol Times New Roman). This is the generic syntax for creating a dynamic textfield:

If you want to change the look or functioning of that textfield, you can apply any of the TextField methods found in the ActionScript dictionary under T. For instance, adding the following lines

dynamic_txt.textColor = 0x00cc00;
dynamic_txt.border = true;

makes the text appear in green with a border around it. Want the border to fit snugly around the text? Add this:

dynamic_txt.autoSize = true;

Apply formatting using the .htmlText property

To include an html link or formatting, make the textfield of type html and use htmlText to specify the contents:

dynamic_txt.html = true;
dynamic_txt.htmlText = 
    "Here is a link to <a href='http://i-technica.com'>my website</a>";

makes the words "my website" a link. But it also turns off the green color on all the text, since that apparently only applies to non-html textfields. To get the color back, and make the link a different color and underlined (no, you may not make it blink too), and use a sans-serif font, we change that last line to:

dynamic_txt.htmlText = 
    "<font color='#00cc00' face='Arial'>Here is a link to 
     <font color='#00ccff'><u><a href='http://i-technica.com'> 
     my website</a></u></font></font>";

Beginning in Flash MX 2004, there is also a TextField.StyleSheet class, which allows you to apply css formatting to textfields. Find out more about it on this LiveDocs page.

Applying formatting using a TextFormat object

Backing up a step, if you want to apply a particular font or text formatting to a non-html field, you'll need to create a TextFormat object and apply it to the textField you created. Here's an example:

this.createTextField("dynamic_txt", 1, 10, 10, 150, 30);
dynamic_txt.text = "Here's some text";
var emphatic:TextFormat = new TextFormat();
emphatic.bold = true;
emphatic.size = 16;
emphatic.font = "Georgia";
dynamic_txt.setTextFormat(emphatic);

This displays the text in 16 point bold text. It will display in Georgia font if that is installed on the user's machine, or the default serif font if not.

setTextFormat vs setNewTextFormat

In the last example, we used the setTextFormat to set the formatting of the text, because we had already assigned text to our textfield. If you want to apply the format first, and then assign the text, or if you'll be changing or adding to the textfield contents, use the setNewTextFormat method instead.

Embed the font to ensure that that one will be displayed

If you want the text to be displayed in the font you choose regardless of whether it is on the user's machine, you'll need to specify font embedding in the textfield object via code:

createTextField("dynamic_txt", 2, 10, 40, 150, 30);
dynamic_txt.text = "Here's more text";
dynamic_txt.embedFonts = true;
var emphatic:TextFormat = new TextFormat();
emphatic.size = 16;
emphatic.font = "MyWierdFont";
dynamic_txt.setTextFormat(emphatic);

and include a dummy textfield offstage which is set to dynamic text, uses the MyWierdFont font, and has font embedding turned on (click the Character button and choose an option), or include the font in the library. The latter is done by clicking the drop-down box at the upper right of the library panel, choosing New Font, entering the information for the font to be embedded, then right-clicking on the font in the library, choosing Linkage and turning on Export for Actionscript.

Note that if you wish to use letters in both bold and regular font in your embedded font textfield, you'll need to include a textfield for each of those offstage or include both in the library as exported fonts. Ditto for italic -- every form of the font you want to use must have its own offstage textfield with that form of the font (regular, bold, italic, or any other variation of the font) in it.

Apply format to selected portion only

To set formatting on only one part of a textfield, specify the start and end position to which the formatting should be applied. To underline only the words "underlined text" in the following, apply the format only to that section of text:

createTextField("dynamic_txt", 1, 10, 10, 300, 30);
dynamic_txt.text = "Here's some underlined text and here's some not";
var sans:TextFormat = new TextFormat();
sans.size = 12;
sans.font = "Arial";
dynamic_txt.setTextFormat(sans);
underlined = new TextFormat();
underlined.underline = true;
underlined.size = 12;
underlined.font = "Arial";
dynamic_txt.setTextFormat(12, 27, underlined);

The sample at the top of this page uses that technique to build a string of words, saving a pointer to the first and last characters of the word to be highlighted and use setTextFormat to highlight it. The fla and xml files for the sample may be obtained by subscription from the link at right.