Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Creating Basic Flash Menu
by Kotetsu
Drop-down Menu for MX
by Sajid
Right Click Context Menu
by Phil
Drop-down Menu for MX
by Vecpix.com
Flash Templates
Great Variety of Flash Templates
Free Flash Tutorials
Flash Perfection features an incredibly diverse selection of Flash tutorials, which will help you to quickly discover your creative potential.
Inside Graphics
Flash Learning Tools, Special Effects, Masking, Text Effects & Interviews.
Flash & Swish  Home Flash & Swish Flash Tutorials Drop-Down Menu
rss

Drop-Down Menu

Author: Stilva.com More by this author

Added: Aug 03, 2006 Rating:  Average Rating: 3.12 Votes: 147 Position: 6992 of 13009Average Rating: 3.12 Votes: 147 Position: 6992 of 13009Average Rating: 3.12 Votes: 147 Position: 6992 of 13009Average Rating: 3.12 Votes: 147 Position: 6992 of 13009Average Rating: 3.12 Votes: 147 Position: 6992 of 13009 Level: Experienced Software:  Flash

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.

image 1

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:

image 2

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:

image 3

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

image 4

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:

image 5

Here's what your Timeline should look like:

image 6

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:

image 7

Make sure you center the Movie Clip menu.:

image 8

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

image 9

Give it "menub" as its instance name:

image 10

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:

image 11

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:

var fw = 300;
//or you could use stage.width for flash player 6 and newer
var mw = Math.round(menucontainer.menu._width);
var speed = .88;
function OpenMenu() {
status = 2;
menucontainer._x = speed*(menucontainer._x-(fw-mw/2))+(fw-mw/2);
if (menucontainer._x == (fw-mw/2)) {
status = 1;
clearInterval(int_om);
}
}
function CloseMenu() {
status = 2;
menucontainer._x = speed*(menucontainer._x-mdpx)+mdpx;
if (mdpx-1<menucontainer._x) {
menucontainer._x = mdpx;
status = 0;
clearInterval(int_cm);
}
}

Extra

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

var mh = Math.round(menucontainer.menu._height);
var speed = .88;
function OpenMenu() {
status = 2;
menucontainer._y = speed*(menucontainer._y-(mh/2))+(mh/2);
if (menucontainer._y+1>(mh/2)) {
status = 1;
clearInterval(int_om);
}
}
function CloseMenu() {
status = 2;
menucontainer._y = speed*(menucontainer._y-mdpy)+mdpy;
if (mdpy>menucontainer._y-1) {
menucontainer._y = mdpy;
status = 0;
clearInterval(int_cm);
}
}

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

var fh = 200;
//or you could use stage.width for flash player 6 and newer
var mh = Math.round(menucontainer.menu._height);
var speed = .88;
function OpenMenu() {
status = 2;
menucontainer._y = speed*(menucontainer._y-(fh-mh/2))+(fh-mh/2);
if (menucontainer._y<(fh-mh/2)+1) {
status = 1;
clearInterval(int_om);
}
}
function CloseMenu() {
status = 2;
menucontainer._y = speed*(menucontainer._y-mdpy)+mdpy;
if (mdpy<menucontainer._y+1) {
menucontainer._y = mdpy;
status = 0;
clearInterval(int_cm);
}
}

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

var mw = Math.round(menucontainer.menu._width);
var speed = .88;
function OpenMenu() {
status = 2;
menucontainer._x = speed*(menucontainer._x-(mw/2))+(mw/2);
if (menucontainer._x+1>(mw/2)) {
status = 1;
clearInterval(int_om);
}
}
function CloseMenu() {
status = 2;
menucontainer._x = speed*(menucontainer._x-mdpx)+mdpx;
if (mdpx+1>menucontainer._x) {
menucontainer._x = mdpx;
status = 0;
clearInterval(int_cm);
}
}


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Flash & Swish  More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com
Add comments to "Drop-Down Menu"