Monday, December 27, 2010

Create a 3D carousel gallery using AS3: Part 9

In this tutorial we will make it show a bigger version of the picture when clicked.

Check it out:


Firstly, create a new UILoader on stage, call it mainUILoader, place it and size it how you want the picture to appear.

Now here's the full code:

import flash.events.Event;

var carouselItems:Array = [{url:"http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg", desc:"Cat one"},
   {url:"http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg", desc:"Cat two"},
   {url:"http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg", desc:"Cat three"},
   {url:"http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg", desc:"Cat four"},
   {url:"http://www.newgrounds.com/dump/draw/2b2e7648a2486a7c6e994cf29e37852c.jpg", desc:"Cat five"},
   {url:"http://www.newgrounds.com/dump/draw/9154eb1525566b58e0ee41abb8f87d7b.jpg", desc:"Cat six"}];

var allowMove:Boolean = true;
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].url;
item.txt.text = carouselItems[i].desc;
item.txt.alpha = 0;
item.myUILoader.addEventListener(Event.COMPLETE, onLoaded);
galleryItems.push({mc:item, pos:(positionDistance*i)});
}

function onLoaded(evt:Event):void
{
evt.currentTarget.parent.loadingGfx.alpha = 0;
evt.currentTarget.parent.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
evt.currentTarget.parent.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
evt.currentTarget.parent.addEventListener(MouseEvent.CLICK, clickHandler);
evt.currentTarget.removeEventListener(Event.COMPLETE, onLoaded);
}

function rollOverHandler(evt:MouseEvent):void
{
if (allowMove)
{
evt.currentTarget.txt.alpha = 1;
Mouse.cursor = "button";
}

}
function rollOutHandler(evt:MouseEvent):void
{
evt.currentTarget.txt.alpha = 0;
Mouse.cursor = "auto";
}

function clickHandler(evt:MouseEvent):void
{
if (allowMove)
{
allowMove = false;
Mouse.cursor = "auto";
evt.currentTarget.txt.alpha = 0;
mainUILoader.source = evt.currentTarget.myUILoader.source;
mainUILoader.alpha = 1;
setChildIndex(mainUILoader, numChildren-1);
}
}

mainUILoader.addEventListener(MouseEvent.CLICK, clickStage);

function clickStage(MouseEvent):void
{
if (! allowMove)
{
allowMove = true;
mainUILoader.alpha = 0;
setChildIndex(mainUILoader, 0);
}
}

stage.addEventListener(Event.ENTER_FRAME, carouselMover);

function carouselMover(Event):void
{
if (allowMove)
{
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;
}
}

I added a click listener for each item in the spawn loop. We have a new variable called allowMove. When it is true - the items in the gallery can move, when it is false - they freeze. It does so because I've put an if(allowMove) conditional on the piece of code that moves the gallery.

When we click an item, allowMove is set to false, our mainUILoader gets source of the clicked item's UILoader, gets alpha of 1 and is put on top of everything. When we click the mainUILoader, it goes transparent and the gallery continues moving (allowMove is true).

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

1 comment:

Anonymous said...

Colud you tell me how to make mainUILoader, because I am making that loader exactly like first loader but it is not working. Error: 1120: Access of undefined property mainUILoader.

Thanks

Post a Comment