Học Actionscript 3.0 - p 30 pot

Formatting Text
Chapter 10: Text
269
Using the first line, the extra word, “new” will be red, bold, and underlined
because that’s the format when the text was added. Commenting out line 27
and using line 28, however, will remove all the red, bold, underline formatting
from the field because the field will revert to its default format.
Tab Stops
Another handy feature made possible by the TextFormat class is tab stops. If
you find formatting text columns difficult using the Flash Professional inter-
face, you’ll be relieved to find how easy it can be to create simple columns
with tab stops using ActionScript. The next example uses the
TextFormat
class to set two tab stops so that text including tab characters will line up at
these stops, forming columns. See file text_format_4.fla to try this yourself.
Let’s get to the code. The first 13 lines of this script include only previously dis-
cussed material—creating and configuring
TextFormat and TextField objects.
We didn’t include the tab stops in the format initially, because we want to show
you how to edit and use a
TextFormat object after it’s been created. Take a look
at the setup first, and then we’ll discuss the application of the tab stops:
1 var txtFmt:TextFormat = new TextFormat();
2 txtFmt.font = "_sans";
3 txtFmt.size = 10;
4 txtFmt.leading = 4;
5 txtFmt.leftMargin = txtFmt.rightMargin = 6;
6
7 var txtFld:TextField = new TextField();
8 txtFld.x = txtFld.y = 20;
9 txtFld.width = 400;

10 txtFld.autoSize = TextFieldAutoSize.LEFT;
11 txtFld.border = txtFld.background = true;
12 txtFld.multiline = txtFld.wordWrap = true;
13 txtFld.defaultTextFormat = txtFmt;
Lines 14 through 17 populate the field, txtFld, which you just set up in lines 7
through 13. Notice the inclusion of the
\t escape character in line 15. Its back-
slash prevents this character from being understood as the letter “t.” Instead,
it’s interpreted as a tab. Another escape character,
\n, appears in line 16. In this
case, the “n” is a new line character, moving the new text insert point down
to the next line in the field. Therefore, each time through the loop, new text
is added on a new line.
All we need to do now is add our tab stops to ensure that the columns line
up nicely. These are applied in line 20, using an array of pixel values to indi-
cate the location of each tab stop. We applied this property later, in line 20,
for demonstration purposes. You may go back and edit a
TextFormat instance
at any time. After you make such a change, however, you must reapply the
format to the text field, as seen in line 21, for the change to be reflected in
the field.
N O T E
As a nicety, Flash Professional will warn
you that using the compound assign-
ment operator (
+=) is slower than using
the
appendText() method.
N O T E
At the end of this chapter, we’ll show

you a way to create true column-based
layouts using a new Flash Platform text
technology. Unlike simple tab-based
columns, text using this technology can
flow into columns, wrap from one col-
umn to the next, and adjust when the
text is changed.
Download from Wow! eBook <www.wowebook.com>
Part III: Text
270
Formatting Text
14 for (var i:Number = 0; i < 10; i++) {
15 txtFld.appendText("product:\t" + String(i) + "\tin stock:\t"
16 + "yes\n");
17 }
18 addChild(txtFld);
19
20 txtFmt.tabStops = [120, 200];
21 txtFld.setTextFormat(txtFmt);
Using Embedded Fonts
Up to this point, we’ve been using system fonts in our examples. When a
custom font is required, you must embed that font to ensure that it displays
properly on all machines. Embedding adds just enough vector information
to the SWF for the Flash Player to display the font, even if it’s not in a user’s
operating system. The embedding process has changed through the evolution
of Flash Professional, so we’ll cite versions where appropriate.
Flash Professional CS3 and CS4
The first step to embedding a font in Flash Professional CS3 or CS4 is to
create a new font symbol from the Library panel’s menu, seen in Figure 10-2.
In the resulting Font Symbols Properties dialog—Figures 10-3 (CS3) and 10-4

