| For the rest of this lesson, we'll use the while loop exclusively. The actions within this type of loop are performed continuously as long as the condition evaluates to true . Take, for example, the following: i = 0; while (i < 10) { // perform these actions } The condition in the above loop is i < 10 . This means that as long as the value of i is less than 10, this statement is true and the actions within the loop are repeated. However, the above looping statement is missing a key ingredient a means for the condition to eventually become false . Without this functionality, the loop could continue forever which in the real world will cause applications to freeze because Flash can't do anything else until the looping statement completes its job. To prevent this from happening in the example above, the value of i must be incremented so that its value eventually equals 10 at which point the condition will prove false , and the loop will stop. The great thing about loops is that you can build this functionality in by using the increment operator (++ ). Take a look at the following example: i = 0; while (i < 10) { perform these actions ++i } 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 one. On the tenth loop, i = 10, which means i < 10 is no longer true and thus the loop halts. The following is a shortcut method of writing the same thing: i = 0; while (++i < 10) { // perform these actions } This loop will perform nine iterations. The value of i is initially set to 0; however, with each iteration (including the first), that value is incremented by one within the conditional statement of the loop itself. On the tenth loop, i = 10, which means i < 10 is no longer true and thus the loop halts.  You can also use the decrement operator, which might look something like this: i = 10; while (--i > 0) { // perform these actions} } The condition in a loop does not 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 , as in the following: while (someFunction()) { // perform these actions } In this exercise you'll create a drop-down list using a while loop. -
Open pictureShow1.fla in the Lesson10/Assets folder. The main timeline includes two layers: Background and Dynamic Elements. Not surprisingly, the Background layer contains the project's background graphic. The Dynamic Elements layer includes four movie clip instances: three above the stage that contain pictures and an instance on the stage (named dropDownList) that contains a button labeled Menu and another movie clip instance named item. The item instance which is inside, or part of, the dropDownList instance is made up of two elements, a dynamic text field with an instance name of itemName and a button that appears as a partially transparent white box. This instance plays an important part in this exercise because it will be duplicated in a process to dynamically generate clickable menu choices.  Most of the scripts in this exercise will be attached to movie clip instances that is, they'll be triggered by clip events. -
With the Actions panel open, select the dropDownList movie clip instance and add the following script: onClipEvent (load) { buttonNames = ["Paris","New York","London"]; item._visible = false; } In the above script, you're using the load clip event on the dropDownList movie clip instance to initialize a couple of things: The first action creates an array named buttonNames , which contains names that will appear in the drop-down list. The second action makes the item movie clip instance invisible. (Since you'll only be using it as a template for creating duplicates, the instance itself does not need to be visible.) -
Just below the last line of ActionScript on the load clip event enter this function: function populateList () { spacing = item._height + 2; numberOfButtons = buttonNames.length; } This function will duplicate the item movie clip instance, align the duplicates under the Menu button, and change the text displayed in the duplicated instances. Because this function dynamically generates the list of choices, we need to consider vertical spacing between the list-choice buttons in our script. In its first action, this function creates a variable named spacing . This variable's value is determined by retrieving the height of the item movie clip instance and adding two to that value. Our loop will use this value to set the spacing between the top of one duplicated movie clip instance and the top of the movie clip instance underneath it.  The numberOfButtons variable gets its value from the length of the buttonNames array (that is, how many elements it contains). The while loop used to build the drop-down list will then use that value to determine how many iterations to perform. Because the length of buttonNames is currently 3 (because the array contains three city names), the loop we are about to set up will loop three times, creating a list button with each loop. If we placed another city's name in the array, its length property would be 4, which means the loop would automatically adjust accordingly and create four list buttons. -
Add the following ActionScript to the populateList() function just below its last line of code: var i = -1; while (++i < numberOfButtons) { name = "item" + i; item.duplicateMovieClip(name, i); this[name].itemName.text = buttonNames[i]; this[name]._x=0; this[name]._y = i * spacing; this[name].pictureID = i + 1; } You've just scripted a while loop that duplicates the item movie clip instances needed for the drop-down list, positions them, and gives them a name to display. Before the loop is defined, the script creates a local variable named i and assigns it a value of -1 . NOTE The letter i is commonly used as the name of an incremental variable in loops. The next line of ActionScript starts the while loop and defines the condition that makes the loop continue working. It basically states that while the incremented value of i is less than the value of numberOfButtons , keep looping. When the loop begins, i will have a value of 0 . This is because although i is initially assigned a value of 1 , the increment operator (++ ) increments its value by one prior to each loop including the first. Because numberofButtons will have a value of 3 (as discussed in the previous step) and i is incremented by one with each iteration, the condition this loop analyzes will prove false after three iterations. The first action in the script creates a variable called name , which is assigned a dynamic value based on the current value of i . Since that value is incremented with each iteration of the loop, in the first iteration of the loop, name is assigned a value of "item0" and in the second iteration it is assigned a value of "item1" and so on. The next line uses the duplicateMovieClip() method to create a new instance of the item movie clip. There are two parameters to this method, separated by a comma: The first assigns an instance name to the duplicate that is created, and the other parameter assigns the duplicate a depth (think of this as the stacking order). As defined in the method's parentheses, we'll use the current value of the name variable (dynamically set with the last action) as the instance name of the duplicate, and we'll use the current value of i to set the depth. With the next four actions in the loop, this[name] references the name of the duplicate just created. You'll remember from Lesson 7 that this special syntax provides a dynamic way of referencing a variable name in ActionScript. As discussed in the preceding paragraph, in the loop's first iteration, name is assigned a value of "item0" . Hence, with the first iteration of the loop, these lines of script could be rewritten as follows: item0.itemName.text = buttonNames[i]; item0._x= 0; item0._y = i * spacing; item0.pictureID = i + 1; Because in each loop iteration, the value of name is updated as well as used to name the duplicate created, these actions reference the duplicated instance. Each duplicate contains the two elements included in the original item movie clip instance: the white button and the dynamic text field named itemName. Thus, the third line in the looping statement this[name].itemName.text = buttonNames[i]; sets the value of itemName.text (and thus the text that will be displayed over the button) in the duplicated instance. That value is set by using the current value of i to reference a string in the buttonNames array created in Step 2. In the loop's first iteration, the value of i is 0 , which means that the value of itemName.text would be buttonNames[0] , or the first element in that array, which you'll remember is Paris. The next two lines of script position the duplicated instance on the stage. As shown in the script, each of the duplicates will have the same x position, 0. The y position of the duplicate is dynamic, and is determined by multiplying the variable i by spacing . This has the effect of spacing the duplicates evenly, an equal distance apart, vertically. Finally, the last action in the loop creates a variable named pictureID inside the duplicated instance. The value that the variable is assigned is based on the current value of i plus 1. This variable will not be used until the next exercise, where it will be employed to determine which set of pictures to display.  -
Double-click the dropDownList movie clip instance to edit it in place. Select the Menu button, and with the Actions panel open, add the following script: on (release) { populateList(); } When this button is released, the populateList() function we just defined is called and a set of list buttons (dynamically created by the function) appears. -
Choose Control > Test Movie. Click the Menu button to test your script. When you click the Menu button, the populateList() function is called, and several duplicates of the item movie clip instance are created, positioned, and populated with text all almost instantaneously. -
Close the test movie and save your work as pictureShow2.fla. You have now created a drop-down list using a while loop. In the next exercise you'll put this list to work by making something happen when you click on a list item. |
