Monday, December 20, 2010

Create a 3D carousel gallery using AS3: Part 2

Today we will add more items to our carousel gallery!

Here's how it is going to look:


First we need to define how many items are we going to have. This time we will store it in a variable (placeholder again) - later we will store all the URLs to pictures in the gallery in a separate array and load the number of children from it and apply that number to this variable. But now we just set it up manually.

var totalItems:Number = 8;

Now let's calculate once how long is the distance between the items in our carousel.

var positionDistance:Number = 360 / totalItems;

We'll need to create an empty array which we will add movieclips to (with their position values) later.

var galleryItems:Array = [];

Now, creating the items and sorting out their positions:

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

As you can see we keep both the reference to the movieclip and the position value in this array. So the next time we need to retreive the position value of, say, third element, we refer to it as galleryItems[2].pos.

And here's the updated ENTER_FRAME function:

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

And here's the full code:

var totalItems:Number = 8;
var moveSpeed:Number = 5;
var galleryItems:Array = [];
var positionDistance:Number = 360 / totalItems;

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

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

Thank you for reading!

Related:

Create a 3D carousel gallery using AS3: Part 1
Create a 3D carousel gallery using AS3: Part 3
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