ActionScript drop-down menu

In this easy tutorial made for Flash 8 I will show you how to create a set of cool drop-down menus for your Flash website. You will see and learn:

• How to create a generic menu button and prepare it for dynamic use,
• How to use a loop to create the main horizontal menu bar,
• How to dynamically assign labels to buttons in a snap,
• How to change the color of your menu with just a couple of lines of ActionScript code,
• How to create a drop-down menu for each main link and make it interactive and much more!

You can see the live Flash example of the menu that you are going to create in this tutorial below. The contents of the website are dummy contents, of course, made just for this tutorial.

1. Creating the reusable menu button

1.1. Open a new Flash document by selecting File > New > Flash Document.

1.2. Select the Rectangle tool (R). In the Options area of the Tools panel, the Object drawing (1) and Snap to objects (2) options should be turned off, like the screenshot below shows.

1.3. While the Rectangle tool is still selected, go over to the Colors part of the Tools panel and disable the stroke color: Select the stroke color (1), click the No color icon (2) and then select any flat color for the fill (3).

1.4. Draw a rectangle and make its dimensions 113 x 22 pixels. You can do this by drawing any kind of rectangle, selecting it with the Selection tool (V) and then entering its dimensions in the appropriate fields in the Property inspector.

1.5. Select Modify > Convert to Symbol (shortcut: F8). Proceed like this:

1. Call the symbol menu button.
2. Choose Movie clip as symbol type.
3. Select the upper left corner as the symbol's registration point.
4. Click OK.

1.6. Open the Library if it isn't already open, by selecting Window > Library. Your menu button movie clip symbol should be sitting there nicely. Right-click on the menu button symbol inside the Library and select Linkage from the context menu.

1.7. In the Linkage Properties window, make the following selections: Check (enable) the Export for ActionScript option (1). The Export in first frame option (2) will automatically become checked too. You can leave the Identifier (3) as it is set by Flash — menu button, the same as the symbol's name. Click OK.

REMEMBER The symbols which are set for export in the first frame will be loaded before all the other content of your SWF file, even the one situated in the first frame. So if you happen to have heavy symbols (lots of KBs) that are going to be exported in the first frame, you will see nothing but a blank stage before they have been completely loaded, even if there is a preloader in the first frame. The solution is to have a good external preloader which will load your SWF with the aforementioned symbols. In this tutorial's example, the menu button is so lightweight (less than 1 KB in size) that it will load almost instantly.

1.8. Double-click the menu button's movie clip icon in the Library to enter inside the symbol.

1.9. The rectangle shape inside the menu button symbol should be selected — select it if it isn't.

1.10. Select Modify > Convert to Symbol. Yes, you are going to make a movie clip inside the menu button movie clip symbol itself. Select:

• Movie clip as type of symbol, just like you did before,
• Name it button background and click OK.

1.11. The newly made symbol will be selected by default. Go over to the Property inspector and enter the Instance name for this movie clip instance in the appropriate field: call it bkgColor_mc.

Why was it necessary to create another movie clip within the main movie clip? Because you'll want to change the color of different parts of the menu later, based on user interaction with it. And creating two or three different menu buttons makes no sense when you can make the needed changes by just applying a few lines of ActionScript. You will see, this is really handy and it's done in a snap!

1.12. Lock the current layer inside the menu button movie clip and call it background. Make a new layer above it and call it label. This is where the label for your menu button(s) will be displayed.

1.13. Select the Text tool (T) and make the following selections in the Property inspector:

1. Select Dynamic text, as each button will have its label assigned to it dynamically.
2. Select the generic _sans font. This choice will make the default sans serif font installed on user's machine appear on the label, whether it is a Windows, Mac or Linux machine.
3. Select 11 as the font size.
4. Select white as color. You can change this later, but just do it now to be able to more easily follow my tutorial. For the menu, I chose colors on which white is clearly seen.
5. Select the Align Center option for the text alignment. This is the best choice for a button label, since you want it to be centered inside the button.
6. Select the Use device fonts option as the font rendering method. This, together with the generic sans font type you chose a few moments ago will make your SWF's filesize much smaller. This is because the font will be read from the user's machine and so it doesn't have to be embedded in your SWF, making it smaller, which results in faster loading.
7. The Selectable option must be turned off, because selectable text on a button looks really ugly and it may even render your button unclickable.
8. Select the Single line option in the Line type menu. This is just fine for a menu button label.

1.14. Now that you have prepared your Text tool, create a dynamic text field like this:

1. Click and drag with it over the button's background area (but in the label layer).
2. Release your mouse button and the text field will appear.
3. Press Esc on your keyboard to exit the editing mode and a blue border will appear around the field.

1.15. The text field's selected now. Assign it an Instance name in the Property inspector. Name it label_txt.

1.16. Click the Scene 1 link above the layer labels to return to the main scene and timeline.

1.17. The menu button movie clip symbol on the main scene should be selected by default. Press Delete on your keyboard to remove it from the stage.

You can do this with no worries since your symbol is stored in the Library. In fact, you must erase it from the stage because you will create the entire menu by pulling the menu button symbol dynamically from the LIbrary with ActionScript. Hop onto the next page to see the ActionScript code which powers the drop-down menu.