AS3: Scaling Up Multiple Elements from Their Own Centers Each

Question

This is the code I wrote to make it work, but it scales them all from one point, as if they are all inside one big container, not each one in its own container "middleContainer". How can I fix this?

Thank you!! :)

var thumbsContainer:MovieClip;
var thumb_Loader: Loader;
var thumb: Loader; 
var middleContainer: MovieClip;

function createThumbs(): void {
    thumbsContainer = new MovieClip();
    stage.addChild(thumbsContainer);
    for (var i: uint = 0; i < 5 ; i++) {
        thumb_URL = VideoList[i].@THUMB_URL;
        thumb_Loader = new Loader();
        thumb_Loader.load(new URLRequest(Thumb_URL));
        thumb_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, viewThumbs)
        thumb_Loader.x = i * (thumbWidth + thumbSpacing);
    }
}

function viewThumbs(e: Event): void {
    thumb = e.target.loader;
    middleContainer = new MovieClip();
    middleContainer.addChild(thumb);
    thumbsContainer.addChild(middleContainer);

    thumb.x -= thumbWidth/2;
    thumb.y -= thumbHieght/2;
    middleContainer.x += thumbWidth/2;
    middleContainer.y += thumbHieght/2;

    var scaleUp:Tween = new Tween (middleContainer, "scaleX", Strong.easeOut, 0, 1, 1, true)
}
// Scales All Thumbs from One point not individually :((

Answer 1

I think it's because all the instances of your middleContainer are positioned in the same spot - ie. centered at the origin of the stage. I think you need to lay those instances out horizontally (as you're currently doing for the loader instances) and then offset the thumbnail within the container.

Untested, but something like the following:

var thumbsContainer:MovieClip;
var thumb_Loader: Loader;
var thumb: Loader; 
var middleContainer: MovieClip;
var loadCount:int = 0; // use a load count to preserve index

function createThumbs(): void {
    thumbsContainer = new MovieClip();
    stage.addChild(thumbsContainer);
    for (var i: uint = 0; i < 5 ; i++) {
        thumb_URL = VideoList[i].@THUMB_URL;
        thumb_Loader = new Loader();
        thumb_Loader.load(new URLRequest(Thumb_URL));
        thumb_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, viewThumbs);

        // Need to do this to the middleContainer instances instead
        //thumb_Loader.x = i * (thumbWidth + thumbSpacing);
    }
}

function viewThumbs(e: Event): void {

    thumb = e.target.loader;
    thumb.x -= thumbWidth / 2;
    thumb.y -= thumbHeight / 2;

    middleContainer = new MovieClip();
    middleContainer.x = loadCount * (thumbWidth + thumbSpacing); // lay the container's out horizontally
    middleContainer.addChild(thumb);

    thumbsContainer.addChild(middleContainer);

    // This is just reversing the offset you're usng to centre the thumb
    //middleContainer.x += thumbWidth/2;
    //middleContainer.y += thumbHieght/2;

    loadCount ++;

    var scaleUp:Tween = new Tween (middleContainer, "scaleX", Strong.easeOut, 0, 1, 1, true)
}