Guide on How to Create a Flash CS4 Drop Down Menu

Guide on How to Create a Flash CS4 Drop Down Menu
Page content

Introduction

Before you can even think about how to create a Flash CS4 drop down menu, you need to have the right Flash content creation software—in this case Flash CS4. Now having the right tool is just not enough. You need to be familiar with how to use it. This means knowing the Flash CS4 user interface, tools and commands. Since we are going to be using some animated visuals controlled by user actions then you need to be familiar with ActionScript version 3.

Learning all these is beyond the scope of this tutorial so from here on I will assume you have some knowledge of the how to move around within the Flash Workspace.

Designing the Flash CS4 Drop Down Menu Components

A Flash CS4 drop down menu is simply a movie clip that is controlled by the user through mouse actions. With that in mind, we need to create all the necessary buttons required in our Flash CS4 drop down and lay them our including the backgrounds and text. The buttons can simply be made out of rectangles styled appropriately with the color tool or using images.

The Flash drop down menu we are creating is similar to the one seen in the image on the left. In the Flash time-line, you will need to create a layer for the top level menu. That is the one labeled with buttons reading Link 1, Link 2, Link 3 and Link 4.

The sub-menu items will then be created on separate layer. These are the ones labeled Link 4 A, Link 4 B, Link 4 C and Link 4 D. You will then need another layer to sit in between these two layers to hold a mask that will be responsible for showing and hiding the sub-menu items. The mask should have a height the same as the largest sub-menu while it should have a width the same as a single sub-menu. The Mask will be created out of a rectangle.

Also under the mask, there will be a layer for the static text of all the sub-menus and finally another layer with controls to stop the movie clip and take the movie back to the first frame and hides all active sub-menus when the user moves the mouse away from the menu. This is wrapped over an invisible button that catches the mouse movement events.

We will then need another layer to hold the labels which act as anchors for the Goto function to jump to. There should be one for each sub-menu. Next there should be another layer to stop the current running script after a certain number of frames before reaching frames marked for other sub-menus.

Finally there should be a frame to hold the ActionScript code that makes everything interact together. If all is well up to this point you should be thinking of a total of eight layers.

The ActionScript Code

The ActionScript code that makes everything come alive consists of just three parts. The code that links the menus, the code that handles the rollovers and the code that listens for events on the main menu.

Link Code

_function goToLink1(event:MouseEvent):void { var url1:URLRequest = new URLRequest("https://bit.ly/f8Or3W_");navigateToURL(url1, “_self”); }linkBtn1.addEventListener(MouseEvent.CLICK, goToLink1);

Rollover Code

function link1Over(event:MouseEvent):void { gotoAndPlay(“one”);}

Listener for main menu

linkBtn1.addEventListener(MouseEvent.ROLL_OVER, link1Over);

This code is simply repeated over for the number of menu items you have. The same goes for what is in the time-line. All you need to change is each occurrence of a number in the code. For example duplicate the code above and every occurrence of 1 changed to 2, 3 and so on.

Conclusion

That is all you need to know as far as the theory of how to create a Flash CS4 drop down menu. I have provided the Flash CS4 drop down menu source file for download where you can get your hands dirty and look into the code based on the references I have given in this tutorial.

You can also look into how to create JavaScript drop down menus or a JavaScript drop down list.