Horizontal Carrossel 3D em Flash CS3

Este tutorial irá nos ajudar a nos ensinar sobre como criar o efeito 3D carrossel horizontal em flash usando actionscript 3.

 
 

O procedimento para obter este feito é:

* Criação de um arquivo XML com o caminho da imagem e os dados apontam na mesma;
* Depois de chamar esse dados xml em flash;
* Colocar as imagens em um círculo em 3D;
* Proporcionar o movimento circular para o mesmo;
* Funções de "clique em"e "em substituição";

Arquivo XML deverá ser parecido com o mostrado abaixo

<?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>

Copiar - Colar o código abaixo no seu painel de actionscript

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



Fonte: http://www.flashperfection.com/tutorials/Horizontal-3D-Carousel-in-Flash-CS3-20258.html

Download: Download do Arquivo