Getting started with the TLFTextField class in ActionScript 3.0 and Flash CS5

Last Updated on February 26, 2019

The following examples show how you can get started with the TLFTextField class in ActionScript in Adobe Flash Professional CS5.

Download ZIP

1. The following example shows how you can create a simple TLFTextField instance using ActionScript:

import fl.text.TLFTextField;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

2. If you want to set word wrap on a TLFTextField instance, you can set the Boolean wordWrap property, as seen in the following example:

import fl.text.TLFTextField;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

3. By default a TLFTextField instance is 100px by 100px. If you want to automatically resize the TLFTextField instance to the measured text width/height, you can set the autoSize property to one of the static constants from the flash.text.TextFieldAutoSize class, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

4. If you want to set rich text formatting, you can set the htmlText instead of the text format, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.htmlText = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 20;
addChild(tlfTxt);

5. If you want to set a custom text format to set the font color, face, size, etc., you can set the defaultTextFormat to a TextFormat object, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

var fmt:TextFormat = new TextFormat();
fmt.color = 0xFF0000; // red
fmt.font = "Arial";
fmt.size = 32;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.defaultTextFormat = fmt;
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

The defaultTextFormat property must be set before the text property.

6. If you want to apply a custom text format to all characters or a range of characters in a TLFTextField, you can use the setTextFormat() method, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

var fmt:TextFormat = new TextFormat();
fmt.color = 0xFF0000; // red
fmt.font = "Arial";
fmt.size = 32;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.setTextFormat(fmt);
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

The setTextFormat() method must be called after setting the text property.

7. To set a custom text format to a range of characters, you can pass the optional start index and end index to the setTextFormat() method, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

var defaultFmt:TextFormat = new TextFormat();
defaultFmt.font = "Arial";
defaultFmt.size = 32;

var redFmt:TextFormat = new TextFormat();
redFmt.color = 0xFF0000; // red

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.defaultTextFormat = defaultFmt;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.setTextFormat(redFmt, 4, 9);
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

8. To set the text alpha on the TLFTextField instance you can set the alpha property, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
tlfTxt.alpha = 0.3;
addChild(tlfTxt);

Unlike the TextField class which only supports setting text alpha on a TextField with an embedded font, the TLFTextField class supports setting text alpha on device (non-embedded) fonts.

9. To set the text rotation on the TLFTextField instance you can set the rotation property, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.text = "The quick brown fox jumps over the lazy dog.";
tlfTxt.wordWrap = true;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
tlfTxt.rotation = 15;
addChild(tlfTxt);

Unlike the TextField class which only supports setting text rotation on a TextField with an embedded font, the TLFTextField class supports setting text retotation on device (non-embedded) fonts.

10. Similar to setting the htmlText property, setting the tlfMarkup allows you to set rich text formatting on the TLFTextField instance, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;

var tFlow:String = "The quick brown fox jumps over the lazy dog.
";

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.tlfMarkup = tFlow;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

Or, if you want to apply some more complex formatting (such as hyperlinks, bold, italics, superscript/subscript, or strike through text, you can use a more complex TextFlow string object, as seen in the following example:

import fl.text.TLFTextField;
import flash.text.TextFieldAutoSize;
import flash.events.Event;

var tFlow:String = "The quick brown fox jumps over the lazy dog.
";

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.tlfMarkup = tFlow;
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

11. Or you can load a TextFlow markup string dynamically at runtime using ActionScript, as seen in the following example:

import fl.text.TLFTextField;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
import flash.text.TextFieldAutoSize;

var tlfTxt:TLFTextField = new TLFTextField();
tlfTxt.border = true;
tlfTxt.wordWrap = true;
tlfTxt.width = 300;
tlfTxt.autoSize = TextFieldAutoSize.LEFT;
tlfTxt.x = tlfTxt.y = 40;
addChild(tlfTxt);

var ldr:URLLoader = new URLLoader();
ldr.dataFormat = URLLoaderDataFormat.TEXT;
ldr.addEventListener(Event.COMPLETE, ldr_complete);
ldr.load(new URLRequest("markup.xml"));

function ldr_complete(evt:Event):void {
    tlfTxt.tlfMarkup = ldr.data;
}

And the TLF markup file, markup.xml, is as follows:

The quick brown fox jumps over the lazy dog.

Download ZIP

For more ActionScript examples, see ActionScriptExamples.com.