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:
| 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); } } |
