Vertical 3D Carousel with ActionScript 3
March 22, 2009 by: smonte
In this tutorial I will show you how to create a vertical 3D carousel with the help of ActionScript 3! We will determine the rotation speed according to mouse movement.
Setting up the environment
1. Create a new Flash document of size 550×400.
2. Draw a rectangle with rounded corners. I made the rectangle 158×35 pixels. I used a white stroke and for the fill #0F7E88.
3. Convert the rectangle to a movie clip named “Menu Item”. Set the registration point to the center.
4. Inside the Menu Item movie clip, create a dynamic text field. Make it wide enough and type some text in it.
5. Give the text field an instance name of “menuItemText“.
6. Embed the following fonts.
7. No go back to the main timeline and remove the Menu Item movie clip from the stage.
8. Linkage the Menu Item movie clip to a class named “MenuItem”.
Moving to ActionScript 3
9. In the first frame of your Flash movie type the following.
//The total number of menu items const NUMBER_OF_ITEMS:uint = 20; //This array will contain all the menu items var menuItems:Array = new Array(); //Set the focal length var focalLength:Number = 350; //Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2; //We calculate the angleSpeed in the ENTER_FRAME listener var angleSpeed:Number = 0; //Radius of the circle var radius:Number = 128; //Calculate the angle difference between the menu items (in radians) var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180; //This loop creates and positions the carousel items for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) { //Create a new menu item var menuItem:MenuItem = new MenuItem(); //Calculate the starting angle for the menu item var startingAngle:Number = angleDifference * i; //Set a "currentAngle" attribute for the menu item menuItem.currentAngle = startingAngle; //Position the menu item menuItem.xpos3D = - radius * Math.cos(menuItem.currentAngle) * 0.5; menuItem.ypos3D = radius * Math.sin(startingAngle); menuItem.zpos3D = radius * Math.cos(startingAngle); //Calculate the scale ratio for the menu item (the further the item -> the smaller the scale ratio) var scaleRatio = focalLength/(focalLength + menuItem.zpos3D); //Scale the menu item according to the scale ratio menuItem.scaleX = menuItem.scaleY = scaleRatio; //Position the menu item to the stage (from 3D to 2D coordinates) menuItem.x = vanishingPointX + menuItem.xpos3D * scaleRatio; menuItem.y = vanishingPointY + menuItem.ypos3D * scaleRatio; //Assign an initial alpha menuItem.alpha = 0.3; //Add a text to the menu item menuItem.menuItemText.text = "Menu item " + i; //We don't want the text field to catch mouse events menuItem.mouseChildren = false; //Assign MOUSE_OVER, MOUSE_OUT and CLICK listeners for the menu item menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem); menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem); menuItem.addEventListener(MouseEvent.CLICK, itemClicked); //Add the menu item to the menu items array menuItems.push(menuItem); //Add the menu item to the stage addChild(menuItem); } //Add an ENTER_FRAME listener for the animation addEventListener(Event.ENTER_FRAME, moveCarousel); //This function is called in each frame function moveCarousel(e:Event):void { //Calculate the angle speed according to mouseY position angleSpeed = (mouseY - stage.stageHeight / 2) * 0.0002; //Loop through the menu items for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) { //Store the menu item to a local variable var menuItem:MenuItem = (MenuItem)(menuItems[i]); //Update the current angle of the item menuItem.currentAngle += angleSpeed; //Calculate a scale ratio var scaleRatio = focalLength/(focalLength + menuItem.zpos3D); //Scale the item according to the scale ratio menuItem.scaleX=menuItem.scaleY=scaleRatio; //Set new 3D coordinates menuItem.xpos3D=- radius*Math.cos(menuItem.currentAngle)*0.5; menuItem.ypos3D=radius*Math.sin(menuItem.currentAngle); menuItem.zpos3D=radius*Math.cos(menuItem.currentAngle); //Update the item's coordinates. menuItem.x=vanishingPointX+menuItem.xpos3D*scaleRatio; menuItem.y=vanishingPointY+menuItem.ypos3D*scaleRatio; } //Call the function that sorts the items so they overlap each other correctly sortZ(); } //This function sorts the items so they overlap each other correctly function sortZ():void { //Sort the array so that the item which has the highest //z position (= furthest away) is first in the array menuItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING); //Set new child indexes for the images for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) { setChildIndex(menuItems[i], i); } } //This function is called when a mouse is over an item function mouseOverItem(e:Event):void { //Change the alpha to 1 e.target.alpha=1; } //This function is called when a mouse is out of an item function mouseOutItem(e:Event):void { //Change the alpha to 1 e.target.alpha=0.3; } //This function is called when an item is clicked function itemClicked(e:Event):void { trace("Item clicked! Add your own logic here."); }
10. You are done, test your movie! I hope you enjoyed this ActionScript 3 tutorial …
Download .fla
Related tutorials:
Comments
36 Responses to “Vertical 3D Carousel with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
I will make sure and bookmark this page, I will come back to follow you more.
So amazing!
Well this is what i did to get the text names and links working…
Below the menuItems array i created a new array
var newMenuItems:Array = new Array();
Then add your new text names i.e
newMenuItems.push(“Jazz”);
newMenuItems.push(“Pop”);
remember the value you give to NUMBER_OF_ITEMS should be the the amount of newMenuItems you insert
Then replace the line –
menuItem.menuItemText.text = “Menu item ” + i;
with –
menuItem.menuItemText.text = newMenuItems[i];
for the event listener add
if(e.target == menuItems[5] && menuItems[5].menuItemText.text==newMenuItems[0])
{
trace(“Works?”);
}
where ‘5′ is the array number ur matching and ‘0′ is the text array ur matching
Hope this helps
Does anyone know how to give each button a different link?
That’s pretty awesome looking. I can definitely imagine a graphic or some sort going between the circle, working on depths a bit more, and turning this into a very cool title screen menu for a game.
i donwloaded the original fla file you attached, and open it with flash cs4, directly execute but nothing on the stage, only black background…
I am working on the linking the button to another scene. Anyone can help me with the code?
The cuurent one xml is linking to URL. Please help, your advise will be appreciated.
Thanks!
How do i remove everything off the stage? I added a next button to move on to a diff animation but i can’t remove the carousel.
Nice tutorial ,well done …
I am trying to open the fla-file with Flash-CS3 Professional and get the following error message “ Unexpected file format” . What I am doing wrong ? Thanks in advance for your response .
Sorry for my bad English .
Dimitrios from Athens…..
I am also getting the same problem. doesn’t open in flash cs3
i want to be able to change the background so whenever i make a rectangle in the shape of a movie clip and add it to the the stage and test the movie. The movie covers the carousel. How do i change the depth of the movie clip background so that the carousel is on top of the background
Use :
stage.addChildAt(yourVideoMovieClip, 0);
Makes “yourVideoMovieClip” the first item on the stage.
When you click on another browser window or at the top of this one in Safari on a mac, the carousel speeds up a lot. Is there a way to keep the speed from increasing like that?
You need to add an if statement around the block of code where the anglespeed is determined that states if the mouse is with the boundaries of the stage use the code as written and if it’s out of the stage set a default speed.
Please, can someone help us on this?!
I also have the same problem linking to diferent urls.
thanks in forward
thanks for the tutorials it really worked………
well i wanted to know how can i replace the shape using images…….
i tried but didn’t succeed………
I have the solution for the text implement, it´s simple.
Create a new array in the start called txtArray:
//the array have the same number and order of menu items position. I have 8 music styles.
var txtArray:Array = ["Pop/Rock", "Hip Hop", "Electrónica", "Jazz", "Ambient", "Folk", "Clásica", "Metal"];
//Where you have put the text implement
menuItem.menuItemText.text = txtArray [i];
I tried to just put that in the begining. but nothing happened except my whole thing disapeared. should i have deleted something else before i put the new arrays in?
works great using txtArray, thanx!
do you know how I could link the buttons to different URLs that way? any help would be awesome! I’ve tried everything I can think of
Awesome. thanks!
that was cool..great job!..thanks for all the tuts you have..
To add different text to the menu items, use this:
if(i==0){menuItem.menuItemText.text = “home”;}
else if(i==1){menuItem.menuItemText.text = “about”;}
else if(i==2){menuItem.menuItemText.text = “contact”;}
else if(i==3){menuItem.menuItemText.text = “before & after”;}
else if(i==4){menuItem.menuItemText.text = “product”;}
else if(i==5){menuItem.menuItemText.text = “service”;}
that doesn’t work
//Add a text to the menu item
menuItem.menuItemText.text = “Menu item ” + i;
if(i==1)
{
menuItem.menuItemText.text = “HOME”
}
else if(i==2)
{
menuItem.menuItemText.text = “ABOUT”
}
else if(i==3)
{
menuItem.menuItemText.text = “CONTACT”
}
etc…
Wow, that’s just great! You really know how to work with sin and cos ^^
Hi,
Is this targetd for Flash Player 10 with Flash CS4 used as development environment?
inorder to add diff text fields can I do this:
menuItem.menuItemText.text = menuItems[i];
menuItems[0] = “home”;
menuItems[1] = “login”;
I’m just asking. This might be way wrong. I’m new to programming. So kindly tolerate
Hi Param.
did you get to figure out how to add different text to each button in the end as im stuck in the same place as you i think.
any help would be greatly appreciated
Hi. Very nice. I need help on navigating the buttons to diff urls. I know as3 little bit. I used
menu.onRelease = navigateToURL(new URLRequest(“flashmymind.com”),”_blank”);
but i need button 0 to do this and when i click some other button I need it to navigate to another URL. How do i do that? I tried the for-switch paradigm – no success. Can you help?
hi:) any luck finding a solution for this problem? i got the same prob:/
Very sweet coding, i’m just trying to figure out how to put different text on each button
awesome man. thanks for sharing the skillz
What the…man…its awesome….thank you for sharing…i wish i could code like you someday…ahhhhhhhh
How would I go about adding different text fields, instead of the numbered ones?
YEAH!
AMAZING!
I loved it, so beautiful and nice!
Thank you so much!
AMAZING!!!
Just superb!!!
And it’s very beautiful!!!
Thank you sooo much!