Understand Input and Dynamic Text Fields

Input and dynamic text fields are created in much the same way that static text fields are created. They use most of the same attributes that apply to static text, such as font, font size, color, and alignment, but there are a few settings that are exclusive to a particular text type. You cannot change the orientation of input or dynamic text to vertical, nor can you kern or adjust the spacing between characters. You also cannot assign a URL to input text. All of these “cannots” exist because the text is being typed in by the user or is being displayed on the fly. Naturally, you don’t have as much control over the way this kind of text will appear for a large and diverse audience. Input text is displayed in a text input field on your audience’s screen. You can use input text for many purposes such as gathering information from viewers of your movie or for computer games that involve audience input. Text fields are powerful because they can pass information from one file to another. Dynamic text is created in a dynamic text field. You use dynamic text fields for information that updates quickly and often, such as weather reports and current events. You can also load rich text into dynamic text fields. Rich text formatting, or RTF, preserves the text attributes andhyperlinks that were set in the text-editing program in which the document was generated. Later in this chapter you’ll learn how to work with rich text formatting and dynamic text fields.

Create Input and Dynamic Text Fields
You create input and dynamic text fields by using nearly the same techniques in the Properties Inspector, although there are a couple of options exclusive to each type of text field. To create input and dynamic text, first click the Text tool in the Toolbar. Then, in the Properties Inspector, navigate through the following selections:

1. In the Text Type drop-down list (shown here), click either Input Text or Dynamic Text.

Make certain that the Expand/Collapse Information Area arrow in the bottom right of the Properties Inspector is pointing up, meaning that the Properties Inspector is currently expanded. There are settings in the expanded area germane to both input and dynamic text.

2. For Line Type, select from the following choices:
■ Single Line Select this to restrict the user from typing more than one line of text in a fi eld.

■ Multiline Click this setting to allow users to type in two or more lines of text.

■ Multiline No Wrap Select this setting to prevent the user from seeing text input beyond the width of the text fi eld unless he or she presses enter/return.

■ Password Select the Password setting if you want the user to enter an encrypted password before continuing to navigate in the movie.

3. The Line Type list is shown here.
4. Select from the following settings related to the type of text field you are creating. The settings are available for both input and dynamic text types unless otherwise noted.

■ Selectable (dynamic text only) Clicking this setting enables the user to select, type, and edit text in a fi eld. This option is only available for dynamic text. Static text isn’t interactive and input text is used for user input in a text fi eld.

■ Render Text As HTML Click this selection if your text was created with rich text formatting and you want to retain this formatting.

■ Show Border Around Text Select this setting if you want your text fi eld to be displayed with a border instead of invisible boundaries.

■ URL Link (dynamic and static text only) Here you can enter a URL link for text in the text fi eld the same way you would create a hyperlink in HTML. You can set a link to a remote URL, a local URL, or an SWF fi le. When you create a link to an SWF fi le, the SWF fi le will open in a browser.

■ Target (dynamic and static text only) If you create a URL link, you can also decide how you want it to appear in the browser. Generally, you would want to specify a target if the SWF fi le was opening within a URL with framesets and you wanted to have some control over how it appears.

■ Embed For input and dynamic text, you can selectively choose to embed all, some, or no characters in the text fi eld. When you embed a character, the font outline information for that character becomes attached to the text fi eld. Embedding characters does increase the size of the fi le. Generally, you would embed a character in situations where you need to display unusual text like special symbols (mathematical, Greek, etc.) that may not be available on the user’s computer. To embed a character, select the character and then click the Embed button in the bottom right of the Properties Inspector. In the Character Embedding dialog box shown here, select the desired setting. This setting will be determined by factors surrounding your movie, such as desired fi le size versus the importance of a font in the overall design of the movie.

■ Instance Name Input and dynamic text fi elds can have instance names. You assign an instance name to an object (such as a movie clip or a text object) so that you can refer to the object in a script. The instance name is typed in the box below the Text Type pop-up list in the Properties Inspector, as shown in the next illustration.

