Formatting Textfields using TextFormat
      by kirupa  |  18 June 2004

Textfields are an important form of displaying information in many Flash animations. While you can manually adjust the properties of a textfield within Flash, there are times when you will be unable to control the properties of your textfield. For example, you may prefer to dynamically create a text field. You may also decide want to change the properties of a textfield based on user interaction. You have to use ActionScript.

This tutorial addresses the above situational...situations! Here is an example of an animation that changes the sample text by clicking on the various buttons:

[ click the above buttons to modify the sample text; press Reset to reset ]

Creating the Text Field
The following instructions for Flash MX 2004 should work well in Flash MX also:

  1. Create a new document in Flash. Set the dimensions to your movie at 300 by 200.
  2. Now, draw your text field. Click on the Text Tool and look at the Properties panel towards the bottom of your Flash window.
     
    Ensure dynamic text is selected:

[ ensure dynamic text is selected ]
  1. Once you have clicked on the Text Tool and selected Dynamic Text, draw a text field by clicking the mouse in your drawing area and dragging your mouse. Release once you have drawn your text field:

[ your text field ]
  1. Select your newly drawn text field and give it the instance name tfield:

[ give your text field the instance name tfield ]
  1. Now, select the first frame of your movie. Press F9 to display the Actions window. Copy and paste the following code:
tfield.text ="There is no spoon!";
  1. If you press Ctrl + Enter, you will see the text "There is no spoon!" displayed where your text field should be. Keep the Actions window open, for you will need it in the next few sections!

Formatting Text Fields
To apply your text formatting, you will be using be using the TextFormat() and setTextFormat() functions and classes. The following is a generic example of how you would use both of these functions in formatting text:

format = new TextFormat();
format.bold = true;
tfield.setTextFormat(format);

In the first line, you create a TextFormat object using the code new TextFormat(). This allows you to use the cool features that the TextFormat class has hidden inside its sleeve.

In the second line, you dig inside the TextFormat class's sleeve and set the bold property to true. The bold property is a method contained within the format TextFormat object. There are many more properties besides bold, and you will learn all of them in time.

The third line applies the formatting to your textfield. If you recall, our text field's instance name was tfield. Therefore, it is only appropriate that we use the setTextFormat() code to apply the results of our format endeavor to the textfield, tfield.

The above summarizes what you would need to do in order to format a textfield. The next page will summarize all of the properties of the TextFormat class and how you can use them in formatting your textfield.

So, on to the next page!

   
 



SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.