(this tutorial applies to Flash MX and newer)



The Issue
Underlining text in Flash is fairly simple if you have static texts.  The most common way is to draw a line below the texts.  The problem with that is if you change the text location or change the font size, then the underline will usually need to be redrawn. 

With a Dynamic Text or an Input Text field, there's also currently no option to specify underline.  As you can see in the Properties window below, there're options to set Bold and Italic style, but not Underline.

Fortunately, Flash MX introduces the TextFormat object which can be used to add underline to a text field fairly easily.  

About the TextFormat Object
The TextFormat object is introduced in Flash MX, it is not available in Flash 5 or before.  The purpose of this object is to allow formatting of text on-the-fly.  For instance, you can change the font size by almost at any time by 'applying' a TextFormat to a text field.  And good for us, this object also allows underlining of texts.

The TextFormat object can be created as follows:

var myTextFormat=new TextFormat();

You can also get a textFormat object of a text field using like below, but this only works if you have set the format of the text field previously.

var myTextFormat=myTextField.getTextFormat();

For the purpose of underlining, the formatting capabilities to use is the TextFormat.underline property:

TextFormat.underline   // set to true or false

To apply the format to the text field, use: 


For example, let's say that I have a text field named: myInputTextField:

To underline this text field, I created the following function.  The function takes a TextField instance as a parameter, and underlines it.

function underlineTextField(myTextField) 
  var myInputTextFormat = new TextFormat();

Try it below:

When you click the button, this code is executed:


There're some issues with this example.  First, the text is initially not underlined; and secondly, new text are not underlined until the button is clicked again.  



The problem we're seeing with the previous example is because the setTextFormat() function affects only existing text.  To apply the format to new (incoming) text, use: 

So, to make sure existing and incoming text are underlined, we can call both setTextFormat() and setNewTextFormat().  

Below is an example of two text fields.  You can type on the Input Text Field and see the text instantly underlined.  The text in the Dynamic Text Field also will be automatically underlined by the code.

The code is fairly straightforward as shown below:

function underlineTextField(myTextField) 
  var myTextFormat = new TextFormat();
// assume I have named the textfields as "myInputTextField" and 
// "myDynamicTextField"

The function can be called just once and any existing text and incoming text will be underlined.




Underlining Static Text Fields
Since there's no way to name a Static text field, we need to do some trick to simulate a static field using a non-static field.  Create the text field, and instead of selecting Static Text, select Dynamic Text.  Turn off Selectable and turn off Show Border option.  Put and instance name and run the underlining code.  For example:

The result is shown below:

Other Uses of TextFormat
There are other text properties that can be set using the TextFormat object.  For instances:

  • color:  the RGB color of the text, for example.
  • bold:  boolean indicating whether the text is bold or not (true=bold, false=not bold).
  • italic: boolean indicating whether the text is italicized or not (true=yes, false=no).
  • size:  a number indicating the point size of the font
  • align:   a string indication the horizontal text alignment (valid values are: "left", "right", and "center")

The TextFormat below will make a text field bold, center aligned, and blue (0x0000FF). 

var inputTextFormat = new TextFormat();

For more info, consult the online help for TextFormat documentation. 


Terms of Use


(C) F. Permadi