• Step one
• Step two
• Step three
• Step four
  
  Download the source file for this tutorial here.

Load Flash MX and set the new document properties to 600X100 and 21fps. Make a new layer and name the 2 layers "actions" and "menu". On frame 1 of the menu layer, draw yourself a rectangle (75X20) over the left side of the stage. Select the rectangle and convert it to a movieclip - name it menuMC and make sure it's registration is up the top left.

Option drag (alt drag on a PC) out 4 copies of the buttonTemplate. Use the align panel to space them evenly. Change the instance names of the copies to but2, but3 etc

Now to the code. Go back to the main timeline and put this code in frame 1 of the actions layer -

//prototype to get a smooth scrolling animation
Movieclip.prototype.scrollme = function(xPos) {
/*this moves the movieclip 1/5th of the differece between its
current location and where it needs to go
Because this happens every frame, the difference gets smaller and so
does the amount the movieclip is moved - giving us the smooth animation
*/
this._x -= (this._x-xPos)/5;
};
//initialise a variable
out = false;
//menu mc actions
menu.onEnterFrame = function() {
//check a variable
//this is the same as if(out==true){
if (out) {
//call the prototype and provide a target x pos
this.scrollme(20);
} else {
this.scrollme(-406);
}
};
//the arrow button actions
menu.arrowMC.arrowBut.onRelease = function() {
//check our variable
if (out) {
//set variable
out = false;
//rotate the mc that contains the arrow button
menu.arrowMC._rotation = 0;
} else {
//set variable
out = true;
//rotate the mc that contains the arrow button
menu.arrowMC._rotation = 180;
}
};

Paste it in and have a read of the comments. The blue numbers will vary depending on the width of your menuMC. Just move the menuMC by hand and make a note of its x position in the info panel.

Save and test your movie.

So what are the actions doing? At the top is our scrollme prototype that I have used in a bunch of tutorial. The comments explain how the smooth movement works. Then we initialise a variable that basically stores whether menu is in or out. We check this variable from our menuMC and our arrow button - the menuMC uses to it to determine where it needs to scroll to, and the arrow button uses it to act like a switch. If out is true, then clicking the arrow will set out to false and rotate the arrowMC. If out is false, then clicking the arrow will set out to true and rotate the arrowMC again.

Now we'll give the buttons a bounce effect but I won't be going into detail as to how this works. Add these actions underneath all the others on frame 1 of the actions layer

//the bounce prototype
Movieclip.prototype.elasticScale = function(targetS, accel, convert) {
this.step = this.step * accel + (targetS - this._xscale) * convert
this._xscale = this._yscale += this.step
}
//but actions
//use a for loop to reduce repetition of the code
for(i=1;i<6;i++){
theButton=_root.menu["but"+i];
//this variable stores what number button it is
theButton.thisNum=i;
theButton.onEnterFrame=function() {
//if the mouse is over the but
if (_root.menu["but"+this.thisNum].overMe) {
//call the bounce prototype
this.elasticScale(150, 0.7, 0.3)
} else {
this.elasticScale(100, 0.7, 0.3)
}
}
theButton.onRollOver=function(){
//set a variable
_root.menu["but"+this.thisNum].overMe=true;
//bring to the front
_root.menu["but"+this.thisNum].swapDepths(5000)
}
theButton.onRollOut=function(){
//set a variable
_root.menu["but"+this.thisNum].overMe=false;
}
}

Have a read of the comments and then test your movie again.