Creating Text Fields in ActionScript

One of the nice things about text fields is that now because they are actual objects in ActionScript, you can create and destroy them dynamically. And to create them in AS, we use the createTextField() method, which works like this:

 Movie.createTextField(instanceName, depth, x, y, width, height); 

Because text fields must be placed within movie clips, Movie represents the movie clip that the text field will reside in. The first parameter we set is the instance name; remember to use the suffix "_txt" to activate code hints. The next parameter is the depth, or stacking order, of the text field. The next two parameters are its coordinates, and they represent the top left corner of the text field. The final two parameters are the width and height of the text field.

Let's jump right in and create one in ActionScript.

1.	Start off by creating a new Flash document.
2.	In the first layer, in the first frame, open the Actions panel and put these actions in: //this will create a text field on the root layer this.createTextField("myText_txt",1,0,0,120,20);
3.	Now test the movie and notice that you don't really see anything. This is because even though we have created a text field, we haven't put any text in it. But it is there, and you can see it in the object's list by going to Debug>List Objects while still in the test movie screen. You will see it listed there. We already know how to put text in text fields, so let's go back and do that.
4.	After we create the text field in the actions, put these actions in: //this will put text in the text field myText_txt.text = "I created this with code";

Now test the movie once more, and you will see the text in the text field at the top left corner of the screen. And because the createTextField() method returns a reference to the text field, we could have also written the code like this:

 //this will create a text field on the root layer var theText:TextField = this.createTextField("myText_txt",1,0,0,120,20); //set the text using the reference theText.text = "I created this with code"; 

Both ways will work the same.

Looking at the text in the test movie screen, notice that the letters are black and appear to be in Times New Roman. That is because when you create text fields in ActionScript they have a few default values:

• type "dynamic"

• border false

• borderColor 0x000000 (black)

• background false

• backgroundColor 0xffffff (white)

• textColor 0x000000 (black)

• password false

• multiline false

• html false

• embedFonts false

• variable false

• maxChars false

• sharpness 0

• thickness 0

• antiAliasType normal

• gridFitType pixel

Now you know how to change some of the features, so let's go back into our example and give it a border and a background, as well as change the text color.

1. Building on the preceding example, go back into the actions of the first frame and add these lines at the bottom:

    //this will add a border around the text field myText_txt.border = true; myText_txt.borderColor = 0xff0000; myText_txt.background = true; myText_txt.backgroundColor = 0x397dce; myText_txt.textColor = 0xffffff; 

   
   

When you test the movie again, you will see a border around the text field. And the text field formatting could have been applied before setting the text property. But in order to be able to change the color of the border and the background with ActionScript, both properties must be set to true or the border will not show.

Now that you've seen how to create text fields manually as well as with ActionScript, and you know how to change properties of the text field itself, let's look at how to change the formatting of the text in the text field.