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 for controlling its size, etc... We'll also learn how to write text inside a text field and how to append or add more text to it using code.

Let's begin.

In order to create an AS3 TextField object using code, instantiate a new instance of the TextField class like so:

var instanceName:TextField = new TextField();

Let's create an example. Open Flash and create a new ActionScript 3 document. Make sure that the first frame on your timeline is selected. Then in the Script Pane of the Actions Panel, type in the following code:

var myTextField:TextField = new TextField();

This creates a new instance of the AS3 TextField class. We've given this new instance the name myTextField. When you test the movie at this point, you won't see anything on the stage. Yes, you've created a new instance of the TextField class, but you still haven't added it to the display list. Use the addChild() method in order to add the text field to the display list:

var myTextField:TextField = new TextField();

addChild(myTextField);

Now at this point, when you test the movie, you still will NOT see the text field. But it's there. The reason why you still don't see it is because it's empty and has no borders. So let's go ahead and use some properties of the TextField class in order to put some text inside our text field and give it a border. We'll be using the following properties:

• text - assigns and retrieves text inside a text field
• border - adds or removes a text field's border

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.text = "Creating ActionScript 3 TextFields.";
myTextField.border = true;

So now, when you test the movie, you'll be able to see where the text field is (it will be in the upper-left corner of the stage). It will have a border, as well as some text inside it.

You might also notice that the text does not fit horizontally inside the text field. The remaining part of the phrase we assigned to the text field can't be seen. If that's the case, then there are at least 2 ways that we can fix that:

• activate the text field's word-wrapping feature using the wordWrap property of the TextField class
• change the width of the text field using the width property of the TextField class

Let's go ahead and activate the word-wrapping feature:

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.text = "Creating ActionScript 3 TextFields.";
myTextField.border = true;
myTextField.wordWrap = true;

The wordWrap property can be set to either be true or false. When set to true, the text inside the text field will automatically move down to the next line when there is no longer any horizontal space left. If there's still some horizontal space left, then the text will just continue along the current line.

If you wish to change the dimensions of the text field, then you can work with the width and height properties of the TextField class:

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.text = "Creating ActionScript 3 TextFields.";
myTextField.border = true;
myTextField.wordWrap = true;
myTextField.width = 300;
myTextField.height = 50;

Here, I've changed the width to 300 pixels and the height to 50 pixels.

If you want to reposition the text field, then you can use the x and y properties of the TextField class in order to change the text fields x and y coordinates respectively:

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.text = "Creating ActionScript 3 TextFields.";
myTextField.border = true;
myTextField.wordWrap = true;
myTextField.width = 300;
myTextField.height = 50;
myTextField.x = 75;
myTextField.y = 50;

Here, I've change the x coordinate to 75 and the y coordinate to 50.

Adding More Text to the Next Line
Let's go ahead and add more text to the current text that's already inside our text field. To do that, we will use the appendText() method of the TextField class like so:

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.text = "Creating ActionScript 3 TextFields.";
myTextField.appendText("Here is another line of text.");
myTextField.border = true;
myTextField.wordWrap = true;
myTextField.width = 300;
myTextField.height = 50;
myTextField.x = 75;
myTextField.y = 50;

Here, we've added some more text using the appendText() method of the TextField class. But when you test the movie, you'll see that while the new text is added, it won't be placed in the next line. In order to place the new text in the next line, you can add a line break (\n) either at the end of the first line or at the beginning of the appended text. Let's go ahead and add a line break at the end of the first line:

var myTextField:TextField = new TextField();

addChild(myTextField);

myTextField.text = "Creating ActionScript 3 TextFields." + "\n";
myTextField.appendText("Here is another line of text.");
myTextField.border = true;
myTextField.wordWrap = true;
myTextField.width = 300;
myTextField.height = 50;
myTextField.x = 75;
myTextField.y = 50; 

Here, I've used the + operator to add a line break to the end of the first line. So when you test the movie now, you should see the appended text move down to the next line.

And those are some of the basics of working with AS3 TextFields