Modern Horizontal Flash Menu

1. Create a new Flash document of size 400×100.

2. First create a rounded rectangle without any stroke. I used value three (3) for the rounded corners. The size of the rectangle doesn’t matter, since we will change that via ActionScript.

3. Convert the rectangle to a movie clip. Name it “Button Background” and set the registration point to the center. Here is how my rectangle looks like.

4. Give the button background movie clip an instance name of “buttonBackground“.

5. Name the layer “button background”. Then create a new layer called “buttons”.

6. In the “buttons” layer, create a static text field and type “Home” in it. I used a font size of 21. Make the text field exactly the same size as the text is (= no extra space).

7. Convert the text field to a movie clip. Name it “Home button” and set the registration point to the center.

8. Now create three more buttons exactly as we did in steps 5 and 6. Make the following buttons: “About button”, “Portfolio button” and “Contact button”. Your library should now look like the following.

9. Align the buttons horizontally.

10. Now give the buttons instance names “homeButton“, “portfolioButton“, “aboutButton” and “contactButton“. I’m sure you know which instance name goes to which button!

Moving to ActionScript 3

11. Create a new layer for ActionScript and type the following code.

//Import TweenMax 
import gs.*;
import gs.plugins.*;
TweenPlugin.activate([BlurFilterPlugin]);
 
//Add the buttons into an array 
var buttonsArray:Array = new Array(homeButton,portfolioButton,aboutButton,contactButton);
 
//Loop through the buttons array 
for (var i:uint = 0; i < buttonsArray.length; i++) { 
 
 //Add event listeners for the button 
 buttonsArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverButton);
 buttonsArray[i].addEventListener(MouseEvent.CLICK, buttonClicked);
} 
 
//Move the buttonBackground under the home button (= starting position) 
buttonBackground.x = homeButton.x;
buttonBackground.y = homeButton.y;
 
//Make the buttonBackground a bit bigger than the home button 
buttonBackground.width = homeButton.width + 10;
buttonBackground.height = homeButton.height + 10;
 
//Tween the buttonBackground to a random color using TweenMax 
TweenMax.to(buttonBackground, 0.1, {tint: Math.random() * 0xffffff});
 
//This function is called when the mouse is over a button 
function mouseOverButton(e:Event):void { 
 
 //Assign the button to a local variable 
 var button:MovieClip = (MovieClip)(e.target);
 
 //Calculate the new target width and height for the buttonBackground 
 var targetWidth:Number = button.width + 10;
 var targetHeight:Number = button.height + 10;
 
 //Tween the buttonBackground's position, size and color (color is random) 
 TweenMax.to(buttonBackground, 0.5, {x: button.x, y: button.y,
 width:targetWidth, height:targetHeight, tint: Math.random() * 0xffffff});
} 
 
//This function is called when a button is clicked 
function buttonClicked(e:Event):void { 
 
 //Add your logic here! 
 trace(e.target.name + " was clicked!");
}

12. Now your horizontal Flash menu is ready! Go ahead and test your movie. You are free to use this menu where ever you want if you find it useful!

Download .fla