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 loopthat is, a loop placed inside another loopcan 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 nested loop 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 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 menu is selected.

1.	Open pictureShow2.fla. In each item of the photoData object there is an array of linkage IDs. Each ID points to a bitmap in your library. In this exercise, you will attach these bitmaps to the Stage (depending on which menu item is clicked) to form a grid of images.
2.	With the Actions panel open, select Frame 1 in the Actions layer and add the following code after the current script on that frame: import flash.display.BitmapData; import flash.filters.DropShadowFilter; function populatePhotos(photos:Array):Void { var photoGrid:MovieClip = createEmptyMovieClip("photoGrid", 1); photoGrid._x = 180; photoGrid._y = 20; var rowPosition:Number = 0; var i:Number = 0; while(i < photos.length) { for(var j:Number = 0; j < 2; j++) { if(i < photos.length) { var photo:MovieClip = photoGrid.createEmptyMovieClip(photos[i], i); photo._x = j * 180; photo._y = rowPosition; var photoBitmap:BitmapData = BitmapData.loadBitmap(photos[i]); photo.attachBitmap(photoBitmap, i); var dropShadow:DropShadowFilter = new DropShadowFilter(7, 45, 000000, ¬ 0.7, 7, 7, 1, 3); photo.filters = [dropShadow]; } i++; } rowPosition += 130; } } We are using two built-in classes in this script that need to be imported. We will do that at the top of this script so we can reference them later in the script without using the full class paths. Those classes are flash.display.BitmapData and flash.filters.DropShadowFilter. In the preceding exercise you set up the menu items to call this populatePhotos() function and pass it an array as a parameter value (photos). This array contains all the linkage IDs to the bitmap photos in your library. Our function basically loops through the items in that array and places them on the Stage. That's pretty straightforward, but it gets a little more interesting because we're placing those images into a two-by-two grid. The first line inside our function will create a container MovieClip that will serve a task similar to our menu container. One additional advantage is that we can easily replace this clip when a different item is selected in the menu. Because we are using a while loop we need to keep track of the index in the i variable much like we did with the menu loop. We will also keep track of our row position in a variable called rowPosition. We're using a while loop because we want to loop as long as there are photos to be displayed. It will iterate until the index value (i) is no longer less than the length of the array passed into our function, which will ensure that all the photos are displayed regardless of the array length. Therefore, by design our code actually supports an infinite number of photos; however there is room on the Stage for only four. Inside our while loop is a nested for loop. This loop iterates over the columns in our grid. For this example we will just have two columns, but this could easily be modified to a different column count, or it could even be dynamic, based on a condition like the width of the Stage. Because it is possible to have an array of photos that wouldn't create a complete row, we could have more iterations than we have items in our photo array. Therefore, to check for this condition we will use an if statement inside our nested for loop that checks for the same condition as our outer while loop. Now that we have verified that we should display a photo, we need to add it to the Stage in the correct position based on the column and row of our grid. Because our photos are bitmap symbols in the library, we need to create an empty MovieClip that we can attach our bitmap to. We also need to position our empty MovieClip. We determine the proper x position by multiplying our inner loop's index (j) by the width of our columns. Based on our design our column width is 180 pixels. The y position is based on our rowPosition property. This value is initially set to 0, but with each iteration of the while loop, we increment its value by the height of our row. Based on our design, the row height is 130 pixels. Our empty MovieClip is in the correct position, so now we need to attach the bitmap photo. The attachBitmap method is a new feature that has been added to the MovieClip class in Flash 8. This method enables us to attach bitmaps from the library based on the bitmap symbol's linkage ID. The last thing we'll do is add a drop shadow to our photo using the new bitmap filter features in Flash 8. We do this by first creating an instance of the DropShadowFilter class. The parameters of the DropShadowFilter's constructor determine the display of our bitmap. To apply this filter to our photo we use a new property of MovieClip called filters. The filters property needs to be an array, so we add our filter to an array and assign it to our photo.
3.	Choose Control > Test Movie to test your work. As you click any of the menu items, the grid of images is created based on the value of photo array passed to the populatePhotos() function.
4.	Close the test movie and save your work as pictureShow3.fla. In this exercise, you used nested loops to create a grid of images on the Stage. Although you could have dragged and placed four movie clip instances on the Stage to accomplish the same goal, you used a nested loop to automate the entire process so that, with a couple of minor adjustments, the script can create a grid of any sizeperhaps as large as 100 by 100 images. Using loopsespecially nested loopsin this fashion not only helps you to automate processes that you might otherwise perform manually in the authoring environment but it also enables your projects to scale up or down dynamically based on conditions that exist while the project plays.