(CS4)—choose the font and font style you wish to embed.
Figure 10-2. Creating a new font from the Library menu (CS4 pictured)
In Flash Professional CS3, you select the bold, italic, or combination
bold/italic styles by using the checkboxes below the font name (see Figure
10-3). In Flash Professional CS4, support for font families was introduced. You
select these styles using the font family’s dedicated bold, italic (oblique), or
bold/italic font in the Style menu. Older fonts that don’t have individual style
variants may support the checkboxes for faux bold and italic found below
the Style menu.
N O T E
Flash Professional CS3 did not support
proper style fonts, instead decorating a
plain version of the font with faux styles
by strengthening or skewing the outlines
(for bold and italic, respectively).
Download from Wow! eBook <www.wowebook.com>
Formatting Text
Chapter 10: Text
271
Figure 10-3. Font Symbol Properties (CS3 pictured)
Each font symbol can style text in a preset manner only: plain, bold, italic, or
a combination thereof, and they can’t be combined at runtime. So, to include
separate bold and italic font styles, for example, you need a font symbol for
bold and a font symbol for italic.
As with other symbols, such as movie clips, we need to use a linkage class to
instantiate a font symbol. So the name of the symbol itself should be useful
and descriptive, but need not follow any specific conventions. When creat-
ing a linkage class, on the other hand (using the same Library menu shown
in Figure 10-2), the class name should follow the same naming conventions
applied to other classes throughout earlier chapters. For example, the name

should contain no spaces and start with a capital letter. Figure 10-4 shows a
class name for the font symbol in the exercise we’re building,
VerdanaPlain.
Figure 10-4. Font Symbol Properties (CS4 pictured)
Download from Wow! eBook <www.wowebook.com>
Part III: Text
272
Formatting Text
In both Flash Professional CS3 and CS4, the Linkage information can be
found in the Font Symbol Properties dialog, accessed from the Library menu
after the Font symbol has been created.
Flash Professional CS5
The process for embedding fonts in Flash Professional CS5 has been
improved and simplified. All of the steps discussed in the CS3/CS4 section
are accessed in one dialog box in version CS5. This dialog box is accessed by
the Text
→Font Embedding menu command. Figure 10-5 shows the Options
tab of this dialog box. At the top, selecting a font is similar to the process used
in CS4, choosing a name, picking a family, and selecting a style.
As of CS5, however, you can specify which glyphs (characters) should be
embedded with the font, just like you can when you embed fonts into a spe-
cific text field using the Flash Professional Properties panel. This allows you
to select only a subset of the glyphs in a particular font family, which reduces
file size. In Figure 10-5, only uppercase, lowercase, numerals, and punctuation
characters are being embedded.
Figure 10-5. Flash Professional CS5’s Font Embedding dialog, showing the Options tab
Download from Wow! eBook <www.wowebook.com>
Formatting Text
Chapter 10: Text
273

Next to the Options tab in the dialog box is the ActionScript tab, as shown in
Figure 10-6. Under this tab, you can export for ActionScript use and set a link-
age class name, as is possible in previous versions of Flash Professional. At the
top of this dialog box, you’ll notice an Outline format section with options
for Classic and TLF text. Classic text includes dynamic and input text fields,
and TLF is a new text field type that stands for Text Layout Framework,
which we’ll discuss at the end of the chapter. If you embed an OpenType or
TrueType font, you can choose the appropriate outline format for the kind of
field you intend to use: Classic for Classic text fields, and TLF for Text Layout
Framework fields.
Figure 10-6. A detail of the ActionScript tab from Flash Professional CS5’s Font
Embedding dialog
Regardless of which version of Flash Professional you use, you end up with
the same thing at this point: a Font Symbol that can be instantiated at run-
time using ActionScript.
ActionScript
Once your symbol has been embedded and given a linkage name, you’re
ready to use it in a
TextFormat instance. The following code, found in the
embed_font.fla source file, uses embedded fonts and the
VerdanaPlain font
symbol created in the previous sections. Line 1 instantiates the font symbol,
and line 4 applies the embedded font to the
font property of the text format.
Download from Wow! eBook <www.wowebook.com>
Part III: Text
274
Formatting with HTML and CSS
This is a very important step because it can be counterintuitive. You can’t set
the property to the class or instance reference from line 1, and you can’t use

