Circular Menu with AS3 Part 2
February 23rd, 2010 in Flash | 19 CommentsFollowing many requests on the tutorial entitled Circular Menu with AS3 about linking each button to a different url, we post here one solution.
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));
}
Feb 24th, 2010
Thanks so much
I was still searching on how to do it …
Feb 25th, 2010
Is it possible for these links to open in the same window as the page they are on? Thanks, great tutorial!
Feb 26th, 2010
@ RYAN : Simply set the window parameter of the navigateToURL method to “_self” :
navigateToURL(new URLRequest(e.target.urlsite), “_self”);
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
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
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
May 14th, 2010
@Youssef
Make Sure that your .fla file and “com” folder of greensock’s tweenlite are in the same folder
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!
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!
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!
Jun 11th, 2010
yes i’m french, can you explain me please?
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
Jul 18th, 2010
this one is great, thx!
Sep 10th, 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,
Oct 17th, 2010
Scene 1, Layer ‘actions’, Frame 1, Line 3 1172: Definition com.greensock could not be found.
Scene 1, Layer ‘actions’, Frame 1, Line 4 1172: Definition com.greensock.easing could not be found.
Scene 1, Layer ‘actions’, Frame 1, Line 3 1172: Definition com.greensock could not be found.
Scene 1, Layer ‘actions’, Frame 1, Line 4 1172: Definition com.greensock.easing could not be found.
Scene 1, Layer ‘actions’, Frame 1, Line 32 1120: Access of undefined property TweenLite.
Scene 1, Layer ‘actions’, Frame 1, Line 32 1120: Access of undefined property Bounce.
i have this error plz help? IVAN wrote earlier that “Make Sure that your .fla file and “com” folder of greensock’s tweenlite are in the same folder ” what is this con folder? it is not discribed in tutorial and not presnt in download source file?
Nov 8th, 2010
Hi all,
Thank you very much , riacode rulz.
I was just wondering.
How could i do, if i d’like to put the titles in the correct “reading position” ??! That is just turning me crazy.
Thank you.
Nov 18th, 2010
just a quick answer to help a few with questions – to link to a labeled frame instead of a url:
function clickHandler(e:MouseEvent ):void
{
gotoAndPlay (e.target.urlsite);
}
Nov 24th, 2010
Hey everyone !
I m using the the circular menu for a introduction ,
But when i click and then go to other pages or frames, the Menu STAY on the SCENE AND FRAMES !!
I just don’t know how to get rid of it once the INTRODUCTION FRAMES IS GONE ….
Thanks
May 20th, 2011
Great idea for a menu. Very original!