Although you're presented with a variety of options when creating and configuring text fields in the authoring environment, being able to create text fields on the fly while your movie is running gives you even greater control over the way your project handles text. Let's take a look at the dynamic creation process. To create a text field using ActionScript, you would use the createTextField() method, as follows: _root.createTextField(instanceName, depth, x, y, width, height); Now take a look at the following example, which uses the createTextField() method to create a text field: _root.createTextField("myField", 10, 20, 50, 200, 30); The above script creates a text field named myField on the root timeline, with its initial depth, x, y, width, and height properties set as shown. Although the above syntax creates a text field on the root timeline, keep in mind that you can create text fields in any timeline as long as you add the proper target path: _root.myMovieClip.createTextField("myField", 10, 20, 50, 200, 30); Every text field, whether placed on the stage while authoring the movie or created dynamically, is considered an instance of the Text Field object. As such, text fields can be treated similarly to movie clip instances in several ways. First, individual text fields are given instance names from the Property inspector (or when created dynamically, as shown above). When targeting a text field instance with a script, you use its target path (which includes its instance name). Although you won't necessarily be able to tell by looking at the Actions toolbox in the Actions panel, several methods (similar to Movie Clip object methods) are available to text field instances. For example: startDrag("myField", true); will make the myField text field draggable. Because text fields unlike movie clips are not timelines, certain methods (for example, prevFrame() , attachMovie() , loadMovie() , and so on) have no meaning when used in the context of a text field instance. Several properties (similar to movie clip properties) exist for text field instances as well. For example: myField._alpha = 50; will make the myField text field 50 percent transparent. With a little bit of experimentation, you'll be able to see which methods and properties movie clip and text field instances share. In addition to the properties and methods discussed thus far, text fields have numerous unique methods and properties for manipulating and controlling text within the text field (rather than the text field itself, as previously discussed). Several of these methods are employed to format text-field text using TextFormat objects we'll save our discussion of those for the next section, "Using the TextFormat Object." In the meantime, let's take a look at a couple useful methods that do not pertain to formatting. To remove a text field instance that was created dynamically, you would use the removeTextField() method in the following manner: myField.removeTextField(); The above script will remove the text field named myField. NOTE Only text fields created dynamically can be removed using this method. Text fields placed on the stage while authoring your movie cannot. Two of the most common things you do in conjunction with text fields are add and delete text both of which you can use the replaceSel() method for. You can invoke this method to replace the currently selected text with anything you define. In the following example, assume that the myField text field contains the text, "I love my dog and cat very much!" Then, assume that the "dog and cat" portion of text has been selected. Now use the replaceSel() method, as shown in the following, to replace that text: myField.replaceSel("bird and snake"); The myField text field will now read "I love my bird and snake very much!" The value placed within the replaceSel() method when it is invoked can be a string of text, an empty string ("" ), or even a variable. As mentioned earlier, text fields have numerous properties that you can configure while the movie is playing using ActionScript. These properties affect not only the way the field looks and reacts to text but also how it functions. Some of these properties will be familiar because we've already used and discussed them; others don't warrant much discussion because they do the same thing as the corresponding properties that you set with the Property inspector when creating a text field in the authoring environment. Take, for example, the bold property you would use the following to make the text in the myField text field instance appear bold: myField.bold = true; Now let's take a look at some of the less obvious properties of text field instances. autoSize. This property determines whether a text field will expand and contract its borders automatically to accommodate the amount of text it contains. Normally, a text field's width and height are set using static (nonchanging) values. This property allows a text field's size to be dynamic that is, determined by the text that's typed into it. borderColor. This property represents the color of the border around a text field. You can set it using a hex value, such as myField.borderColor = 0x336699; . Setting the border color has no visible affect unless the border itself is visible (myField.border = true; ). The same logic applies to the background and backgroundColor properties. bottomScroll. This property represents the line number of the bottommost visible line of text in a text field. This is a read-only property. hScroll. This property is a numeric value representing the current horizontal scrolling position, in points. If the hscroll property of a text field is set to anything greater than 0, say 10, all the text will be shifted to the left 10 points. This property cannot be set to a value higher than the maxhscroll (see below) property value for the same field and is only useful if the text field has had word-wrapping disabled (thus requiring horizontal scrolling in order to see text that exists beyond the right boundary of the field). maxhscroll. This property represents the maximum value that text can be scrolled horizontally. This is a read-only property. maxscroll. This read-only property represents the highest line number that text can be scrolled vertically in a field. To understand this property better, imagine that a particular text field can display 7 lines of text at once but contains 14. Since you don't want the user to be able to scroll beyond Line 14, you would set the maxscroll property value to 8 a value that can change if additional lines are added. restrict. This property determines which characters can be entered into the field. A value of null (myfield.restrict = null; ), or "", indicates that any character can be entered into the field. A specified string of text (myField.restrict = "meatloaf"; ) means only characters included in that string can be entered into the field. A range of characters may be indicated using a dash (myField.restrict = "A-Z 0-9 a-z"; ). Using the caret symbol (^), you can specify a range of characters to accept, with exceptions. For example, myField.restrict = "0-9^567"; will allow numbers 0, 1, 2, 3, 4, 8, and 9 but not 5, 6, or 7. To include all characters with some exceptions, use the caret in the following manner: myField.restrict = "^bug"; . In the preceding example, all characters except b, u, and g are allowed. The restrict property only applies to text entered by the user; ActionScript can place any text in the field regardless of this property's setting. scroll. This property represents the number of the top line displayed in the text field. For example, if you wanted to scroll the text in a field so that the fourth line was the highest displayed in the field, you would use the following syntax: myField.scroll = 4; . This property's value cannot exceed the maxscroll property value for the same field (see maxscroll description above). tabEnabled. This property determines whether the field is included for selection when using the Tab key to select elements in the scene. A value of true or undefined will include the field. A value of false will cause the field to be skipped. tabIndex. If a field's tabEnabled property is set to true or undefined (allowing the field to be included in tab selecting), this property value indicates the field's selection position in the process. textHeight. This read-only property determines the height of text in a field (not the height of the field itself, which can be different). textWidth. This read-only property represents the width of text in a field (not the width of the field itself). type. This property determines whether the field is an input or dynamic text field. myField.type = "input"; makes myField an input text field. variable. This property represents the name of the variable associated with the text field. As mentioned in the previous section, associating a variable with a text field will cause that variable's value to be displayed in the field. (You can change it at any time to display a different variable's value.) Most of these property values can be set, or retrieved for use in other scripts. When a text field is created, it has the following default property settings: type = "dynamic"; border = false; background = false; password = false; multiline = false; html = false; embedFonts = false; variable = null; maxChars = null; In the following exercise, we'll dynamically create, configure, and control a couple of text fields as we build an interactive typing application. -
Open flashWriter1.fla in the Lesson13/Assets folder. This project contains five layers named according to their content: The Background layer contains the scene's graphical content with the exception of the buttons, which reside on the Buttons layer. The Components layer contains the Checkbox component (named applyToAll) that appears at the top left of the stage. The Box layer contains the movie clip instance named box, just to the left of the stage, which looks like a transparent-white box with a white border. Other than some ActionScript, which will be placed on Frame 1 of the Action layer, the white box will be the only element in the scene used in this exercise. The buttons and Checkbox component will be used and scripted in the next exercise. The goal of this exercise will be to dynamically create a couple of text fields as the movie plays. One field will be larger than the other and will be used for entering text. The smaller one will be used to keep a running total of the number of characters currently in the larger field. Both fields will move from left to right as text is typed into the larger field. In addition, the white box will mimic the movement and size of the larger text field in order to act as its background (this box is partially transparent; transparent backgrounds behind text fields are not inherently possible). -
With the Actions panel open, select Frame 1 of the Actions layer and add this script: _root.createTextField("movingField", 10, 150, 80, 200, 20); with (movingField){ autoSize = true; html= true; multiline = true; text = "Enter text here"; type = "input"; wordWrap = true; } The first line of script creates a text field named movingField, which will be placed initially at x = 150 and y = 80 and have a width of 200 and a height of 20. Using a with statement that references movingField, the initial property settings are configured for this field. Initially, this field which is set to autosize text as it's entered will display the text "Enter text here." You'll also notice that movingField has been set up as an input text field and can wrap lines of text. It is the larger of the two text fields this project will contain. TIP As you can see, a with statement provides a quick and easy way to address an object (Text Field, Movie Clip, and so on) when several lines of script need to reference it. -
Add the following script just below the end of the script added in the previous step: _root.createTextField("statusField", 20, 150, 80, 100, 20); with (statusField){ autoSize = true; background = true; html = true; multiline = false; selectable = false; text = "0"; type = "dynamic"; wordWrap = false; } The first line of script creates a text field named statusField, which will be placed initially at x = 150 and y = 80, and have a width of 100 and a height of 20. Using a with statement that references the newly created statusField, the initial property settings are configured for this field. The field which is set up to auto-size will initially display the text "0." You'll also see that statusField has been set up as a dynamic text field and can't wrap lines of text. As the smaller of the two text fields, it will mimic the larger field's movement. Let's next script a function that will accomplish that. -
Add the following function definition just below the end of the script added in the previous step: function updateStatus(){ statusField._x = movingField._x; statusField._y = (movingField._y + movingField._height) + 10; statusField.text = movingField.length; } Remember that in a moment we'll be scripting the movingField to move as text is typed into it. This function accomplishes two things when called: It keeps statusField at a specific relative distance from the movingField text field as it moves, and it updates the text displayed in the statusField text field. The first line sets the x position of the statusField to match that of the movingfield. The next line is used to place the top of the statusField (its y position) 10 pixels below the movingField. It does this by adding the movingField y position to its height (which gives us the coordinate of its bottom boundary) and then adding 10 to that result. The last action updates the text in the statusField to indicate the number of characters in the movingField. In a moment, we'll script this function to be called every time text is added or removed from movingField. -
Add the following function definition just below the end of the script added in the previous step: function reshapeBox(){ with(box){ _x = movingField._x; _y = movingField._y; _width = movingField._width; _height = movingField._height; } } When called, this function will cause the box movie clip instance to mimic the position and size of the movingField text field, using by-now-familiar actions. As with the function defined in the previous step, we'll soon script this function to be called every time text is added to or removed from movingField, making the box movie clip instance act as the background for that text field. -
Add the following function calls just below the end of the script added in the previous step: updateStatus(); reshapeBox(); These two lines of script call the functions we just defined so that the statusField text field and box movie clip instance can be configured (as defined in the function definitions) as soon as the movie begins to play. These same function calls will be made repeatedly. -
Add the following script just below the function calls added in the previous step: movingField.onChanged = function(){ movingField._x += 4; if (movingField._x + movingField._width > 500){ movingField._x = 150; } reshapeBox(); updateStatus(); } This section of script uses the onChanged event handler method (available to text field instances) to deal with what happens each time text is added or removed from the movingField text field. The first line moves movingField 4 pixels from its current position, causing the text field to move to the right each time a character is added to or deleted from the field. The if statement that follows prevents the field from moving off the stage when it moves to the right: It does this by comparing the right side of the field's position (achieved by adding the x position to the width of the field) with the value of 500 the farthest right we want to allow the field to move. If the right side of the field exceeds this amount, the field is set back to its starting x position of 150. The last two lines call the functions we defined earlier, updating the statusField text field and box movie clip instance immediately each time text is added to or removed from the movingField text field. -
Choose Control > Test Movie to view the project up to this point. As soon as the movie begins to play, two text fields are created and their properties set. The statusField appears below the movingField, and the box movie clip instance has the same position and size as the movingField text field. As text is typed into the movingField text field, it moves to the right, as the statusField follows it in a relative position, displaying the current number of characters in the movingField text field. Once movingField moves too far to the right, it's moved back to its original position. -
Close the test movie and save your work as flashWriter2.fla. We'll continue building on this file in the next exercise. As you've seen, creating and controlling text fields dynamically is a straightforward process that enables you to add a new dimension of interactivity to your projects. |