Smooth Horizontal Tweened Menu with AS3

In this new actionscript 3 tutorial, we are going to build a smooth horizontal tweened menu. As usual we use the Tweenlite engine.

1. Create a new flash file (Actionscript 3.0) and save it as menu.fla.

2. Rename “layer 1″ to “menu”. First we are going to design our arrow shaped menu items. To do it, with the rectangle tool selected draw a rectangle on the stage with the fill color of your choice and no stroke color. To create the end part of the menu_item use the polystar tool to create a triangle that you stick to the rectangle. Now with your menu item shape built, convert it to a Movie Clip with registration point at the top left. Give it an instance name of “menu1_mc”.

3. To add the label to the menu item, double click on the movie clip you’ve just created so you can edit it.
With the Text tool, draw a static text box and type your label. And we are done with this first menu item.

4. Next create the others menu items by following the same steps. Once finished position each menu item one below the other and put all of them to the left of the stage so that only the triangle part is visible on the stage.

5. Now let’s add the actionscript. We’ll use the Tweenlite engine so first if you don’t already have it go to http://blog.greensock.com/tweenlite/ to download the AS3 version.
Extract the zip file and get the com directory. Place this directory at the same level of your flash file.

6. Create a new “actions” layer and with its first frame selected open the actions panel.
First to use the Tweenlite engine and its easing properites write the following statements :

import com.greensock.*;
import com.greensock.easing.*;

7. Then create an array that contains each menu item’s instance name. Next loop through this array to add to each item the Mouse Event listeners (for the rollover, rollout and click events) and set their button mode to true so that a hand cursor appears when we hover them.

var menu_items:Array = [menu1_mc,menu2_mc,menu3_mc,menu4_mc];

for (var i:int = 0; i< menu_items.length; i++){
	menu_items[i].addEventListener(MouseEvent.ROLL_OVER,overHandler);
	menu_items[i].addEventListener(MouseEvent.ROLL_OVER,outHandler);
	menu_items[i].addEventListener(MouseEvent.CLICK,clickHandler );
	menu_items[i].buttonMode = true;
}

8. The overHandler function uses the Tweenlite engine to change the x property of the menu item to 0 so that the menu item stretches out. Also we set the Tweenlite ease property to Bounce.easeOut to make it more catchy.

function overHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:0,ease:Bounce.easeOut});
}

<em>9.</em> The outHandler function sets the menu item that triggered the rollout event back to its original position. And finally the clickHandler function simply trace which menu item was clicked.

1
function outHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:-168,ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent ):void{
	trace(e.currentTarget.name + " was clicked");
}

10. Here’s the final code, test your movie to see it in action.

import com.greensock.*;
import com.greensock.easing.*;

var menu_items:Array = [menu1_mc,menu2_mc,menu3_mc,menu4_mc];

for (var i:int = 0; i< menu_items.length; i++){
	menu_items[i].addEventListener(MouseEvent.ROLL_OVER,overHandler);
	menu_items[i].addEventListener(MouseEvent.ROLL_OUT,outHandler);
	menu_items[i].addEventListener(MouseEvent.CLICK,clickHandler );
	menu_items[i].buttonMode = true;
}

function overHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:0,ease:Bounce.easeOut});
}
function outHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:-168,ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent ):void{
	// TO DO ...
	trace(e.currentTarget.name + " was clicked");
}