Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – Modern Horizontal Flash Menu

Posted on Sep 5th, 2011 in Flash Tutorials | 0 comments

In this lesson I will show you how to create a cool animated horizontal menu. We will use ActionScript 3 for the animation, so no timeline animation is involved in this tutorial. We use random colors in the menu to give it an extra spice. Check out the end result! Cool eh?

Note: You need TweenMax in order to fully complete this tutorial.

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.

Flash Button Backgrounds

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.

Flash Home Button

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.

Flash Library

9. Align the buttons horizontally.

Flash Horizontal Menu Aligned

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!

Source: tutorials.flashmymind.com