Displaying Dynamic Content | Macromedia Flash MX: Training from the Source

I l @ ve RuBoard

Flash has requested the data from map.php, but before Flash can display that data, you must make sure it's fully loaded. You need to add another function, which will display the data when the onLoad event for the locData object occurs.

You should still have map2.fla open when you start this exercise.

Add another function to frame 1 of the Actions layer:
```
  function showList(success) {   if (success) {   }   }  
```
Add this function before the getList function. This function will be called by the getList function, so you have to make sure the function is loaded before the code attempts to call it. Adding it before the getList function ensures that it is.

The sendAndLoad method of the LoadVars object requests the data from a specified URL, but you have to make sure the data has loaded before you can actually use it. The showList function, which has a parameter named success , specifies what to do when the data has loaded. If the value of success is true , the ActionScript you add inside the if statement will run.

NOTE

You have to add a little more code to the getList function to trigger the showList function. You'll do that later in this exercise.
Inside the if statement add the following code:
```
  animalList.removeAll();   for (var i=0; i<this.numAnimals; i++) {   trace(this["common"+i]);   animalList.addItem(this["common"+i], i);   }  
```
The showList function should now look like this:
```
  function showList(success) {   if (success) {   animalList.removeAll();   for (var i=0; i<this.numAnimals; i++) {   trace(this["common"+i]);   animalList.addItem(this["common"+i], i);   }   }   }  
```
The code you just added sets up the animalList instance of the ListBox component to display the data from the server. All instances of the ListBox component are copies of the built-in FListBox object, which has several methods , including removeAll and addItem . This code takes advantage of both methods.

The first line of code you added, animalList.removeAll(); , removes all the labels and data in the animalList instance of the ListBox component. If you already had values in that instance of the component, this new code wipes out the data.

The next block of code is a for statement. The for statement runs as long as i is less than this.numAnimals . In this case, this refers to the locData object, and numAnimals is a variable set in that object. The numAnimals variable is one of the many variables you will receive from the map.php file on the server numAnimal simply provides the number of animals that is returned by the server.

Inside the for statement are two lines of code. The first line, trace(this["common"+i]); , writes the value of the "common"+i variable in the locData object each time the for statement is run. If numAnimals is 3, it will output the values of the common0 , common1 , and common2 variables in the locData object. The second line uses the addItem method of the built-in FListBox object. This method can have two parameters: label and data. The label parameter for this code is the value you traced in the first line to the animalList instance of the ListBox component (the value of the "common"+i variable ). The data value is the value of i . So the first label value will be common0 , and the first data value will be .

Add this code to the getList function:

  locData.onLoad = showList;

graphics/09fig23.gif

You need to trigger the showList function when the onLoad event of the getList function occurs, in order to make the data appear. The onLoad event occurs when the data requested by the sendAndLoad method has loaded successfully, and it will return a value of true . The getList function should look like the following when you're finished:

  function getList(btn) {   trace(btn._name);   locData = new LoadVars();   if (btn._name != "all" && btn._name != undefined) {   locData.location = btn._name;   var subtitle = btn.getLabel();   } else {   var subtitle = "Entire Zoo";   }   heading = "Animal List: "+subtitle;   locData.sendAndLoad(dataURL+"map.php", locData, POST);   locData.onLoad = showList;   }

Add the following ActionScript:
```
  getList();  
```
This code should follow the dataURL variableyou have to initialize the dataURL variable before you trigger the getList function, or Flash won't know where to find map.php.

TIP

Try adding this line of code before the dataURL variable to see what happens. You should get an error message when you test the movie. Be sure to move the call to the getList function after the dataURL variable before you save the movie, or that error will pop up, and the list box won't get the data it needs to display the animals.
Choose Control > Test Movie. Save the movie as map3.fla in the FlashTFS folder.

When you test the movie, Flash will request map.php from the server when frame 1 calls the getList function. After the data has loaded, it will be displayed in the animalList instance of the ListBox component. When you click one of the location buttons , the getList function will be triggered and will display only the animals in that location, or all the animals if you click the List All button.

After you've finished testing everything, close the Test Movie window and save the file as map3.fla in the FlashTFS folder. Now that your animal list is working, it's time to add a bit more code to display the details for each animal.

I l @ ve RuBoard