Controlling Text Field Properties


Input and Dynamic text fields have several properties that are accessible with ActionScript. In this section, you learn how to control the scrolling and font rendering properties of the TextField class.

Scroll Properties

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.

  • scroll: This property can retrieve the current line number (from the top of the field), and it can also move to a new line number in a text field.

  • maxscroll: This property returns the maximum value of the scroll property for a given text field. You can only retrieve this value — you cannot set it.

Note 

The scroll property advances text line by line in the viewable area of the TextField instance. To learn more about pixel-level scrolling, see the new Flash 8 coverage later in this chapter.

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 tArticle, which only has a viewable area of five lines, then the remaining five lines of the sText 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 btDown:Button; var tArticle:Text; btDown.onRelease = function():Void {   tArticle.scroll = tArticle.scroll + 1; }; 

or

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

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

Tip 

Flash 8 has a TextArea component that automatically creates a text field and scroll bar. You can find more information on User Interface components in Chapter 33, "Using Components."

On the CD-ROM 

In the ch30/scroll folder of this book's CD-ROM, you will find a Flash document named scrollProp_simple.fla. This movie demonstrates the use of the scroll property to view the entire Gettysburg Address within a text field. A more advanced scrolling mechanism can be found in the scrollProp_advanced.fla file, which features a draggable scroll bar.

Text Rendering Properties

Flash Player 8 adds incredible text rendering advancements to your Flash text. The new antialiasing 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:

  • antiAliasType:String: This property controls whether or not the TextField instance uses the new FlashType rendering engine. If you set a TextField instance's antiAliasType property to "normal," the instance renders text just as it did in Flash Player 7 or earlier. If you set the property to "advanced," the text in the field is displayed with the new FlashType engine.

  • thickness:Number: This property controls the thickness of the glyph edges in the TextField instance and is only applied if the antiAliasType mode is set to "advanced." The value for this property can be in the range of -200 (less thick) to 200 (more thick).

    Note 

    A glyph refers to any individual character in the font face. The letter "a," for example, is a glyph.

  • sharpness:Number: This property controls the sharpness (or softness) of glyph edges in the TextField instance. Acceptable values are in the range of -400 (softer) to 400 (sharp). This property only affects text rendered with the "advanced" value of the antiAliasType property.

    Tip 

    In general, we have found that you don't need to tweak thickness and sharpness values of TextField instances. However, you may find a particular font that requires some finessing to get the level of readability you desire.

  • gridFitType:String: This property controls how the pixels of text are rendered when the antiAliasType property is set to "advanced". There are three acceptable values:

    • "none": This value specifies that there is no special grid fitting applied to the text rendering.

    • "pixel": This value forces the text to be rendered against actual pixels of the computer monitor, rather than across multiple pixels (which would blur the text). If the TextField instance is set to use "advanced" for antiAliasType, the "pixel" value is the default value of gridFitType. This value is best used for left-aligned text fields.

    • "subpixel": This value forces the text to be rendered on a subpixel grid, which is best for right-aligned or justified text fields. This value can only be used with TextField instances that have the antiAliasType property set to "advanced."

Caution 

You must build Flash Player 8-compatible movies in order to use these new TextField properties. Also, these new settings only apply to text that uses embedded fonts. If you are using device fonts with text, then you will not see any changes applied to your text.

Working with Author-Time TextField Instances

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

  1. Create a new Flash document, 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 tDisplay1. Make sure you choose Anti-alias for animation and Multiline (see Figure 30-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 30-6. Remember, you can't use the new anti-aliasing features unless you have embedded the font used by the TextField instance.

  5. Duplicate the tDisplay1 field by selecting the instance on the Stage and choosing Edit ð Duplicate (Ctrl+D or z+D). Place the new instance to the right of the original instance, and in the Property inspector, rename the instance tDisplay2. Also, change the aliasing setting to Anti-alias for readability, as shown in Figure 30-7.

    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 image from bookimage from book

    Tip 

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

  7. Save the document, and test it (Ctrl+Enter or z+Enter). The left field should show the regular anti-aliasing quality of the text, which is difficult to read at 10-point. As shown in Figure 30-8, though, the right field uses the new FlashType engine, which greatly improves its legibility.

image from book
Figure 30-5: The settings for the tDisplay1 field

image from book Figure 30-6: The Character Embedding options

image from book
Figure 30-7: The settings for the tDisplay2 field

image from book
Figure 30-8: The two primary settings for anti-aliasing in Flash Player 8 movies.

On the CD-ROM 

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

Controlling Anti-Aliasing with Runtime TextField Instances

In this section, you learn how to use ActionScript to create TextField instances and set their anti-aliasing 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 run time, 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 30-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 tEmbed1. Choose your preferred font face for the field; for this example, we used Verdana. Click the Embed button and select the same ranges shown earlier in Figure 30-6.

    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 30-6, using a Dynamic text instance on the Stage only adds 12 KB to your Flash movie file (.swf) size.

  4. Because the HTML option is enabled on the tEmbed1 field, 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 30-10.

    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 30-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 tDisplay1 uses the "normal" value for the antiAliasType property, while tDisplay2 uses the "advanced" value. Note that the image from book image from book

     var tDisplay1:TextField; var tDisplay2:TextField; var ssMovie:TextField.StyleSheet; var sText:String = "<p class='heading'><b>Typing Lessons 101</b></p> image from booktDisplay1.antiAliasType = "normal";    tDisplay2.antiAliasType = "advanced";    tDisplay1.htmlText = tDisplay2.htmlText = sText; } init(); 
    image from book

    Tip 

    This script also creates an inline style sheet, ssMovie. The local variable sStyles 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.

  6. Save the Flash document, and test it (Ctrl+Enter or z +Enter). As shown in Figure 30-11, you should see similar anti-aliasing results as you saw in the last section.

image from book
Figure 30-9: The settings for the tEmbed1 field

image from book
Figure 30-10: The abc text with styles applied to the b and c characters.

image from book
Figure 30-11: The two text fields with "normal" anti-aliasing (left) and "advanced" anti-aliasing (right).

On the CD-ROM 

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

Comparing Anti-Aliasing Effects

To help demonstrate the new sharpness and thickness properties of the TextField class, open the flashtype_200.fla file located in the ch30 folder of this book's CD-ROM. On the Stage of this document, you'll see an instance of the displayClip symbol, named mcDisplay. If you test the Flash movie (Ctrl+Enter or z+Enter), you can type text into the Input text field, and change the anti-aliasing mode of the field. You can also change the alignment of the field, the grid fitting value (gridFitType), as well as the thickness and sharpness values of the "advanced" anti-aliasing mode.

On the CD-ROM 

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 ch30 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 anti-aliasing values.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net