Creating Text Fields

In this section, we'll go over the basic ways to create and use all three types of text fields manually, and then we'll go over how to create a couple of them with ActionScript.

The basic way to manually create a text field is to select the Text tool from the toolbar (T on the keyboard) and click and draw the text fields on the stage.

CAUTION

After a text field has been created, you can still go back and resize it manually using the Text tool. You can also simply select it with the arrow tool, and handles will appear in each corner allowing you to scale it however you wish. You should not, however, use the Free Transform tool to adjust the size of a text field because it will actually stretch and resize the text inside the text field as well.

Static Text

Static text, again, can only be manipulated in the authoring environment. You can, however, do some interesting things with it such as distribute each individual character to its own layer. This can be useful if you want to do some interesting animation with words because each object would have to be on its own layer.

To push letters from a single text field into individual layers, you will first want to create a text field by selecting the Text tool, setting the text type to Static Text, and clicking on the stage. After you have created the text field, you can simply type something in, like your name. When the text field is on the stage, and has some text in it, you can select it with the Selection tool, and either right-click (Maccontrol-click) and then select Break Apart, or you can choose Modify>Break Apart. After it has been broken apart, make sure all the text fields are still selected, and choose Modify>Timeline>Distribute to Layers (PCCtrl+Shift+D, MacShift+Open Apple+D). Now each letter has its own timeline named for that letter, as you can see in Figure 15.6.

Figure 15.6. After you select Distribute to Layers, each letter receives its own layer.

This technique can actually be done with all three types. When dynamic or input text fields are broken apart, they are turned into static text fields, but there isn't really anything special you can do with static text.

Dynamic Text

This type of text field is much more advanced than the static text field because it can be changed and manipulated at any point during authoring or runtime via ActionScript. As a matter of fact, you do not even need to type a single character in the text field itself to have text appear, as you will see in the first example.

For this first example, we are going to put text in a dynamic text field.

1.	Start a new Flash document.
2.	Create a second layer, and name the top layer actions and the bottom layer text (remember from Chapter 8, "Welcome to ActionScript 2.0," that it's good practice to have a layer dedicated to ActionScript).
3.	In the text layer, create a dynamic text field, make sure the Show Border option is selected, set the Var property to myText, and give it an instance name of textField_txt.
4.	Now we are going to go to the first frame of the actions layer, open the Actions panel (F9), and put these actions in: //this will set the first text field's Var property var myText = "Testing";

Now test the movie (Control>Test Movie) and you will see that the text is now in the text field. It does this by sharing a variable name in ActionScript and the Var property in the text field's properties. This was the way it was done way back in Flash 5. It still works, but now we are going to do it the correct way because text fields are now objects in ActionScript.

1.	Using the same example, go to the text field's properties in the Properties Inspector and clear out the Var property box so that it is completely blank.
2.	Now go back to the actions in the first frame of the actions layer, delete all of the actions, and place these in instead: //this will create a string to hold our text var myString_str:String = "Test 2"; //this will set the text field's text property to the string textField_txt.text = myString_str;

Now test the movie again, and you will see that the text field is displaying our text. This way of doing it is much easier to understand because instead of having a blind variable, you actually are setting text to a specific text field. This makes it much easier to go back and read. Because it is good practice to set text to the text field's text property, that is the way we will continue to do it.

So far, the two examples we have done using dynamic text were not very dynamic. We could have just written that text in right on the stage. In this next example, you will see why dynamic text fields are so important.

In this example, we are going to build a mouse tracker to show where the mouse is whenever the mouse moves.

1.	Start out by creating a new Flash document.
2.	As you did before, create two layers, the top one named actions and the bottom one text.
3.	In the text layer, create two dynamic text fields about 100 pixels wide and 20 pixels high. Make sure they both have Show Border turned on, and give them instance names of x_txt and y_txt.
4.	Now in the first frame of the actions layer, place these actions: //this event will update everytime the mouse moves this.onMouseMove=function(){ x_txt.text="x="+Math.floor(_xmouse); y_txt.text="y="+Math.floor(_ymouse); }

Test the movie and you will see that whenever the mouse moves, the text fields will show its position on the main stage.

NOTE

If at first nothing appears in the text fields, click somewhere on the stage. Sometimes the stage must receive focus before mouse events can be detected.

Now that you see how powerful and easy it is to update dynamic text fields, we are going to move on to our last text field type, input text fields.

Input Text

As mentioned earlier, input text fields are exactly like dynamic text fields in how we can set text to them. But unlike dynamic text fields, the user can actually type text in input text fields to interact with our Flash document. Input text fields also have a few extra options that the other two text types do not. The Linetype option can be set to Multiline just like dynamic text fields, but it can also be set to Password, which would make any character in it appear to be an asterisk. That comes in handy when building login systems. Another option is the Maximum Characters field, which you can set to keep the length of what the user can input at a certain length or less.

You will begin to feel comfortable with input text fields as we go through the next example.

In this example, we are going to allow users to input information into one text field, and when they submit it, we will place that exact same string in another field capitalized.

1.	Start by creating a new Flash document.
2.	Create two more layers so that you have three in total.
3.	Name the layers from top to bottomactions, button, and text.
4.	In the text layer, create a dynamic text field, make sure the Show Border option is selected, and give it an instance name of output_txt.
5.	On the same layer, create an input text field, make sure it has Show Border selected, and give it an instance name of input_txt.
6.	On the button layer, create a button, and give it the instance name submit_btn.
7.	Finally, in the actions layer, place these actions: //this event will occur when the submit button is released submit_btn.onRelease=function(){ output_txt.text=input_txt.text.toUpperCase(); }

Test the movie, type something in the input text field, and then click the submit button to see the same text displayed in our dynamic text field, but in uppercase format. Also, notice in our code that we get text out of text fields using the exact same property we use to set text to text fields, the text property.

So far, all we have done when we create a text field is to select the Text tool and draw the field on the stage. Now we are going to go through how to create one dynamically with ActionScript.