Multiple 3D Carousels with ActionScript 3

March 13, 2009 by: smonte
Multiple 3D Carousels

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.

MyItem 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!

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Vertical 3D Carousel with ActionScript 3
  2. 3D Boxes via ActionScript 3 – Part 2
  3. 3D Boxes via ActionScript 3 – Part 1
  4. 3D Tunnel with ActionScript 3
  5. 3D Tunnel Around Text



Filed under: ActionScript 3 Advanced
Tags:

Comments

9 Responses to “Multiple 3D Carousels with ActionScript 3”
  1. Sreelash says:

    Could i know whether this 3D carousel application implemented in CS4 or CS3

    Log in to Reply
  2. Dan says:

    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 :(

    Log in to Reply
  3. lol says:

    can u please provide a code in actionscript 2 for this?

    Log in to Reply
  4. BioDread says:

    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.

    Log in to Reply
  5. Faisal Khan says:

    Its showing me these

    1084: Syntax error: expecting rightbrace before end of program.

    Log in to Reply
  6. Faisal Khan says:

    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

    Log in to Reply
  7. jose says:

    very good animation! i wish we could spin each one separatedly!

    Log in to Reply
  8. spy15 says:

    cool, just cool :)

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.