Formatting Textfields using TextFormat
      by kirupa  |  18 June 2004

In the previous page you created your animation and learned about the basic code structure used to format a text field. In this page, I will list all of the textfield properties you can modify and its simple usage.

Feel free to copy and paste the code in your Actions window in order to test the movie.

When using the TextField's properties, only one line of code will change provided your textfield's instance name is tfield. The first and third lines will always be the same:
format = new TextFormat();
format.bold = true;

The above highlighted line is the only one that will change in our example. If you were using the above example in your own animation, make sure that the instance name of tfield is replaced with whatever the instance name of your text field is.

In the following example, I will only change the middle line of code. The first and third line are implied.

Also, remember that format is the name of our TextField object specified in the code. If your TextField object has a different name, make sure you use a different name!

The code for displaying Bold formatted text is:

format.bold = true;

Replace the true with a false if you choose to no longer have bolded text.

The code for displaying Italicized text is:

format.italic = true;

Replace the true with a false if you choose to no longer have italicized text.

Bulleted List Item
Did you know that you could make your textfield have a bullet similar to a bulleted list item? Well you can! Here is the code for it:

format.bullet = true;

Replace the true with a false if you choose to remove the bulleted item.

Coloring Text
Changing the color of your text is something that you may find very useful. Besides, I am sure you are interested in typing something other than true and false after your properties.

The basic structure for formatting color is:

format.color = 0xCOLOR;

Where COLOR is the hexadecimal value of the color you want your text to have. Here is an example of how to use the color property:

format.color = 0xFF3366;

Remember, you must have 0x (zero and x) typed before you enter your color value. Flash doesn't like it when you use just the color value.

Changing Font
You can also specify or change the font your text in the textfield displays in. This the code that you would use:

The basic structure for formatting color is:

format.font = "Font Name";

For example, if I want to use the Courier New font, the code would be as following:

format.font = "Courier New";

The font name has to be entered using quotation marks. If you don't use quotation marks, Flash won't pick up your font name as a string.

Indenting and Leading Text
Indent is the space between the text and the left margin. Lead is the vertical space between subsequent lines.

The basic structure for adjusting the above two properties are:

format.indent = 10;
format.leading = 5;

In the above example, I used the values 10 and 5 for the indent and leading properties, respectively. You can set them to any value that you want - including 0. In fact, if you don't even include the above code, Flash will simply leave the values as undefined!

Adjusting Font Size
Flash allows you to adjust the font size of your text using the TextField class. An example of the code for formatting the font size is:

format.size = 24;

In the above example, I set the font size to be 24. Whatever size you use, ensure that the height of the text field is less than the height of your text after adjusting the font size. If your text is larger than your text field, you will find that only a portion of your text is displayed. In our situation, where we drew the text field on our drawing area, you can resolve that problem by manually resizing the text field.

While indenting only adjusts the leading space of one line in your textfield, the right and left margin property adjusts the space between the left and right sides of your text field on all of the lines.

Here is an example of using the left margin and right margin properties:

format.rightMargin = 5;
format.leftMargin = 5;

In the above example, I have the values for both the left and right margins set at 5. You do not have to use both properties in concert. You may use just the rightMargin property or just use the leftMargin property. Likewise, you can set each to a different value.

Hopefully this reference helped. I listed a few of the properties that I believe you will use. There are a few more properties that I did not cover, but those properties are listed in your AS Reference in Flash MX 2004's Help.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!




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