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.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

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:

Image may be NSFW.
Clik here to view.

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
}