Tài liệu Nested Loops ppt

< Day Day Up >

Nested Loops
Loops provide a great way of automating a set of scripting tasks. However, loops can
accomplish more than the repetitive execution of a set of actions. A nested loop—that is,
a loop placed inside another loop—can be useful for creating a looping sequence that
executes a set of actions, changes a bit, executes those same actions again, changes a bit,
and so on. Here's an example of a nested loop:

var i:Number = 0;

while (++i <= 10) {

var j:Number = 0;

while (++j <= 10) {

// perform these actions

}

}


The actions in the loops will be executed 100 times. Here's the underlying logic: the outer
loop (which uses i) is set to loop 10 times. With each iteration of this outer loop, two
things occur: the variable j is reset to 0, which then enables the inner loop (which uses j)
to loop 10 times itself. In other words, on the first iteration of the outer loop, the inner
loop will loop 10 times; on the second iteration, the inner loop will again loop 10 times;
and so on.

Nested loops are great for breaking repetitive tasks into a hierarchical process. To help
you understand this concept, think about writing a letter. A letter represents a nested-loop
process in which you start on line 1 and write perhaps 100 characters, drop to line to 2
and write 100 characters, and so on. If your letter is 25 lines long, a script to do the work
might look something like this:

var i:Number = 0;

while (++i <= 25) {

var j:Number = 0;

while (++j <= 100) {

// type a character

}

// drop down to the next line

}


Keep in mind that you aren't restricted to nesting just one loop inside another; you can
use as many loops within loops as your project requires.
In the following exercise, you use nested loops to create a grid of images that appear
when an item in the drop-down list is selected.
1. Open pictureShow2.fla.
On the top of the stage are three movie clip instances: pictures1_mc,

pictures2_mc, and pictures3_mc. In this exercise, you duplicate one of these three
movie clips (depending on which item in the drop-down list is selected) to form a
grid of images onscreen.
2. With the Actions panel open, select Frame 1 in the Actions layer and add this
function after the current script on that frame:
3.
4. function itemClicked(pictureID:Number) {
5.
6. var picToDuplicate:String = "pictures" + pictureID + "_mc";
7.
8. var xSpacing:Number = 160;
9.
10. var ySpacing:Number = 120;
11.
12. var xStart:Number = 190;
13.
14. var yStart:Number = 30;
15.
16. }
17.

The preceding exercise set up the duplicated list_btn button instances to call this
function and pass it a parameter value (pictureID) when clicked. When it's
finished, this function will copy one of the three pictureID movie clip instances at
the top of the stage four times, forming a two-by-two grid, and then send each
duplicated instance to a unique frame to display an image.

The first line in this function creates a variable called picToDuplicate. This
variable's value—which is based on the pictureID value of 1, 2, or 3 that was
passed to the function when it was called—is then set to picture1_mc,

picture2_mc, or picture3_mc, which happen to be the names of the instances
containing pictures on the stage. We'll use this value later in this function
definition to identify which instance to duplicate.
The xSpacing variable represents the amount of space to allot between the left
sides of the two movie clip instances found on the same horizontal row. The
ySpacing variable indicates the space between two movie clips in the same
column. The values of these spacing variables are arbitrary and will depend
largely on the amount of space you like between movie clips.
The next two variables, xStart and yStart, represent the starting position of the first
duplicated movie clip in relation to the stage. Any subsequent movie clip
duplicates are positioned relative to this point.
3. Add this script at the bottom of the itemClicked() function definition:
4.
5. var v:Number = 0;
6.
7. var i:Number = -1;
8.
9. while (++i < 2) {
10.
11. var j:Number = -1;
12.
13. while (++j < 2) {
14.
15. ++v;
16.
17. var name:String = "pictures" + v;
18.
19. _root[picToDuplicate].duplicateMovieClip(name, v);
20.
21. _root[name]._x = xStart + i * xSpacing;

22.
23. _root[name]._y = yStart + j * ySpacing;
24.
25. _root[name].gotoAndStop(v);
26.
27. }
28.
29.
}
30.

This loop contains a nested loop—the portion of the function that actually creates
the two-by-two grid of movie clip instances. A single loop would create a single
column of movie clip instances. In contrast, a nested loop creates two instances in
a column, alters the script slightly to "move" the column coordinates, and creates
another two instances in a column (which we'll explain in a moment). Let's look at
the logic that allows it to work.
The outer loop, beginning at line 3 of the script, increments i by 1 (++i), setting an
initial value of 0. The condition of this outer loop says, "As long as i is less than 2,
execute the actions below." Because 0 < 2, the actions within the loop are
executed. The first action sets the value of j to -1. Then a nested (inner) loop
appears that uses the value of j. First, j is incremented by 1 (++j) and a condition is
set that says, "As long as j is less than 2, continue looping through the actions that
follow."
The script continues to do nothing but execute the actions in this inner loop until
that condition becomes false. During the first iteration of this inner loop, the value
of v is incremented by 1 (++v), giving it a value of 1. This variable's value is used
several times in the lines of script that follow. Using ActionScript that should be
familiar to you by now, the appropriate pictureID movie clip instance is duplicated
and positioned. During the second iteration of this inner loop, the value of j is

incremented by 1 (as shown in the loop's conditional statement), giving it a value
of 1, which is still less than 2, so the actions within that loop are executed again.
This inner loop cannot perform a third iteration because j would be incremented
again (++j), making it equal to 2 (a condition that exits the inner loop). As a result,
the script revisits the outer loop. At that point, i (used by the outer loop) is
incremented by 1 (++i), giving it a value of 1, which is still less than 2, so the
actions in the outer loop are executed again. As a result, the value of j is reset to -
1, and the actions in the inner loop are executed two more times.
The concept just described can be tricky; review the logic until you understand it
thoroughly.