a string, like “Verdana.” You must specify the
fontName property of the font
symbol instance. Finally, line 14 sets the
embedFonts property to true.
1 var verdanaPlain:Font = new VerdanaPlain();
2
3 var txtFmt:TextFormat = new TextFormat();
4 txtFmt.font = verdanaPlain.fontName;
5 txtFmt.size = 8;
6 txtFmt.bold = true;
7
8 var txtFld:TextField = new TextField();
9 txtFld.x = txtFld.y = 20;
10 txtFld.width = 300;
11 txtFld.defaultTextFormat = txtFmt;
12 txtFld.text = "Hello World!";
13 txtFld.
selectable = false;
14 txtFld.embedFonts = true;
15 addChild(txtFld);
Using Custom Anti-Aliasing
Once you use an embedded font, you can take advantage of custom anti-
aliasing options. By setting the
antiAliasType property to ADVANCED using the
AntiAliasType class, you can control the thickness of the text (using a range
of –200 to 200, thinner to thicker) and its sharpness (using a range of –400 to
400, blurrier to sharper). Custom anti-aliasing can be used on any type size
and is one way to achieve an effect that is more pronounced than a plain font,
but not quite as strong as a bold font. It’s also good for softening the edges
of fonts to better meld with background art, and it’s particularly useful for

improving the legibility of small type sizes.
The following code, when added to the example in the prior section, will
adjust the text to maximum thickness and a little less sharp. This adaptation
is found in the embed_font_custom_anti-alias.fla source file.
1 txtFld.antiAliasType = AntiAliasType.ADVANCED;
2 txtFld.thickness = 100;
3 txtFld.sharpness = -100;
Formatting with HTML and CSS
The TextFormat class is great for case-by-case uses. But managing a large
ActionScript project this way might become unwieldy if several formats are
required and all must be manually applied. An alternative to this approach is
to use HTML and CSS to style the project globally.
N O T E
Although it may sound strange, assets
are often easier on the eye when their
edges are softened a bit. It’s quite com-
mon, for example, to apply a very slight
blur to shapes, text, and even video
(during the compression process). There
are a few ActionScript features that will
do this for you automatically, such as
the image smoothing option, which will
soften images by a preset amount.
How different people see text is too var-
ied to rely on a single preset of this kind,
so ActionScript’s custom anti-aliasing
features allow you to tweak the appear-
ance of the text to your liking.
N O T E
This material assumes you are familiar

with HTML and CSS. For more infor-
mation, see />HTML and />wiki/CSS for background and additional
resource links.
N O T E
The emb ed_font_custom_anti-alias_
click.fla source file adapts this further
by toggling between custom anti-alias
settings with a mouse click. It applies
a subtle setting to show the improved
legibility that custom anti-aliasing can
bring to small font sizes.
Download from Wow! eBook <www.wowebook.com>
Formatting with HTML and CSS
Chapter 10: Text
275
Hypertext Markup Language (HTML)
Flash supports a limited subset of HTML tags, as seen in Table 10-1.
Table 10-1. The HTML tags supported by Flash Player
HTML Tag Notes
<font> Supported attributes include: color, face, size.
<b>
Bold version of font must exist to work.
<i>
Italic version of font must exist to work.
<u>
Underlines text.
<span> Supported attributes include: class.
<p> multiline must be enabled to work; supported attributes include: align and class.
<br> multiline must be enabled to work.
<li>

All lists are bulleted; ordered and unordered qualifiers are ignored.
<img> Supported attributes include: src, width, height, align, hspace, vspace, and id; can embed external
images (JPG, GIF, PNG) and SWF files with automatic text flow around the images.
<a> Supported attributes include: href and target.
<textformat> Used to apply a limited subset of TextFormat properties to text; supported attributes include:

