Smooth Horizontal Tweened Menu with AS3

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.

View DemoDownload Source

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");
}

22 thoughts on “Smooth Horizontal Tweened Menu with AS3

  1. Pingback: zestaw tutoriali dla photoshop,php,python,css,jquery,flex oraz actionscript | web-tutoriale.pl

  2. Nicolaj

    if you want another easier type :’

    stop();

    import fl.transitions.*;
    import fl.transitions.easing.*;

    var overTween:Tween,
    outTween:Tween;

    var menuButtonsList:Array = [home, about, contact],
    menuButtonsListLength:int = menuButtonsList.length,
    menuButtonReference:SimpleButton;

    for (var i:int = 0; i < menuButtonsListLength; i++)
    {
    menuButtonReference = menuButtonsList[i];
    menuButtonReference.addEventListener(MouseEvent.ROLL_OVER, handleMenuButtonRollOver);
    menuButtonReference.addEventListener(MouseEvent.ROLL_OUT, handleMenuButtonRollOut);
    menuButtonReference.addEventListener(MouseEvent.CLICK, handleMenuButtonClick);
    }

    function handleMenuButtonRollOver(event:MouseEvent):void
    {
    overTween = new Tween(event.currentTarget, "x", Regular.easeOut, event.currentTarget.x, -5, .5, true);
    }

    function handleMenuButtonRollOut(event:MouseEvent):void
    {
    outTween = new Tween(event.currentTarget, "x", Regular.easeOut, event.currentTarget.x, -142, .5, true);
    }

    function handleMenuButtonClick(event:MouseEvent):void
    {
    trace ("The " + event.currentTarget.name + " button was clicked!")
    gotoAndStop(event.currentTarget.name);
    }

  3. amarie

    im not sure i am putting the .com folder in the right place… how do i put it at the same level at my flash file… sorry im really new to this

  4. WLC

    AMARIE –
    You need to place the greensock ‘com’ folder in the same folder as your .fla-file. :)
    f you dont, the import will not work… I banged my head against the wall when the .fla didnt import the com folder, and after some reboots of the flash program, and some reboots of the computer, it worked suddenly.

    Quite strange why Flash didnt find the com-folder :S but it semes like many people got problem with this.

    But now i’m stuck with the buttons… I cant make more than one work, i use gotoAndPlay, but thats maby wrong? Can anybody help me? Pleace? :)

    Greetings from Sweden, and thanks allot for the tutorials! :)

  5. PocoLoco

    Can any body please healp me with the buttuns?
    i cant figure out how to assign different buttons,
    Ive tride gotoAndPlay but then every button goes to the same frame… :(

    How do i do so eatch buttons is assigned to different frames?
    Healp me please:)

    ps i like this site VERY much!

    Gs from Swe

  6. POCOLOCO

    Anyone?

    I just want my menu to work on my flashpage…
    Just trace different frames, like 10, 15 and 20, instead of trace a text that says “event.currentTarget.name + ” button was clicked!”)”

    I know that this may be a simple question for you guys, but i’m banging my head against the wall.

    Someone? :)

  7. Chewx

    Sorry, my post above is me being inpatient;

    function clickHandler(e:MouseEvent ):void
    {
    menu1_mc.addEventListener(MouseEvent.CLICK, function (myEVT) {gotoAndPlay(2); });
    menu2_mc.addEventListener(MouseEvent.CLICK, function (myEVT) {gotoAndPlay(11); });
    menu3_mc.addEventListener(MouseEvent.CLICK, function (myEVT) {gotoAndPlay(21); });
    menu4_mc.addEventListener(MouseEvent.CLICK, function (myEVT) {gotoAndPlay(31); });
    }

    Thats it POCOLOCO

  8. lief

    the most common mistake is people don’t instance names on buttons make sure you do!!! put

    Give it an instance name of “menu1_mc”.
    menu2_mc
    menu3_mc
    and so on

    thanks

  9. Rye

    Great tutorial, but I have a problem.
    I’m trying to link the buttons to various scenes, which I have managed to do, but I wanted to also have the menu at the side be constant. However, when I try and copy and past the menu and the actions layer, and paste them in my other scenes, the menu doesn’t work.

    Can anyone help me out?

    Thanks in advance

  10. jb

    Does anyone know how to edit this code so that the menu’s come out from the right hand side of the stage?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>