Multiple 3D Carousels with ActionScript 3
March 13, 2009 by: smonteIn this tutorial I will show you how to create multiple 3D carousels in the same Flash movie with the help of ActionScript 3. We also animate the carousels according to the mouse movement. Check out the result!
Note: You need TweenMax in order to fully complete this tutorial.
Setting up the environment
1. Create a new Flash document of size 550×400.
2. Draw a rounded rectangle on the stage (I used value 5 for the rounded corners). The stroke width is 4 pixels and the fill color is #ff8800.
3. Convert the rectangle to a movie clip. Name it “MyItem” and set the registration point to the center. You should now have a similar looking movie clip.
4. Linkage the movie clip to a class named “MyItem“.
5. Remove the item movie clip from the stage. We will create and position all the items dynamically with ActionScript 3.
Moving to ActionScript 3
6. In the first frame of your Flash movie, type the following.
//Import TweenMax import gs.*; import gs.plugins.*; //Number of items in each circles const OUTER_ITEMS:uint = 60; const MIDDLE_ITEMS:uint = 40; const INNER_ITEMS:uint = 20; //The radiuses and floor for each carousel (floor is not constant since we change it //during the animation) const OUTER_RADIUS_X:Number = 250; const OUTER_RADIUS_Z:Number = 140; const MIDDLE_RADIUS_X:Number = 150; const MIDDLE_RADIUS_Z:Number = 80; const INNER_RADIUS_X:Number = 80; const INNER_RADIUS_Z:Number = 40; //The floor for each item var floor:Number = 100; //Set the focal length var focalLength:Number = 350; //Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2; //This array will contains all the items in the carousels var myItems:Array = new Array(); //The angle speed for the items var angleSpeed:Number = 0.02; //Call the function that initializes the carousels initializeCarousels(); //This function creates and positions the carousels function initializeCarousels():void { //We use the function "createCarousel()" to create and position the carousels. //We pass the number of items and the radiuses as parameters createCarousel(OUTER_ITEMS, OUTER_RADIUS_X, OUTER_RADIUS_Z); createCarousel(MIDDLE_ITEMS, MIDDLE_RADIUS_X, MIDDLE_RADIUS_Z); createCarousel(INNER_ITEMS, INNER_RADIUS_X, INNER_RADIUS_Z); //Now that we have all the carousels ready, we can start to animate them //using the ENTER_FRAME listener. addEventListener(Event.ENTER_FRAME, rotateCarousels); } //This function creates a single carousel. function createCarousel(numberOfItems:uint, xRadius:Number, zRadius:Number) { //Calculate the angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180; //This loop creates and positions the carousel items for (var i:uint = 0; i < numberOfItems; i++) { //Create a new item var myItem:MyItem = new MyItem(); //Make the item a bit transparent myItem.alpha = 0.6; //Get the starting angle for the item var startingAngle:Number = angleDifference * i; //Position the item myItem.xpos3D = xRadius * Math.cos(startingAngle); myItem.zpos3D = zRadius * Math.sin(startingAngle); myItem.ypos3D = floor; //Set a "currentAngle" attribute for the item myItem.currentAngle = startingAngle; //Save the x and z radiuses for this item (needed in the animation) myItem.xRadius = xRadius; myItem.zRadius = zRadius; //Calculate the scale ratio for the item (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + myItem.zpos3D); //Scale the item according to the scale ratio myItem.scaleX = myItem.scaleY = scaleRatio; //Position the item to the stage (from 3D to 2D coordinates) myItem.x = vanishingPointX + myItem.xpos3D * scaleRatio; myItem.y = vanishingPointY + myItem.ypos3D * scaleRatio; //Add the item to the array myItems.push(myItem); //Add the item to the stage addChild(myItem); } }
We are half way there! As you can, we see first declare how many carousels we want to use and the radiuses of each carousel. Then we simply create the carousels. Now for the animation part you need the following ActionScript.
Note: If you comment the line “addEventListener(Event.ENTER_FRAME, rotateCarousels);” you can test your movie and see how the carousels position.
//This function rotates all the carousels function rotateCarousels(e:Event):void { //Loop through all the items for (var i:uint = 0; i < myItems.length; i++) { //Save the item to a local variable var myItem:MyItem = (MyItem)(myItems[i]); //Update the current angle for the item myItem.currentAngle += angleSpeed; //Set a new 3D position for the item myItem.xpos3D=myItem.xRadius*Math.cos(myItem.currentAngle); myItem.zpos3D=myItem.zRadius*Math.sin(myItem.currentAngle); //The new 3D y coordinate can be from -200 to 200 myItem.ypos3D= (mouseY*2 / stage.stageHeight) * 200 - 200; //Calculate a scale ratio var scaleRatio = focalLength/(focalLength + myItem.zpos3D); //Scale the item according to the scale ratio myItem.scaleX=myItem.scaleY=scaleRatio; //Update the item's 2D coordinates (tween to new y coordinates). myItem.x=vanishingPointX+myItem.xpos3D*scaleRatio; TweenMax.to(myItem, 0.5, {y: vanishingPointY+myItem.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 others correctly function sortZ():void { //Sort the array so that the item which has the highest //z position (= furthest away) is first in the array myItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING); //Set new child indexes for the items for (var i:uint = 0; i < myItems.length; i++) { setChildIndex(myItems[i], i); } }
7. That’s it, test your movie! I hope you enjoyed this tutorial and found some new ideas for your Flash movies!
Related tutorials:
Comments
9 Responses to “Multiple 3D Carousels with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
Could i know whether this 3D carousel application implemented in CS4 or CS3
Great tutorial!!!! Could you please provide tutorial for carusel that moves left or right and changes speed acording to mouseX?? I know that is not hard to modify this one but unfortunately when you put greater angel speed (0.09) whole carusel is swinging from left to right
can u please provide a code in actionscript 2 for this?
plz see my code
http://www.actionscript.org/forums/showthread.php3?t=204654
plz help me
I have some problems
on a function i have a var array /// this array have Z position on my movie
and i have
another function on EnterFrame /// this function cannot read information from that array.
Its showing me these
1084: Syntax error: expecting rightbrace before end of program.
It’s not so clear for me
will you please write breifly.
1. as u mentioned write code into first frme. is it frame or action panel
2. where to write AddListner.
3. From Linkage what option should choose.
Thanks
very good animation! i wish we could spin each one separatedly!
cool, just cool