Circular Menu with AS3 Part 2

February 23rd, 2010 in Flash | 13 Comments

Following many requests on the tutorial entitled Circular Menu with AS3 about linking each button to a different url, we post here one solution.

View DemoDownload Source

1. Starting from the finished file of Circular Menu with AS3. Open menu.fla and with the “actions” layer selected open the actions panel.

2. We are going to add few lines of code to make it work. Create an Array containing the different urls to assign to the buttons :

var menu_items:Array = ["HOME","ABOUT","PORTFOLIO","CONTACT","FACEBOOK"];
var urls:Array = ["http://www.riacodes.com",
				  "http://www.riacodes.com/about",
				  "http://www.riacodes.com/flash",
				  "http://www.riacodes.com/contact",
				  "http://www.facebook.com"];

3. In the buildMenu function, inside the loop, assign to each button its own url by setting a urlsite property.

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;
		btn.urlsite = urls[i];
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
}

4. Finally in the clickHandler function we use the navigateToURL method and pass it the url of the button which has triggered the event.

function clickHandler(e:MouseEvent ):void{
	navigateToURL(new URLRequest(e.target.urlsite));
}

5. Here’s the final code, test your application to see it in action.

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

var menu_items:Array = ["HOME","ABOUT","PORTFOLIO","CONTACT","FACEBOOK"];
var urls:Array = ["http://www.riacodes.com",
				  "http://www.riacodes.com/about",
				  "http://www.riacodes.com/flash",
				  "http://www.riacodes.com/contact",
				  "http://www.facebook.com"];

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;
		btn.urlsite = urls[i];
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
	}
}

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{
	navigateToURL(new URLRequest(e.target.urlsite));
}
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(13 Comments)

+ Add a Comment
  1. Sam
    Feb 24th, 2010

    Thanks so much
    I was still searching on how to do it … :-)

  2. Ryan
    Feb 25th, 2010

    Is it possible for these links to open in the same window as the page they are on? Thanks, great tutorial!

  3. admin
    Feb 26th, 2010

    @ RYAN : Simply set the window parameter of the navigateToURL method to “_self” :

    navigateToURL(new URLRequest(e.target.urlsite), “_self”);

  4. WQKID
    Mar 5th, 2010

    Thank you sir!

    One more thing. Now if I want to link the buttons to individual swfs or movie clips and bring out the content for that specific page (ie. home, about, etc.) rather than external links, how do I do this?
    I want to use this for my next project which is due in like a couple of days. :)

    I’m new to Flash and really enjoying it…can’t stop learning.

    Please advice.

    Thanks,

    wqkid

  5. inski
    Mar 22nd, 2010

    Hi

    Great Menu !!!

    I was wondering, if I want each menu items to open an specific scene instead of a url how can i change the script??

    Thank you very much for your help,

    Inski

  6. Youssef
    Apr 29th, 2010

    It doesn’t work i have 6 errors:

    - Scene 1, Layer ‘actions’, Frame 1, Line 1 1172: définition com.greensock could not be found import com.greensock.*;

    - Scene 1, Layer ‘actions’, Frame 1, Line 2 1172: définition easing.greensock could not be found import com.greensock.easing.*;

    -Scene 1, Layer ‘actions’, Frame 1, Line 1 1172: définition com.greensock could not be found import com.greensock.*;

    - Scene 1, Layer ‘actions’, Frame 1, Line 2 1172: définition easing.greensock could not be found import com.greensock.easing.*;

    - Scene 1 Layer ‘actions’ Frame , Line 30 1120: Access of undefined property TweenLie. TweenLite.to(btn,2,{rotation:-i*angle, ease:Bounce.easeOut});

    -Scene 1 Layer ‘actions’ Frame , Line 30 1120: Access of undefined property Bounce. TweenLite.to(btn,2,{rotation:-i*angle, ease:Bounce.easeOut});

    If someone have solution to this problem it would be great ;)

  7. Ivan
    May 14th, 2010

    @Youssef
    Make Sure that your .fla file and “com” folder of greensock’s tweenlite are in the same folder ;)

  8. DanShow
    May 24th, 2010

    Very good tutorial! Thank you very much.

    To Youssef: Youssef, are you french? If you are, i can explain you what happens but in french!

  9. CiTyF
    Jun 6th, 2010

    Hi, tks a lot for this great tutorial!

    So I have a little question : how can I open in the same windows when I click on a link? Because when I click on a button in the animation, it open a new window…

    tks!

  10. MrFurious
    Jun 9th, 2010

    hey, just few words to thank U, I just begin AS… and it’s really… simple to use, and a good effect… great job! :)

  11. Youssef
    Jun 11th, 2010

    yes i’m french, can you explain me please?

  12. Radetzky
    Jun 29th, 2010

    This tutorial is very useful!

    But if I would like to add a “MouseEvent.MOUSE_OVER”, how do I do?

    Greetings, Radetzky :-)

  13. toms
    Jul 18th, 2010

    this one is great, thx!

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website