blockindent, indent, leading, leftmargin, rightmargin, and tabstops.
To use HTML in a text field, you need only switch from using the text prop-
erty to using the
htmlText property. For example, the following code will put
the word “ActionScript,” in bold, into a text field:
txtFld.htmlText = "<b>ActionScript</b>";
If you are seeing unexpected results, you should look closely at Table 10-1 for
anything that might vary from what you have written, and to ensure Flash-
specific requirements have been fulfilled for a particular tag to function. For
example, it should make sense that line breaks (through use of
<p> or <br>
tags) require a
multiline field, because you can’t have a line break if more
than one line isn’t supported. However, it may not be obvious that
<ol> and
<ul> have no effect on list items, resulting in bullets for all lists.
CSS
ActionScript also supports a limited subset of CSS properties, as seen in
Table 10-2. Style sheets require a bit more setup than just using the
htmlText
property to populate fields. We’ll begin by demonstrating how to create style
objects with code, and then the last section of the chapter will describe how
to load both the HTML and CSS data from external files.
N O T E

The efficient appendText() method
does not work with HTML, so you must
use traditional compound addition (
+=)
to append HTML text to a field.
Download from Wow! eBook <www.wowebook.com>
Part III: Text
276
Formatting with HTML and CSS
Table 10-2. The CSS properties supported by Flash Player
CSS Property AS3 Property Notes
color color
Font color in “#RRGGBB” format.
display display Controls display of an item. Values include: none, block, and inline.
font-family fontFamily
Font name in comma-separated list to indicate priority; device fonts
also supported using the following conversions:
mono = _typewriter,
sans-serif = _sans, and serif = _serif.
font-size fontSize
Font size in pixels.
font-style fontStyle Font style. Values include: italic and normal.
font-weight fontWeight Font style. Values include: bold and normal.
kerning kerning Turns kerning on or off. Value can be true or false.
leading leading
Number of pixels added after each line. A negative value condenses the
space between lines.
letter-spacing letterSpacing
Specified in pixels.
margin-left marginLeft

Specified in pixels.
margin-right marginRight
Specified in pixels.
text-align textAlign Aligns text. Values include: left, right, center, and justify.
text-decoration textDecoration Underlines text. Values include: underline none.
text-indent textIndent
First-line paragraph indent specified in pixels.
The process of building a style sheet involves creating an instance of the
StyleSheet class, and then adding styled objects for each tag or class to the
instance. For each tag or class, you create a custom object to which the rel-
evant CSS properties are added. Once complete, each object is associated with
the tag or class and added to your style sheet using the
setStyle() method.
In the following example, seen in html_css.fla, line 1 creates the style sheet,
lines 3 through 21 create styles for the
body HTML tag, heading CSS class,
byline CSS class, and a (anchor) HTML tag respectively. Finally, lines 23
through 26 add each style to the
css instance of the StyleSheet class.
1 var css:StyleSheet = new StyleSheet();
2
3 var body:Object = new Object();
4 body.fontFamily = "Verdana";
5 body.textIndent = 20;
6
7 var heading:Object = new Object();
8 heading.fontSize = 18;
9 heading.fontWeight = "bold";
10 heading.textIndent = -20;
11 heading.letterSpacing = 1;

12 heading.color = "#FF6633";
13
14 var byline:Object = new Object();
15 byline.fontSize = 14;
16 byline.fontStyle = "italic";
17 byline.textAlign = "right";
Download from Wow! eBook <www.wowebook.com>
Formatting with HTML and CSS
Chapter 10: Text
277
18
19 var a:Object = new Object();
20 a.color = "#990099";
21 a.textDecoration = "underline";
22
23 css.setStyle(".heading", heading);
24 css.setStyle(".byline", byline);
25 css.setStyle("body", body);
26 css.setStyle("a", a);
The remainder of the script creates and sets up a text field, and then popu-
lates it with HTML. Remember, the
appendText() method will not work
when using the
htmlText property. Instead, you must use the compound
assignment operator for addition.
More importantly, however, we must stress that the style sheet must be
applied before the HTML is added to the field. If you don’t follow this rule,
the style sheet won’t be applied. In this example, the style sheet is applied in
line 33, before the HTML is added to the field beginning at line 34.
27 var txtFld:TextField = new TextField();

