Circular Menu with AS3

November 24th, 2009 in Flash

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

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.

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.

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.

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

What you think ...

(23 Comments)

+ Add a Comment

kazarus
Nov 25th, 2009
It is Really Cool!
saki
Nov 26th, 2009
Really helpful keep up the good work
Peter D.
Nov 28th, 2009
I love every tutorial which is simple, short and still shows you a useful and practical AS3 technique.

Keep up the good work!
John
Dec 1st, 2009
The array for the menu will not work for me.
Everything is working.. it’s just the dynamic text is only showing up on the home tab (none of the others).
hendrik
Dec 2nd, 2009
good tutorial….but can you tell me about the properties symbol…the source you used (riacodesCS3.fla)….thanks
admin
Dec 2nd, 2009
@ JOHN : Hi, we forgot to mention that you need to embed the font in order to rotate the text. We have updated Step 4. It should solve your problem

@ HENDRIK :Hi, we have updated the source file, please re-download it. There’s no more the properties symbol that you’ve seen
steve
Dec 2nd, 2009
Hi
re: tweenlite.
Can you let me know what you mean by this?
‘Place this directory at the same level of your flash file’.

regards

steve
Price
Dec 3rd, 2009
Great menu!
This might be obvious to some, but after I have this working, how do I link the different menu labels to next frames? And will this work if I import it into a actionscript 2.0 doc?
Thanks
John
Dec 3rd, 2009
Thanks!
Yeah, I found that out after redoing the button a few times.

Also I was wondering how to add an event listener to the array?
So I can link the other pages.. I am a beginner in flash and this site has been really helpful!
John
Dec 3rd, 2009
Do I have to make the names of the buttons in the array a movie clip?
jagoane
Dec 6th, 2009
i like it.. great..
Luke
Dec 16th, 2009
Hi, I just have the problem that there’s no “com” folder in the Tweenlite engine that I’ve downloaded, then it’s resulting few errors, and like Steve, I would like to know what you want to mean with ‘Place this directory at the same level of your flash file’.

Thanks
avinash
Jan 6th, 2010
same problem….
SARA
Jan 15th, 2010
Thansk for a great tutorial!
I just got a problem with my buttons since i have not tried out these kind of buttons before.

So, can you (or any body else) post a codesample for a finished, whole button?
It would be really healpful for me!

Thanks, and sorry for my bad english…
admin
Jan 20th, 2010
@ STEVE, LUKE, AVINASH :
Step 2 has been updated with a picture for you to see where to place the com folder and what we mean by “place this directory (com) at the same level of your flash file”.

As for not finding the com folder when you download the tweenlite engine, you need to be more specific about what you have because it is inside the zip file.
Tonio
Jan 24th, 2010
Thank you,

It’s a pretty effect!

I try to find a way to rotate the text of the 2 left bars, in order to read them better…

Would you know how to do this ?

Thank you again!
Naj
Jan 25th, 2010
Does anyone know how to assign a different url to each menu item?
I know this sounds very juvenile, but I’ve looked through several Tutorials and can’t get this to work.
At best, I’ve managed to assign ONE url to all the menu items.
Thank You!
SARA
Jan 29th, 2010
NAJ—

Ive got the same problem, and I cant solve it no matter what I do…
The only difference is that i want to link to frames, not URLs.
If you find out how to link URLs PLEACE post it later!

I really need to know caus I cant find out how to do in almost any tutorial..

Correct me if Im wrong, but it maby has something with assign different values to ‘clickHandler’.

It would be greate with some help!

Thanks, and sorry for my bad english…
Mathiasa
Feb 2nd, 2010
I can only assign one URL to all the buttons, using:

navigateToURL(new URLRequest(“http://www.google. com/”));

However, that is not what we want to achieve. Anyone else figured it?
Projektowanie
Feb 5th, 2010
Mathisa, i have the same problem. HELP!
WLC
Feb 12th, 2010
It seams like many people got problem with the buttons, but no answere on how to do :/

Me too…

Ive wated a long time for an answere to the problem, i really need to know how to do becaus i want to learn

Can a mod or any kind person post help on how to make the buttons work? Please?

And thanks for all the greate tutorials

/ greetings from Sweeden
WQKID
Feb 22nd, 2010
hi,

can anyone tell me how to link the buttons to their corresponding page?

do i tell my buttons to do a straight gotoAndPlay, would this work?

what do i gotta do to make this work?

please help.

thanks,

W
admin
Feb 23rd, 2010
For all of you who have asked for assigning different url to each button, we’ve posted a solution at :
http://www.riacodes.com/flash/circular-menu-with-as3-part-2/

Popular Topics

Recent Posts

Circular Menu with AS3

What you think ...

(23 Comments)

Leave a Comment

Terms of Use

ABOUT