Task: Using Pull-Down Menus

I l @ ve RuBoard

Task: Using Pull-Down Menus

Now let's build a simple movie that uses this pull-down menu script. We'll pretend that it is a small Web site made up entirely of a single Flash movie. The pull-down menus are used for navigation.

There are three sets of menus: About Us, Products, and Store. Each of these three menus has between three and five choices.

1. Start with a new movie.

2. Create a simple button. It shouldn't have any text on it, but leave a space for a text overlay to label the button. Make sure that you use a nice over state, but the down state doesn't need to be anything special.

3. Create a new movie clip. Name it About Us Menu. Make two layers in the movie clip named Label and Buttons .

4. On the Label layer, place a copy of your button. On top of it, place the static text About Us.

5. Make the Label layer stretch across two frames. However, the Buttons layer should have two separate key frames on each frame. Name the two key frames off and on.

6. On the second frame of the Buttons layer, add three copies of the button symbol. Place them vertically right under the button in the Label layer. Add text on top of them to read History, Clients, and Partners. The finished movie clip should look like Figure 16.2. You'll also need to place a stop() command on the first frame.

   Figure 16.2. This movie clip contains a title button across both frames and other buttons only on the second frame.

   

7. Back at the root level, drag the About Us Menu movie clip from the Library to the Stage. Name the movie clip aboutUsMenu and attach this script to it:

    onClipEvent(load) {     previouslyOver = FALSE; } onClipEvent(enterFrame) {     // is the cursor over the movie clip     currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true);     // if there is a change, go to another frame     if (!previouslyOver and currentlyOver) {         previouslyOver = true;         this.gotoAndStop("on");     }  else if (previouslyOver and !currentlyOver) {         previouslyOver = false;         this.gotoAndStop("off");     } } 

   This gives the movie clip the menu functionality mentioned in the previous section.

8. Test the movie. You should be able to roll over the About Us button and see the other buttons appear. You can then roll over those other buttons without any of them disappearing . When you move completely away from the buttons, the pull-down menu collapses, leaving only the title button.

9. Repeat steps 3 through 8, but name the new movie clip Products Menu. The title button should be Products and the three buttons under it Widgets, Toys, and Power Tools. At the root level, name the movie clip productsMenu. Test the movie again to make sure that this one works.

   Alternatively, you could duplicate the About Us Menu movie clip in the library, make changes to the text inside it, and drag the new movie clip to the Stage. Remember to apply the same script to it.

10. Repeat steps 3 through 8, but name the new movie clip Store Menu. The title button should be Store, and this menu should have five buttons under it: Order Online, Find a Store, Order Catalog, Track Shipment, and Return Item. At the root level, name the movie clip productsMenu. Test the movie again to make sure that this one works.

You can see my finished example at 16pulldownsite.fla. No scripts are attached to the buttons, but that is the easy part. You could make each button go to another frame in the movie, but stretch the layer with all the menus across the entire movie. This way, the menus act as the navigation solution for the movie.

I l @ ve RuBoard