Playing with Text in AS3

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner

This tutorial will teach you the basics for dealing with text and text formatting in ActionScript 3.0. You should be able to create a text field, change its color and attributes, position it, and use a specific font for your text field by the end of this tutorial. We will use the TextField Class and the TextFormat Class to carry out these taks. This is a very basic tutorial that will only require you to know the fundamentals of AS3 Variables and the Display List.

This tutorial is divided into the following sections:

  1. Basic Usage of the TextField Class.
  2. Using TextField Properties.
  3. Using TextFormat Class.
  4. Using Embedded Fonts.

Basic Usage of the TextField Class

Start off by creating a new Flash file, right-click the only frame you have on the timeline and select Actions to open up the Actions Panel.

Creating a text field is similar to the creation of an instance of any other class in AS3. You simply create a variable to hold that instance and then use the keyword new to generate the text field:

var myText:TextField = new TextField();
You can learn more about AS3 Variables by reviewing our tutorial on this topic.

Once our text field is created we can set the text to be displayed in it by configuring the .text property of that instance. We are going to set it to "Republic of Code":

var myText:TextField = new TextField();
myText.text = "Republic of Code";

Our text field instance is now created and has the text in it, but it won't actually be visible until we add it to the Display List. To do that we can simply use the .addChild() method this way:

var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
You can learn more about AS3 Display List by reviewing our tutorial on this topic.

You can now test your movie by going through Window>Test Movie (Ctrl+Enter) to see your text field visible on the Flash movie!

AS3 TextField Displayed

It is possible to update the content of your text field at any time now by changing the value of the .text property at anytime even after you have added it to the display list:

var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);
myText.text = "This is my new text...";

TextField Properties

That should've taught you how to create a very simple text field. Depending on the needs of your project, you might want to alter the look of this text field. I am going to explain some of the most commonly used properties. All these properties are directly accessed through the text field instance. There are many which I will not talk about and which you will have to consult the built-in ActionScript Reference to learn more about. You should note that some formatting properties such as size, alignment, and font are configured through the TextFormat Class and not through the TextField Class.

You can change the text color by simply setting the .textColor property to any color hex decimal value:

var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);

myText.textColor = 0xFF0000;

The code above should change the color of our text to red.

Text Field AS3 Red

You can create a border around your text field by setting the .border property to true:

var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);

myText.border = true;

The code above should create a border around the text field:

AS3 Text Field Border

You might not be happy about the shape of the border, it appears this way because these are the default dimensions of the text field, we will deal with this in a bit.

If you have a border around your text field you can change its color by configuring the .borderColor property this way:

var myText:TextField = new TextField();
myText.text = "Republic of Code";
addChild(myText);

myText.border = true;
myText.borderColor = 0xFF0000;

This should generate a red border around your text field.

AS3 Text Field Border Color Red

If you attempt to add a big amount of text in your text field you will notice that the text will only be visible within the default size area of the text field which was visible through the border. For example, try to update your text field with this content:

var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";

addChild(myText);

myText.border = true;

If you test this movie you will see that your text gets cutout:

AS3 Text Cutout

There are several solutions to this problem, the most simple one is to enabled word wrap to stop the text from running through the boundries of the text field. Simply set the .wordWrap property to true to activate this:

var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;

If you test your movie now you text field should wrap the text inside it.

AS3 Text Field WordWrap

You can also modify the width and height dimensions of your text field by setting the .width and .height properties of the text field instance:

var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;

Test your movie now to see your text field in a different rectangular shape.

AS3 Text Width Height Modified

We did not mention this one earlier, but it is kind of obvious, you can change the position of your text field by setting the x and y properties:

var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

Test your movie now to see your text positioned in accordance with the values you set for the x and y properties.

AS3 Text Field _x and _y Positions

Those are some of the basic properties of text fields, you should be aware of the other ones available as well such as .selectable, .thickness, .type and others which you can easily learn about by checking the ActionScript reference.

Using the TextFormat Class

