user input : 

text input fields

To get typed input from the user, we use an Input Text Field, which allows the user to type in the box area defined by the field. This text is available to the ActionScript once it is typed in, through the "text" property of the input text field instance. For example, to get the user's name do the following:

• use the authoring system to place a text object on the stage
• use the property inspector to change its type to Input Text
• set the instance name to "userName"
• place a button on stage, and put the following code on the button

  on(release) {
      trace(_root.userName.text);
  } 

In Flash MX, it's possible to give a variable name to the text in a text field--this variable name is then accessible to scripts. For example, on the same input text instance you just created, assign a variable name of "userNameText" by filling in the "Var" field of the property inspector. You could then use the following code on a movieclip:

on(release) {
    trace(_root.userNameText);

}

use actionscript to talk to the user

Until now, we have been using the trace() function to display text. Of course, the trace() function doesn't do any good if we want the real user to see text, because it only works in the Flash authoring environment. But Flash has a Dynamic Text Field object, and it's possible to change the field text via ActionScript. To make a Dynamic Text object, do the following to add to the example above:

• use the Text Tool to place a text object on the stage
• use the property inspector to change its type to Dynamic Text
• set the instance name to outputField
• set the instance Var name to outputFieldText
• replace the above movieclip code with the following:

  on(release) {
      _root.outputFieldText = _root.userNameText;
  }

check user input against answers stored in an array

In this example, we combine what we know about Input and Dynamic text with what we know about arrays to create a quiz. The user types in answers to questions, and the code checks each answer against the "correct" answers that are stored in an array.

Here are two examples of this. The simple one has the user click on a button that does the answer checking and display. The complex one automatically scores the answers every time the user types in a new one (plus it calculates the total of the user entries).

input_simple.fla

input_complex.fla

manually check the input values against an array

In the first example, the user inputs information, and then clicks on the "Score" button to run the scoring code. The code checks each input text and compares it to the correct answers which are stored in an array.

First, the code must initialize the array with the correct answers. This is done in the first frame of the Actions layer:

var answers = [14, 4, 12, 8]; // init the answers array
var userInput = [_root.input0, _root.input1, _root.input2, _root.input3]; // init text array
var correctDisplay = [_root.correct0, _root.correct1, _root.correct2, _root.correct3]; // init text array

The rest of the code is run when the user clicks on the Score button:

on (release) {
    // this script assumes that there are 4 input text fields
    // on the stage, and that their variable names are set
    // to inputText0 through inputText3. The script also
    // assumes a dynamic text field with its variable set
    // to scoreText.
    score = 0; // init the score to zero
    for (i = 0; i < _root.answers.length; i++) { // loop through the answers array
        if (_root.userInput[i].text == _root.answers[i]) {
            // the answer is correct for this text field
            _root.correctDisplay[i].text = "yes"
            score++; 
        } else {
            // the answer is INcorrect for this text field
            _root.correctDisplay[i].text = "no"
        }
    }
    _root.scoreText = score; // set the output text field to the score
}

The code initially sets the score to zero, and adds one to the score for each correct answer. It does this in a loop, comparing each input field variable with the corresponding location in the answers[ ] array. This works using the userInput[ ] array which contains references to each of the input fields. The following statement fragment gets the text value from each input field, using the "i" counter to cycle through each member of the array:

_root.userInput[i].text

This input field value is compared to the array value indexed with the same loop counter:

answers[i]

If the two values are equal (using the == comparison operator), the score is incremented. In addition, the array correctDisplay is used to set the text of the answer section to "yes" or "no" to indicate if the answer was correct or not. After the 4 input field and correct answer values are compared, the resulting score is placed in the dynamic text field by setting that field's variable "scoreText" equal to the score.

_root.scoreText = score; // set the output text field to the score

automatically check the input values against an array

In the complex example, the code watches for any changes in the input values. If there is a change, the code automatically checks all the answers against the stored answers[ ] array, calculates the score, and also calculates the total of all the answers (this is extra feature is included just because it is kind of cool--it has nothing to do with the score or the game). To automatically check the score, each input text field has an event handler for onChanged, which is triggered any time the text changes. This way, there does not have to be a user button to do the scoring--the scoring code runs whenever there is a change in the user text. All of the code is defined in frame one of the Actions layer:

var answers = [14, 4, 12, 8]; // init the answers array
var userInput = [_root.input0, _root.input1, _root.input2, _root.input3]; // init text array

function scoreAndTotal() {
   // this function assumes that there are 4 input text fields
   // on the stage, and that they have been put into an array
   // called userInput. The script also assumes a dynamic text 
   // field with its variable set to scoreText, and another one 
   // called totalText
   var score = 0; // init the score to zero
   var total = 0; // init the total to zero
   for (i = 0; i < _root.answers.length; i++) { // loop through the answers array
       inputValue = Number(_root.userInput[i].text); // get the value of the text field
       if (isNaN(inputValue)) inputValue = 0; // if it is empty or not a number, make it zero
       if (inputValue == _root.answers[i]) { // if it is equal to the correct answer
           score++; // increment the score
       }
       // convert input text to a number, add it to total
       total = total + inputValue;
   }
   _root.scoreText = score; // set the score text field
   _root.totalText = total; // set the total text field
}

// this code sets an event handler for each of the input fields
// by setting the onChanged event for each to the scoreAndTotal 
// function. This event hanlder function will then be run each time text 
// changes in any of the input text fields. These fields are
// contained in the array userInput.
for (i = 0; i < _root.userInput.length; i++) { // loop through the input field array
   // assign the scoreAndTotal function to the onChanged 
   // event of each answer input fields
   _root.userInput[i].onChanged = scoreAndTotal;
   // restrict the numbers allowed in the text field to numbers 0 to 9
   _root.userInput[i].restrict = "0-9"; 
}

The code for this example is very similar to the simple version. The initialization code is exactly the same. The scoring code is nearly the same, but it's inside a function so it can be called by any of input fields when there's an onChanged event. The differences in this code are additions for calculating the total. It first initializes the total variable:

var total = 0;

Within the for loop, new code adds the value of each input field to the total. To do this, the code converts the input text into a number using the Number() function:

inputValue = Number(_root.userInput[i].text); // get the value of the text field
if (isNaN(inputValue)) inputValue = 0; // if it is empty or not a number, make it zero

After the loop calculates the score and total, they are displayed by putting the values of these variables into the dynamic text fields:

_root.scoreText = score; // set the score text field
_root.totalText = total; // set the total text field

The last piece of code uses a loop to attach an event handler to each input text field. Since these fields have been placed in an array, this is easy to do with a loop, incrementing the index of the array:

_root.userInput[i].onChanged = scoreAndTotal;

The field is appended with the onChanged event added, and then set equal to the name of the scoreAndTotal function, which was defined above. This function is now defined as the onChanged event handler for all of the input text fields, and it will be run whenever there is a change to any of the fields.

In addition to setting up the event handler, the last part of the code restricts the characters that can be typed into the fields to numbers 0 to 9 by appending the field with "restrict" property.

for (i = 0; i < _root.userInput.length; i++) { // loop through the input field array
   // assign the scoreAndTotal function to the onChanged 
   // event of each answer input fields
   _root.userInput[i].onChanged = scoreAndTotal;
   // restrict the numbers allowed in the text field to numbers 0 to 9
   _root.userInput[i].restrict = "0-9"; 
}

all materials on this web site © copyright 2004, Philip van Allen