UNDERLINING TEXT
FIELDS
(this tutorial applies to Flash
MX and newer)
OVERVIEW
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:
TextField.setTextFormat(myTextFormat:TextFormat)
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();
myInputTextFormat.underline=true;
myTextField.setTextFormat(myInputTextFormat);
}
Try it below:
When you click the button, this code is executed:
underlineTextField(myInputTextField);
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.
DYNAMIC UNDERLINING
OF TEXT FIELDS
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:
TextField.setNewTextFormat(textFormat:TextFormat)
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();
myTextFormat.underline=true;
myTextField.setTextFormat(myTextFormat);
myTextField.setNewTextFormat(myTextFormat);
}
// assume I have named the textfields as "myInputTextField" and
// "myDynamicTextField"
underlineTextField(myInputTextField);
underlineTextField(myDynamicTextField);
The function can be called just once and any existing text
and incoming text will be underlined.
FLA
NOTES
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:
underlineTextField(myStaticTextField);
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")
Example:
The TextFormat below will make a text field bold, center
aligned, and blue (0x0000FF).
var inputTextFormat = new TextFormat();
inputTextFormat.color=0x0000FF;
inputTextFormat.bold=true;
inputTextFormat.align="center";
For more info, consult the online help for TextFormat
documentation.
