You can use the following HTML tags to format your Flash text fields. You can insert these tags into ActionScript variable values, or you can apply them (without knowing or writing the syntax) using the Property inspector. As you already know, text fields in ActionScript are real objects with instance names. As such, you need to address specific properties of the TextField object to insert HTML text. In previous chapters, you've used the following syntax to assign text to a text field instance:

var lastNameField:TextField;
   lastNameField.text = "Enter your last name here";

You cannot assign HTML tags in the text property of a TextField object. You must use the htmlText property to assign HTML formatted text, such as:

var lastNameField:TextField;
   lastNameField.html = true;
   lastNameField.htmlText = "Enter your <b>last<b> name here.";

Here, the <b>tag is used to bold the text "last" in the text field instance. In a moment, you will create your own examples that use the htmlText property. You also need to set the html property of the TextField instance to true, to let the Flash Player know that it should parse the HTML text you specify for the htmlText property. Let's review the HTML tags that are available in ActionScript.

<a href='http://www.theMakers.com'>the Makers Web site</a>

You don't necessarily need to write out HTML tags to apply them to your Flash text. You can use the Property inspector to assign HTML formatting to all Text types (that is, Static, Input, and Dynamic). For Input and Dynamic text fields, you need to enable HTML formatting by pressing the Render text as HTML button in the Property inspector. In this section, we demonstrate the use of HTML formatting within Static and Dynamic text fields.

Figure 31.2. URL-linked text appears with dashed underlines. You will not see this dashed underline in the actual Flash movie file (.swf).

Try making another example with your own text and URL links. You can even add javascript: commands to URL links.

In this section, we continue with the previous example that you created in the last section. You convert the Static text block into a Dynamic text field and manipulate the formatting with ActionScript.

You can also use variables in expressions for HTML-formatted text fields, such as the following (note that the bookURL variable and value should appear on one line of code):

var bookURL:String = "http://www.flashsupport.com";
var bookTitle:String = "Flash CS3 Bible";
bookField.htmlText = "<a href="" + bookURL + "">" + bookTitle + "</a>";

By using other ActionScript variables and methods, you can apply specific text formatting to external data sources that have been loaded into the Flash movie, such as database records or lists. In the next section, you learn how to format text within text fields using the TextFormat object in ActionScript.

ActionScript offers a wide range of options for the TextField object. Many properties of the MovieClip object, such as _x and _y, can be controlled with TextField objects, too. One interesting method of the TextField object is the setTextFormat() method. This method enables you to control the formatting of text within a TextField object without relying on HTML tags. The setTextFormat() method works much like the setTransform() method of the Sound class that we cover in Chapter 27, "Interacting with Movie Clips." Like setTransform(), setTextFormat() requires another object— a TextFormat object — that contains individual properties and values in order to adjust the targeted instance's text contents.

In this section, you create a Flash movie that makes a dynamic text field on the fly and applies formatting to the field with the TextFormat object. You also use the TextFormat object to determine the dimensions of the TextField instance.

You can continue to develop this Flash document, adding more sites to the sitesField text field. You don't necessarily need to make more text fields— create more name variables (for example, name_2, name_3, and so on) and add their expressions together as the contents of the sitesField instance.

In this section, you learn how to load an external style sheet, as a Cascading Style Sheet (CSS) file, and apply its styles to text in a Flash movie. This capability is available in Flash Player 7 and higher movies.

.h1 {
   font-family: Verdana;
   font-weight: bold;
   font-size: 14px;
}

.h2 {
   font-family: Verdana;
   font-weight: bold;
   font-size: 12px;
}

p {
   font-family: Arial;
   font-size: 10px;
   color: #666666;
}

Applying the styles to Flash text

After you have the external style sheet loaded into a Flash movie, you're ready to apply the defined styles to text used in dynamic or input text fields. In the remaining steps, you learn how to apply each of the styles to text displayed in a dynamic text field.

