Friday, December 24, 2010

Create a 3D carousel gallery using AS3: Part 6

Today we'll put real external images to our carousel instead of placeholders!

Here's how it's going to look like:


Go to your carouselItem movieclip and remove the blue square (or whatever placeholder graphic you have) and replace it with an UILoader component. Make sure the scaleContent of the loader is set to true, then set the size of the loader how you want your pictures to appear. Give the component an instance name of MyUILoader.

We are going to store all our URLs in an array, then see how many elements there are and apply that number to the totalItems variable. In the loop where we spawn all the items, we also set the source of the loader inside of the MovieClip to the respective URLs.

Here's the whole code:

var carouselItems:Array = ["http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg", "http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg", "http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg", "http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg", "http://www.newgrounds.com/dump/draw/2b2e7648a2486a7c6e994cf29e37852c.jpg", "http://www.newgrounds.com/dump/draw/9154eb1525566b58e0ee41abb8f87d7b.jpg"];

var totalItems:Number = carouselItems.length;
var moveSpeed:Number = 2;
var galleryItems:Array = [];
var farthestFade:Number = 0.1;
var farthestSize:Number = 0.5;
var heightMax = 150;
var heightMin = -150;

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

var positionDistance:Number = 360 / totalItems;

for (var i:int = 0; i<totalItems; i++)
{
var item:MovieClip = new carouselItem();
addChild(item);
item.myUILoader.source = carouselItems[i];
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 <= 0)
{
galleryItems[u].pos += 360;
}
if (galleryItems[u].pos >= 80 - moveSpeed && galleryItems[u].pos <= 100 + moveSpeed)
{
galleryItems[u].mc.parent.setChildIndex(galleryItems[u].mc, numChildren-1);
}
if (galleryItems[u].pos >= 260 - moveSpeed && galleryItems[u].pos <= 270 + moveSpeed)
{
galleryItems[u].mc.parent.setChildIndex(galleryItems[u].mc, 0);
}
}
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);

function mouseHandler(MouseEvent):void
{
moveSpeed = (centerX - mouseX)/80;
c_height = (mouseY - centerY)*2;

if (c_height == 0)
{
c_height = 1;
}

if (c_height > heightMax)
{
c_height = heightMax;
}
if (c_height < heightMin)
{
c_height = heightMin;
}
}

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

6 comments:

Anonymous said...

Hi,

I need help. I receive the following error message:

TypeError: Error #1010: A term is undefined and has no properties.
at CarouselGallery_fla::MainTimeline/frame1()

I think the error points to the following part:
item.myUILoader.source = carouselItems[i];

Max

Anonymous said...

I need help. I receive the following error message:

TypeError: Error #1010: A term is undefined and has no properties.
at CarouselGallery_fla::MainTimeline/frame1()

zafar

Assalamu alaikum said...

hi

i need this fla file.


zafar.qamar@yahoo.com

Kirill Poletaev said...

http://uploadmirrors.com/download/R2WQBFDL/carousel6.fla

Rocky Top said...

Hi,

The error is caused because you need to use lower case myUILoader when you name the movie clip.

Kirill you are awesome thanks so much.

Julian Peña said...

Nice tutorial, thanks a lot!

Post a Comment