Tuesday, December 21, 2010

Create a 3D carousel gallery using AS3: Part 3

Today we will manage depths in our carousel gallery.

Before we do this you might want to read my tutorial about depths in ActionScript 3.

We will be using the setChildIndex() method. We'll need to change the depths of an item only 2 times in the cycle - the first time when its the closest to the user, the second time when its the farthest. This will make sure that every next item will behave the same.

Here's the code:

var totalItems:Number = 15;
var moveSpeed:Number = 3;
var galleryItems:Array = [];

var centerX:Number = 200;
var centerY:Number = 200;
var c_width:Number = 300;
var c_height:Number = 200;

var positionDistance:Number = 360 / totalItems;
var maxYdistance:Number = centerY + c_height / 2;

for (var i:int = 0; i<totalItems; i++)
{
var item:MovieClip = new carouselItem();
addChild(item);
galleryItems.push({mc:item, pos:(positionDistance*i)});
}

stage.addEventListener(Event.ENTER_FRAME, carouselMover);

function carouselMover(Event):void
{
for (var u:int = 0; u<totalItems; u++)
{
galleryItems[u].pos +=  moveSpeed;
galleryItems[u].mc.x = Math.cos(galleryItems[u].pos / 180 * Math.PI) * c_width / 2 + centerX;
galleryItems[u].mc.y = Math.sin(galleryItems[u].pos / 180 * Math.PI) * c_height / 2 + centerY;
if (galleryItems[u].pos >= 360)
{
galleryItems[u].pos -=  360;
}
if (galleryItems[u].pos >= 90 && galleryItems[u].pos < 90 + moveSpeed)
{
galleryItems[u].mc.parent.setChildIndex(galleryItems[u].mc, numChildren-1);
}
if (galleryItems[u].pos >= 270 && galleryItems[u].pos < 270 + moveSpeed)
{
galleryItems[u].mc.parent.setChildIndex(galleryItems[u].mc, 0);
}
}
}

As you can see, we add moveSpeed to the point of depths swap (90 and 270 degrees) to make sure that the item doesn't 'jump over' the gap and so that we can check it.

Here are the results:


Thanks for reading!

Related:

Create a 3D carousel gallery using AS3: Part 1
Create a 3D carousel gallery using AS3: Part 2
Create a 3D carousel gallery using AS3: Part 4
Create a 3D carousel gallery using AS3: Part 5
Create a 3D carousel gallery using AS3: Part 6
Create a 3D carousel gallery using AS3: Part 7
Create a 3D carousel gallery using AS3: Part 8
Create a 3D carousel gallery using AS3: Part 9
Create a 3D carousel gallery using AS3: Part 10
Create a 3D carousel gallery using AS3: Part 11

No comments:

Post a Comment