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:
- Create a new document in Flash. Set the dimensions to your movie at 300 by
200.
- 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 ]
- 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 ]
- Select your newly drawn text field and give it the instance name tfield:

[ give your text field the instance name
tfield ]
- 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!";
- 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!
|