Tutorials

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

- Working With As3 Input Text Fields
You can add input text fields to your Flash movie in order to allow text-based interaction from your users. An input text field is one that accepts information from the users of your Flash movie. The user simply needs to select the text field and type...

- Creating Multiple Textfields And Positioning Them Using Arrays And For Loops In Flash Actionscript 3.0
In this tutorial, we are going to learn how to create multiple text fields and how to position them in different locations using an array and a for loop in Flash using ActionScript 3. Go ahead and create a new Flash ActionScript 3.0 document. Select frame...

- 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...

- Formatting Externally Loaded Text In Flash Actionscript 3.0
This article is a continuation of the Loading External Text Files In Flash ActionScript 3.0 tutorial. In this lesson, we'll be using a TextFormat object to style our externally loaded text. So let's go back to the code and create the ff: a TextFormat...

- 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