Help with as3 image carousel

I got this script for an xml controlled image carousel. It works really well, I just need to tweak it a bit to get it to work the way I want.

I want to position the carousel in a certain area of the movie. The only parameter that I see to control where it’s positioned is “var floor:Number = 20;” but this only controls the vertical position. I need to control the horizontal position, right now it’s just centered. I see “xpos3D” but don’t know what to make of it.

I also want to keep it from showing up outside of the frames I want it to appear. Right now when I put the script in the movie it shows up in every frame. How do I get it appear only in certain frames of the movie? When i put “stop();” at the end of the keyframe it still shows in the frames after it.

The last thing I need is to position the animation on top of other layers. Right now it appears below all other layers in the movie.

I don’t know what parts to modify to accomplish this so of course I don’t know what parts to post, which is why I’m posting the whole thing.

Hints on how to accomplish any of the above much appreciated! :slight_smile:



//We use 70x70 sized images (change this if different for your images)
const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;
 
//Set the focal length
var focalLength:Number = 400;
 
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
 
//The 3D floor for the images
var floor:Number = 20;
 
//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;
 
//Radius of the circle
var radius:Number = 200;
 
//Specify the path to the XML file.
//You can use my path or your own.
var xmlFilePath:String = "3D-carousel-settings.xml";
 
//We save the loaded XML to a variable
var xml:XML;
 
//This array will contain all the imageHolders
var imageHolders:Array = new Array();
 
//We want to know how many images have been loaded
var numberOfLoadedImages:uint = 0;
 
//The total number of images according to XML file
var numberOfImages:uint = 0;
 
//Load the XML file.
var loader = new URLLoader();
loader.load(new URLRequest(xmlFilePath));
 
//We call the function xmlLoaded() when the loading is complete.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
 
//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {
 
    //Create a new XML object from the loaded XML data
    xml = new XML(loader.data);
    xml.ignoreWhitespace = true;
 
    //Call the function that loads the images
    loadImages();
}
 
//This function loads and creates holders for the images specified in the 3D-carousel-settings.xml
function loadImages():void {
 
    //Get the total number of images from the XML file
    numberOfImages = xml.number_of_images;
 
    //Loop through the images found in the XML file
    for each (var image:XML in xml.images.image) {
 
        //Create a new image holder for an image
        var imageHolder:MovieClip = new MovieClip();
 
        //Create a loader that will load an image
        var imageLoader = new Loader();
 
        //Add the imageLoader to the imageHolder
        imageHolder.addChild(imageLoader);
 
        //We don't want to catch any mouse events from the loader
        imageHolder.mouseChildren = false;
 
        //Position the imageLoader so that the registration point of the holder is centered
        imageLoader.x = - (IMAGE_WIDTH / 2);
        imageLoader.y = - (IMAGE_HEIGHT / 2);
 
        //Save where the imageHolder should link to
        imageHolder.linkTo = image.link_to;
 
        //Add the imageHolder to the imageHolders array
        imageHolders.push(imageHolder);
 
        //Load the image
        imageLoader.load(new URLRequest(image.url));
 
        //Listen when the image is loaded
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
    }
}
 
//This function is called when an image is loaded
function imageLoaded(e:Event):void {
 
    //Update the number of loaded images
    numberOfLoadedImages++;
 
    //Set the bitmap smoothing to true for the image (we know that the loader's content is a bitmap).
    e.target.content.smoothing = true;
 
    //Check to see if this is the last image loaded
    if (numberOfLoadedImages == numberOfImages) {
 
        //Set up the carousel
        initializeCarousel();
    }
}

//This function is called when all the images have been loaded.
//Now we are ready to create the 3D carousel.
function initializeCarousel():void {
 
    //Calculate the angle difference between the images (in radians)
    var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
 
    //Loop through the images
    for (var i:uint = 0; i < imageHolders.length; i++) {
 
        //Assign the imageHolder to a local variable
        var imageHolder:MovieClip = (MovieClip)(imageHolders*);
 
        //Get the angle for the image (we space the images evenly)
        var startingAngle:Number = angleDifference * i;
 
        //Position the imageHolder
        imageHolder.xpos3D = radius * Math.cos(startingAngle);
        imageHolder.zpos3D = radius * Math.sin(startingAngle);
        imageHolder.ypos3D = floor;
 
        //Set a "currentAngle" attribute for the imageHolder
        imageHolder.currentAngle = startingAngle;
 
        //Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale)
        var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
        //Scale the imageHolder according to the scale ratio
        imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
 
        //Set the alpha for the imageHolder
        imageHolder.alpha = 0.3;
 
        //We want to know when the mouse is over and out of the imageHolder
        imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
        imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
 
        //We also want to listen for the clicks
        imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);
 
        //Position the imageHolder to the stage (from 3D to 2D coordinates)
        imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
        imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
 
        //Add the imageHolder to the stage
        addChild(imageHolder);
    }
 
    //Add an ENTER_FRAME for the rotation
    addEventListener(Event.ENTER_FRAME, rotateCarousel);
}

function rotateCarousel(e:Event):void {
 
    //Calculate the angleSpeed according to mouse position
    angleSpeed = (mouseX - vanishingPointX) / 4096;
 
    //Loop through the images
    for (var i:uint = 0; i < imageHolders.length; i++) {
 
        //Assign the imageHolder to a local variable
        var imageHolder:MovieClip = (MovieClip)(imageHolders*);
 
        //Update the imageHolder's current angle
        imageHolder.currentAngle += angleSpeed;
 
        //Set a new 3D position for the imageHolder
        imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle);
        imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);
 
        //Calculate a scale ratio
        var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
        //Scale the imageHolder according to the scale ratio
        imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
 
        //Update the imageHolder's coordinates
        imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
        imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
    }
 
    //Call the function that sorts the images so they overlap each others correctly
    sortZ();
}
 
//This function sorts the images so they overlap each others correctly
function sortZ():void {
 
    //Sort the array so that the image which has the highest 
    //z position (= furthest away) is first in the array
    imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
    //Set new child indexes for the images
    for (var i:uint = 0; i < imageHolders.length; i++) {
        setChildIndex(imageHolders*, i);
    }
}
 
//This function is called when the mouse is over an imageHolder
function mouseOverImage(e:Event):void {
 
    //Set alpha to 1
    e.target.alpha=1;
}
 
//This function is called when the mouse is out of an imageHolder
function mouseOutImage(e:Event):void {
 
    //Set alpha to 0.3
    e.target.alpha=0.3;
}
 
//This function is called when an imageHolder is clicked
function imageClicked(e:Event):void {
 
    //Navigate to the URL that is in the "linkTo" variable
    navigateToURL(new URLRequest(e.target.linkTo));
}