Typography in Flash: Actionscript

In part oneof this two part series on typography in Flash, we looked at a number of important guidelines and considerations for designing with type in Flash. Flash is an unique medium that has its own set of typographic limitations, and one must consequently take extra care to design according to good typographic style principles.

But Flash is also a medium with its own set of typographic abilities which aren't available to print. Here is where Flash reveals itself as a unique medium for typographic design. The purpose of this second part of the series is to explore some of the ways Flash allows us to take our typography beyond those techniques common to the traditional printed page. In particular, it is actionscript which opens up these possibilities, and thus it is actionscript which allows us to take our typography to the next level.

In this article we will cover some important techniques for using actionscript to programmatically drive our typographic designs. In the first section we will look at various ways to use actionscript to format type. In the second section we will explore a way to expose the characters in a text string to the full range of actionscript's animation powers. The techniques discussed in this article can serve as a foundation for pushing our programmatic control even deeper into our typographic style.

1 Actionscripted type formatting

As mentioned above, it is actionscript which lets us take our typographic design to the next level. Actionscript provides some important means by which we can control our type programmatically. On the one hand, we can use actionscript to handle type formatting in sophisticated and precise ways. On the other hand, we can use actionscript to turn our type into important entities in our movie design. For example, with actionscript we can format our type, animate our type, break up the characters, and so forth. In this section, I want to discuss a few helpful guidelines for using actionscript to format type. I will assume some basic actionscript skills in this section, though I don't expect you to be a guru since the emphasis here is not so much on how to write specific scripts as it is on the general techniques for using actionscript to control type.

1.1 The TextFormat object

In Flash MX and higher, you can control the formatting of each individual character with the TextFormat object. This object is consequently a very powerful tool. With the TextFormat object, you have a relatively high degree of control over the look of your textfields, and it can even achieve some interesting effects.

Using the TextFormat can be a bit strange the first time around, but basically a TextFormat object is nothing but a bundle of formatting properties (e.g. font family, font size, font color, and so forth) which is then applied to a text field. What might seem odd about this is that the TextFormat object is just a bundle of properties, completely apart from any text field.

This is, in fact, advantageous because it means you can create your formatting properties only once and then apply them to many different text fields. It also lets you keep your formatting in one place, so changing the look of many text fields can be accomplished by changing one value (namely, that of the TextFormat object) rather than changing the value in each and every textfield.

In any case, the important feature of the TextFormat object is that it is distinct from a textfield. Thus, first you create a TextFormat object, and only later do you apply it to specific text fields. The first step in using a TextFormat, then, is to create a TextFormat object. The following line of code creates a new TextFormat object and stores it in a variable named myFormat:

var myFormat = new TextFormat ();

From this point forward, we will refer to the TextFormat object by the name of the variable, namely myFormat. You can, of course, change the name of the variable to whatever you like, but whatever name you choose, that is the name with which you reference the TextFormat object.

Now that we have a TextFormat object, we need to fill it with formatting properties. Once we fill this object with formatting properties, we can then apply it to a textfield. In this case, let's set the font to 'Arial'. To do that, we simply write the name of the TextFormat ( here it is myFormat), then a dot, then the name of the property we wish to define, then an equals sign, and lastly the value. Thus:

myFormat.font = "Arial";

Here we set the 'font' property to a value of 'Arial'. Note that the font name is in quotes. With TextFormats, any value except numbers should be in quotes.

Now let's set the size to 10pt. The procedure is the same: the TextFormat name, then the property name, then the property value:

myFormat.size = 12;

This line of code sets the 'size' property to 12, i.e. 12pt. Notice that here we did not put the number in quotes because it is a number.

Next, let's set the color to blue. In Flash, colors are usually defined as hexadecimal numbers, and so here our color will be 0x006699:

myFormat.color = 0x006699;

There are many formatting properties available to TextFormat objects. You can set line spacing, first line paragraph indentation, left and right side margins, and a whole host of other formatting properties. Here we'll just leave our TextFormat as it is, but for a full list of properties, see the Actionscript Dictionary in your Flash Help menu (or online). If you navigate to the TextFormat object, you will see a list of available properties along with their descriptions.

Now that we have a TextFormat object (named myFormat) with some formatting values (in this case, the font, size, and color properties), we can apply this TextFormat to a text field. Every text field has available to it a method called setTextFormat (). We use this method to apply a TextFormat to a text field.

Suppose we have a text field named myTextField. We can then invoke the afore mentioned setTextFormat () method to apply our TextFormat object to the text field. The setTextFormat () method takes one argument inside the parentheses: the name of the desired TextFormat object. In our case, then, the code looks like this:

myTextField.setTextFormat (myFormat);

The procedure is as follows. First we specify the name of the text field (in this case, myTextField), then we write a dot, then we write the name of the method (in this case, setTextFormat ()), and finally we write the name of the TextFormat object we wish to apply to this text field. Once we have done that, the formatting properties contained in our TextFormat object will be applied to the text of the text field. The text of myTextField will consequently show up as blue 10pt Arial text.

You can also designate that the TextFormat object should be applied only to a specific range of characters in a text field. For example, you can designate that the TextFormat object should be applied only to characters 3 - 6 of a textfield. To specify the beginning and end character to which a TextFormat should be applied, apply the TextFormat object to the text field with the setTextFormat () method in just the same way as before, but inside the parentheses list the beginning and ending character number just before the name of the TextFormat. For example, to apply our myFormat TextFormat object to characters 3 through 6 of our myTextField text field, we would use this line of code:

