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.
