Tutorials

AS3 TextFormat

In this lesson, we're 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.

Let's begin.

Create a new Flash ActionScript 3 document. Then let's go to the Actions Panel and let's start writing some code. Let's 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, we've 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

Let's go ahead and create a new instance of the TextFormat class. I'm 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, let's 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, we've set new values for the font, size, color and leftMargin. But if we test the movie, we won't see any of the new text formatting properties applied just yet. That's because we have yet to apply the formatting properties to the actual text field. Just because we've 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:

textFieldObject.setTextFormat(textFormatObject);

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

myTextField.setTextFormat(myTextFormat);

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 let's 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 don't 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:

textFieldObject.defaultTextFormat = textFormatObject;

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:

myTextField.defaultTextFormat = myTextFormat;

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

Here's 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 here's a recap of the difference between setTextFormat() and defaultTextFormat:

setTextFormat()

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

defaultTextFormat

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.

- As3 Textfields - The Basics
In this lesson, we are going to learn the basics of working with the ActionScript 3 TextField class. We'll learn how to create text fields using code, and how to control some of its properties - x and y for positioning the text field, width and height...

- As3: Enabling The User To Submit The Contents Inside An Input Text Field
In this lesson, we're going to learn how to add some ActionScript 3 functionality that will let a user submit the contents of an input text field by clicking on a button or pressing a keyboard key. We'll create a simple example of a Flash movie...

- Actionscript 3 Number To String Conversion
In this lesson, we're going to learn how to convert numbers to strings in AS3. If you you'd like to do ActionScript 3 Number to String conversions, then you can use the toString() method of the Number class. Here is an example: var myNumber:Number...

- Completing The Project: Adding Text Scrolling
This article is continued from Formatting Externally Loaded Text in Flash ActionScript 3.0. In this last part, we will be completing the sample project by adding the text scrolling functionality. You can add vertical text scrolling to a TextField by using...

- Loading External Text Files In Flash Actionscript 3.0
Work Files: Load_Text_Start.fla summer.txt (right-click > save as ) In this article, we're going to learn how to load text from an external source into a Flash movie. What is the benefit of loading text from an external source? The nice thing...

Tutorials