This chapter is from the book
This chapter is from the book
This chapter is from the book
Text Fields, Arrays, and Loops
In this section, we'll work on a new movie and introduce dynamic and input text fields, along with arrays and looping. The movie we're creating is Make Irving's Face. See Figure 3–11.
)
Figure
3–11 Make Irving's Face
Here's what we want to make happen: The user enters one of five words in the right place, and the appropriate frame of the Irving movie clip is shown. Each frame has a different expression. Typing in sad and clicking the "Do it!" button will cause the Irving movie clip to go to the sad frame. We also want the last thing the user typed in the box to appear in the lower text box.
We'll start with an overview of the different kinds of text fields, arrays, and looping, and then we'll jump into the code.
Text Fields
There are three kinds of text fields in Flash: static, dynamic, and input. Static text fields are what you've already used: plain ol' text. Dynamic text is text that's associated with a variable and can be changed by ActionScript code. Input text is just like dynamic text, but the user can enter text into it as well. Make Irving's Face uses all three kinds of text fields.
Arrays
An array is like a variable that has some little variables in it. It's not too different from an object and its properties. Here's an example of an array:
arrayName[0] = 5 arrayName[1] = "hi there" arrayName[2] = true arrayName[3] = "this is the fourth element in this array"
or
myFriends[0] = "Tanya" myFriends[1] = "Jonathan" myFriends[2] = "Sarah Jane" myFriends[3] = "Mark & Spencer"
All arrays in ActionScript start with the first element as 0, not 1 as you might expect. Also, arrays in ActionScript are all instances of a grander Array object, but don't worry about that now. We'll deal with more arrays in later chapters.
Looping
You'll find that you'll often want to repeat a series of statements a certain number of times. This is where looping can be helpful. There are two common ways to create a loop: for statements and do_while statements.
for statements look like this:
for(initial condition; end condition; counter increment)
{
statements;
}
An example:
for(loopCounter = 1, loopCounter < 10, loopCounter++)
{
trace(loopCounter);
}
This would result in the numbers 1 through 9 being listed in an Output window.
do_while statements are very similar:
do {
statements;
} while(condition)
Here's how we'd execute the same task as the for example using do_while.
loopCounter = 1;
do {
trace(loopCounter);
loopCounter = loopCounter + 1;
} while(loopCounter < 10)
When using simple counters like this, I usually find that using a for statement is easier. If you're testing for some condition other than a loop counter, do_while usually comes in handy. There are always exceptions, but that's the rule of thumb that's worked for me.
Creating the Movie
First, it's important to know that the Irv symbol has five frames, all of them labeled. The labels are "sad," "mad," "happy," "scared," and "blank."
Open the file chapter3/irving1.fla.
Click on the first frame of the actions layer.
Open the Frame Actions panel.
Enter the following code:
// Create face array faceArray = new; Array("happy","sad","mad","scared","blank");
We just created an array called faceArray. Element by element, this array looks like this:
faceArray[0] = "happy"; faceArray[1] = "sad"; faceArray[2] = "mad"; faceArray[3] = "scared"; faceArray[4] = "blank";
Click on the "Do it!" button.
Open the Actions panel.
Enter the following code:
on(release) { // loop through array and see // if irvMood matches anything in the // faceArray. If so, go to that label in the Irv for(i=0; i<5; i++) { if(_root.irvMood == faceArray[i]) { _root.irv.gotoAndStop(faceArray[i]); break; } } _root.lastIrvMood = _root.irvMood; }Control
Test Movie. Type in one of the five possible moods and
click the "Do it!" button to see Irving's face change.
About the Code
Let's go over the code line by line (not counting the comments). We start with a for statement, using the simple variable i because it's shorter than loopCounter. We want to loop from 0 to 4, so we start i off at 0 and make sure it's always less than 5. We then increment it by one each time the loop is run (this is written as i++).
Once we're inside the loop, we run into an if statement that compares the value of the input text (_root.irvMood) and the value of the faceArray at element i. For example, if the user typed in scared, then the code starts looking through the array and stops when i=3, when _root.irvMood = faceArray[3].
Continuing with the example of the user typing scared, we tell the irv instance in our movie to go to the frame label "scared"—that is, the value of faceArray[3]. It's vital that the frame labels in the Irv symbol exactly match the text in our faceArray. If those two things don't match perfectly, this code won't work.
Since we've found the right face to show, we don't need to keep looping—there's no reason to see if irvMood = face-Array[4], since we know that it's equal to faceArray[3]. So, we jump out of the loop with the break statement. In this case, it's not a necessary statement, since the movie doesn't throw an error if we remove it. However, it's good programming style to not force any extra calculation that can be avoided.
Finally, we set the value of the dynamic text variable lastIrvMood. It doesn't add to the movie, but it simply illustrates what a dynamic text field can do.
Associative Arrays
Flash also has what are called associative arrays. Here's an example:
assocArray = new Array(); assocArray["happy"] = "ice cream"; assocArray["sad"] = "worm in apple"; assocArray["excited"] = "you found a spellbook";
Associative arrays use strings instead of numbers as array elements. They can be a little harder to keep track of, but are extremely useful when you need them.