Flex | Flash | Air | AS3
Smooth Horizontal Tweened Menu with AS3
December 13th, 2009 in FlashIn 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.
[javascript]
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");
}
Dec 14th, 2009
Small steps for solid Foundation
Once more you had provided a very informative Tutorials
Dec 14th, 2009
Great tutorial. Thanks!
Dec 20th, 2009
I’ve always wondered how to do this…
Thanks
Dec 28th, 2009
[...] ciekawe menu [...]
Jan 3rd, 2010
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);
}
Jan 28th, 2010
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
Feb 1st, 2010
how to put an active link on the tabs?
loic
Feb 8th, 2010
1120: Access of undefined property menu1_mc.
wtf? gawdämmit! I always do womething wrong… but what? pls help!
Feb 11th, 2010
thx for tutorial!
Feb 13th, 2010
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!
Feb 26th, 2010
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
Mar 4th, 2010
Can pleace somebody healp? I Would like to learn
Mar 8th, 2010
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?