• home
  • forum
  • my
  • kt
  • download
  • Multiple 3D Carousels with Actionscript 3

    Author: 2009-07-12 02:40:57 From:

    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!

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (36)
      Math Physics (18)
      3rd Party (10)
      Navigation (70)
      Actionscripting (232)
      Optimization (17)
      Animation (185)
      Projector (11)
      Audio (54)
      Special Effects (173)
      Backend (26)
      Text Effects (93)
      Drawing (34)
      Tips and Techniques (58)
      Dynamic Content (38)
      Tricks (8)
      Games (114)
      Utilities (24)
      Getting Started (99)
      Video (59)
      Interactivity (48)
      Web Design (37)

    New

    Hot