28 txtFld.x = txtFld.y = 20;
29 txtFld.width = 500;
30 txtFld.autoSize = TextFieldAutoSize.LEFT;
31 txtFld.multiline = true;
32 txtFld.wordWrap = true;
33 txtFld.styleSheet = css;
34 txtFld.htmlText = "<body>";
35 txtFld.htmlText += "<span class='heading'>ActionScript 10.0 Adds
Time Travel</span><br><br>";
36 txtFld.htmlText += "<span class='byline'>by Walter Westinghouse</
span><br><br>";
37 txtFld.htmlText += "<p>January 1, 2015. The rumors swirling around
the tech community recently have been confirmed today as lead Flash
Player engineer, Dr. Eldon Tyrell, announced that ActionScript 10.0
will support time travel. Ever since the concept of time travel was
popularized by H. G. Wells in 1895, humans have yearned for the
ability to travel through time, and now it's a reality.</p><br>";
38 txtFld.htmlText += "<p>Flash Player QA lead Roy Batty, agreed.
\"We're happy to add this feature to human BioChips everywhere using
the standard Express Install Opt-In process. Flash Player has long
been a leader in bringing immersive experiences to humans. Just
search <a href=\"\" target=\"_blank\">Google</
a> for your favorite feature and you'll likely find that it's
supported.\"</p><br>";
39 txtFld.htmlText += "<p>Users of the antiquated \"desktop computing\"
model can't take advantage of this feature, nor can users of the
recently standardized HTML5.</p>";
40 txtFld.htmlText += "</body>";
41 addChild(txtFld);
Escaping quotation marks

Finally, note that lines 38 and 39 contain quotes within quotes. This would
ordinarily be a problem because the second quotation mark would balance
the first quotation mark and close a string. Typically, prematurely closing a
Download from Wow! eBook <www.wowebook.com>
Part III: Text
278
Triggering ActionScript from HTML Links
string will cause a syntax error of some kind, but it virtually always results
in unexpected behavior.
However, this file has no problem because the nested quotes have been escaped
just like the tab and new line characters in the “Tab Stops” section of this chap-
ter. The backslashes, when used as part of a string, prevent the characters from
functioning like quotation marks and make them behave instead like any other
character. It’s also possible to nest single quotes within double quotes when a
double-quote is not required. This is demonstrated in lines 35 and 36.
Triggering ActionScript from HTML Links
In addition to supporting standard HTML links, ActionScript can trigger
functions from anchor tags. Simply replace the Internet protocol
http:// with
event: and ActionScript will fire a TextEvent.LINK event that can trigger a
listener function.
The following example, seen in text_event_link.fla, shows both a conventional
http:// link and ActionScript event: link in action. The traditional link is in
line 10. The ActionScript
event: link is in line 12. The link is still constructed
using the anchor tag and href attribute but, instead of pointing to a URL, a
string is specified—in this case, “showMsg.” An event listener is added to the
field in line 11, listening for the
TextEvent.LINK event.
When a user clicks the conventional link, the normal behavior ensues auto-

matically. Flash Player launches or switches to the default browser and navi-
gates to the site. However, when the user clicks the “Show Message” link, the
listener traps the event and calls the
linkHandler() function, passing the link
information into the argument. To demonstrate one way to handle many links,
a conditional queries the text passed in from the event. If the incoming text
matches a specific string, the listener traces a message to the Output panel.
1 var txtFmt:TextFormat = new TextFormat();
2 txtFmt.size = 18;
3 txtFmt.bullet = true;
4 txtFmt.color = 0x990099;
5
6 var txtFld:TextField = new TextField();
7 txtFld.autoSize = TextFieldAutoSize.LEFT;
8 txtFld.multiline = true;
9 txtFld.defaultTextFormat = txtFmt;
10 txtFld.htmlText = "<a href=''>Search</a>";
11 txtFld.htmlText = "<br />";
12 txtFld.htmlText += "<a href='event:showMsg'>Show Message</a>";
13 txtFld.addEventListener(TextEvent.LINK, linkHandler,
14 false, 0, true);
15 addChild(txtFld);
16
17 function linkHandler(evt:TextEvent):void {
18 if (evt.text == "showMsg") {
19 trace("Dynamic links are useful");
20 }
21 }
N O T E
If you are familiar with prior versions of

ActionScript, the
event: protocol replac-
es the
asfunction: protocol.
Download from Wow! eBook <www.wowebook.com>