■ Variable Name Assigning a variable name to a text fi eld enables the contents of the fi eld to change. The variable name is typed in the Var box on the right side of the Properties Inspector, as shown next.

5. Create the text fi eld by clicking and dragging your pointer on the stage in the place where you want the text fi eld to appear. Note that both input and dynamic text fi eld blocks have a square handle in the bottom right, as shown in Figure Below.

Now that you know how to make input and dynamic text fields, you need to understand how to use them. Next, you’ll perform a couple of simple tasks so you can experience firsthand what makes them different from static text.

Create a Simple Input Text Field with a Variable
The following exercise will give you a bare-bones understanding of how input text works with variables. In this example, you will create two input text fields and assign the same variable name to both of them. In the finished sample, shown here, you’ll see that when the user types text into an input field, it will appear as input in the other input field.

Understand Variables in Text Fields

Input text and dynamic text can work with a script action called a variable, which is assigned to the text field. By now you know that an easy way to assign a variable to a text field is to do so in the Properties Inspector. Variables are called such because they can change, or vary, depending on the directions in the designer’s script. A variable acts as a container, and the information it contains can change. Variables can also be assigned to other objects, such as the MovieClip, Button, Sound, Date, and TextField objects, to name a few.
A variable is assigned a value. The value can be either textual or numeric. If you prompt your viewer to fill out a form in which you want him or her to indicate his or her age, the variable may be a text box named age, but the value of the variable is whatever number the user types in the text field. Variables are discussed further in Chapter 15. Sounds complicated, doesn’t it? Actually, it will all eventually fall into place. For now,
you just need to know that if you assign a variable name to an input or dynamic text field, you’ll be able to perform some fancy tricks.

First, you’ll create the static text blocks that explain what the user needs to type in the input text fields.

1. Select the Text tool from the Toolbar and in the Properties Inspector Text Type pop-up list, select Static Text. Also, select a font type of Arial or Verdana, a font size of 24 points, a black fi ll color, and a right alignment.

2. Click somewhere in the left side of the stage and type in Name. Press enter/return two times and type Hello.

3. Now, you’ll set the attributes for the input text fi elds that reside to the right of the static text. For Text Type in the Properties Inspector, select Input Text. Click the Show Border button so that the text fi eld will have a border around it in the movie. This indicates to the user where they should type the text. For Line Type, select Single Line in the pop-up list. In the Var (variable) text box, type name. This becomes the variable name for the input fi eld. Change the alignment for this fi eld to left because you’ll want the text the user types in to appear after the instruction. Leave the other attributes in the Properties Inspector unchanged.

4. Now, you will make the input text fi eld into which the user will type his or her name. Click and drag the cursor to the right of the “Name” static text block to make a singleline text input fi eld. Make sure that the width of the text fi eld is large enough to accommodate a viewer’s fi rst name. If it’s not, simply select the Text tool again, click in the text fi eld, position your pointer on the handle in the bottom right, and drag the square
handle to expand the width. Don’t worry about aligning the text boxes vertically. You can do that later.

5. Next, you need to make an input text fi eld to the right of the word “Hello.” Instead of starting from scratch and making another input text fi eld, duplicate the previous input text fi eld. The easiest way to do this is to press alt-shift (Windows)/opt-shift (Mac) and then click the input text fi eld with the Selection tool. A plus (+) sign appears at the bottom right of your pointer, indicating that you are about to duplicate an object. Drag the duplicate input text fi eld down until it’s approximately aligned with the word “Hello” from the static text block, as shown here.

6. If you want the Hello response to look more natural when a person’s name appears next to it, get rid of the border around the accompanying input text fi eld. To do this, click the input text fi eld to the right of the word “Hello”, and in the Properties Inspector, click the Show Border Around Text icon to turn the border off.

