CMS
Horizontal 3D Carousel in Flash CS3

This tutorial will help us teach us on how to create 3D horizontal Carousel effect in flash using actionscript 3.

The procedure to get this done is by

  • Creating an XML file with the image path and the link data in it.
  • Then calling this xml data into flash.
  • Placing the images in a 3D circle
  • Providing the circular movement for the same
  • Functions for 'on click' and 'on rollover'

XML file should look like the one shown below

<?xml version="1.0" encoding="utf-8"?>
<carousel>
 
<image>
<iurl>c_img1.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img2.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img3.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img4.png</iurl>
<ilink_to>http://tutorials.flashmymind.com</ilink_to>
</image>
 
<image>
<iurl>c_img5.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img6.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img7.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img8.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img9.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
<image>
<iurl>c_img10.png</iurl>
<ilink>http://tutorials.flashmymind.com</ilink>
</image>
 
</carousel>

Copy - Paste the below code in your actionscript panel

const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;

var imgurl:URLRequest = new URLRequest();
var loadedimgs:uint = 0;
var images_num = 0;
var imageHolders:Array = new Array();

//Set the focal length
var focalLength:Number = 500;

//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 4;

//The 3D floor for the images
var floor:Number = 40;

//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;

//Radius of the circle
var radius:Number = 150;
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.load(new URLRequest("carousel.xml"));
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void
{
xmlData = new XML(e.target.data);
trace(xmlData);
Parseimage(xmlData);
}

function Parseimage(imageinput:XML):void
{
var imageurl:XMLList = imageinput.image.iurl;
var imagelink:XMLList = imageinput.image.ilink;
images_num = imageurl.length();

for (var i:int = 0; i < images_num; i++)
{
var urlElement:XML = imageurl[i];
var linkElement:XML = imagelink[i];
var imageHolder:MovieClip = new MovieClip();
var imageLoader = new Loader();
imageHolder.addChild(imageLoader);
imageHolder.mouseChildren = false;
imageLoader.x = - (IMAGE_WIDTH / 2);
imageLoader.y = - (IMAGE_HEIGHT / 2);
imageHolder.link = imagelink[i];
imageHolders.push(imageHolder);
imgurl.url = imageurl[i];
imageLoader.load(imgurl);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
}

function imageLoaded(e:Event):void
{
loadedimgs++;
trace("loadedimgs: " + loadedimgs);
e.target.content.smoothing = true;
if (loadedimgs == images_num)
{
initializeCarousel();
}
}

//This function is to create 3D carousel.
function initializeCarousel():void
{
//Calculate the angle difference between the images (in radians)
var angleDifference:Number = Math.PI * (360 / images_num) / 180;

//Loop through the images
for (var i:uint = 0; i < imageHolders.length; i++)
{
//Assign the imageHolder to a local variable
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Get the angle position for the image
var startingAngle:Number = angleDifference * i;

//Position the imageHolder
imageHolder.xpos3D = radius * Math.cos(startingAngle);
imageHolder.zpos3D = radius * Math.sin(startingAngle);
imageHolder.ypos3D = floor;

//Set a "currentAngle" attribute for the imageHolder
imageHolder.currentAngle = startingAngle;

//Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale)
var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);

//Scale the imageHolder according to the scale ratio
imageHolder.scaleX = imageHolder.scaleY = scaleRatio;

//Set the alpha for the imageHolder
imageHolder.alpha = .5;

//We want to know when the mouse is over and out of the imageHolder imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage); imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);

//We also want to listen for the clicks
imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);

//Position the imageHolder to the stage (from 3D to 2D coordinates)
imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;

//Add the imageHolder to the stage
addChild(imageHolder);
}

//Add an ENTER_FRAME for the rotation
addEventListener(Event.ENTER_FRAME, rotateCarousel);
}

function rotateCarousel(e:Event):void
{
//Calculate the angleSpeed according to mouse position
angleSpeed = (mouseX - vanishingPointX) / 4096;

//Loop through the images
for (var i:uint = 0; i < imageHolders.length; i++)
{
//Assigning imageHolder to a local variable
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);

//Update the imageHolder's current angle
imageHolder.currentAngle += angleSpeed;

//Set a new 3D position for the imageHolder
imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle); imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);

//Calculate a scale ratio
var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);

//Scale the imageHolder according to the scale ratio imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
//Update the imageHolder's coordinates imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio; imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
}
//Call the function that sorts the images so they overlap each others correctly
sortZ();
}

//for sorting and overlaping images on each others correctly

function sortZ():void
{
//Sort the array so that the image which has the highest
//z position (= furthest away) is first in the array
imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);

//Set new child indexes for the images
for (var i:uint = 0; i < imageHolders.length; i++)
{
setChildIndex(imageHolders[i], i);
}
}

//for mouse over event
function mouseOverImage(e:Event):void
{
//Set alpha to 1
e.target.alpha=1;
}

//for mouse out event
function mouseOutImage(e:Event):void
{
e.target.alpha=.5;
}

//for onclick event
function imageClicked(e:Event):void
{
//Navigate to the URL that is in the "linkTo" variable
navigateToURL(new URLRequest(e.target.link));
}


and click here to download source file

Tags: 3D Carousel effect, horizontal circular motion, Loading external XML data
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
TUTORIALS
Adobe Flash
Adobe Fireworks
CSS
Adobe Photoshop
----------------------------
HOBBIES
Photography1
Photography2
Comic Zone
----------------------------
OTHERS
Home
Testimonials
Quote
Memory Game
CONTACT US
Name :  
Email Address :  
 
Comments :
 
Bookmark and Share         jayanthi.varma@imajine.in  |  © 2008 - 2010 Imajine