1. In the Flash document that you created in the previous section, go back to frame 1 of the actions layer. Open the Actions panel (F9, or Option+F9 on Mac), and add the code shown in Listing 31.3 after the existing code. Note that the

   

   Line 1 establishes a variable named displayField. This variable will be used as a TextField instance later in the showText() function.

   Line 3 declares the function's name, showText. Remember that in Listing 31.2, the showText() function is invoked in the movieStyles.onLoad() handler.

   Lines 4 through 7 create a long string of text that will be inserted into the displayField field. Here, you can see that each of the styles is used, defined in the class attributes of various <span> tags. Since you defined a style for the p tag in the style sheet, that style is automatically applied to any text enclosed by <p></p> tags in HTML text. In line 14, the htmlText property of the tDisplay instance is set to the value of the sText variable.

   Line 8 creates a text field named displayField. Line 10 sets the styleSheet property of the displayField instance to movieStyles. Lines 11 through 13 set up basic properties of the displayField instance, enabling it to display HTML text (line 11), and display wrapping text over multiple lines (lines 12 and 13).

   Example 31.3. The showText() function

   1.  var displayField:TextField;
   2.
   3.  function showText():Void {
   4.     var fieldText:String = "<span class='h1'>Flash Player Style 
   
             Support</span><br/>";
   5.     fieldText += "<p>You can use style sheets in your Flash 
   
             Player 7 or higher movies.</p><br/>";
   6.     fieldText += "<span class='h2'>Supported styles</span><br/>";
   7.     fieldText += "<p>More text here...</p>";
   8.     displayField = createTextField("displayField",1,10,10,400,400);
   9.     with(displayField){
   10.       styleSheet = movieStyles;
   11.       html = true;
   12.       multiline = true;
   13.       wordWrap = true;
   14.       htmlText =fieldText;
   15.    }
   16. }

2. Save your Flash document, and test it. You should see nicely formatted text, specified by the details of the style sheet, as shown in Figure 31.3.

Figure 31.3. The formatted text

Note

You can find the completed files, styles.css and css_styles_100.fla, in the ch31 folder of this book's CD-ROM.

You can also use other nonsystem fonts in style sheets, but you'll need to make sure that you have created linked Font symbols in your movie's library or that you have created empty text fields that include the embedded fonts.

In this section, you learn how to load a JPEG image into a TextField object. Continue using the same Flash document you created in the last section.

Figure 31.4. The JPEG image with wrapping text

You can also use symbol linkage identifier names as the value of the src attribute of the <img> tag. However, you may find that if you use several <img> tags in a text field, not all of the images load and/or display. In some of our experiments, we noticed that text realigned itself when text with URLs was rolled over. Be sure to test your Flash movies with the latest Flash Player revisions, as Adobe releases them.

