• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 6. Interactive Simulations > Creating Input Text Fields

Creating Input Text Fields

Anyone who has designed a form in HTML and had to link it to a CGI script or an ASP application knows how tricky the process is. Fortunately, creating user input assets and tracking user selections and text entries is impressively easy in Flash. In the next lesson, you will learn how to collect and verify the user's entries, but for now you'll just add the elements: two input text fields on the screen where users are directed to enter certain text.

Select the screens2 layer name, and choose Add Layer. Name the new layer textfields.

The text fields will appear above the screenshot in screens2. By layering them just above that layer, but below the screens3 layer, you can be sure that text added in this layer will not overlap dialog boxes that are supposed to pop up above it.

Insert a keyframe into frame 50 of the textfields layer, and insert another into frame 80.

Frame 50 is the one with the ODBC Microsoft Access Setup dialog box, which is where users need to enter text.

Frame 80 is where the next screenshot appears, which already has the text entered. You want to be sure that the text is cleared before it appears. By adding the frame now, when the keyframe preceding it is still empty, you don't have to specify a blank keyframe.

Select the keyframe in frame 50 of the textfields layer. Using the text tool, drag a small text region across the Data Source Name field in the screenshot. Enter E337 in the field. If necessary, reposition the text field until it fits snugly over the one in the screenshot.

You might wonder why you are entering text into a text field that is supposed to be an input field. The reason is that you need to format the text to look as much like the text that would appear in that field as possible. If your user inputs some text and it comes out in a hot pink cursive script font, the illusion will be shattered.

Switch to the pointer tool, select the text field (if necessary), and change the font in the Property inspector to Tahoma (the font), size 11, no bold or italics, black color. Once again, if necessary, reposition until E337 is placed perfectly over the screenshot.

These settings are, as far as I can tell, the ones used in the actual Microsoft dialog. If you do not have Tahoma (all Windows users should), choose a sans serif font like Verdana or Arial, which is the next best thing.

Still in the Property inspector, change the Text Type to Input Text (by default it is Static Text). Give it the variable name of datasourcename. Finally, use the text tool to remove the E337 text from the field, which should now be empty.

Flash has three text types. Static, the default, is simple text, just like that which you see in a word processor. Input text is a field that allows the user to enter text. This field is associated with a variable (more on that later), which lets you store and evaluate what the user entered. Dynamic text fields are also associated with variables, but rather than allowing people to enter new values, dynamic text fields display the current values of existing variables. Later lessons will show you how to leverage these types in detail.

By giving the input field a variable name, you have a way of telling Flash to find out what the user entered. This variable is stored indefinitely in the timeline itself, meaning that you can access its value instantly or much later in the movie.

Copy and Paste In Place the text field. Use the down arrow key on your keyboard to move the new text field down until it covers the second text field.

You could have repeated steps 3 to 5 and created the second text field from scratch, but by copying and pasting, you not only preserve the field's size, but also all of the Property inspector settings, such as font, size, color, text type (input), and variable. Variable? Uh-oh. You shouldn't have two input fields with the same variable name, or Flash won't be able to tell them apart.

With the second text field selected, change the variable name to description.

Now that you have two text fields with two variable names, you can individually track what the user enters in each field.

Save the file and test the movie. When you get to the screen with the text fields, type in the first field, and press Tab to advance to the second field.

Not bad! You have three kinds of interaction in this file, and all are true to the functionality of the actual dialog: clicking, entering text, and tabbing between fields.

The only problem is that you can enter anything into those text fields, which means that some subversive English professor could enter E327 rather than E337 and still continue. The problem with this is that in later screens, E337 appears as the DSN in two different dialog boxes. If a user enters E327 in the Data Source Name field, then the output DSN should be called E327, not E337. Such inconsistencies break the illusion that the simulation creates and possibly confuses subversive English professors.

Now that you have built and tested this tutorial, you may be able to think of a couple ways to make it a better simulation. First, if you click on a tab other than the System DSN tab at the beginning, nothing happens. In the real dialog, of course, clicking on other tabs brings up those other tabs. Second, did you notice how the cursor changed from an arrow to a hand every time it went over a hotspot? This doesn't happen in reality—that's feedback Flash provides to inform the user that a given area is hot. Normally, this feedback is good, but in this case it breaks the illusion. I wish computers were smart enough to change the cursor to a hand every time I needed to click somewhere!

Just from what you have done in this lesson, you could probably improve the realism of the simulation by adding additional screenshots and hotspots. As for the cursor issue, you'll fix that in the next lesson.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint