Task: Using Dynamic Buttons

I l @ ve RuBoard

Let's create a complete system of buttons using what we just learned.

Start with the movie 16dynamicbuttontest.fla.
Notice that inside the movie clip is a script attached to the button that looks like this:
```
 on (rollOver) {     _parent.buttonRolloverAction(thisAction,buttonLabel); } on (release) {     _parent.buttonClickAction(thisAction,buttonLabel); } 
```
This basically calls the functions buttonRolloverAction and buttonClickAction whenever the button is rolled over or clicked. It is up to these functions to figure out what to do based on which button was clicked.

To help these two functions determine which button was clicked, two variables are passed back to the functions. You know that buttonLabel is the visible label on the button. The variable thisAction , which is not linked to a dynamic field, will be set when the button is created.
Here is a new createButton function. It looks just like the previous one, except that a new parameter buttonAction is used to set the variable thisAction . All that is done with thisAction is to send it along on calls to the two functions in step 2. An example of a thisAction value might be something like "goto" to signify that the buttons are supposed to perform a gotoAndStop command. It can be anything you want as long as the two functions mentioned in step 2 know how to interpret it.

This example's script is long and has many parts . You may want to open the movie 16dynamicbuttons.fla and refer to its script to see how the parts fit together.
```
 function createButton(buttonLabel, x, y, buttonAction) {     this.attachMovie("buttonMovieClip","button"+buttonLevels,buttonLevels);     bmc = this["button"+buttonLevels];     bmc.buttonLabel = buttonLabel;     bmc._x = x;     bmc._y = y;     bmc.thisAction = buttonAction;     buttonLevels++;     return(bmc); } 
```

Here's a function that takes an array of button values and creates an entire set of buttons. It uses the direction parameter to determine whether to space the buttons across or down.

For this function to work, it needs to get an array passed in as the parameter buttonList . This array will have custom variable objects with the properties label and action . You'll see an example of these in the next step.

When each button is created, a new property of each object in the array is added. This property is called mc and is a reference to the movie clip created. So the array starts off containing the labels and actions of each button, but after createButtonList is done, each object in the array also has an mc property.

 function createButtonList(buttonList, x, y, direction) {     for (var i=0;i<buttonList.length;i++) {         ret = createButton(buttonList[i].label,x,y, buttonList[i].action);         buttons[i].mc = ret;         if (direction == "down") {             y += 20;         }  else if (direction == "across") {             x += 100;         }     } }

How did I get the numbers 20 and 100 in the preceding script? These are simply good distances to use according to the size of the buttons in my example movie. Larger buttons may require larger spacing, and smaller buttons may require smaller spacing. I got these values with a little trial and error. I also wanted to make sure that the vertical spacing was just right so that when the buttons are drawn in a vertical strip, they barely touch each other with no gap.

Next is an example of a list of buttons. Each element of the array is a variable object that contains label and action properties:

 mainButtonList = new Array(); mainButtonList.push({label:"About Us", action:"aboutUsButtonList"}); mainButtonList.push({label:"Products", action:"productsButtonList"}); mainButtonList.push({label:"Store", action:"storeButtonList"});

After you have a button list, you can create the buttons by calling createButtonList :
```
 buttonLevels = 1; createButtonList(mainButtonList,100,100,"across"); 
```

If you run the movie now, it will create three buttons. However, those buttons will do nothing if rolled over or clicked. So let's create the buttonRolloverAction function. This performs a slightly different function depending on which of the three buttons is rolled over.

 function buttonRolloverAction(thisAction,thisLabel) {     if (thisAction == "aboutUsButtonList") {         deleteAllButtonLists();         createButtonList(aboutUsButtonList,100,120,"down");     }  else if (thisAction == "productsButtonList") {         deleteAllButtonLists();         createButtonList(productsButtonList,200,120,"down");     }  else if (thisAction == "storeButtonList") {         deleteAllButtonLists();         createButtonList(storeButtonList,300,120,"down");     } }

I'll explain the deleteAllButtonLists function in step 9.

The buttonRolloverAction function calls createButtonList with one of three different arrays and locations. The locations are planned so that the list of buttons appears under the button that is being rolled over.

The three arrays are defined earlier in the code:

 aboutUsButtonList = new Array(); aboutUsButtonList.push({label:"History", action:"goto"}); aboutUsButtonList.push({label:"Clients", action:"goto"}); aboutUsButtonList.push({label:"Partners", action:"goto"}); productsButtonList = new Array(); productsButtonList.push({label:"Widgets", action:"goto"}); productsButtonList.push({label:"Toys", action:"goto"}); productsButtonList.push({label:"Power Tools", action:"goto"}); storeButtonList = new Array(); storeButtonList.push({label:"Order Online", action:"goto"}); storeButtonList.push({label:"Find a Store", action:"goto"}); storeButtonList.push({label:"Request Catalog", action:"goto"}); storeButtonList.push({label:"Track Shipment", action:"goto"}); storeButtonList.push({label:"Return Item", action:"goto"});

The deleteAllButtonLists function makes all the three button lists defined in step 8 disappear. The result is that all three lists disappear, but the one list linked to the button being rolled over then reappears. So only one of these three lists is visible at a time.

The first step is to make an array that holds references to the three arrays of button lists.
```
 allButtonLists = new Array(); allButtonLists = [aboutUsButtonList,productsButtonList,storeButtonList]; 
```
Next, we'll need a function that takes a list of buttons and removes all the movie clips, based on the mc property of each button created when the button was created.
```
 function deleteButtonList(buttons) {     for (var i=0;i<buttons.length;i++) {         buttons[i].mc.removeMovieClip();     } } 
```
Finally, here is the deleteAllButtons function that loops through the allButtonLists array and calls deleteButtonList with each one.
```
 function deleteAllButtonLists() {     for(var i=0;i<allButtonLists.length;i++) {         deleteButtonList(allButtonLists[i]);     } } 
```
Notice that when all the buttons for the three lists in step 8 were created, "goto" was assigned at the thisAction property. This will come in to play with the buttonClickAction function. If the thisAction property is "goto" , the thisLabel property passed in will be used to determine which frame of the movie should be jumped to. In the case of our example movie, however, there is only a simple trace command used to demonstrate that the button does work.
```
 function buttonClickAction(thisAction,thisLabel) {     deleteAllButtonLists();     if (thisAction == "goto") {         trace("Goto: "+thisLabel);     } } 
```
Although this example contains a long script, it is not very complex. There is only some manipulation of movie clips, arrays, and variable objects, so there is a lot of code, but not much complexity.

Check out the movie 16dyanmicbuttons.fla if you haven't yet done so. Try changing the labels of the buttons and try adding and removing buttons to see the effect. Get to know how the functions work.

I l @ ve RuBoard