Chapter 10. Formatting Text

Understanding the TextFormat Class

When you create a text field visually using the text tool and dragging on the Stage, you can use the Properties panel to apply formatting. If you create the field in code, however, you must apply formatting via an instance of the TextFormat class.

Class Properties

The TextFormat class contains a set of properties for storing formatting information that you plan to apply to a text field. These properties are align, blockIndent, bold, bullet, color, font, indent, italic, kerning, leading, leftMargin, letterSpacing, rightMargin, size, tabStops, target, underline, and url.

align

The align property sets the alignment of text within a field. It takes as its value one of the constants set in the TextFormatAlign class, which are CENTER, JUSTIFY, LEFT, and RIGHT.

blockIndent

The blockIndent property indents all lines of the field from the left margin by a specified number of pixels. Its value must be set to a valid number.

bold

The bold property renders the text in the indicated field in a bold typeface. Valid values are true, false, and null, which is the same as false.

bullet

You can use the bullet property to create a bulleted list. Valid values are true, in which case each paragraph within the field will be displayed with a bullet, or false and null, both of which cause no bullet to appear.

color

The color property sets the text color. You indicate the color by setting the property's value to a valid hexadecimal color value. Hexadecimal is expressed in ActionScript by typing 0x and then the value, so for example, red is 0xFF0000. The value must always use all six digits of the hexadecimal color; CSS-style three-digit shorthand for the color is not supported, and neither are named values such as red or blue. A value of null is also supported, which causes Flash Player to render the text in black.

font

Set the font face for the text using the font property. You provide the font name as a string, such as "Arial" or "Times New Roman".

indent

The indent property indents the first line of text by the specified number of pixels. The value is given as a number; as pixels are the only allowed unit, the unit does not need to be given. Note that indent indents only the first line of text, whereas blockIndent indents all lines.

italic

Providing a value of true for the italic property italicizes the text, and a value of either false or null does not.

kerning

In typography, the space between characters in text is known as kerning, so the kerning property adjusts that spacing. You cannot adjust kerning on individual letter pairs; instead, you simply set this property to true to have Flash Player kern text and false or null to have it not kern. The kerning property should be applied only to large text such as that used on headers, and you can apply it only to embedded fonts.

Class Properties (continued)

leading

You can use the leading property to adjust the space between lines in text. This property is expressed with a numeric value or as null, which sets the leading to zero. Note that a value of null or 0 does not remove leading, which would cause lines of text to run on top of one another, but rather simply has the font displayed with a normal amount of leading.

leftMargin and rightMargin

The leftMargin and rightMargin properties set the paragraph margins, expressed as a number and set in pixels. The indent and blockIndent properties indent text from the leftMargin if provided.

letterSpacing

You can increase the space between letters within your text by providing a numeric value for letterSpacing. The space is added uniformly between all letters throughout the line; this is in contrast to kerning, which adds or removes space only where needed to increase readability. You can provide decimal values for letterSpacing.

size

The size property sets the font size. It takes a number. The only valid unit of measurement is pixels, so no unit is given.

tabStops

The tabStops property takes as its value an array of nonnegative numbers. If the text in the field contains tab characters, they will be spaced according to the values in the array. The default tab stop spacing is 4.

target

The target property is used when the text is hyperlinked and the Flash movie is playing in an HTML document in a browser. A value of _self causes the linked document to open in the same browser window as the current document, and _blank or any custom name causes the linked document to open in a new browser window. Should the wrapper HTML page for the Flash movie be a part of a frameset, _top, _parent, or a custom name will behave as they would in normal HTML situations.

underline

The underline property causes the text to be displayed as underlined text if the value is set to true or to be displayed without underlining if set to false or null.

url

The url property specifies the target URL as a string for the text in the field. If url is set to an empty string or null, the text will not appear as a link — which is indicated by underlining. The text field in question must have its htmlFormat property set to true for url to work.

Default Values

The font property defaults to Times New Roman in Windows and Times on Mac OS X and takes a string that is the name of a font. Both target and url also take strings. For color, any hexadecimal value can be used. The default color is black. size defaults to 12 (pixels) and takes a numeric value. The default values of blockIndent, indent, leading, leftMargin, letterSpacing, and rightMargin are all 0, and all can be set with new numeric values, whereas bold, bullet, italic, kerning, and underline all default to false but can be set to true. The tabStops property defaults to an empty array, and both target and url are set to empty strings. The align property defaults to left, represented by the constant TextFormatAlign.LEFT.

Apply Formatting to a Text Field

In order to format a text field, you must first create an instance of the TextFormat class by creating a variable set as a type of TextFormat and then calling the class constructor:

var tfInfoText:TextFormat = new TextFormat();

You can then add formatting by setting the properties of the class to the values that you want, so for example, you may have something like this:

