Multiple 3D Carousels with ActionScript 3

March 13, 2009 by: smonte

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);
	}
}