myTextField.setTextFormat (3, 6, myFormat);

That line of code thus tells Flash to apply the properties in the myFormat TextFormat object to characters 3 through 6 of the myTextField text field. If you omit the ending character, then Flash will apply the TextFormat only to the character specified by the beginning number. Thus, this will apply the myFormat TextFormat object only to the third character of the myTextField text field:

myTextField.setTextFormat (3, myFormat);

TextFormats are additive, not destructive. That is, when you apply a TextFormat to a text field, it does not completely reset all the text field's formatting properties and then apply only those properties which are contained in the TextFormat. Rather, it leaves any properties already applied to the text field untouched and simply adds its new properties to the text field. Accordingly, you can apply multiple TextFormat objects to any text field, layering as many properties as you need.

There is a second way to apply a TextFormat to a text field. Rather than use the setTextFormat () method to apply a TextFormat to a text field, you can use the setNewTextFormat () method. This latter method is just the same as the former, but the former will only apply the TextFormat properties to any existing text in the text field. It will not apply those properties to any new text which might appear later (if, for example, a script changes the value of the text field or appends some new text to the field). The setNewTextFormat () method, however, will apply the TextFormat properties to any new text which might appear later. Some situations require the setTextFormat () method, and other situations require the setNewTextFormat () method.

Before moving on, I should mention a few limitations to the TextFormat object. The TextFormat object only works with dynamic and input text fields. We cannot apply a TextFormat to a static text field simply because we do not have access to static text fields by actionscript. The only way to edit static text fields is in the authoring environment, in the IDE.

Further, if you are using embedded fonts, then TextFormats can sometimes cause headaches. When you embed a font and set a TextFormat's font property to that embedded font, you tell Flash to use that font and only that font. If Flash cannot find that font (because you forgot to embed it, or you named it wrong, or whatever), then absolutely nothing shows up in the text field. When you are not using embedded fonts, if Flash cannot find the specified font it will select another, and so with non-embedded fonts you always see a font, even if it's the wrong one. But with embedded fonts, Flash will use only the specified embedded font.

A result of this is that setting the bold and italic properties with a TextFormat has no effect on an embedded font. The key here is to remember that a normal font, the same font bolded, and the same font italicized, are each different fonts. Embedding a normal Arial font does not also embed Arial Bold, nor does it embed Arial Italic. Thus, you can change the size and color of an embedded normal Arial text field with a TextFormat, but you cannot make an embedded normal Arial text field bold unless you set the TextFormat's font property to the different Arial Bold font (which must also be embedded).

Let's consider an example. Suppose that you embed the normal Arial font, and then apply it to a textfield. The text field will then show up in the normal Arial font, just as expected. Suppose now that you create another TextFormat, set the 'bold' value to true, and then apply it to characters 3 - 6 of the text field:

var myOtherFormat = new TextFormat ();
myOtherFormat.bold = true;
myTextField.setTextFormat (3, 6, myOtherFormat);

Here we created a TextFormat called myOtherFormat, we set the 'bold' property to true, and then we applied it to characters 3 - 6 of the myTextField text field. If you view your movie, you will see no change: characters 3 - 6 of the text field will not be bold. The reason is, as said above, that a bold typeface is a different font from the normal typeface. To make characters 3 - 6 bold, you must embed a bold font and then apply that new font to characters 3 - 6. Suppose that we have embedded our bold font with the name 'Arial Bold'. The code would thus be this:

var myOtherFormat = new TextFormat ();
myOtherFormat.font = "Arial Bold";
myTextField.setTextFormat (3, 6, myOtherFormat);

Here we created a TextFormat called myOtherFormat, we set the font to the embedded bold font, and then we applied it to characters 3 - 6 of the myTextField text field. Notice that we did not set the 'bold' property to true. This is because the font itself is bold, so we don't need to do anything else. Remember that normal, bold, and italic typefaces are all different fonts, and thus if you are embedding your fonts, you must use the different fonts for bold and italic.

As mentioned before, using embedded fonts provides the advantage that you know the end user will see the proper font. But here we have seen that it can be cumbersome to use embedded fonts if you need to do any sort of advanced formatting. Additionally your movie's filesize increases substantially with each embedded font.

If you need to use any sort of advanced formatting capabilities, I suggest considering using one of the 'safe' fonts (Arial, Verdana, Times New Roman, Georgia, and Courier) without embedding your fonts, and just use HTML fields. With HTML fields you can use some basic HTML tags for semi complex formatting purposes, you can also use TextFormat as much as you like, and HTML fields always render without anti-aliasing, so the text is clear. I find that I often gain more with one of the 'safe' fonts and HTML text fields than I do by embedding that 'cool' font I initially wanted: I gain a much smaller movie, clearer text, and far more advanced formatting capabilities.

(Note, however, that the Macintosh OS and a few Linux desktops such as KDE automatically anti-alias any type -- even a Flash movie's HTML text fields -- at 10pt or higher unless the user changes that default value. Consequently, your text may not appear sharp and crisp on every desktop. Fortunately, the smaller font sizes (9pt and below) which really need no anti-aliasing to be sharp and clear are not anti-aliased on such desktops.)

All in all, though, the TextFormat object makes for a powerful way to control type formatting with a relatively high degree of precision. It lets us keep our formatting properties distinct from our text fields for clearer formatting management. It further allows us to apply multiple layers of formatting properties to specific characters, thereby giving us some formatting control in highly specific ways.