Wednesday, December 29, 2010

Create a 3D carousel gallery using AS3: Part 11

Today we'll load all our items from an external XML file!

First of all, let's create the xml file. I called it carousel.xml and here are its contents:

<carousel>
<galleryItem url="http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg" desc="Cat one"/>
<galleryItem url="http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg" desc="Cat two"/>
<galleryItem url="http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg" desc="Cat three"/>
<galleryItem url="http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg" desc="Cat four"/>
<galleryItem url="http://www.newgrounds.com/dump/draw/2b2e7648a2486a7c6e994cf29e37852c.jpg" desc="Cat five"/>
<galleryItem url="http://www.newgrounds.com/dump/draw/9154eb1525566b58e0ee41abb8f87d7b.jpg" desc="Cat six"/>
</carousel>

Next, the Actionscript. First we create the carouselItems array (empty):

var carouselItems:Array = [];

Then we load the xml:

var _loader:URLLoader = new URLLoader();
var _data:XML = new XML();

_loader.addEventListener(Event.COMPLETE, readXML);
_loader.load(new URLRequest("carousel.xml"));

And now we parse it. Note that parsing usually takes milliseconds, but it is still executed later than most of the code in your script. So we will need to update the carouselItems array AND include all the stuff related to initialization( spawning the items, setting them up on the oval, setting up some listeners etc.) in the parsing function (readXML).

Here is the full code:

import flash.events.Event;

var carouselItems:Array = [];

var _loader:URLLoader = new URLLoader();
var _data:XML = new XML();

_loader.addEventListener(Event.COMPLETE, readXML);
_loader.load(new URLRequest("carousel.xml"));

function readXML(event:Event):void
{
_data = new XML(event.target.data);

for each (var it in _data.galleryItem)
{
carouselItems.push({url: it.@url, desc: it.@desc});
}
var totalItems:Number = carouselItems.length;
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)});
}

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



var allowMove:Boolean = true;
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;

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(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 it works just like this:


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 10

1 comment:

simpleton said...

u rock!
i wasted so much time fr carousel on d net,nd it was here.

thnx so much

Post a Comment