The Text Field Interface

To get to the Text Field interface, you first have to select the Text tool either by going to the large letter A on the toolbar, or by pressing the letter T on the keyboard. When you have selected the Text tool, the Properties Inspector will look like Figure 15.1.

Figure 15.1. The text field interface.

Most of the options are the general variety of font options such as size, font type, font size, alignment, and color. Some of the other options that you may not be familiar with are on the Text Field type drop-down menu, which includes three options:

• Static Text. This text is exactly the way it sounds; all the text to be seen in this text field must be placed in it during authoring and cannot be manipulated by ActionScript during runtime.

• Dynamic Text. This text field type is as it says, dynamic, meaning that it can be manipulated and adjusted not only during authoring, but also at runtime.

• Input Text. This text field is nearly identical to the dynamic text field, except that not only can it be changed at runtime by ActionScript, but the user can also enter text into this type of text field to be used with ActionScript.

All three of these types of text fields will be reviewed in greater detail in the next section.

An upgraded option to text fields is the anti-aliasing options:

• Use Device Fonts This option will make it so the end user must have the selected font on the system for it to render correctly. Although file size is decreased with this option, only use it when using a common font such as Arial.

• Bitmap Text (No Anti-Alias) This option will turn anti-aliasing completely off meaning no smoothing will occur, similar to a pixel font. This option will embed the font into the SWF and increase the file size.

• Anti-Alias for Animation This option will ignore alignment and kerning to create very smooth text for animating. This option will embed the font into the SWF and increase the file size.

• Anti-Alias for Readability This option uses the new FlashType anti-aliasing engine to create crisper text for improved readability. This option will embed the font into the SWF and increase the file size.

• Custom Anti-Alias This Flash Professional 8 only option, when selected, will bring up the Custom Anti-Aliasing dialogue box (Figure 15.2), which will allow you to set the following two options for a custom anti-alis:

  • Thickness Controls the blending between the text edges and the background.

  • Sharpness Transition smoothness between the background and edges of text.

  Figure 15.2. The Custom Anti-Aliasing dialogue box will allow you to control thickness and sharpness and will also show the ActionScript parameters Inside Cutoff and Outside Cutoff.

  

  
  

In order to use the Custom Anti-Aliasing option, you must publish to the Flash 8 player, and this option will embed the font into the SWF and increase the file size.

And when selecting the Use Device Fonts option, remember there are three built-in device fonts that Flash already has:

• _sans. Similar to Helvetica or Arial

• _serif. Like Times Roman

• _typewriter. Like Courier

The important thing to consider when choosing this option is your audience. And play around with the settings before you decide which anti-alias to use, if any.

And when embedding fonts, you can control which glyphs to use by pressing the Embed button in the Properties Inspector, which will launch the Character Options as in Figure 15.3. You can specify a range of characters such as Uppercase or Numerals. You can also include only a few select characters you type in, or have the menu select the characters you are already using by clicking the Auto Fill button.

Figure 15.3. The Character Options menu for dynamic and input text fields.

But remember, embedding fonts will increase the file size roughly 100 bytes or more per glyph, so only embed the characters you are sure you will use.

Another option on the text field interface you may not be familiar with is the text direction option that will allow text to be both horizontal and vertical. And when you select text to be vertical, another option becomes available right beside the text direction option. This option is the text rotation option, which will rotate the text field 90 degrees when selected. Text direction and text rotation options are only available to static text fields.

Continuing with the options, there is also the auto kern feature, which will adjust spacing between the letters automatically. There are also three buttons in the middle of the interface that control certain features of text fields:

• Selectable. This option controls whether or not a user can select and highlight text in a text field. It is available to static and dynamic text fields only. Input text fields have this set to true automatically.

• Render Text as HTML. This option can turn a normal text field into an HTML text field (more on HTML text in text fields later in this chapter). This option is available to dynamic and input text fields.

• Show Border Around Text. This option will create a black rectangle around the text field. It is available to dynamic and input text fields only.

There are also URL options, which allow you to place a link inside the text field as well as choose the URL target type.

And in the properties of dynamic and input text fields, there is also the Var field, which allows you to place a variable name to associate the content of the text field to a variable on the timeline. However, because text fields are now objects, there is a more up-to-date way of doing that, which we will discuss later in this chapter.

Spell Checking Text Fields

One of the hardest things to do from a designer/developer standpoint while building websites and Web applications is to spell check. This had plagued Flash users for some time until the release of Flash 2004, with a built-in spellchecker for text fields.

Before you start using it, you need to make sure it is set up the way you want. To get to the setup, go to Text, Spelling Setup. The Spelling Setup window will pop open as in Figure 15.4. Some of the options include what you want to spell check (it is good practice to have text fields and strings checked), which of the built-in dictionaries you would like to use, and which words to suggest, as well as which words to completely ignore. You can also set up your own personal dictionary and edit it from within Flash.

Figure 15.4. The Spelling Setup menu.

When you have your setup the way you want it (and it may take some time to get it just right), go ahead and create a static text field on the stage by choosing the Text tool and clicking somewhere on the stage. When the text field has been created, type in the word thier, which was meant to be their, but is a common spelling mistake (at least by me). Now go to Text and choose Check Spelling, and the Check Spelling dialog box appears as in Figure 15.5. One of the first options should be the correct spelling of the word their. Make sure that is selected and click Change. A pop-up will tell you that you're done, and now the word is spelled correctly.

Figure 15.5. The Check Spelling dialog box.

So we've covered the text field interface as well as the new Spell Checker. Now let's talk a little more about each type of text field starting with static text fields.