Controlling the Menu's Buttons Compared with the previous exercise, the menu's buttons are a walk in the park. Remember that a button's scope means that event functions affect the Timeline the button is on, not the button's Timeline. That means that the buttons control the main Timeline unless you specify otherwise. In this exercise, you will need to specify otherwise because you want to control the main Timeline from a Timeline that is nested inside a couple of movie clips. That's about as tricky as it gets for this exercise, and it really isn't too bad at all if you remember the section on scoping that was covered earlier in this lesson. When one of the buttons in a menu is clicked, a message goes back through a couple of Timelines to the main Timeline. Then the playhead moves to a new page. 1. | Add instance names for each of the buttons inside the menu using the Property inspector.
These buttons need instance names so you can target them with your ActionScript. Each of the menu's buttons, as you might remember, are nested inside the movie clip menu that's nested inside the main menu movie clip. So click productsmenu_mc and then menu1_mc, and inside you find two buttons. Select the button that says catalog and enter the instance name catalog_btn into the Property inspector. Then click the button on the right and enter the instance name reviews_btn.
 Navigate back to the main Stage using the edit bar, and repeat this process for the other two menus. The names you are giving them should be fairly intuitive. Give the buttons inside menu2_mc the instance names tour_btn and news_btn. Then give the menu3_mc buttons the instance names feedback_btn and map_btn.
| 2. | Add ActionScript that is used to control the six buttons you find in the drop-down lists you just created. Enter this code following the code you added in the previous exercise.
You initially created these buttons to help visitors navigate throughout the Tech Bookstore, and you just gave them instance names so you can target them using ActionScript. The ActionScript targets the button so the function is called when the button is clicked; then the function tells the playhead on the main Timeline to move to the correct page in the Tech Bookstore.
Note Remember that wherever a button is placed, the Timeline that the button is placed on is affected. Therefore, even though you are writing code for a button that is nested way inside a movie clip, the function you are writing affects the current Timeline. So you need to tell Flash where to look for the button, but you do not need to scope back to the correct Timeline to move the playhead. Select Frame 1 on the actions layer of the main Timeline. Expand the Actions panel and enter the following ActionScript into the Script pane.
this.productsmenu_mc.menu1_mc.catalog_btn.onRelease = function() { gotoAndStop("catalog"); }; this.productsmenu_mc.menu1_mc.reviews_btn.onRelease = function() { gotoAndStop("reviews"); }; this.companymenu_mc.menu2_mc.tour_btn.onRelease = function() { gotoAndStop("tour"); }; this.companymenu_mc.menu2_mc.news_btn.onRelease = function() { gotoAndStop("news"); }; this.contactmenu_mc.menu3_mc.feedback_btn.onRelease = function() { gotoAndStop("feedback"); }; this.contactmenu_mc.menu3_mc.map_btn.onRelease = function() { gotoAndStop("map"); };
You should recognize button functions from code that you already entered for other buttons in the FLA files you have created. Although the structure might be familiar, targeting the button might not be. In this context, the this keyword refers to the current Timeline, which is the main Stage. Although this code works without it, it can be useful if you are moving your ActionScript around. Following this, you target contactmenu_mc, which is sitting on the main Stage and then inside this clip target menu3_mc. Inside menu3_mc is the button, so continue with the instance name map_btn. Because you have now targeted the instance you want to manipulate, you can enter the onRelease event handler and the rest of the inline function.
You already have labels on every frame in which a new page begins. These frame labels are used to navigate throughout the Tech Bookstore. The gotoAndStop action targets "map" (which is the name of the frame label). Frame labels must be placed within quotation marks (which mean a string).
Amazingly, you have now finished the main bulk of ActionScript that you find in the Tech Bookstore. The remainder of the work involved on the Tech Bookstore is integrating the FLA files you built in this and previous lessons into the main site. You will also optimize the Flash site, which is described in Lesson 10.
| 3. | Test the buttons by selecting Control > Test Movie to see if the buttons work correctly.
When you click a button to open a menu, it animates downward. When you roll off the menu area onto the invisible button, it should then animate upward to "close" the menu. If you click a button in the menu, it should take you to a new page in the Tech Bookstore and stop. If the menus don't animate properly, go back and double-check your instance names and quickly check the code in this lesson. Make sure that each button in the three menus takes you to the correct page as well. If you still cannot get the menu working, locate the finished file on the CD-ROM and compare your file against what you find in the completed FLA file.
Right now, the content for these pages doesn't load. You will address that in the next lesson. Right now, just be sure that the pages are changing by looking at the title at the far right of the Stage.
| 4. | Save the changes you made to the FLA file.
You can find copies of the finished productscalled bookstore13.fla, catalog.fla, home.fla, and news.flain the lesson09/complete folder on the CD-ROM. In lesson09/complete/catalog, you will find catalog1.fla and catalog2.fla. If you are having any problems with the code you have typed in, you can find a copy of it in this file on the main Timeline.
In the next lesson, you start out by loading in all the SWF files you created in this lesson and earlier lessons. Then you test and debug the Tech Bookstore site and add a progress bar (the ProgressBar component) for each of the sections in the application.
|
|
