Actionscript 3: Dynamically adding movieclips constrained to a container

Question

Last Edit: Resolved!

Well, i was unable to find the ENTIRE answer here but i finally got what i was after. thanks very much for all of your help and patience.

as a side note: i think i may have been having problems with using the int and Number types, upon closer inspection of my solution, i realised that Number was being used and not int. turns out number contains floating points and int doesn't. my numbers were probably rounding whenever i tried to fix this my self. for all i know, TDI's answer might have been spot on and the use of int for the padding might have accumulated rounded numbers.. Oh well, you learn something every day..

the correct code to constrain movie clips to a container movie clip (or sprite or whatever) in the fashion i was looking for is this:

var picContainer:PicContainer = new PicContainer();
picContainer.x = stage.stageWidth / 2 - picContainer.width / 2;
picContainer.y = stage.stageHeight / 2 - picContainer.height / 2;
addChild(picContainer);

var totalPics:int = 17;

var pic:Pic = new Pic(); //make an instance just to get its width

var xRange:Number = picContainer.width - pic.width;
var spacing:Number = xRange / (totalPics - 1);

//A little optimization: only need to calculate this number ONCE:
var yLoc:Number = picContainer.height / 2 - pic.height / 2;

for(var i:int = 0; i < totalPics; i++) {
    pic = new Pic();
    pic.x = i * spacing;
    pic.y = yLoc;
    picContainer.addChild(pic);
}

the logic is pretty simple, and i don't know why i couldn't get it my self, because i drew diagrams that say exactly this logic. however, i must not have put the numbers in the right places or i wouldn't have had to ask, would i ;P

BONUS CONTENT! as an added bonus (if anyone finds this thread looking for answers..) you could also have the 'pic's fan out from the center point (but they'd still be in order of left to right) by using this code:

var picContainer:PicContainer = new PicContainer();
picContainer.x = stage.stageWidth / 2 - picContainer.width / 2;
picContainer.y = stage.stageHeight / 2 - picContainer.height / 2;
addChild(picContainer);

var totalPics:int = 5;

var pic:Pic = new Pic(); //make an instance just to get its width

var padding:Number = (picContainer.width - (pic.width * totalPics))  / (totalPics + 1);

for(var i:int = 0; i < totalPics; i++) {
    pic = new Pic();
    pic.x = padding + i * (pic.width + padding);
    pic.y = picContainer.height / 2 - pic.height / 2;
    picContainer.addChild(pic);
}

Try it out, these make for great thumbnail dock engines!

Peace out and thanks again! ~PtK

First Edit: Well, there is some progress thanks to TDI but not a complete solution.

you see, the problem remains that the movie clips do not squash completely into the container, the last one or two are left sticking out.

example:

my revised code looks like this:

var newPicContainer:picContainer = new picContainer();
var newPic:pic;

var picwidth:int = 100;
var amountofpics:int = 22;
var i:int;

//add a container
addChild(newPicContainer);

//center our container
newPicContainer.x = (stage.stageWidth/2)- (newPicContainer.width/2);
newPicContainer.y = (stage.stageHeight/2)- (newPicContainer.height/2);

var totalpicwidth:int = picwidth*amountofpics;

var totalpadding:int = newPicContainer.width - totalpicwidth;

var paddingbetween:int = (totalpadding / amountofpics);

for (i = 0; i < amountofpics; ++i)
{
    //make a new mc called newPic(and i's value)  eg. newPic1
    this['newPic' + i] = new pic();
    this['newPic' + i].width = picwidth;

    //add our pic to the container
    newPicContainer.addChild(this['newPic' + i]);

    //set the new pics X
    if (i != 0)
    {
        // if i is not 0, set newpic(i)s x to the previous pic plus the previous pics width and add our dynamic padding 
        this['newPic' + i].x = this['newPic' + (i-1)].x + picwidth + paddingbetween;
    }
    else
    {
        this['newPic' + i].x = 0;
    }
}

thanks again to anyone in advance!

Original Post:

Hello, First time posting here. I hope I'm not getting anything wrong . my problem is as follows:

I've got a pretty basic for loop that creates a 'thumbnail' and puts it next to the previous one (With a little padding) inside a containing movie clip.

var newPicContainer:picContainer = new picContainer();
var newPic:pic;
var amount:int = 9;
var i:int;

//Add our container
addChild(newPicContainer);

//center our container
newPicContainer.x = (stage.stageWidth/2)- (newPicContainer.width/2);
newPicContainer.y = (stage.stageHeight/2)- (newPicContainer.height/2);


for (i = 0; i < amount; ++i)
{
 newPic = new pic();
 newPicContainer.addChild(newPic);

    //just so i know it's adding them..
    trace(newPic.thisOne);
 newPic.thisOne = i;

    // set this one to its self (+5 for padding..) Times, the amount already placed. 
 newPic.x = (newPic.width+5) *i;
}

I'm wondering if there is some equation or 'magic math' that I can use to figure out what the length of the container is and have the 'thumbnails' be added relative to that number. basically squashing the thumbnails against each other to make them all fit inside..

something along the lines of:

newPic.x = (newPic.width *i) - stuff here to make it know not to go past the containing width;

I must admit i'm not too great with math and so this part of coding escapes me..

thanks to any takers in advance..

Answer 1

I'd recommend you look at using the Flex framework (it's a Flash framework), it will make building this sort of view much easier.

You can set a container's layout property, so that items are placed in horizontal, vertical or tiled layouts, and then just add items to the container.

For more info on Flex look here

For info on Flex Layouts

Answer 2

you can get the length of your container by either calling its width property explicitly:

//Container Width    
newPicContainer.width;

or the newContainer is also the parent of the added pics:

//Container Width    
newPic.parent.width;

then you need to get the total length occupied by you pics:

var arrayOfPics:array = [pic1, pic2, pic3, pic4, pic5];
var picsWidth:Number;

for each (var element:pic in arrayOfPics)
         picsWidth =+ element.width;

after than you can subtract the length of the total pics from the container to know your available padding for separation:

var totalPadding:Number = newPicContainer.width - picsWidth;

now you can determine how much padding you can afford between the pics and both sides of the container by dividing the totalPadding by the number of pics, and add an extra padding for the end.

var padding:Number = totalPadding / arrayOfPics.length + 1;

now you can simply add your pics by including the padding

for (var i:int = 0; i < arrayOfPics.length; i++)
    {
    newPicContainer.addChild(arrayOfPics[i]);
    (i == 0) ? arrayOfPics[i].x = padding : arrayOfPics[i].x = arrayOfPics[i - 1].x + arrayOfPics[i - 1].width + padding;
    }

Answer 3

Try this...

 //maximum available length
 var maxLength:int; 

 // a single thumbnail width
 var picWidth:int = 100;

 // total number of pics in a container
 var maxNumPics:int;

 // as long as the maximum available length
 // is inferior to the container length 
 // add a new thumbnail
 while( maxLength < newPicContainer.length - 100 )
 { 
    maxLength += 100;
    maxNumPics += 1;
 } 

 // calculate the amount of available padding.
 var padding:Number =  ( newPicContainer.length - maxLength )/ maxNumPics; 

 //add your thumbs
 var picX:int;

 for( var i:int ; i < maxNumPics ; ++i )
 {
     var newPic:Pic = new Pic();
     newPic.x = picX;

     picX += padding + picWidth;
     newPicContainer.addChild( newPic ); 
 }