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 :((

Just a tip for everyone's ease of use. Try and follow the convention of only using first letter uppercase for `Classes` and make variables start with **lower case** characters - notice how you're throwing off the stackOverflow code highlighting? Makes it much harder to quickly read your code. — BadFeelingAboutThis, Jul 04 '14 at 17:44
I'm not sure I understand your issue. Are you saying that the code you're using is not scaling each image from it's own center point? — BadFeelingAboutThis, Jul 04 '14 at 18:06
where does `thumbWidth` and `thumbHeight` come from? that is likely your issue if all your images are NOT the same size. — BadFeelingAboutThis, Jul 04 '14 at 18:08
@LDMediaServices Exactly! It's scaling them all as they are in one container, but I think this code should put each one separately in a new movieclip called middleContainer. — Ahmed, Jul 04 '14 at 18:13
thumbWidth and thumbHeight comes from another code that extracts data from an XML file. Used them before, unlikely to be the issue. — Ahmed, Jul 04 '14 at 18:14
Still, I don't see you setting their values anywhere. Try this to humor me: `thumb.x = thumb.width * -0.5; thumb.y = thumb.height * -0.5; middleContainer.x = -thumb.x; middleContainer.y = -thumb.y;` — BadFeelingAboutThis, Jul 04 '14 at 18:17
I'm not showing the whole code here. This works but because it sets all thumbs in one place. but now we lost incrementing their position and their spread out as required.. — Ahmed, Jul 04 '14 at 19:08
Then just do it for the `thumb` but go back to your original code for positioning `middleContainer`. — BadFeelingAboutThis, Jul 04 '14 at 19:10

net.uk.sweet · Accepted Answer · 2014-07-04T19:11:55.857

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

WOWW.. You Mr. Is an amazing creature :D :D Thanks a Million!! Finally works now !! A question though, Why //thumb_Loader.x = i * (thumbWidth + thumbSpacing); // This gets undone when you set the x position in the viewThumbs handler ?? — Ahmed, Jul 04 '14 at 19:32
I changed my mind about that comment. The problem was that all your containers were placed at the origin and then the loaders centred within them. — net.uk.sweet, Jul 04 '14 at 21:19

BadFeelingAboutThis · Answer 2 · 2014-07-04T20:14:33.407

Your issue likely has to do with these two lines:

thumb.x -= thumbWidth/2;
thumb.y -= thumbHieght/2; //you spelled height wrong in this variable name

Though you don't show it, I'm guessing thumbWidth & thumbHeight are incremented for every thumbnail you go through. The position of thumb should not account for anything but thumb width/height and any real positioning should be done solely on the parent container (middleContainer). Change it to the following to only offset the actual width of the thumbnail:

thumb.x = thumb.width * -0.5;
thumb.y = thumb.height* -0.5;

So, if your goal is to position the thumbnails in row(s), you could do the following (I'm renaming thumbWidth and thumbHeight to rowX and rowY for clarity:

var rowHeight:Number = 0;
var rowX:Number = 0;
var rowY:Number = 0;

function viewThumbs(e: Event): void { 

    thumb = e.target.loader;
    middleContainer = new MovieClip();
    middleContainer.addChild(thumb);
    thumbsContainer.addChild(middleContainer);

    thumb.x = thumb.width * -0.5;
    thumb.y = thumb.height* -0.5;

    if(rowX + thumb.width > stage.stageWidth){ //stage.stageWidth being whatever you want the maximum row width to be
        //create a new row
        rowX = 0;
        rowY += rowHeight + 10; //10 being padding
        rowHeight = 0; //reset row height;
    }

    middleContainer.x = rowX;
    middleContainer.y = rowY;

    rowHeight = Math.max(rowHeight, thumb.height); //store the thumb with the biggest height in this row

    rowX += thumb.width + 10; //10 being some padding - increments the x position 

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

}

This is so useful, I actually used it in the same project with a menu of thumbs, but in this case here, It's only one row of thumbs being animating in as positive scaling. I'm sorry I didn't clear it out that much but I thought I've given enough information on the problem. — Ahmed, Jul 04 '14 at 19:49
Also, thumbWidth and thumbHeight (Thanks for the correction :D) are not incremented in any way, they are fixed as 320 and 180 pixels resp.. I've used so much from your well put answer!! Thank you so much @LDMediaServices :))) — Ahmed, Jul 04 '14 at 19:50
Glad it helped. In the future, you should post as much of the relevant code as possible in your question (like what thumbHeight/width are and how you're setting them) — BadFeelingAboutThis, Jul 04 '14 at 19:59
I thought it'd be better to focus, but you're definitely right! Will do it in the future! :) Thanks !! — Ahmed, Jul 04 '14 at 20:08

AS3: Scaling Up Multiple Elements from Their Own Centers Each

2 Answers2