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.
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;
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.
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.
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.
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.
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.
last update: 18 Jan 2007
Discussed on this page:
createtextfield, textformat, text and htmlText, how to embed fonts
The sample at left uses the concepts discussed on this page to read words from an xml file, choose a random one, highlight it (using TextFormat), and tween over to show it:
In wordstring.zip, password required
A password may be obtained by subscription ($20 for one month)
An access password will be emailed to the address you specify within 24 hours of receipt of payment, and will remain active for 30 days thereafter. A list of all files currently available at the site may be viewed here.