Drop Down Menus - Be A Flash Menu Master!

This simple but very useful way of navigating in Flash will be familiar to most users, easing one of the most common complaints, Flash navigation.

Body copy:

Flash websites generally aren’t known for their ease of use. Nearly every site has a non-standard user interface, which can mean trouble for your surfing guests as they spend precious time getting used to your user interface.

One interface that most people who’ve used a computer for more than 20 minutes can handle is the drop down menu. Quick and easy to make when you know what your doing, they’re great for sites and projects that are built with expansion in mind. Add another item, add another option in one of the menus.

This example is actually based on a drop down menu flash file that can be found at http://www.jake-man.co.uk/ , a personal site of mine I made about video games consoles. As I collected more consoles, I needed to be able to add them to specific genre, based on the consoles processor. The drop down menu proved a great way to handle this, as I could easily add more items in as and when needed.

The clever part of this drop down menu is the “invisible button”, one of every flash designers best weapons! No matter what project I’m working on, I end up using an invisible button somewhere.

Basically an invisible button is simply a flash button, with no content in the first 3 frames, just one object/shape in the hit area. You can expand on this to add sounds in the “over” stage, so as a user rolls over the invisible button, a sound plays. There is a lot you can use them for, so it’s good to start using them as soon as possible.

What do I need before I start?

You’ll need Macromedia Flash 5, which is on the cover CD

How hard is it?

Easy – a knowledge of buttons and frame labels and movie clips should be all you need.

How long will it take?

10-15 minutes

Walk through: A 14 stage walk through of the software with a grab for each stage and 50-60 words.

Stage 1

First things first… decide the size of your movie, frame rate and background colour. You can change these later, but it may give you some headaches if you drastically change scene sizes.
I’ve chosen a black background, a frame rate of 21 fps and a size of 120 pixels wide by 400 pixels tall.

Stage 2

It’s time to add our main menu options. For my console-related site, I’ve grouped everything by processor. 8 Bit, 16 Bit and so on. Add each menu option as separate pieces of text, might as well choose the font and colour now.

Stage 3

Select the first menu option, and hit F8 (or select Insert>convert to symbol… ) and name the movieclip something useful. For the “8 Bit” piece of text, I’ll name the movieclip “text-8bit”. Do the same with all the other separate menu option text.

Stage 4

Now select the “8 Bit” movie clip, and make another movie clip by hitting F8 again. Name this one “menu-8bit”. Edit the freshly created “menu-8bit” by double clicking on it (confusing at first, I know!) in the library and set up the layers as shown in the picture.

Stage 5

We’re now ready to start working on how our menu will behave. We need one frame for an inactive menu state, and one frame for when the menu item is clicked on. Add keyframes on frame 5, and add a label named “closed” in frame 1, and a label named “open” in frame 10.

Stage 6

We need a little bit of actionscript on these 2 labelled frames, nothing major, just a stop command to keep the movie from rolling along on its own. Add the command to each frame as shown in the picture.

Stage 7

Time to make our invisible button. Create a rectangle in a blank layer underneath the “8 Bit” menu option. Select the rectangle and hit F8 again, give the button a name, I suggest “button-invisible menu”. Edit this button, by double clicking on its name in the library.

Stage 8

Here’s the clever part… simply grab the keyframe in the “up” state of the button and drag it over to the “hit” frame. This should result in a blank keyframe on the “up”, “over” and “down” states, but a rectangle in the hit area.
The button will give no visible feedback in this state, but will act as a hot spot. Great for adding buttons to Photos or artwork…

Stage 9

…but we want to make a menu. So we need to add something in the rollover frame of the invisible button, so copy the rectangle from the hit area and select Edit>Paste in Place to duplicate the menu. Now you can change the colour, the transparency, add a sound effect etc. Do the same in the “down” frame too…

Stage 10

So we have our menu option in the first frame, complete with a button that needs a script… so click on the button once, open the actionscript window, and double click on the Go To command in Basic Actions. Select ‘Type: Frame Label’ and enter ‘open’ in the box, and uncheck the “Go to And Play” box.

Stage 11

In the “open” frame of our menu, we need to add the list of options that will appear when our “8 Bit” menu is clicked on. I’ve added a few names of some consoles… try and keep the first list item just under where the “8 Bit” would appear. Create a new layer at the very bottom and add a background square, so your menu blocks the other options when clicked.

Stage 12

In the layer beneath the menu options in the “open” frame I’m going to drag the “button-invisible menu” out from the library, one for each menu option and resize them to fit. The script for each of these buttons determines where the user goes when they click… in this case, I’m simply going to load another web page in a frame, you can see the script in the picture.

Stage 13

Finally, when the user “rolls off” the menu, we want to return to the “closed” frame. The best way to make this happen is to have 3 or 4 huge invisible hit areas to catch the users mouse. Create another invisible button as in stage 8, only filling in the hit area, and add the script to the new button as in the picture, then duplicate twice.

Stage 14

Repeat this for each main menu option you need. I followed the whole process 4 times for my menu. Be sure to reuse the invisible buttons as often as possible, as this reduces the final file size of the movie. After all, a simple menu doesn’t have to be over 200k!