7. Now both text fi elds are identical (except for the border around the input text box), with the same variable name. You can verify this by clicking the new text fi eld and checking the settings in the Properties Inspector. See Figure 4-6 to get an idea of how the stage and Properties Inspector should appear.

The Properties Inspector shows that the second input text field also has the variable name, “name”.

The bottom of the input text field will not align with the baseline of the static text. To make sure that what the user types in is aligned with the baseline of the static text instructions, you can drag guidelines from the rulers (View | Rulers) and align them with the static text. You may need to type some temporary text in the input text fields on the stage to help you align the text baselines. If you do, make sure you delete the dummy text before testing the movie again. Notice how the guides are set up in Figure above.

8. You’re fi nished and ready to test the movie. To test it, press ctrl-enter (Windows)/ shift-cmd (Mac). Alternately, you can select Control | Test Movie from the menu. In Test Movie mode, type a name in the input text fi eld. Note that the same name appears in the text fi eld to the right of the “Hello” greeting. This variable will remain the same until instructed to change.

9. To save the movie, select File | Save As from the menu. In the Save As dialog box, navigate to the folder in which you want to save this fi le and click the Save button.

10. To quickly publish the movie as an SWF fi le, select File | Export | Export Movie from the menu. Navigate to the folder in which you want to save the movie, type in a fi le name, and click the Save button.
This is a simple exercise that doesn’t even begin to touch upon the power of variables. It does, however, introduce you to an important concept in Flash ActionScript: the variable.

Work with Dynamic Text Fields
A dynamic text field is different from a static text field in that it is used to display text that changes on the fly. Like input text fields, dynamic text fields work with variables. Variables in a dynamic text field can be loaded within Flash 8 or externally, from a separate document. The document has to conform to certain rules, as you are about to find out. To better understand how a dynamic text field works, you will perform a simple exercise using a dynamic text field and a separate text file you will create. In the finished exercise, when the movie loads, a text file named “text.txt” with variable text named sample will load into a dynamic text field with a variable name of sample. You will also learn how to apply a script to the movie to instruct Flash 8 how to handle the loading of the variable text from an outside file into the dynamic text field in your movie.

Since you’ll need to generate a text file that will load into the dynamic text field, you’ll need to launch a word-processing program. Although you can use any word-processing program, it’s easiest to stick with the simple text editors your operating system shipped with. In Windows, launch Notepad or MS Word. If you are working on a Mac, use any wordprocessing program that allows you to save text in a Text Only format (.txt). You should also launch Flash 8 to get ready to do this exercise. First, you create the dynamic text field in Flash 8 and then use the text editor to type the variable text. Put the text editor aside now and launch Flash 8. Later, you will type text in this editor.

1. Create a new fi le in Flash and save the fi le. It’s important that you save this fi le in the same folder that you will be saving the text fi le you’ll be creating in the next section, so keep this in mind. Both fi les need to be in the same folder in order for the exercise to work properly. This is also true if you want to test this fi le by uploading it to a server. Both fi les must reside in the same folder in order for them to work when someone calls the Flash movie up in their browser.

2. Select the Text tool. In the Properties Inspector, for Text Type, select Dynamic Text. For Font, pick Verdana or Arial; for Font Size, select 12; for Alignment, select Left. On the bottom half of the Properties Inspector, for Line Type, select Multiline.

3. Click in the stage and draw a dynamic text block about the size of the one in the following illustration.

Scripts are written in the Actions panel, which has two different modes of scripting; one for beginners and the default mode for the advanced user. The beginner mode is called “Script Assist.” When this feature is activated, the script window prompts you in the construction of the script. This exercise provides you with a brief introduction to the Scrip Assist feature in Flash 8. The Actions panel and ActionScript are discussed further in Chapter 15.

5. Display the Actions panel by selecting Window | Development Panels | Actions or pressing f9 in Windows and option-f9 on the Mac.

