Colorful Animated Menu with AS3

In this simple tut, let’s create a colorful horizontal menu with mouse over animation by using Actionscript 3 and the Tweenlite engine.

View DemoDownload Source

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

2. First let’s create the “template” button that will use to create the menu.
Create a Movie Clip (Insert>New Symbol) and give it a name of MyBtn.
Export you button for actionscript with a class name of MyBtn.
Inside this movie clip reproduce the same thing as shown below:

Screenshot

3. Open the actions panel. 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.
First write the following statements to use Tweenlite. We’ll use the Tint plugin to manage the colors so we need to activate it.(More infos at http://www.greensock.com/tweenlite/).

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

4. Next store the label buttons in an array and their colors inside another array.

var btnsArray:Array = ["Home", "News", "About", "Contact", "Info"];
var colors:Array= [0xFF0000,0x66CC00,0XFF9933,0x6633FF,0xFF33CC,0x660066];

5. Then write a createButtons() function.
Loop through the btnsArray. For each button, we use the MyBtn class that we’ve previously declared and use Tweenlite to change the tint property of the button’s rectangle.
We set its x and y properties and its label by setting the btn_label text property.

Then we add the different mouse event listeners and add the button to the display list.

createButtons();

function createButtons ():void{
	for (var i :uint= 0; i < btnsArray.length; i++){
		var btn:MyBtn = new MyBtn();
		TweenLite.to (btn.btn_rect, 0, {tint: colors[i]});
		btn.x = i*115;
		btn.y = 0;
		btn.btn_label.text = btnsArray[i];
		
		btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
		btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
		btn.addEventListener(MouseEvent.CLICK, btnClick);

		btn.buttonMode = true;
		btn.mouseChildren = false;
		addChild (btn);
	}
}

6. In the btnOver() function we change the button label color and increase the height of the rectangle.

function btnOver (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0xFFFFFF});
	TweenLite.to (mc.btn_rect,.5, {height: 35});
}	
}

7. In the btnOut() function we reset the btn label color to black and decrease the height of the rectangle.

function btnOut (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0x000000});
	TweenLite.to (mc.btn_rect, .5, {height: 5});
}

9. Finally for the btnClick() function we let you continue write your own code.

function btnClick(e:MouseEvent):void{
	//do your stuff here
}

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

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

var btnsArray:Array = ["Home", "News", "About Me", "Infos","Contact",];
var colors:Array= [0xFF0000,0x66CC00,0XFF9933,0x6633FF,0xFF33CC,0x660066];

createButtons();

function createButtons ():void{
	for (var i :uint= 0; i < btnsArray.length; i++){
		var btn:MyBtn = new MyBtn();
		TweenLite.to (btn.btn_rect, 0, {tint: colors[i]});
		btn.x = i*115;
		btn.y = 0;
		btn.btn_label.text = btnsArray[i];
		
		btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
		btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
		btn.addEventListener(MouseEvent.CLICK, btnClick);

		btn.buttonMode = true;
		btn.mouseChildren = false;
		addChild (btn);
	}
}

function btnOver (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0xFFFFFF});
	TweenLite.to (mc.btn_rect,.5, {height: 35});
}

function btnOut (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0x000000});
	TweenLite.to (mc.btn_rect, .5, {height: 5});
}

function btnClick(e:MouseEvent):void{
	//do your stuff here
}

9 thoughts on “Colorful Animated Menu with AS3

  1. Julius

    Hi i dont understand the 2nd step with the pict, im french :s could you maybe make a short video ?
    Because you are talking about Instance and Label and i dont have the menu like yours.

  2. muzki

    how do I import the external swf’s on the btnClick function?
    i´ve tryed ive cum up with a code but i think the gallery doesn´t import unless i have a xml import function on the main swf.
    still, i´ve tryed unsuccesfully to import a file without the xml.
    here’s what i´ve coded so far[

    var frameNum:uint;
    var btnLabels:Array = [ “btn1”, “btn2”, “btn3”];
    var btnLalbelLength:uint = btnLabels.length;

    for (var i:uint=0; i; i++) {
    var btn:MyBtn = new MyBtn();
    btn.x=50+(i*100);// use whatever positioning makes sense for you
    btn.id = i;
    btn.buttonMode = true;
    btn.mouseChildren = false;
    btn.btnLabeText.text = btnLabels[i];
    btn.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);
    }
    btn.addEventListener(MouseEvent.CLICK,openSwf );

    function openSwf(event:MouseEvent):void
    {
    var request:URLRequest=new URLRequest(“test.swf”);
    navigateToURL(request);
    }

    if anyone knows if i´m in the right path i´ll be glad to know
    thanks,

    Markus

Leave a Reply

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