tfInfoText.font = "Verdana";
tfInfoText.color = 0xFF3300;

After you have the TextFormat instance created and its properties set to the values that you want, you need to apply the format to the text field. Instances of the TextField class have a method for this purpose: setTextFormat, which takes as its argument the name of an instance of the TextFormat class. For example, a text field instance named txtCopyright could have tfInfoText applied to it with the following line:

txtCopyright.setTextFormat(tfInfoText);

Apply Formatting to a Text Field

Create the TextFormat Instance

  • Create the TextFormat Instance
  • Create the TextFormat Instance
  • Create the TextFormat Instance
  • Create the TextFormat Instance
Create the TextFormat Instance

CREATE THE TEXTFIELD INSTANCE

  • CREATE THE TEXTFIELD INSTANCE
  • CREATE THE TEXTFIELD INSTANCE
  • CREATE THE TEXTFIELD INSTANCE
  • CREATE THE TEXTFIELD INSTANCE
  • CREATE THE TEXTFIELD INSTANCE

APPLY THE FORMATTING AND VIEW THE RESULTS

  • APPLY THE FORMATTING AND VIEW THE RESULTS
    APPLY THE FORMATTING AND VIEW THE RESULTS
  • APPLY THE FORMATTING AND VIEW THE RESULTS
  • APPLY THE FORMATTING AND VIEW THE RESULTS

Extra

Beginning ActionScript developers often wonder why so much work is required to apply formatting and think that it would be a lot easier if the formatting properties were part of the TextField class and could thus be applied directly to the field, instead of having to go through the extra steps of creating an additional instance of the TextFormat class. It is true that if you are applying formats to a single text field, the approach taken by ActionScript 3.0 is a considerable amount of work.

There is, however, logic behind it. Most of the time, you are going to need to apply the formatting not to a single field but to a group of fields. Imagine an application that was displaying information about products, as in an e-commerce site. Most likely, the product information is going to be made up of a series of fields, displaying the product name, the price, and details about the product. If you wanted the price and details fields to have the same formatting, it would in fact be more work to apply the formatting to them independently. Instead, you can have a single instance of the TextFormat class that applies the same formatting to both.

Using HTML Text

Applying formatting via an instance of the TextFormat class allows you to format all the text within a particular text field, but it does not allow you to apply formatting to individual paragraphs, words, or possibly characters within the field. In order to do this kind of formatting, you need to use HTML text.

ActionScript text fields support a small subset of HTML 1.0 tags that you can apply to text within fields. For the most part, the tags supported are those that apply formatting equivalent to that supported by the TextFormat class. For example, the class contains a url property to set a hyperlink; the HTML <a> tag is supported by HTML text to achieve the same results. You can also apply bold through <b>, italic via <i>, and underline with <u>, as well as set the font, color, and size using the <font> tag. You can add bulleted text with <li>. In addition to the TextFormat equivalents, you can add line breaks by using the <br> tag and add inline images with <img>. Paragraphs are denoted using the <p> tag. You can apply margins, indentation, leading, and tab stops with the <TextFormat> tag, which is not technically part of HTML but is supported in ActionScript. A complete list of the supported tags and their values can be found in Appendix C.

For the most part, the standard attributes to these tags are supported just as they are in HTML. For example, to set the font color, you would use <font color="#006655">, just as you would in HTML.

In order for any HTML formatting to be applied, you must add the text to the text field via its htmlText property, rather than the normal text property. Should text be added via both properties, only that added with text will apply.

Using HTML Text

  • Using HTML Text
  • Using HTML Text
  • Using HTML Text
    Using HTML Text
  • Using HTML Text
  • Using HTML Text
  • Using HTML Text
  • Using HTML Text
  • Using HTML Text
    Using HTML Text
  • Using HTML Text
  • Using HTML Text

Extra

Flash Player also supports the use of character entities, which you must use in HTML text to avoid conflicts over the use of characters that are used as part of the HTML itself. For example, you cannot have an HTML string displaying a mathematical formula such as 5<10, as the HTML text would interpret the less-than symbol as the beginning of a tag. Instead, you would need to use the entity &lt;, just as you would in HTML. The entities supported in Flash are &lt; for the less than symbol, &gt; for greater than, &amp; for the ampersand, &quot; for the quotation mark, &apos; for the apostrophe, and &nbsp; for a nonbreaking space.

Any HTML tags included within htmlText that are not supported by Flash Player will be ignored. For example, if you attempted to add a table through HTML by typing <table><tr><td>Name</td></tr><tr><td>Mal</td></tr></table>, all of the unrecognized tags — <table>, <tr>, <td>, and their closing tags — would be stripped, so the resulting text would contain only Name Mal. Empty, unsupported tags are ignored altogether.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.87.196