Animating the Menu


In this exercise, you will animate the menus that slide down in the Tech Bookstore when each button is clicked. You can see the functionality of them at the sample website at http://flash.TrainingFromTheSource.com. When a button is clicked, the menu slides down, and when the visitor rolls off the menu, the menu slides up. You created the animation that the menu actually uses earlier in this book. Now you will write the ActionScript that causes the animations to play when a visitor clicks the three buttons or rolls off the menu.

1.

Open bookstore13.fla from the TechBookstore folder on your hard drive, if it isn't already open.

The file should have the edits that you made earlier in this exercise when you deleted the mcSamplechapters and mcToc from the library.

2.

Name all the instance names in the menu so you can control the buttons and movie clips using ActionScript later in this exercise.

You have to add instance names for the three main buttons in the navigation bar and then the three menus sitting behind them.

Name the three buttons at the top of the main Stage, unlocking the buttons layer if necessary. Enter an instance name of products_btn to the Products button, company_btn to the Company button and contact_btn for the Contact button. Lock the buttons layer when you are finished.

Now you need to give instance names to the three menus that are sitting behind the three buttons. It might be helpful to make the buttons layer hidden. The menus themselves are on the menu layer in the graphics layer folder. Right- or Control-click on the menu layer and choose Lock Others from the context menu. Make the mask layer hidden. Click the menu behind the Products button and give it an instance name of productsmenu_mc. Then give the menu behind the Company button an instance name of companymenu_mc and the menu behind the Contact button the instance name of contactmenu_mc. Note the suffixes that have been added to each of the symbol instances, so you can use code hinting when you start writing ActionScript.

Inside of the menu movie clips is another movie clip that you have to name. Double-click productsmenu_mc and select the menu inside that movie clip. Expand the Property inspector and give that clip an instance name of menu1_mc. You might first have to unlock the layer that the instance is on. Then select the second instance on this layer in the menu tween. Give it the same name: menu1_mc. Repeat this for the third and final keyframe in this tween.

Use the edit bar to click back to the main Stage. Double-click companymenu_mc and give an instance name of menu2_mc to the clip inside companymenu_mc. Use the edit bar to navigate back to the main Stage, and repeat the process for the final menu, entering an instance name of menu3_mc into the Property inspector. Lock the menu layer when you're finished.

3.

In Frame 1 of the actions layer, add the following ActionScript into the Actions panel. This code initializes the menu's variables. You also want to add a line of ActionScript removing the menu when the visitor Right-clicks on the Stage.

You should already have a stop action entered on this frame. Following this action, you need to add the following three lines of code. These three variables are flags that you use to track which of the three menus are currently open (if any). If the value is set to 0, the sliding menu is up or closed (inactive); if the variable is set to 1, it tells you that the menu is currently down or open (active) and visible on the Stage.

var prodmenu:Number = 0; var compmenu:Number = 0; var contactmenu:Number = 0;

Then add the following line of ActionScript after the variables:

Stage.showMenu = false;

When you add this ActionScript to the document, visitors will not see most of the Flash Player menu options when they Right- or Control-click on the SWF file after the file is published. The contextual menu that opens typically includes a number of options such as zoom and play. However, all these options are removed from the menu if you add this ActionScriptexcept for Settings (which allows the visitor to control their Flash Player settings).

4.

In Frame 1 of the actions layer, enter the following code that closes any menus that are open when the mouse rolls out of the menu's area.

The invisible button closes all the menus when a visitor rolls over it. Earlier in the book, you created an invisible button around all the menus when they are open.

You need to add some ActionScript that tells the SWF file when to call the function to close the menus whenever the mouse rolls over this invisible button. When the mouse rolls over the button, ActionScript is used to close any open menus.

Note

The following code in this example could be replaced by something in ActionScript called a for..in loop. Although this goes beyond the scope of the book, if you continue on in ActionScript, you might want to investigate and update this ActionScript accordingly. What happens is that you could place the three variables defined in the previous step into an object. Using the for..in loop, you can loop over each item in the object and execute a block of code. This would allow you to shorten the amount of code necessary and also make the ActionScript more flexible.

Because the ActionScript you are adding to the Tech Bookstore is not major, it is okay to use repetitive ActionScript. Right now, learning how to properly use these few parts of the language is the most important part of the process.

//invisible button this.btnReturnMenus.onRollOver = function() {      if (contactmenu == 1) {           contactmenu_mc.gotoAndPlay("slideup");           contactmenu = 0;       }      if (compmenu == 1) {            companymenu_mc.gotoAndPlay("slideup");            compmenu = 0;       }       if (prodmenu == 1) {            productsmenu_mc.gotoAndPlay("slideup");            prodmenu = 0;       } };

This function is placed within an onRollover event handler for the btnReturnMenus instance, which means that it executes every time a user moves the mouse onto the btnReturnMenus instance (the invisible button on the Stage). The code looks at each of the menus and checks if the value is 1 (meaning that the menu is open in the SWF file). If the value of the variable is 1, the menu is open (has fully animated downward) and needs to be closed (animated upward). Therefore, you change the playhead of the corresponding movie clip (productsmenu_mc, companymenu_mc, or contactmanu_mc) to the frame labeled slideup to animate the menu so it is closed.

