Wednesday, December 22, 2010

Create a 3D carousel gallery using AS3: Part 4

Today we will make the objects that go farther fade out and be smaller.

Here's what we're going to achieve:


We are going to have 2 more variables that you can change - farthestFade and farthestSize.

var farthestFade:Number = 0.1;
var farthestSize:Number = 0.5;

Here's the new piece of code we will add to our loop:

galleryItems[u].mc.alpha = (galleryItems[u].mc.y-centerY+c_height/2)/(c_height)+farthestFade;
galleryItems[u].mc.scaleX = (galleryItems[u].mc.y-centerY+c_height/2)/(c_height)+farthestSize;
galleryItems[u].mc.scaleY = galleryItems[u].mc.scaleX;

if (galleryItems[u].mc.scaleX > 1)
{
galleryItems[u].mc.scaleX = 1;
galleryItems[u].mc.scaleY = 1;
}

It might look complicated, but in reality it is just a proportion. The alpha is set to: < current Y in the range of max-min Y in the ellipse > divide by < maximum possible Y in the ellipse range > and plus < addition to fade/size on the farthest element >.

Here's the full code:

var totalItems:Number = 15;
var moveSpeed:Number = 3;
var galleryItems:Array = [];
var farthestFade:Number = 0.1;
var farthestSize:Number = 0.5;

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

var positionDistance:Number = 360 / totalItems;

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;

galleryItems[u].mc.alpha = (galleryItems[u].mc.y-centerY+c_height/2)/(c_height)+farthestFade;
galleryItems[u].mc.scaleX = (galleryItems[u].mc.y-centerY+c_height/2)/(c_height)+farthestSize;
galleryItems[u].mc.scaleY = galleryItems[u].mc.scaleX;

if (galleryItems[u].mc.scaleX > 1)
{
galleryItems[u].mc.scaleX = 1;
galleryItems[u].mc.scaleY = 1;
}

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

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