Saturday, December 25, 2010

Create a 3D carousel gallery using AS3: Part 7

In this tutorial we're going to add a loading graphic that shows up when an image isn't loaded.

Like this:


The first thing that comes to mind - create a loading animation and just put it under the picture - when its loaded, it will cover the animation so it wont be seen.

Yes, that would be a solution, if we didn't have the images become transparent as they fade out - the loading graphic becomes visible underneath the half-alpha'ed picture.

That is why we need to add a listener for a loading event and make the animation invisible as soon as the picture is loaded.

Firstly, draw your animation in a movieclip and put it in the carouselItem movieclip in the same place as the UILoader. Give this movieclip an instance name of loadingGfx.

In the inital spawning loop (where we addChild all the items) we need to add a listener to the item's UILoader:

item.myUILoader.addEventListener(Event.COMPLETE, onLoaded);

And here is the function itself:

function onLoaded(evt:Event):void
{
evt.currentTarget.parent.loadingGfx.alpha = 0;
evt.currentTarget.removeEventListener(Event.COMPLETE, onLoaded);
}

We remove the listener after the picture is loaded because we won't need it anymore (assuming that pictures will be loaded just once).

Here's the whole code:

import flash.events.Event;

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

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

And there you have it!

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