In 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!
discuss this topic to forum