The TextField Class has a number of helpful properties, but it does not control formatting aspects of the text, such as the text size, the text alignment, and the font. Such properties are configured by using the TextFormat Class.

Using the TextFormat Class requires creating an instance of this class, setting its properties, and then assigning it as the default text format for a text field. We will do this step by step. Start off by creating a new instance of the TextFormat Class, we need to set the instance of the TextFormat to the text field before we set its text content, so I suggest that you create it at the beginning of your code:

var myFormat:TextFormat = new TextFormat();

var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

We now can set the size directly on this instance:

var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;

var myText:TextField = new TextField();
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

Now the important part, you need to set your TextFormat instance as the default format for your text field. This must be done before you add any text to your text field. The property to use is called .defaultTextFormat and it should be used this way:

var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;

var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

You can test your movie now to see your text in a larger text size.

AS3 - TextFormat Size TextField

We can also configure the alignment of the text by using the .align property of the TextFormat Class. This property only accepts specific values passed as properties of the TextFormatAlign Class. This basically means that you have to set the value of .align as one of the following:

I think that all of these are self-explanatory. The trick is that you CANNOT simply set the value as a string such as "center" or "left". You can use the properties mentioned above this way:

var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;

var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

There are other properties for the TextFormat Class which you can configure such as .bold, letterSpacing, .blockIndent and others which are pretty easy to use if you check the ActionScript Reference.

Using Embedded Fonts

Changing the font of your text field is a much more complicated process than the stuff we previous did. Using a special font will require you to embed that font so that the Flash movie can display the font regardless of whether or not that font is available on the machine displaying the file. In order to use an embedded font you must do the following:

  1. Export the font in the library and make it available for use for ActionScript.
  2. Create an instance of the font in ActionScript.
  3. Set that instance font name as the value for the .font property in your TextFormat Instance.
  4. Set your TextFormat as the default text format for your text field and configure the appropriate text field properties.

We are going to do this step by step. You need to start off by opening up your library (Window>Library). You will then need to click on the small menu button on the top right corner for the panel and select New Font....

AS3 - New Font

The Font Symbol Properties should pop-up. Simply select the font you want to use from the drop down menu, you should not be bothered by the other attributes as they do not really matter. I am choosing the Windows Vista font Calibri, you can pick whatever font you want to use.

AS3 Font Symbol Properties

Once you click OK your font should appear in the library as Font 1, right-click it and select Linkage, that should open the Linkage Properties window, check Export for ActionScript, this should create a class for your font which you can use in ActionScript. The default class name is Font1, we can use that as our class name. Click on OK to finish.

AS3 - Font Linkage

That should do it, back to ActionScript now. The first step in ActionScript would be to create an instance of our font. You can do that using the new keyword the same way you do with all classes:

var myFont = new Font1();

var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;

var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

The next step is to use the .font property of our TextFormat instance and set it to the .fontName property of the font. You have to make sure to use the fontName property of the font and not set the fond directly.

var myFont = new Font1();

var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
myFormat.font = myFont.fontName;

var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;

We have already set the default text format of our text field as the instance we created, however, to make the text field actually display the custom font, we need to manually activate the option to use embedded fonts and then set the .antiAlias to use the advanced settings:

var myFont = new Font1();

var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
myFormat.font = myFont.fontName;

var myText:TextField = new TextField();
myText.defaultTextFormat = myFormat;
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.text = "The quick brown fox jumps over the lazy dog";
addChild(myText);

myText.border = true;
myText.wordWrap = true;
myText.width = 150;
myText.height = 40;
myText.x = 100;
myText.y = 100;
These two last requires are almost arbitrary, but Flash requires them.

You can test your movie now to see your text displayed in this new font. However, the text might not be fully displayed because we are using a very small text field:

AS3 - New Font Used

You can fix this yourself by updating the .width and .height of the text field or by using the .autoSize property. We did not discuss this property, but you can easily learn how to use it by referring to the ActionScript reference.

This concludes our tutorial, I hope you've learnt something new from it. If you have any comments or questions feel free to post them at the Republic of Code Forum.

- End of Tutorial