Flash CS menu tutorial

Download TweenMax for AS3 and save the “gs” folder to the same location where you have the .fla file located.

Step 1

• Create a new >Flash Project
• Click on the plus icon New flash file > “Flash file” > Change the name of project <Untitled File>.fla
• Select the Selection Tool V
• Go to Properties tab and press Edit button and set the width of your document to 400 pixels and the height to 100 pixels, set frame rate to 30 fps.
• Select ” black” color as background .
• Change the layer name to menu ( double click on it ).

Step 2

• Draw a rectangle on the stage with the following properties.

1. width: 8px
2. height: 8px
3. stroke color: no stroke!
4. Fill color: #FF8800

Step 3

• Convert the rectangle to a movie clip (select the rectangle and hit F8).
• Change the Name to “Menu Rectangle” and set the registration point to the center.
• Link the rectangle to a class named “MenuRectangle”.

Step 4

• For each menu item  we need  to have multiple menu rectangles.
• Drag 7 more menu rectangles to the stage (you should now have a total of 8 menu rectangles on stage).
• Align them horizontally and space them evenly.
• You can use the align functionality to help you out.

Note that you should not have the “To stage” button selected when you space the rectangles evenly.

• Select all the eight (8) menu rectangles, hold down the Alt-key and and drag-and-drop the new menu rectangles below the first row.
• Create a third row as well.
• You should now have a rectangle matrix of sixe 8×3 (8 colums and 3 rows).

Step 5

• To Create first button select all the menu rectangles and convert them to a single movie clip.
• Name it “Home Button” and set the registration point to the center.

• While inside the movie clip, select all the menu rectangles and set the alpha to 30%.

• While still inside the home button movie clip, create a new layer named “text”.

• In the text layer, create a static text field and type “Home” in it.
• Position the text field on top of the menu rectangles and size it so that it covers most of the rectangles area.
• Set the following properties.

1. font: Berlin Sans
2. size: 14 pt
3. color: white
4. format: center

• While still inside the home button movie clip, create a new layer named “hit area”.

• In the hit area layer, draw a white rectangle so that it covers all the menu rectangles.
• Convert the rectangle to a movie clip.
• Name it “Hit Area” and set the registration point to the center.

• Give the hit area movie clip an instance name of “mouseArea”.
• We don’t want the hit area to be visible, its only function is to catch mouse events via ActionScript.
• Set the alpha to zero for the hit area (color effect).

• While still inside the home button movie clip, create a new layer named “actions”.

Step 6

So in the actions layer, type the following.

//Import TweenMax
import com.greensock.*;

//This array will contain all the rectangles
var rectangles:Array = new Array();

//Loop through the items in this movie clip
for (var i:uint = 0; i < this.numChildren; i++) {

//Get an object
var object:* = this.getChildAt(i);

//Check to see if the object is a MenuRectangle
if (object is MenuRectangle) {

//Save the rectangle’s coordinates (we need these later on)
object.origX = object.x;
object.origY = object.y;

//Add the rectangle to the rectangles array
rectangles.push(object);
}
}

//Add mouse listeners for the mouse area
mouseArea.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
mouseArea.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
mouseArea.addEventListener(MouseEvent.CLICK, itemClicked);

//This function is called when the cursor is over the mouse area
function mouseOverHandler(e:Event):void {

//Loop through the rectangle array
for (var i:uint = 0; i < rectangles.length; i++) {

//Assign the rectangle to a local variable
var rectangle:MenuRectangle = rectangles[i] as MenuRectangle;

//Calculate random target coordinates for the rectangle
var randomX:Number = rectangle.x + 10 * Math.cos(Math.random() * Math.PI * 2);
var randomY:Number = rectangle.y + 10 * Math.sin(Math.random() * Math.PI * 2);

//Animate the rectangle to the random coordinates
TweenMax.to(rectangle, 0.4, {x: randomX, y: randomY, alpha: 0.6, tint: Math.random() * 0xffffff});

}

//Add an ENTER_FRAME listener for the shake effect
addEventListener(Event.ENTER_FRAME, shake);
}

//This function is called when the cursor moves out of the mouse area
function mouseOutHandler(e:Event):void {

//Loop through the rectangle array
for (var i:uint = 0; i < rectangles.length; i++) {

//Assign the rectangle to a local variable
var rectangle:MenuRectangle = rectangles[i] as MenuRectangle;

//Tween the rectangle to the original position
TweenMax.to(rectangle, 0.4, {x: rectangle.origX, y: rectangle.origY, rotation: 0, alpha: 0.3, tint: 0xff8800});
}

//Remove the ENTER_FRAME listener (we don’t want to shake the rectangle anymore)
removeEventListener(Event.ENTER_FRAME, shake);
}

//This function is called when the mouse area is clicked
function itemClicked(e:Event):void {

//Navigate to some URL
var urlRequest:URLRequest = new URLRequest(“http://www.flashcs.com”);
navigateToURL(urlRequest);
}

//This function is called in each frame
function shake(e:Event):void {

Download the source of this project: FllashMenu.zip