Also, note the path to the nested movie clips that are being closed in the previous code. Because the code is being written for the btnReturnMenus instance, the menu movie clips can be addressed contactmenu_mc.gotoAndPlay("slideup"). This is a button code referencing the Timeline that it is placed on, which is the Stage. From the Stage, you can directly reference the contactmenu_mc instance and its gotoAndPlay method.

5.

Now that the invisible button code has been added, follow it with the code for all the menus themselves.

Now that you have the menus closing when you roll over the invisible button, it is time to add the ActionScript that animates the menus when you click the main navigation. The code is very similar to the code for the btnReturnMenus instance, except now you will be closing two of the menus if they are open and open the one that was clicked.

//products menu this.products_btn.onRollOver = function() {      if (contactmenu == 1) {           contactmenu_mc.gotoAndPlay("slideup");           contactmenu = 0;      }      if (compmenu == 1) {           companymenu_mc.gotoAndPlay("slideup");           compmenu = 0;      }      if (prodmenu == 0) {           productsmenu_mc.gotoAndPlay("slidedown");           prodmenu = 1;      } }; //company menu this.company_btn.onRollOver = function() {      if (prodmenu == 1) {           productsmenu_mc.gotoAndPlay("slideup");           prodmenu = 0;      }      if (contactmenu == 1) {           contactmenu_mc.gotoAndPlay("slideup");           contactmenu = 0;      }      if (compmenu == 0) {           companymenu_mc.gotoAndPlay("slidedown");           compmenu = 1;      } }; //contact menu this.contact_btn.onRollOver = function() {      if (compmenu == 1) {           companymenu_mc.gotoAndPlay("slideup");           compmenu = 0;      }      if (prodmenu == 1) {           productsmenu_mc.gotoAndPlay("slideup");           prodmenu = 0;      }      if (contactmenu == 0) {           contactmenu_mc.gotoAndPlay("slidedown");           contactmenu = 1;      } };

Although the code looks very overwhelming at first, it is actually quite simple because it is very repetitious. There are three menus in the navigation: products, company, and contact. For each menu item, you have to check to make sure that the other two are not already open, which you can tell because of the three variables you set earlier (prodmenu, compmenu, and contactmenu). If the values of these variables equal 1, you know that the menu is already open and therefore needs to be closed before you can display the menu that needs to open.

The code is broken down into three major sections, one for each menu item. When the products_btn is pressed, Flash executes the inline function, checking whether the compmenu variable or contactmenu variable equals 1, meaning that the menu is already open. If a menu is already open, the variable is set to 0 and the menu is closed, similar to the code for the btnReturnMenus.

Finally, you check whether the menu you need to openin this case, productsis open or closed. If it is closed, you animate the menu opening up. This code doesn't need any else statements because if the menu you want is already open, the work is done and you can just go to the next menu item to check if it's open or closed. The logic is the same with the company_btn, except you're making sure that prodmenu and contactmenu are closed.

Note

Again, for the sake of simplicity, you aren't using the most elegant code possible for the menus. What is most important to take away is not only the process but also how the menus are being targeted and the general idea of if statements. This code could be shortened, although the complexity would increase accordingly and it would be more difficult to understand how it works. Perhaps one of the best ways to simplify the code is to create a function that takes two parameters: a menu item to expand and an array of menu items to hide. By converting the logic into a function, you would be able to reuse the code for all three cases and have to adjust only the parameters that get passed into the function.

6.

Check the syntax of your code and format it in the Actions panel. Then test the menu animation in the testing environment.

Press the Check Syntax button at the top of the Actions panel. If there are problems with your ActionScript, such as a missing bracket, a message will be displayed in the Output panel and you'll have to return and check your code against the ActionScript in Steps 3 to 5. When there are no errors, click the Auto Format button in the Actions panel toolbar, which formats the ActionScript with proper indentation and adds any missing semicolons at the end of a statement.

Press Ctrl+Enter (or Cmd+Enter on the Mac) to see whether the menus animate properly in the SWF file. If you run into problems, you want to first double-check that the ActionScript matches the code in Steps 3 to 5. If it seems to be related to the masking or invisible button, ensure that the mask is properly covering where the menu drops down and that the invisible button is properly surrounding where the menu drops down.

Tip

When you test the menu, you might find that the masking is slightly out of place. If the menus exceed the mask, you need to return to the mask and resize it appropriately so it doesn't obscure the menu. You might also find that the invisible button's hit area (the one that closes the menu) does not quite work properly. That means that you need to slightly resize the menu.

7.

If the menu animation is correct, save the changes you made to the FLA file.

Save the changes you made to bookstore13.fla and then move on to the next exercise, in which you add code so the buttons inside the menu work.




Macromedia Flash 8. Training from the Source
Macromedia Flash 8: Training from the Source
ISBN: 0321336291
EAN: 2147483647
Year: 2004
Pages: 230
Authors: James English

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net