6. Click Frame 1 of the timeline and, in the fi rst column of the Actions panel, click Global Functions to expand the contents of this folder. Click Browser/Network to expand this folder, and then double-click LoadVariables. In the top of the right column, click in the URL fi eld and type the following exactly as you see it:text.txt

7. In the middle of the right column, the script you just created should read like this:
loadVariablesNum("text.txt", 0);
The Actions panel will look like this:

Ordinarily you would create a separate layer for a script on a frame in the timeline because it makes your scripts easier to keep track of. For the sake of simplicity, in this exercise the script resides on the same layer as the object.

Let’s examine in plain language what the above script is saying. It’s telling the timeline that when the Flash movie loads in a browser it will load the variable text named sample from the text fi le named text.txt (which you will create in the next section) into the dynamic text fi eld also with a variable name of sample. Remember, earlier you named the dynamic text fi eld sample in the Properties Inspector. As mentioned earlier, the text in the fi le you will create in the next section will have a variable name of sample also. As a result, this text will load in the text fi eld variable named sample. Let’s also look at the structure of the line of script. The loadVariablesNum function in the Flash ActionScript panel reads text from an external source such as a text fi le or an SWF fi le. The parentheses contain the parameters for this function. In this case, the parameters are the URL (“text.txt”). Note that there are quotations around text.txt because the variable is reading the text only as the value. You did not put the parentheses around the text as this is the default treatment of URLs in the Script Assist mode.

Quotation marks are used for strings in ActionScript. Strings consist of information that has no value other than the plain text itself. The 0 represents the level on which the variable is loading, 0 being the top level.

Levels in Flash allow you to perform complex scripting tasks as you can address objects on other timelines as well as externally located movies. Sound confusing? Don’t worry about that now because ActionScript is a completely different facet of Flash. Because of its extensive scope, ActionScript is not fully addressed in this book. It’s important to understand, however, that one of the reasons Flash is such a powerful program is that it allows users to address objects located in different places within the movie as well as externally located movies.

These instructions are fairly easy, as you can see. To make this exercise completely functional, you just need to create the text in a text editor with a variable name of sample, which you will do in the next step.

9. In the text editor you launched earlier, create a fi le and save the fi le as text.txt in the same folder in which the Flash fi le is saved. This is important; otherwise, when the SWF file loads, it won’t be able to fi nd the external text to load into the sample dynamic text fi eld. It is equally important to name the text fi le exactly the same name as in the script you wrote in Flash: text.txt. Otherwise, when the user loads the movie, he or she will only see a blank box.

10. In the word-processing program, type out the following text exactly as you see it, including the spacing: sample=Current Weather Conditions: Cloudy with a chance of showers later on this afternoon.

11. The word “sample=” gives the text that follows it the same variable name as the dynamic text fi eld in Flash. As a result, this text becomes the value of the variable named sample. The equal sign (as in sample=) is used to bridge the variable name with the variable, which in this case is a blurb on weather conditions. In the following illustration, this text was created and saved in MS Word as a text-only document.

12. Make sure the Flash fi le has been saved since you last worked on it. Keep these fi les because you will use them again in the next section.

The exercise is done, and you can test it to see if it works. To check the movie out, press ctrl-enter (Windows)/cmd-return (Mac). As expected, the text you typed in the wordprocessing program that is stored in the same folder as the Flash file now dynamically appears in the text field.

Experiment with Rich Text Formatting In the previous exercise, the text that loaded into the dynamic text field appeared as plain vanilla with not much style. Sure, you can assign a color, alignment, and font type in the Properties Inspector, but you’re not guaranteed that the viewer
will see your text exactly as specified.

Another variation on the previous exercise is to create your text file using rich text formatting. Rich text formatting contains tags that can be read by the SWF file. For example, if you wanted to intermittently vary the headline color, style, or font size of the text file loading into the field from an external source, you could do so using tags.

HTML standard formatting tags can be used for the formatting of the text file. If you’re not familiar with HTML tags, you can check out the site www.html-tags.info, which provides you with a free reference on HTML tags.

