Tuesday, December 28, 2010

Create a 3D carousel gallery using AS3: Part 10

Today we'll make our main picture appear smoothly.

Like in this example:


I'll need a new variable for this - mainGoAlpha, which is 0 on start. This variable will be the alpha level, that the picture will strive to get: if the current alpha is less than mainGoAlpha, then we add to the current alpha; if it is greater - then we substract. This piece of code will be in the Event.ENTER_FRAME function and the mainUILoader will need to be regularly rounded to prevent glitches.

The change to mainGoAlpha = 1 (when the picture first appears) will need to be triggered only after the main picture is loaded, so we'll add a new Event.COMPLETE listener for this UILoader.

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 mainGoAlpha:Number = 0;

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;
setChildIndex(mainUILoader, numChildren-1);
}
}

mainUILoader.addEventListener(MouseEvent.CLICK, clickStage);

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

mainUILoader.addEventListener(Event.COMPLETE, onMainLoaded);

function onMainLoaded(Event):void
{
if (! allowMove)
{
mainGoAlpha = 1;
}
}

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, 1);
}
}
}
if (mainUILoader.alpha < mainGoAlpha)
{
mainUILoader.alpha +=  0.1;
}
else if (mainUILoader.alpha>mainGoAlpha)
{
mainUILoader.alpha -=  0.1;
}
mainUILoader.alpha = Math.round(mainUILoader.alpha * 10) / 10;
}

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

No comments:

Post a Comment