Implementing padding for thumbs

[luka66_6]

Hi

i, am building an portfolio site and i have come a long way (still a beginner) but now i found an problem. After i load xml file for paths to portfolio assets i load actual jpg's and/or swf's. But i am stuck since i do not understand how to implement padding so thumbs will be spaced evenly... I understand that i should use something like
thumb.x += thumb.width + padding but than how to position first thumb? I will be really happy if someone can point me in the right direction.


tnx
Luka

[milkmit]

What I've done in the past which has worked well is this (this is slightly free-hand, so might not work 100%):



// assumes you have an array of objects called thumbsArray, which holds all your sprites/MCs containing the jpg thumbnails

var thumbPosX:Number = 0; // starting x position of thumbnails, which will be incremented as we add more
var padding:Number = 20; // padding between thumbs

// the following loops through your array of thumbnails, adding each to the stage and then offsetting the thumbsPosX with each iteration for the following iteration to use
for (var p:Number=0; p < thumbsArray.length; p++) {
var newThumb:Sprite = thumbsArray[p]; // assigns thumbnail to temp local variable newThumb
newThumb.x = thumbPosX;
addChild(newThumb);

thumbPosX += (newThumb.width + padding); // this is the part that counts; see note below
}



I have some real code I've used in the past if you need real examples, but I figured I'd trim it down to just what's relevant so it's easier to make sense of.

And you'll see that what happens is: Lets say each thumbnail is 30px wide. In the first iteration, it places it at an x value of 0. After it's done adding it, it then calculates the position for the next one (thumbPosX) by adding to it the width of the thumbnail just added PLUS the padding. So in this case, it says 0 + 30 + 20 (thumbPosX + width of thumb + width of padding). For the next iteration, thumbsPosX is new set to 50px from the last iteration, so the #2 thumbnail is set to x of 50. Then it again adds another 50 (thumbnail width + padding) to get 100, which is where thumbnail #3 is added to....and so on and so on....

This is also a good place to add event listeners as well, assuming you want them clickable. You can do this in the standard way inside the same for loop (adding it to newThumb in each iteration), and they will all point to the same handler, naturally. The key here is to then listen to the event.target to see which thumb was clicked, so you know how to deal with the click accordingly.

There's a whole bunch more on how this is done in these forums, so just read up as much as you can on events if you don't get it.

[luka66_6]

@ milkmit (http://www.kirupa.com/forum/member.php?u=141032) tnx

I read some tutorials and i am now able to position thumbnails in 3x2 grid on stage the way i want. They are in mc container so i can move them around together. But i would like to load next 6 thumbnails in to diferent container that is positioned right from stage so i can tween it on stage on button click ( first container with 6 thumbnails will be tweened off.) I would like to create dynamic containers for 6 thumbnails max and the idea is that no mather how many thumbs i decide to load in they will be placed 6 in one container and one container should be placed right to another + some padding. I am not able to load in another move clip i do not get how should i set my if statements. So far i have this(but it loads next 6 over first 6 but i belive they are in different container. If somebody could point me how to set this up i would be very happy. My code so far:(only load complete handler)

function thumbLoaded(event:Event):void
{
///// moving home page out of way...
if(p == 0)
{
Tweener.addTween(containerHome, {time: 0.5, transition:"easeOutQuad", x: - containerHome.width});
}


/// status text is empty
thumbStatus.thumbStatus_txt.text = "";

//// thumb
thumb = new Thumb();

//// thumb content
thumb.thumbBlack.addChild(DisplayObject(thumbConte ntLoader.content));
thumb.thumbZavihek.thumbAdress.text = String(portfolioXML.item.title[p]);


if(thumbsCounter > maxThumbs)
{

thumbsCounter = 1;
thumbsHolder = new MovieClip();
this.addChild(thumbsHolder);
thumbsHolder.y = thumbsHolderPosY;
//thumbsHolder.x = stage.stageWidth;
//posXCounter = 0;
posYCounter = 0;
}
else
{
///// container for thumbs
this.addChild(thumbsHolder);

///container r for thumbs positioning
thumbsHolder.x = stage.stageWidth /2 - thumbsHolder.width/2

thumbsHolder.y = thumbsHolderPosY;
}
thumbsCounter ++;


//thumb.x = thumbPosX;
//thumbPosX += thumb.width + paddingX;
//thumb.y = thumbPosY;

// thumb.x = (thumb.width + paddingX) * p;
thumb.x = (thumb.width + paddingX) * posXCounter; //// positioning thumbs horizontaly in line. we need new var so we do not reset p
thumb.y = (thumb.height + paddingY) * posYCounter; ///positioning in vertical manner. we only increase this counter when we hit the end of collum and colum counter is reset

if(posXCounter +1 < colums) /// number of colums is 3 je št elementov v vrsti. counterju dodajmo 1 ker je začetna cifra 0 za x je ok za št elementov v vrsti pa ne.
{
posXCounter ++; //// če jih je manj kot trije v vrsti (colum) se counter poveča če pa jih je več ga resetira na nulo in thumbnails se začne nalagati od začetka kar se x-a tiče
}
else
{
posXCounter = 0;
posYCounter ++;
}

thumbsHolder.addChild(thumb);

/////////////////////////////////// garbage collection //////////////////////////////

thumbContentLoader.contentLoaderInfo.addEventListe ner(ProgressEvent.PROGRESS, loadingThumb);
thumbContentLoader.contentLoaderInfo.addEventListe ner(IOErrorEvent.IO_ERROR, thumbFailed);
thumbContentLoader.contentLoaderInfo.addEventListe ner(Event.COMPLETE, thumbLoaded);
thumbContentLoader = null;
thumbContentRequest = null;

this.removeChild(thumbStatus);
thumbStatus = null;
/////////////////////////////////// garbage collection ///////////////////////////////////////

/// creating loop
p ++;

if(p < portfolioXML.item.length() )
{
loadThumbContent();
}
if(p == portfolioXML.item.length() )
{
p = 0
}
}

[luka66_6]

I got an idea. I will use
Math.ceil(portfolioXML.item.length() / maxThumbs) where is max thumbs max number of thumbs in one container. That way i will have the correct number of containers. Now i just have to figure it out how to populate first one with six thumbnails than next with 6 and next with 6 and so on. And than place them one by one + padding.
How can i populate next container with next 6 thumbs when i hit the max 6 for container?