Circular Menu with AS3

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.

View DemoDownload Source

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.

Screenshot

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.

Screenshot

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

26 thoughts on “Circular Menu with AS3

  1. Peter D.

    I love every tutorial which is simple, short and still shows you a useful and practical AS3 technique.

    Keep up the good work!

  2. John

    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).

  3. hendrik

    good tutorial….but can you tell me about the properties symbol…the source you used (riacodesCS3.fla)….thanks

  4. admin Post author

    @ 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

  5. steve

    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

  6. Price

    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

  7. John

    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!

  8. Luke

    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

  9. SARA

    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…

  10. admin Post author

    @ 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.

  11. Tonio

    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!

  12. Naj

    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!

  13. SARA

    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…

  14. Mathiasa

    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?

  15. WLC

    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

  16. WQKID

    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

  17. San

    Hi, i keep getting this!

    1046: Type was not found or was not a compile-time constant: myButton.

    Thanks

  18. Arzhura

    Thank you sooo much for this nice tut !
    As a beginner in AS3, I found it quite easy to understand, though I haven’t figured out yet what Tweenlite is precisely…huh !
    I used your code to build my own version, which I might use on my website if you agree.

    Thanks again, and keep going with this great work,

    Arz

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>