| For the rest of this lesson, we'll focus on the while loop. The actions within this type of loop are performed continuouslyas long as the condition evaluates to true. For example: var i:Number = 0; while(i < 10) { // perform these actions }
The condition in the loop is i < 10, so as long as the value of i is less than 10, the statement is true, and the actions within the loop are repeated. However, the looping statement is missing a key ingredient; it doesn't have a means by which the condition eventually becomes false. Without this functionality, the loop could continue forever, and in the real world endless loops cause applications to freeze. This is commonly known as an infinite loop. Flash can't do anything else until the looping statement completes its job. To prevent an endless loop in the example, the value of i must be incremented so that its value is eventually greater than or equal to 10; at which point the condition proves false, and the loop stops. You can use the increment operator (++) to handle incrementing a variable. Here's an example: var i:Number = 0; while(i < 10) { i++; //perform these actions }
Incrementing the value of i causes the loop to perform 10 iterations. The value of i is initially set to 0. However, with each loop, that value increases by 1. On the tenth loop, i = 10, which means that i < 10 is no longer true, and the loop halts. Here's a shortcut that accomplishes the same goal: var i:Number = 0; while(i++ < 10) { // perform these actions }
This loop performs 10 iterations. The value of i is initially set to 0. However, that value is incremented by 1 within the conditional statement of the loop itself with each iteration. On the eleventh loop, i = 10, which means that i < 10 is no longer true, and the loop halts. You can also use the decrement operator with a loop, which might look something like this: var i:Number = 10; while(i-- > 0) { // perform these actions }
Alternatively, you can write this script using a for loop as follows: for(var i:Number = 9; i >= 0; --i) { // perform these actions }
The condition in a loop doesn't have to depend on an incremented value; it can be any sort of condition. It can also be the result of a function call that returns a value of TRue or false, like this: while(someFunction()) { // perform these actions }
In the following exercise, you create a photo grid list using a while loop. We will also be using what we have learned so far to implement for and for...in loops. 1. | Open pictureShow1.fla in the Lesson04/Start folder.
The main Timeline includes two layers: Show Elements and Actions. The Actions layer contains all the ActionScript for this project. Not surprisingly, the Show Elements layer contains the project's graphic elements. All the other elements will be placed onto the Stage at runtime from the library.
The MenuItem is a MovieClip in our library with a linkage ID of MenuItem. The rest of the library assets that will be brought onto the Stage at runtime are bitmaps. To enable it we must set the linkage ID of our bitmaps. This is a new feature of Flash 8. In previous versions, MovieClip symbols were the only library items that could have attached at runtime. In the library we have a series of bitmaps placed in our Photos folder. By right-clicking on the bitmap in the library you can go to the properties for that item and view its linkage ID.
| 2. | With the Actions panel open, select the frame in the Actions layer and add the following script:
var photoData:Object = new Object(); photoData["London"] = ["london1", "london2", "london3", "london4"]; photoData["New York"] = ["newyork1", "newyork2", "newyork3", "newyork4"]; photoData["Paris"] = ["paris1", "paris2", "paris3", "paris4"];
This script creates an associative array of arrays that will be used as our datasource for our simple photo viewer. The keys of the associative array represent each city and will be used as the display titles in our menu. Each second-level array contains the linkage IDs of the bitmaps that will be displayed when that item is selected from the menu.
| 3. | Add this function after the script you just added in Step 2:
var menu:MovieClip = createEmptyMovieClip("menu", 0); menu._x = 30; menu._y = 80; var i:Number = 0; for(var city:String in photoData) { var menuItem:MovieClip = menu.attachMovie("MenuItem", city, i); menuItem._y = i * (menuItem._height + 2); menuItem.label.text = city; menuItem.photos = photoData[city]; menuItem.onRelease = function() { populatePhotos(this.photos); } i++; }
This script will create our menu from the data defined in Step 2. We first create a container for our menu items and put it in the correct position. This is simply an empty MovieClip named menu. Then we use a for...in loop to iterate over the items in our associative array. Each iteration will add an item to our menu by attaching the MenuItem symbol from our library.
Rather than positioning each menu item individually, we will use a container MovieClip and set each item's position relative to the container. Then we simply need to position the container to the desired location on the Stage. In the first line, we create our empty menu container and then we position it by setting its x and y properties.
Because this is a for...in loop we will need to track the number of iterations manually. Before the loop is defined, the script creates a local variable named i and assigns it the value 0. This variable will be manually incremented each time the loop is iterated.
Note The letter i is commonly used as the name of an index variable in loops. For nested loops, the letter j is commonly used to define the inner loop's index value. We are using a for...in loop because we want to iterate through the keys in our photoData associative array. Each key value will represent the city name inside our loop.
The first thing we need to do inside our loop is attach the menu item to our menu container. Because this loop dynamically generates the menu items, we need to consider vertical spacing between the items in the menu. We determine this by multiplying the menu item's height by the current iteration count. We also add an additional two pixels for padding.
Inside each of our menu item clips is a text field named label. Once we have added the item, we will set the label field's text property to the name of the city. The city name is retrieved as the key in our associative array.
Rather than searching through the photoData object each time we want to retrieve the bitmap photos, we will simply set a reference to these photos inside the menu item instance. So when the item is clicked we can pass that data relative to the menu item.
Finally, we add an onRelease handler to the menu item. Inside this handler we call the populatePhotos() function and pass it the reference to the photo data for that city.
Before we end the loop we will increment our index (i) variable by 1.
| 4. | Choose Control > Test Movie. Click the Menu button to test your script.
When the application launches you will see the menu populated with the cities defined in your photoData object.
| 5. | Close the test movie and save your work as pictureShow2.fla.
You just created a dynamic menu using a loop. In the next exercise, you put this menu to work by making something happen when you click a menu item.
|
|
