Conditional statements check to see if a condition is true before performing the enclosed ActionScript. If the condition is not true, the ActionScript enclosed by the conditional statement is not performed. Using conditional statements makes it easy to create special circumstances for certain actions. For example, if you want a button to trigger an event only when a variable is false, you can add a conditional statement to do that. The conditional statements in ActionScript usually start with the if action, but they can include else if statements and else statements. You will add a conditional statement to your menu in the following exercise, which starts with zoo33.fla open .
-
Open assets.fla in the Lesson07/Assets folder as a library. Open the library for the current movie, and drag a copy of the Min Max Clip symbol from the assets.fla library into the current library.
The Min Max Clip symbol is a movie clip. Open it in symbol-editing mode if you'd like to take a look. It's relatively simple, consisting of two frames . The first frame of the movie clip contains a graphic that indicates the user can minimize the menu. This frame also has a stop action (in the Actions layer), and its Frame label is min. The second frame has a graphic that indicates the user can maximize the menu. It also has a stop action, and its Frame label is max.
The Min Max Clip you added to the current library already has its Linkage properties modified in the assets.fla library. The Min Max Clip has an Identifier of minmax and is set to export in the first frame of the movie. If you'd like to check these settings, right-click (Windows) or Control-click (Macintosh) the name of the symbol in the library, and choose Linkage. The Linkage Properties dialog box will open.
If you opened the Min Max Clip symbol in symbol-editing mode, be sure to return to the main movie before you continue.
-
Select frame 1 of the Actions layer, and make sure you have the Actions panel open. Add the following ActionScript at the end of the current script pane contents:
menuClip.attachMovie("minmax", "minmax", ++cDepth); menuClip.minmax.useHandCursor = false; menuClip.minmax._y = 0; menuClip.minmax._x = menuClip.top._width - menuClip.minmax._width; menuClip.minmax.maximized = true; 
This ActionScript should go after all the other ActionScript attached to frame 1 of the Actions layer.
Most of this code should be somewhat familiar to you. The first line attaches an instance of the Min Max Clip symbol to the menuClip instance. It gives the attached symbol an instance name of minmax , and sets its depth to the incremented value of cDepth . Then the code sets the useHandCursor property for the attached movie clip to false and sets its _y property to . Next the ActionScript sets the _x property of the minmax instance to the width ( _width ) of the top instance minus the width of the attached minmax instance. Finally, it initializes the maximized variable in the minmax movie clip's timeline with a value of true . The maximized variable is not part of any built-in object in Flash: it's a unique variable that will be used later in this lesson.
-
Now add the following ActionScript:
menuClip.minmax.onPress = function () { } 
This code, which simply sets up the onPress event handler for the minmax movie clip, should follow the code you added in the last step.
-
Inside the onPress event's function, add this ActionScript:
if (this.maximized) { this.maximized = false; this.gotoAndStop("max"); for (var i=0; imenu.length; i++) { menuClip["item"+i]._visible = false; } } 
This code should be typed inside the curly braces you added in the last step, so the onPress event handler should look like the following:
menuClip.minmax.onPress = function () { if (this.maximized) { this.maximized = false; this.gotoAndStop("max"); for (var i=0; i<menu.length; i++) { menuClip["item"+i]._visible = false; } } } The ActionScript you just added contains an if statement, which is also called a conditional statement. The syntax for an if statement is:
if (condition) { } If the condition is true, the code inside the curly braces is run. If the condition is not true, the code inside the curly braces is ignored.
The condition for this if statement is maximized . You already initialized the maximized variable with a value of true for the minmax instance in step 2 of this exercise, so the condition for this if statement will also be true when the onPress event is first invoked.
When the condition for the if statement is true , the maximized variable is set to false . Then the this object (the minmax instance) is told to go to the frame labeled max. Next, a for statement sets the _visible property of each of the Menu Piece movie clips that were added by the previous for statement (all of the Menu Piece instances, except the top instance) to false , which simply hides them.
-
Following the if statement, add this ActionScript:
else { this.maximized = true; this.gotoAndStop("min"); for (var i=0; imenu.length; i++) { menuClip["item"+i]._visible = true; } } 
You can add this code immediately following the if statement. The first line of this code can be added on the last line of the if statement, so the resulting code looks like this:
if (this.maximized) { this.maximized = false; this.gotoAndStop("max"); for (var i=0; i<menu.length; i++) { menuClip["item"+i]._visible = false; } } else { this.maximized = true; this.gotoAndStop("min"); for (var i=0; i<menu.length; i++) { menuClip["item"+i]._visible = true; } } The code you just added runs when the condition for the if statement is not true . This code basically does the opposite of the code that's run when the if statement's condition is true . It sets maximized to true , tells the minmax instance to go to the frame labeled min, and then sets the _visible property of each of the Menu Piece movie clips in the for loop to true .
The resulting onPress event handler for the minmax movie clip should look like this:
menuClip.minmax.onPress = function () { if (this.maximized) { this.maximized = false; this.gotoAndStop("max"); for (var i=0; i<menu.length; i++) { menuClip["item"+i]._visible = false; } } else { this.maximized = true; this.gotoAndStop("min"); for (var i=0; i<menu.length; i++) { menuClip[">item"+i]._visible = true; } } } -
Choose Control > Test Movie.
You should now be able to minimize and maximize the menu when you click the attached instance of the Min Max Clip. The menu isn't really becoming smaller or largerthe secret in this programmatic trickery is that you're just changing the visibility of all the menu items when you click the Min Max Clip.
-
Save your movie as zoo34.fla.
You now have a menu, but it doesn't actually make the movie do anything yet. You'll add that ActionScript in Lesson 11. If you had trouble with any of the concepts we've gone over in this lesson, you may find it useful to go back and read the explanations again. It's important that you understand the basics of programming in ActionScript before you continue to the "good" stuff!
