Coverflow - order of indexes doesn't work as intended

Question

I made a Coverflow class, and everything works fine, but I got one problem. If I click on an item or navigate through the images with the arrow keys I want an image formation like this:

1) What I want

I got everything working fine on the right side my objects arent placed correctly, they are positioned over each other:

2) What's wrong

Now you see on the right side it is kinda fucked up, the images shouldn't overlap like that, they should be positioned after each other just like on the left side.

3) Code where I build up the images

package be.devine.cp3.itemGroup
{

import com.greensock.TweenLite;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;

public class Coverflow extends Sprite
{
    public var images:Array;
    private var _currentImageIndex:int;
    private var imageSize:uint;


    public function Coverflow(images:Array)
    {
        this.images = [];

        for each(var image:DisplayObject in images)
        {
            if(image.width > imageSize)
            {
                imageSize = image.width;
            }
            var imageContainer:Sprite = new Sprite();
            image.x = -1 * (image.width >> 1);
            image.y = -1 * (image.height >> 1);

            imageContainer.addChild(image);
            this.images.push(imageContainer);
        }
        this.currentImageIndex = images.length >> 1;


    }

    private function imageClickHandler(event:MouseEvent):void
    {
        var targ:DisplayObject = event.currentTarget as DisplayObject;
        currentImageIndex = getChildIndex(targ);
    }

    public function display():void
    {
        while(this.numChildren > 0)
        {
            removeChildAt(0);
        }

        var depth:Number = 0;

        for(var i:int = 0; i < images.length; i++)
        {
            var image:DisplayObject = images[i];
            var xPos:Number = 0;
            xPos = (i - _currentImageIndex) * imageSize;

            if(i < _currentImageIndex) { //moet er links van komen -> negatieve x
                image.rotationY = -90; //-45
                depth++;
            } else if(i == _currentImageIndex) {//in het midden            {
                image.rotationY = 0;
                depth = 0;

            } else {//moet rechts komen -> positieve x
                image.rotationY = 90; //45
                depth ++;

            }

            addChild(image);

            TweenLite.to(image,.5, {x:xPos});
            var zPos:int =  (i - _currentImageIndex);
            image.addEventListener(MouseEvent.CLICK, imageClickHandler);

        }

    }

    public function get currentImageIndex():int {
        return _currentImageIndex;
    }

    public function set currentImageIndex(value:int):void {

        value = Math.min(images.length -1, Math.max(0, value));

        if(_currentImageIndex != value)
        {
            _currentImageIndex = value;
            display();
        }
    }

}
}

I already searched on the web, but I can't find a similar thing about coverflows... I know it has to do something with setting the child index of the images but I have no idea on how to calculate it :). I hope someone can help me out.

Answer 1

I found the solution :) had to add the image before i changed the child indexes and use setChildIndex instead of addChildAt:

   for(var i:int = 0; i < images.length; i++)
    {
        var image:DisplayObject = images[i];
        var xPos:Number = 0;
        var rY:int = 0;

        xPos = (i - _currentImageIndex) * imageSize;
        addChild(image);

        if(i < _currentImageIndex) { //moet er links van komen -> negatieve x
            rY = -90;
            setChildIndex(image,  numChildren-1);
        } else if(i == _currentImageIndex) {//in het midden            {
            rY = 0;
        } else {//moet rechts komen -> positieve x
            rY = 90;
            setChildIndex(image, 0);
        }
        TweenLite.to(image,.5, {x:xPos, rotationY: rY});
        image.addEventListener(MouseEvent.CLICK, imageClickHandler);

    }