Circular Menu with AS3

In this actionscript 3 lesson, let’s see how to create a nice circular menu that appears with a special effect.

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. Rename “layer 1″ to “actions”.
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.

Image may be NSFW.
Clik here to view.

3. With the rectangle tool selected draw a black rectangle on the stage. Convert it to a Movie Clip and export it for Actionscript with a class name of myButton.

Image may be NSFW.
Clik here to view.

4. Double click on the movie clip to edit it. With the Text tool selected draw a Dynamic Text box and set its color property to white. As we are going to rotate the text, embed your font by clicking on the Embed… button. In our case we just embed the Uppercase[A-Z].
Give the movie clip an instance name of labelBtn.

Image may be NSFW.
Clik here to view.

5. Return to Scene1 and remove the movieclip we’ve just created from the stage.

6 With the first frame selected of the actions layer, open the actions panel.
First to use the Tweenlite engine write the following imports :

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

7. Then create an array that contains each menu item label.
Next create a menu Sprite and position it at the center of the stage.

var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];

var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);

8. Now we need to create each menu items and to do that create a buildMenu function.
Inside this function, we loop through the menu_items array to create different “myButton” items.
To position and animate each item, we use Tweenlite to set their rotation property to a different value.

function buildMenu(){
	
	var btn:myButton;
	var angle:int=360/menu_items.length;
	
	for (var i:int = 0; i< menu_items.length; i++){
		btn = new myButton();
		btn.buttonMode=true;
		btn.labelBtn.text = menu_items[i];
		btn.mouseChildren=false;
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
	}
}

9. Finally we add a Click event listener to the menu and let you continue.

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{
	// TO DO ...
	trace(myButton(e.target).labelBtn.text);
}

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 = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];

var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;

addChild(menu);
buildMenu();

function buildMenu(){
	
	var btn:myButton;
	var angle:int=360/menu_items.length;
	
	for (var i:int = 0; i< menu_items.length; i++){
		btn = new myButton();
		btn.buttonMode=true;
		btn.labelBtn.text = menu_items[i];
		btn.mouseChildren=false;
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
	}
}

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{
	// TO DO ...
	trace(myButton(e.target).labelBtn.text);
}