down menus are a very efficient kind of menus. They fit all your
buttons beautifully in an application without taking up a lot of your
real estate. In this tutorial I will show you how you can make drop down
menus in flash. This is a fairly advanced tutorial and you will need to
have ActionScript 3.0 knowledge to do this one. You should also know
the basics of making simple buttons. If you don't know how to do that
then you can read it in my previous post: Flash Button Tutorial.
let's start making the drop down menu. Create a new ActionScript 3.0
flash application. The first thing we need to do is to create all the
visual elements of our menu, after that we can go on adding the code
required to bind the elements. First off create a new button for
the drop down. This button is the one which will be visible at all
times an hovering on this will show us the menu. I have created a very
simple buttons that is a rectangle with the text "menu".
you need to create the buttons that would be in the menu. Again, I have
created a button with just a simple rectangle and text.
I create a movie clip named menu and I place my menu buttons in it. I
have placed 3 buttons in it but you can put any number of buttons you
now to bind all of this together, create a new movie clip. This movie
clip has to contain the whole menu and its code. In this movie clip,
drag the menu and the button with the text "menu" that we have created
earlier. It should look something like this now.
You can name the home button "hover_btn" and the menu as "menu_mc".
Now we are finished creating all the visual elements. Only the code needs to be added.
Insert a new layer in the movie clip for the action script and paste the following code in it.
menu_mc.visible = false;
menu_mc.visible = true;
menu_mc.visible = false;
Don't worry if you don't understand the code. Let me take you through it step by step.
the first line we are making the menu invisible because it would only
be visible when we hover our cursor over the hover_btn button. The next
two lines add event listeners to our current movie clip that detect when
the user hovers the cursor over it and when they move the cursor
away. We are calling the function drop on hover over and the
function up on hover up. In the drop function we are simply making the
menu visible because this function is called when we hover the cursor
over the button. Similarly in the up function we are doing the opposite
action because this function would be called when we take the mouse off
the drop down menu.
The drop down menu is now complete. Go to the
stage and drag the menu over there. Now test the movie by pressing
ctrl+ENTER. You can see the drop down in action.
is how a basic drop down is made. I suggest that you practice with this
drop down and try a few variations of it. Do some extra stuff in the
drop and up functions in order to make the menu even more interesting.