Sunday, December 26, 2010

Create a 3D carousel gallery using AS3: Part 8

Today we'll add some roll-over interactivity to our carousel elements.

You can see description appear when you roll over an item in the gallery:


To do this, first go to your carouselItem movieclip and create a textfield called "txt" underneath your UILoader.

Now we need a place to store our descriptions at, let's use the same carouselItems array. We will need to turn it into an associative array with two parameters in one object: url and desc.

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

Now we should edit the initialization spawn loop by adding two lines to it: the first one to set the text of the description in the movieclip, and the second to turn it invisible:

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

Now, we only want our button to react when the picture is loaded, so we edit the onLoaded function by adding two listeners to the movieclip:

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.removeEventListener(Event.COMPLETE, onLoaded);
}

The roll over/out functions set the alpha of the text to 1 when rolled over, and to 0 when rolled out. I also want a hand pointer cursor to appear when rolled over, so I change the Mouse.cursor property to do that:

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

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

Here is 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 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.removeEventListener(Event.COMPLETE, onLoaded);
}

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

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

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

Until next time!

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

2 comments:

Anonymous said...

i need this source file

ali

Anonymous said...

this tutorial is good but i can't understand this bit .special thanks to kirill. i need this source file waiting for your kind reply
Alan

Post a Comment