Not only can you use HTML formatting in Flash text but you can also execute Flash actions from your text fields using the <a> tag and a href attribute value of asfunction: function, argument. For example, if you wanted to link text to a function that loads a new Flash movie file (.swf) into a Movie Clip target, you can create a custom function that uses the loadMovie() action and reference that action from your <a href> tag for a text field. See the following code (note that the

var holder:MovieClip;
var displayField:TextField;
displayField.htmlText = "<a href="asfunction:getSWF,movie.swf"> 

  Click to load movie</a>";

function getSWF(path:String):Void{
  holder.loadMovie(path);
}

In this code example, the text within the <a></a> tags executes the getSWF() function, passing the string movie.swf as the path argument.

If you need to pass more than one argument, you will need to send all the values as one string separated by a comma (or preferred character). Then you would use the String.split() method as follows (note that the

var holder:MovieClip;
var displayField:TextField;
var htmlParams:String = "holder,movie.swf";
displayField.htmlText = "<a href="asfunction:getSWF," + 

  htmlParams + "">Click to load movie</a>";

function getSWF(args:String):Void{
   var params:Array = args.split(",");
   var mc:MovieClip = eval(params[0]);
   var path:String = params[1];
   mc.loadMovie(path);
}

In this example, the getSWF() function takes the args paramter and creates an array with the split() method. This array's name is params. The elements of the params array are the two string values separated by a comma in the htmlParams variable.

Two of the TextField class properties, scroll and maxscroll, control the viewable area of a text field that has more lines of text than the text field can show.

To understand how these properties work, you need to see how lines are enumerated in a text field. Suppose you had ten lines of text as a string value for a variable called myText. If you want to use this text in a Dynamic text field named articleField, which only has a viewable area of five lines, then the remaining five lines of the myText variable will not be seen in the text field. To make the text field "scroll" to the next line of text by showing lines 2 to 6 (instead of lines 1 to 5), you can create a Button instance, such as a down-arrow button, with ActionScript to advance the lines:

var downButton:Button;
var articleField:Text;
downButton.onRelease = function():Void {
  articleField.scroll = articleField.scroll + 1;
};

or

var downButton:Button;
var articleField:Text;
downButton.onRelease = function():Void {
  articleField.scroll += 1;
};

The maxscroll property returns the maximum value for the top line number in a text field. In our previous 10-line text value example, the maxscroll property would equal 6. If you had 20 lines of text in the articleField instance, then the .maxscroll property would return a value of 16.

Flash Player 8 and higher adds incredible text rendering advancements to your Flash text. The anti-aliasing engine for text is dubbed FlashType, and collectively refers to the properties of text fields that enable you to control the readability of text. In this section, you learn about the following TextField properties:

Working with author-time TextField instances

In this section, you learn how to apply the new antialiasing features to TextField instances that you place on the Stage at author-time.

1. Create a new Flash file (ActionScript 2.0), and save it as flashtype_100.fla.

2. Rename Layer 1 to fields.

3. Using the Text tool, add a Dynamic text field on the Stage. In the Property inspector, name the instance displayField_1. Make sure you choose Antialias for animation and Multiline (see Figure 31.5). You can use any font face you prefer, but use a small text size such as 10 point.

   Note

   Choosing the Anti-alias for animation setting in the Property inspector is the equivalent of setting the antiAliasType property to "normal" in ActionScript.

4. In the Property inspector, click the Embed button and select the ranges shown in Figure 31.6. Remember, you can't use the new antialiasing features unless you have embedded the font used by the TextField instance.

   

   Figure 31.5. The settings for the displayField_1 field

   

   Figure 31.6. The Character Embedding options

5. Duplicate the displayField_1 field by selecting the instance on the Stage and choosing Edit

   
   

   Figure 31.7. The settings for the displayField_2 field.

   Note

   Choosing the Anti-alias for readability setting is the same as setting the antiAliasType property to "advanced" in ActionScript.

6. To add some text to the fields, you will set the text property of the fields in ActionScript. Create a new layer named actions. Select frame 1 of the actions layer, and open the Actions panel. Add the following code to the Script pane. The

   

   var displayField_1:TextField;
   var displayField_2:TextField;
   var bodyText:String = "The quick brown fox jumps over 
   
     the lazy dog.";
   displayField_1.text = displayField_2.text = bodyText;

   Tip

   You can use more than one assignment operator ( = ) in an ActionScript expression. In this example, you first set the text property of the displayField_2 to the value of bodyText. Then, the text property of the displayField_1 is set from the same value.

7. Save the document, and test it (Ctrl+Enter or

   

Figure 31.8. The two primary settings for anti-aliasing in Flash Player 8 or higher movies.

Note

You can find the completed file, flashtype_100.fla, in the ch31 folder of this book's CD-ROM.

Controlling antialiasing with runtime TextField instances

In this section, you learn how to use ActionScript to create TextField instances and set their antialiasing properties.

1. Continue using the flashtype_100.fla file you created in the last section, or make a copy of the same file from this book's CD-ROM. Resave this file as flashtype_101.fla.

2. Delete the fields layer. You will re-create these fields in ActionScript.

3. Even though you will use ActionScript to create TextField instances at runtime, you still need to embed the font you want to use with your TextField instances. Create a new layer named embedded fonts. Using the Text tool, add a Dynamic text field to the document, preferably offstage above the Stage area, as shown in Figure 31.9. Type the text abc into this field. In the Property inspector, make sure the text field type is Dynamic Text, and name this instance embedField_1. Choose your preferred font face for the field; for this example, we used Verdana. Enable the HTML button (< >) for this instance as well. Click the Embed button and select the same ranges shown earlier in Figure 31.6.

   

   Figure 31.9. The settings for the embedField_1 field

   Note

   Some Flash designers and developers prefer to embed fonts by creating Font symbols in the document's Library panel. Font symbols are useful if you need every character (including a wide range of foreign language characters and ASCII art symbols) in your Flash movie, but they greatly increase your .swf file size. Adding the entire Verdana font face as a Font symbol, for example, adds 20 KB to your Flash movie file (.swf) size! But if you only need the character ranges shown in Figure 31.6, using a Dynamic text instance on the Stage only adds 12KB to your Flash movie file (.swf) size.

4. Because the HTML option is enabled on the embedField_1 instance, you can control the formatting of the abc characters you typed into the field. Select the b character, and bold it in the Property inspector. Select the c character and italicize it in the Property inspector. When you are finished, your field should resemble the one shown in Figure 31.10.

   

   Figure 31.10. The abc text with styles applied to the b and c characters

   Tip

   By adding the bold and italic styles to the tEmbed1 field, you are effectively embedding Verdana Bold and Verdana Italic font faces in the .swf file for this example. As such, you can use bold and italic formatting in TextField instances, with applied TextFormat instances or HTML text. You'll use HTML text later in this exercise. However, embedding these additional styles adds more weight to the SWF's file size. If you prefer to use Font symbols, you can add a new Font symbol for each font face style you want to embed.

5. Now you're ready to modify the ActionScript on frame 1 of the actions layer. The new script, shown in Listing 31.5, creates two TextField instances using the same instance names used in the previous section's example. Near the end of the init() function, notice that displayField_1 uses the "normal" value for the antiAliasType property, while displayField_2 uses the "advanced" value. Note that the

   

   Tip

   This script also creates an inline style sheet, movieStyles. The local variable styles in the init() function shows the inline style, which is exactly the same text you would insert into a CSS file. You can use the parseCSS() method of the StyleSheet class to convert a String value into a full-fledged style sheet.

   Example 31.5. Applying AntiAliasing to TextField Instances

   var displayField_1:TextField;
   var displayField_2:TextField;
   var movieStyles:TextField.StyleSheet;
   var fieldText:String = "<p class='heading'><b>Typing Lessons 101</b> 
   
     </p><p>The <i>quick</i> brown fox jumps over the lazy dog.</p>";
   
   init();
   
   function init():Void {
      movieStyles = new TextField.StyleSheet();
      var styles:String = "p { font-family: Verdana; font-size: 10; }";
      styles += ".heading { font-family: Verdana; font-size: 14; }";

   movieStyles.parseCSS(styles);
      displayField_1 = createTextField("displayField_1",1,25,25,200,100);
      displayField_2 = createTextField("displayField_2",2,250,25,200, 100);
      var fields:Array = [displayField_1, displayField_2];
      for(var i:Number = 0; i < fields.length; i++){
         var t:TextField = fields[i];
         with(t){
            html = true;
            border = true;
            multiline = true;
            wordWrap = true;
            selectable = true;
            embedFonts = true;
            styleSheet = movieStyles;
         }
      }
      displayField_1.antiAliasType = "normal";
      displayField_2.antiAliasType = "advanced";
   displayField_1.htmlText = displayField_2.htmlText = fieldText;
   }

6. Save the Flash document, and test it (Ctrl+Enter or

   

Figure 31.11. The two text fields with "normal" antialiasing (left) and "advanced" antialiasing (right).

Note

You can find the completed file, flashtype_101.fla, in the ch31 folder of this book's CD-ROM.

Comparing antialiasing effects

To help demonstrate the new sharpness and thickness properties of the TextField class, open the flashtype_200.fla file located in the ch31 folder of this book's CD-ROM. On the Stage of this document, you'll see an instance of the displayClip symbol, named display. If you test the Flash movie (Ctrl+Enter or

Note

You can run the flashtype_200.swf file directly in the stand-alone Flash Player or in a Web browser window. You can find this file in the ch31 folder of this book's CD-ROM. You can add more instances of the displayClip symbol on to the Stage of the Flash document (flashtype_200.fla) to have side-by-side comparisons of text and antialiasing values.

This method detects and returns the starting position of a highlighted selection in a text field. The method returns −1 if there is no active text field and/or there is no selection inside the text field. As with the Array object, selection indexes start position values at 0. You do not need to specify a target path for this method— only one text field can have a selection at any given point. Therefore, as a variable nIdx, the getBeginIndex() method would look like:

this.onMouseMove = function():Void {
var idx:Number = Selection.getBeginIndex();
trace("idx: " + idx);
};

In the Output panel, the trace() action would reveal idx = −1 until you made a selection within a text field in the movie, as shown in Figure 31.15.

Figure 31.15. A text field with a starting selection index of 3

Similar to the getBeginIndex() method, this method returns a number indicating the index position at the end of a highlighted selection in a text field, as shown in Figure 31.16. If there is no active selection, then a value of-1 is returned.

Figure 31.16. A text field with a starting selection index of 5 and an ending index of 9

This method of the Selection class returns the current cursor position (as an index value) within an active text field, as shown in Figure 31.17. As with the two previous methods, if you use the getCaretIndex() method when there is no active cursor in a text field, it returns a −1.

Figure 31.17. A text field with a caret index of 5

This method returns the current active text field's Var or instance name as an absolute path; that is, if you have selected or inserted the cursor position inside a text field instance named outputField on the Main Timeline, then Selection.getFocus() returns _level0.outputField. If there is no active text field, then this method returns null.

Perhaps the best enhancement to controlled text field activity is the setFocus() method. This method enables you to make a text field active automatically — the user doesn't need to click the mouse cursor inside the text field to start typing. To use this method, simply indicate the setFocus() method of the Selection class and the path to the text field as its argument:

Selection.setFocus(inputField);

This code sets the current focus to a TextField instance named inputField. If any text exists in the text field, it will be highlighted as a selection. You can only use string data types as the setFocus() argument for Flash Player 5 compatability, but you can use instance names for Flash Player 6 or higher.

Another method available for the Selection class is setSelection(). This method enables you to make a specific selection within an active text field. The method takes two arguments: a start index and an end index. Use the same index numbering as getBeginIndex() and getEndIndex(). Note that this method will not work unless a text field is already active. The following code creates a selection span from index 5 to 9 of an instance named inputField:

Selection.setFocus(inputField);
Selection.setSelection(5,9);