Carousel question!

[Galland]

Hi!

Doing my very best to crack this one but in rather over my head! I'm using an AS3 carousel which has been adapted from Lee Brimelow (by matbury @ actionscript.org)...

...and I'm trying to figure out how to display more than one type of icon in the carousel - in other words - it seems to me items in carousel are generated onto the stage by a for loop:

// place Items on stage
function init():void {
for(var i:uint = 0; i < numOfItems; i++) {
var item:Item = new Item();
// public var angl:Number; is in Item class.
// Item class extends ItemInner in FLA library.
item.angl = i * ((Math.PI * 2) / numOfItems);
item.ref.mask = item.masker;
item.alpha = 0.5;
itemArray.push(item);
addChild(item);
item.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
// listen for MouseEvents only on icons, not on reflections
item.icon.addEventListener(MouseEvent.CLICK, clickHandler);
item.icon.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
item.icon.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}
}

...which refers to an Item class:

package {

public class Item extends ItemInner {

public var angl:Number;

public function Item() {
//
}
}
}

...which generates the items onto the stage...but - what would the best way be to make say, 4 or 5 DIFFERENT items in the carousel?

Really, I`ve been trying very hard but...anyone give me a hint?

Entire AS3 code is posted below!

Help is MOST appreciated,

Galland :block:

/*
The 'reflections' will only work if 'bitmap caching' for the Icon
instance 'ref' and the 'masker' instance is turned on in the properties panel.
*/
var numOfItems:uint = 5; // number of Items to put on stage
var radiusX:uint = 250; // width of carousel
var radiusY:uint = 75; // height of carousel
var centerX:Number = 560; // x position of center of carousel
var centerY:Number = 320; // y position of center of carousel
var speed:Number = 0.05; // initial speed of rotation of carousel
var itemArray:Array = new Array(); // store the Items to sort them according to their 'depth' - see sortBySize() function.
init();
// place Items on stage
function init():void {
for(var i:uint = 0; i < numOfItems; i++) {
var item:Item = new Item();
// public var angl:Number; is in Item class.
// Item class extends ItemInner in FLA library.
item.angl = i * ((Math.PI * 2) / numOfItems);
item.ref.mask = item.masker;
item.alpha = 0.5;
itemArray.push(item);
addChild(item);
item.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
// listen for MouseEvents only on icons, not on reflections
item.icon.addEventListener(MouseEvent.CLICK, clickHandler);
item.icon.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
item.icon.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}
}
// position Items in elipse
function enterFrameHandler(event:Event):void {
event.target.x = Math.cos(event.target.angl) * radiusX + centerX; // x position of Item
event.target.y = Math.sin(event.target.angl) * radiusY + centerY; // y postion of Item
// scale Item according to y position to give perspective
var s:Number = event.target.y / (centerY + radiusY);
event.target.scaleX = event.target.scaleY = s;
event.target.angl += speed; // speed is updated by mouseMoveHandler
sortBySize();
}
// set the display list index (depth) of the Items according to their
// scaleX property so that the bigger the Item, the higher the index (depth)
function sortBySize():void {
// There isn't an Array.ASCENDING property so use DESCENDING and reverse()
itemArray.sortOn("scaleX", Array.DESCENDING | Array.NUMERIC);
itemArray.reverse();
for(var i:uint = 0; i < itemArray.length; i++) {
var item:Item = itemArray[i];
setChildIndex(item, i);
}
}
function clickHandler(event:MouseEvent):void {
// clean up your listeners before you do anything else to free up
// user's CPU resources
for(var i:uint = 0; i < itemArray.length; i++) {
var item:Item = itemArray[i];
item.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
item.icon.removeEventListener(MouseEvent.CLICK, clickHandler);
item.icon.removeEventListener(MouseEvent.ROLL_OVER , rollOverHandler);
item.icon.removeEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// optional:
removeChild(item);
// to replace the carousel again see reInit() function
}
// put your own code here.
}
function rollOverHandler(event:MouseEvent):void {
event.target.parent.alpha = 1;
}
function rollOutHandler(event:MouseEvent):void {
event.target.parent.alpha = 0.5;
}
addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
/*
Update the speed at which the carousel rotates accoring to the distance of the mouse from the center of the stage. The speed variable only gets updated when the mouse moves over the Item Sprites.
*/
function mouseMoveHandler(event:MouseEvent):void {
speed = (mouseX - centerX) / 6000;
}
// click to put Items back on stage
rewButton.buttonMode = true;
rewButton.addEventListener(MouseEvent.CLICK, reInit);
// put items back on stage
function reInit(event:MouseEvent):void {
for(var i:uint = 0; i < itemArray.length; i++) {
var item:Item = itemArray[i];
item.alpha = 0.5;
addChild(item);
item.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
item.icon.addEventListener(MouseEvent.CLICK, clickHandler);
item.icon.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
item.icon.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}
}

[AcolyTe]

item.angl = i * ((Math.PI * 2) / numOfItems);

event.target.x = Math.cos(event.target.angl) * radiusX + centerX; // x position of Item
event.target.y = Math.sin(event.target.angl) * radiusY + centerY; // y postion of Item

These are the key lines to placing your different items in the carousel.

[a tadster]

create a custom class that is the different icons
pass i to it and have it be a different icon based on i.

...
for(var i:uint = 0; i < numOfItems; i++) {
var item:ItemLoader = new ItemLoader(i);
...

here you go:

ItemLoader.as


package
{

import flash.display.*;
import flash.net.*;
/* you could set this up in many ways, you could draw something based on i, goto frames as a movieclip,
in this case i'll load a png and add it to the display.
so based on the number value given, this class will be a different icon
this is a mock up of what you could do */


public class ItemLoader extends Sprite
{

private var IconLoader:Loader = new Loader();

public function ItemLoader(IAmToBe:Number = 1):void
{

if (IAmToBe == 1) {IconLoader.load(new URLRequest("1.png"));}
if (IAmToBe == 2) {IconLoader.load(new URLRequest("2.png"));}
//and so on
addChild(IconLoader);

}

}
}



hope it helps!

[Galland]

Thank you very much for both replies!

Particular thanks to a tadster for the package!

Most, most appreciated