Keep in mind that not all HTML tags are supported in rich text format. Only the very basic tags such as <FONT COLOR>, <FONT FACE>, <FONT SIZE>, <B> (bold), <I> (italic), and <P> (paragraph) are supported. In addition, just like in HTML formatting, tags appear in brackets and must be closed with a back slash. For example, the closing tag for a bold tag is </B>. Nevertheless, text with varied color and font attributes can be a little more interesting than just plain old text.

Returning to the exercise from the last section, here you will expand on the text file you typed out previously. If you recall, you created a Flash file with a dynamic text field and gave it a variable name of sample. Then you created a plain text file that began with “sample=”. The text after the equal sign represented the value of the variable named sample, which loads into the dynamic text field when the viewer opens the SWF file.

In this section you will add tags to the existing text file and then test the movie again. The text that loads will be styled as per the changes you make to the text file. Open the text file you created from the previous section. Edit the text by adding the following tags exactly as they appear here:

sample=<B><FONT COLOR="#CC0000">Current Weather Conditions:</FONT></B><BR><FONT COLOR="000000">Cloudy with a chance of <I>showers</I> later on this afternoon.

Save the text file (with the same name as before, text.txt) and return to the Flash file that has the dynamic text field. The first thing you must do is click the Render Text As HTML button in the Properties Inspector (shown at right). Flash will then be able to read the HTML tags you set in the text file.

Test the movie again (Control | Test Movie or ctrl-enter in Windows/cmd-return on the Mac). The resulting SWF file should look like the illustration here.

Note that the words “Current Weather Conditions” appear as bold, red text. The <B> tag represents bold text and the “#CC0000” in the <FONT COLOR = “#CC0000”> code represents a hexadecimal red color. Hexadecimal colors are chosen according to a system used for the Web in which colors are identified by an alphanumeric numbering system. For a reference chart that lists all hexadecimal colors, check out www.htmlhelpcentral.com/hexcolors.html.

Apply Filters to Text in Flash Professional

Flash 8 Professional allows you to assign filters to text. Filters are ready-made effects that include Drop Shadow, Blur, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color. Once you apply a filter to text, you can adjust the properties of the filter in the Filters tab in the Properties Inspector. The following is a word with a Gradient Bevel Glow applied on the outer area of the object.

You can apply multiple filters to a text block or selected text within the text block. If you use a specific filter setting often, you can save it as a preset from the Preset selection in the Add Filter pop-up menu. To apply a filter to text, select the text and then click the Filters tab in the Properties Inspector. Click the plus (+) icon and select one of the filters, as shown next.

If necessary, adjust the self-explanatory settings for the filter you choose. Add more filters by clicking the plus (+) icon and repeating the process. The filters are listed in the left column of the Filters tab in the Properties Inspector. You can reshuffle the order of filters by clicking a filter in the list and moving it up or down. Changing the stacking order of filters will change the effect on the selected text. To remove a filter, click the filter in the list and then click the minus (−) icon.

Export Movie dialog box, for File Name, type in a name for your exported file and navigate to the location where you want the file saved. When you’re done, click the Save button, and there you have your finished file.

If you plan on putting this file on the Web, you must upload the SWF file along with the text file that loads into the dynamic text field. In addition, both files must reside in the same folder (just as they must when you build the movie) in order to function properly.

You can see how easy it is to update a dynamic text field by just going in and revising the variable text that loads into it. This exercise is very basic, but you can take this concept and use it as a recipe to build other dynamic text fields.

Conclusion

You learned a lot about text in Flash. Specifically, the three types of text that can be made in Flash were covered: static, input, and dynamic text. The spell checker was examined, as were variables and the process of loading rich text into a dynamic text field. In the next chapter, the focus is on the numerous ways you can modify and transform text and graphics once you create them. You’ve learned a few techniques for modifying graphics and text, but there’s still a lot more to learn about modifying in Flash.