| Using HTML tags in strings of text is not the only way to style text dynamically: TextFormat objects afford you all of the formatting power of HTML and more! As nothing more than special objects containing formatting properties for character and paragraph styles, TextFormat objects offer similar functionality to cascading style sheets (CSS). Once a TextFormat object has been defined, that object is then "applied" to a text field or section of text in a field, causing the affected text to take on the formatting style described by the object. A TextFormat object can be created and defined in one of two ways. Take a look at the following syntax: myStyle = new TextFormat(nameOfFont, size, color, bold, italic); In this syntax, a TextFormat object is created and its formatting settings configured simultaneously. An example use of this syntax looks like the following: myStyle = new TextFormat("Arial", 12, 0x336699, true, true); NOTE You can configure many additional formatting settings using the constructor function.
The preceding syntax creates a TextFormat object named myStyle . This object represents a format that uses the Arial font at a point size of 12, the color blue, and in bold and italic. To create the same TextFormat object using the alternative syntax, you would use the following: myStyle = new TextFormat(); with(myStyle){ font = "Arial"; size = 12: color = 0x336699; bold = true; italic = true; } The above syntax uses a with statement to configure various formatting properties of the newly created object. Either way works, but the latter is generally easier to read and use. Once you've created a TextFormat object, you can apply it to text in a field in several different ways to all of the current text in the field, to a portion of the current text in the field, or to any new text entered into the field. Take a look at the following examples: myField.setTextFormat(myStyle); The above script will cause all text in the myField text field to be displayed in the formatting style described by the myStyle TextFormat object. Even if the text had been previously styled (using a different TextFormat object), that style would be overwritten with the newly applied style. To apply a TextFormat object to a single character in a text field, you would use the following syntax: myField.setTextFormat(27, myStyle); This script will cause the character at index position 27 to take on the style defined by the myStyle TextFormat object. To style a range of characters in a field, you would use the following syntax: myField.setTextFormat(10, 50, myStyle); This script will cause the characters between index positions 10 and 50 to take on the formatting style described by the myStyle TextFormat object.  If you want the current text in the field to maintain its formatting while styling any new text entered into the field, you would use the setNewTextFormat() method instead. Take a look at the following syntax: myField.setNewTextFormat(myStyle); Using the above script, nothing in the myField text field will change initially, but any new text entered into it (either by the user or via ActionScript) will take on the character and paragraph formatting defined by the myStyle TextFormat object. This applies to new text entered at the end of any text currently in the field. If the insertion point is moved somewhere in the middle of the text, then that text will take on the same formatting as the character just to the right of the insertion point. You may sometimes need to know what formatting has been applied to a specific character or an entire text field (that is, which TextFormat objects have been applied), so that you can copy and apply that formatting elsewhere. You can get this information by using the getTextFormat() and getNewTextFormat() methods. To understand how these methods work, keep in mind that when you apply a TextFormat object to text in a field, Flash keeps a record of it, so to speak. For example, take a look at the following script, which assigns the myStyle TextFormat object to the myField text field: myField.setTextFormat(myStyle); Later, if you wanted another text field to be styled in the same way but weren't sure what style had been applied, you could use the following script to find out: newStyle = myField.getTextFormat(); The above script creates a new TextFormat object named newStyle that's automatically defined with the same formatting and character settings as the TextFormat object currently applied to myField. The newStyle TextFormat object can then be applied to text fields in the manner described above. Just as the setTextFormat() method allows you to apply a format to a specific character or range of characters (as opposed to an entire field), the getTextFormat() method allows you to retrieve formatting data that exists at a specific character index or range of characters. Take a look at the following: newStyle = myField.getTextFormat(27); This script creates a new TextFormat object named newStyle that's automatically defined with the same formatting and character settings as the TextFormat object currently applied to the character at index position 27. If you want to retrieve the formatting that is being applied to new text entered into a field (as set with the setNewTextFormat() method), you would use the following syntax: otherStyle = myField.getNewTextFormat(); This script creates a TextFormat object named otherStyle that's automatically defined with the same formatting and character settings as the TextFormat object currently set to new text entered into the myField text field. NOTE The setTextFormat() , setNewTextFormat() , getTextFormat() , and getNewTextFormat() methods are actually Text Field object methods. We're discussing them here because you need to understand TextFormat objects to understand and use those methods.
TextFormat objects have numerous properties that can be set to describe the formatting the object represents. Many are self-explanatory, including align, bold, color, left margin, right margin, and so on. The following describes a few properties that you might not be familiar with. font. This property which represents the font face used by the object is a string value such as "Arial" or "Times New Roman." Using the getFontList() method of the Text Field object, you can apply virtually any font face the user currently has installed on his or her machine. (We'll demonstrate the use of this property in the following exercise.) tabStops. This property represents the distance (in points) the caret will move within a field when the Tab key is pressed. This property's value is set by referencing the name of an array that contains positive numbers. For example, the following creates an array with five numbers: myTabStops = [4, 20, 36, 52, 70]; . To use the values in this array to set the tabStops property of the style1 TextFormat object, you would use the following syntax: style1.tabStops = mytabStops; . Any field that uses this TextFormat object will tab at 4, 20, 36, 52, and 70 points. target. This property which is used in conjunction with the url property (see below) represents the window in which a URL will open when requested. This is similar to the target setting used with HTML. url. This property represents a URL to which the text formatted as a TextFormat object is hyperlinked. This is a string value such as, "http://www.macromedia.com." TextFormat objects also have a method available to them: getTextExtent() . This method is used to determine the width and size a string of text will be if it is styled in the specified TextFormat. Take a look at the following example: sizeInfo = myStlye.getTextExtent("I have GOT to quit eating donuts!"); This creates a generic object named sizeInfo with two properties, width (sizeInfo.width ) and height (sizeInfo.height ), which contain the respective size values of the specified text if styled using the myStyle TextFormat object. This data can be compared against the size of a particular text field to see if the specified text can be placed and displayed in that text field without scrolling.  In the following exercise, we'll access your computer's fonts to create TextFormat objects and apply them in various ways to the movingField text field that we created in the previous exercise. -
Open flashWriter2.fla in the Lesson13/Assets folder. We will continue to build on the file you used in the previous exercise. In this exercise, you'll add script to Frame 1 of the Actions layer, script our buttons, and use the Checkbox component to facilitate part of our project's functionality. -
With the Property inspector open, select the Checkbox component. The most important thing to know about this component is that its instance is applyToAll. Knowing this, we can use the getValue() method (available to Checkbox components) to determine whether it's currently checked (true ) or not (false ), then act accordingly. For example, if this component were currently checked, the following script would place a value of true into the currentValue variable: currentValue = applyToAll.getValue(); -
With the Actions panel open, select Frame 1 of the Actions layer and add this script to the end of the current script: myFonts = TextField.getFontList(); This script creates an array named myFonts , which contains the names (as string values) of all fonts on the Flash Player host system (including fonts in the SWF file and any loaded asset SWF files). For example, on my machine, after running the script above, myFonts[3] has a value of "Arial." You can work with this array in the same manner you would any other array. The various values in this array will be used to randomly set font face styles for several TextFormat objects we will create. NOTE When using the getFontList() method, you don't reference a particular text field instance name (as you might think). Instead, you simply use TextField (see example script above). -
Add the following lines of script just below the current script: styleStatus = new TextFormat() with(styleStatus){ font = myFonts[random(myFonts.length)]; color = 0x858273; size = 16; bold = true; } The first line of the above script creates a new TextFormat object named styleStatus . In a moment, you'll see how this object dictates the appearance of the text in the statusField text field. The with statement that follows the object's creation is used to define several of its formatting parameters. Although most of the settings are fairly easy to understand, let's take a look at the line that sets the font property. The value of this property is set based on a random index value of the myFonts array. The expression uses the length of the myFonts array to generate a random number from all possible index values in the array. Thus, if the array has a length of 200, the number generated will be between 0 and 199. That random number is then used to set the index value of one of the font names in the myFonts array. If, for example, the number generated is 37, the expression would be evaluated as follows: font = myFonts[37]; If the string value at that index is "DiscoMonkey," that's the name of the font face assigned to this TextFormat object. To apply the formatting of this new TextFormat object to the statusField text field, we need to use the setTextFormat() method, which we'll do in the following step. -
Modify the updateStatus() function definition as shown: function updateStatus(){ statusField._x = movingField._x; statusField._y = (movingField._y + movingField._height) + 10; statusField.text = movingField.length; statusField.setTextFormat(styleStatus); }  Note the last line of script that we added to this function definition: You'll remember that this function is used to update the position and text displayed in the statusField text field. The last line of script uses the setTextFormat() method to set the format of the statusField text field to that described by the styleStatus TextFormat object. By placing this line of script in the function definition, should the format description of the styleStatus object ever change, those changes would be reflected in the statusField when the function is called. -
Add the following script to the end of the current script on Frame 1: style1 = new TextFormat() with(style1){ align = "left"; bold = false; color = 0x1A1917; font = myFonts[random(myFonts.length)]; indent = 0; italic = true; leading = 0; leftMargin = 20; rightMargin = 20; size = 20; target = null; underline = false; url = null; } This script creates another TextFormat object named style1 . The with statement that follows defines the formatting properties of that object. Note that the properties bold , indent , leading , target , underline, and url are set to false , 0 , or null in essence indicating that this TextFormat object should not use these properties. Although the TextFormat object could be defined even if we removed these lines of script, we've set them as shown for a reason. Assume you applied a TextFormat object (whose bold property was set to true ) to a text field. The text in that field would appear in bold simple enough. Now assume you applied a different TextFormat object (whose bold property was not explicitly set as shown above) to that same field. In this case, the text in that field would still appear bold, although it would take on the other characteristics of the newly applied TextFormat object. In order for a formatting characteristic to change when applying a new TextFormat object, that new object must specifically define a different value otherwise the old value (and its affect) remains. This same principle applies when using the setNewTextFormat() method as well. Thus, it's good practice to always define something to property values so that you get the results you intended. -
Add this script to the end of the current script on Frame 1: style2 = new TextFormat() with(style2){ align = "center"; bold = false; color = 0xCC0000; font = myFonts[random(myFonts.length)]; indent = 0; italic = false; leading = 15; leftMargin = 0; rightMargin = 0; size = 14; target = null; underline = false; url = null; } This script creates another TextFormat object named style2 . NOTE The accompanying source file for this exercise has defined two additional TextFormat objects, style3 and style4 . To avoid redundancy (since these objects are very similar to the ones already defined) as well as to save trees, we're not including the syntax for these two objects here. We've now defined all of the TextFormat objects that our project will use. Before we put them to use, however, we need to tweak the script's flow in Frame 1 just a bit. -
Move the updateStatus() and reshapeBox() function calls from just above where it says myFonts = TextField.getFontList(); to the end of the script on Frame 1.  As always, it's a good idea to put all initial function calls at the end of a script here, there's an especially good reason. You'll remember that in Step 5 we modified the updateStatus() function to include a line of script that uses the styleStatus TextFormat object. If we had left that function call where it was, the updateStatus() function would have been called just a split-second before the script that creates and defines the styleStatus TextFormat object resulting in a minor bug, since you can't use something before it's been created. By moving the function calls to the end of the script, we're assured that all objects are created and defined first. The last thing we need to do is script our buttons. -
With the Actions panel open, select Button 1 and add this script: on(release){ if (_root.applyToAll.getValue()){ movingField.setTextFormat(style1); movingField.setNewTextFormat(style1); }else{ movingField.setNewTextFormat(style1); } updateStatus(); reshapeBox(); } This script takes one of two actions, depending on whether the Checkbox component (named applyToAll), discussed earlier, is checked or unchecked when the button is clicked. The if statement says that if its value is true (it is checked), apply the style1 TextFormat object to all currently displayed text in the movingField text field (setTextFormat() ), as well as any new text entered into that field (setNewTextFormat() ). This will cause the text in that field to immediately reflect the new formatting style. If the checkbox's value is false (else ), the style1 TextFormat will only be applied to new text entered. After either one of these sets of actions has executed, the updateStatus() and reshapeBox() functions are called to handle any changes that need to be made to the statusField text field and the box movie clip instance as a result of the new formatting applied. -
To avoid redundancy, place similar scripts on Buttons 2, 3, and 4, but modify them where it says style1 to read style2 , style3 , and style4 , respectively. -
Choose Control > Text Movie to test the project. When the movie appears, test the various buttons in conjunction with the checkbox to see the effect that it has on the text in the movingField text field. All the functionality from the previous exercise should be retained as well. -
Close the test movie and save your work as flashWriter3.fla. This completes the exercise and the lesson! As you've learned, you can work with and manipulate text input by the user in numerous ways. ActionScript provides the means to validate many types of data as well as to format it using HTML and TextFormat objects. With the skills you've learned here, you've ready to make text and user input a greater part of your project's interactivity. |
