Drop-Down Menu

Please note: that in this tutorial I'm showing you how to make a drop down menu that you'll have to put on the rigth hand side (like the example), and that the script changes a bit depending on where you put it. See the extra step

1. Make a new 300×200 flash document.

2. Go to: Insert->New Symbol->Movie Clip, and name it menu. Put the menu, and its buttons in it.

In order for a button to work properly you need to add one of the following Action Script to the button:

on (release) {
if (_root.status != 2) {
_root.int_cm = setInterval(_root.CloseMenu, 10);
//You can reduce the interval, in order for the menu to hide much quicker
//
//Now put whatever you want the button to do, such as
//gotoAndPlay, or GetUrl etc
}
}

You could also make the menu go back to its initial position without sliding by using this:

on (release) {
if (_root.status != 2) {
_root.status = 0;
_root.menucontainer._x = _root.mdp;
//
//Now put whatever you want the button to do, such as
//gotoAndPlay, or GetUrl etc
}
}

3. Again, go to: Insert->New Symbol->Movie Clip, and name it button.

Make two layers, name them text and background, respectively:

In the layer: text Insert Three Key Frames, and in each frame put the script:

stop();

In the first frame, with the Text tool, write "open". Click on the text, and select the Free Transform Tool:

rotate the text 180°Counter Clock Wise (CCW), center the text with the Align Tool, and you should end up with this:

Now do the same thing for the Second Frame. But, instead of writing "Open", write "Close"

For the Third frame, leave it blank.

4. In the layer: background, place the background of the button:

Here's what your Timeline should look like:

5. Now, again, go to: Insert->New Symbol->Movie Clip, and name it menucontainer

And, Drag&Drop the Movie Clip: menu onto the menucontainer's stage:

Give the Movie Clip menu, "menu" as its instance name:

Make sure you center the Movie Clip menu.:

Now Drag&Drop the Movie Clip: button onto the menucontainer's stage, so that it looks something like this:

Give it "menub" as its instance name:

6. Get back on the main stage, Drag&Drop the Movie Clip menucontainer on the right of the main stage, so that only the "open" button is visible on the stage:

Give the Movie Clip Menucontainer, the instance name: menucontainer:

To this movie clip, paste this script:

onClipEvent (load) {
_root.status = 0;
_root.mdpx = _root.menucontainer._x;
_root.mdpy = _root.menucontainer._y;
// Menu Default position
}
onClipEvent (enterFrame) {
this.menub.onRollOver = function() {
if (_root.status == 0) {
_root.int_om = setInterval(_root.OpenMenu, 40);
} else if (_root.status == 1) {
_root.int_cm = setInterval(_root.CloseMenu, 40);
}
};
this.menub.gotoAndPlay(_root.status+1);
}

7. On the First Frame of the Main stage, paste this script:

Extra

Replace the ActionScript from the step 7 with this actionscript if you place the menu at the Top of the Movie.

Replace the ActionScript from the step 7 with this actionscript if you place the menu at the Bottom of the Movie.

Replace the ActionScript from the step 7 with this actionscript if you place the menu on the left hand side of the Movie.