Technology Lesson

AS3 TextFormat

In this lesson, were going to learn how to format the text inside a text field. In order to do that, we are going to learn how to use the ActionScript 3 TextFormat class. This AS3 TextFormat class can be used to apply text formatting properties - such as the font face, font color and the font size - to the contents of a text field.

Lets begin.

Create a new Flash ActionScript 3 document. Then lets go to the Actions Panel and lets start writing some code. Lets start by creating a new AS3 dynamic text field:

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.border = true;
myTextField.x = 50;
myTextField.y = 25;
myTextField.autoSize = TextFieldAutoSize.LEFT; 
myTextField.text = "Formatting Text in ActionScript 3";

Here, weve created a new text field named myTextField. If you test the movie, the text is just going to have the default text formatting properties applied.

If you want to format the text - increase / decrease the size, change the font, etc..., then you can use the AS3 TextFormat class. A TextFormat object will hold the text formatting properties, which you can then apply to a TextField object. Some properties from the TextFormat class are:

• font - to specify the font to be used
• size - to specify the font size in pixels
• color - to specify the font color
• leftMargin - to specify the left margin in pixels
• rightMargin - to specify the right margin in pixels

Lets go ahead and create a new instance of the TextFormat class. Im going to name it myTextFormat:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();

addChild(myTextField);

myTextField.border = true;
myTextField.x = 50;
myTextField.y = 25;
myTextField.autoSize = TextFieldAutoSize.LEFT; 
myTextField.text = "Formatting Text in ActionScript 3";

Now that we have a new TextFormat object, lets go ahead and set some of the formatting properties:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();

addChild(myTextField);

myTextFormat.font = "Arial";
myTextFormat.size = 15;
myTextFormat.color = 0x0000FF;
myTextFormat.leftMargin = 30;

myTextField.border = true;
myTextField.x = 50;
myTextField.y = 25;
myTextField.autoSize = TextFieldAutoSize.LEFT; 
myTextField.text = "Formatting Text in ActionScript 3";

Here, weve set new values for the font, size, color and leftMargin. But if we test the movie, we wont see any of the new text formatting properties applied just yet. Thats because we have yet to apply the formatting properties to the actual text field. Just because weve created the text format object, that does not mean that the text formatting properties will automatically apply to all the text fields in our Flash movie.

One way of assigning a TextFormat object to a TextField object would be by using the setTextFormat() method of the TextField class. This is how you would use it:


Here, you see that the TextFormat object is passed to the setTextFormat() method. So in our example, we would write:


Also, you should know that this line should always come AFTER the text assignment statement (textField.text = "text"). Otherwise, the formatting will not apply. So lets go ahead and add the setTextFormat() statement, making sure that it comes after the text assignment statement:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();

addChild(myTextField);

myTextFormat.font = "Arial";
myTextFormat.size = 15;
myTextFormat.color = 0x0000FF;
myTextFormat.leftMargin = 30;

myTextField.border = true;
myTextField.x = 50;
myTextField.y = 25;
myTextField.autoSize = TextFieldAutoSize.LEFT; 
myTextField.text = "Formatting Text in ActionScript 3";
myTextField.setTextFormat(myTextFormat);

So if you test the movie now, you should see the text formatting properties applied to the text in our text field.

Formatting Input Text Fields

Formatting an input text field would be pretty much the same as the method we just demonstrated above. However, if our input text field is initially empty, then we can NOT use the setTextFormat() method in order to assign the text formatting to the text field. We can not use the setTextFormat() method because if you recall, the setTextFormat() statement must come AFTER the text assignment statement. So if we dont have a text assignment statement, then there would be no appropriate place to write the setTextFormat() statement. So if that is the case, we can use the defaultTextFormat property of the TextField class instead:


Here, the TextFormat object is assigned to the defaultTextFormat property. So in our example, if we use an input text field that is initially empty instead, we would write:


As was mentioned previously, this line does NOT need to come after any text assignment statement.

Heres a version of our sample code that uses an input text field instead:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();

addChild(myTextField);

myTextFormat.font = "Arial";
myTextFormat.size = 15;
myTextFormat.color = 0x0000FF;
myTextFormat.leftMargin = 30;

myTextField.type = "input";
myTextField.border = true;
myTextField.x = 50;
myTextField.y = 25;
myTextField.autoSize = TextFieldAutoSize.LEFT; 
myTextField.defaultTextFormat = myTextFormat;

And heres a recap of the difference between setTextFormat() and defaultTextFormat:

This is a METHOD of the TextField class.
Use the setTextFormat() method to apply formatting AFTER text is added to a text field.

This is a PROPERTY of the TextField class.
Use the defaultTextFormat property to apply formatting BEFORE text is added to a text field.

And that is how you use the AS3 TextFormat class.