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 http://en.wikipedia.org/wiki/ HTML and http://en.wikipedia.org/ 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=\"http://www.google.com\" 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='http://www.google.com'>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> . HTML and CSS Chapter 10: Text 275 Hypertext Markup Language (HTML) Flash supports a limited subset of HTML tags, as seen in Table 1 0- 1. Table 1 0- 1. The HTML tags supported by Flash Player HTML Tag. 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. Professional CS3 or CS4 is to create a new font symbol from the Library panel’s menu, seen in Figure 1 0- 2. In the resulting Font Symbols Properties dialog—Figures 10 -3 (CS3) and 1 0- 4 (CS4)—choose