Space thumbnails equally on multi lines

programming flash
1

Space thumbnails equally on multi lines

Hi all,

I looked for an answer to this a while back but had no success but now I really need to find an answer.

I have a group of thumbnails that need to be displayed in a grid, so it could be 3 lines of 5 images. I’m not too sure on the amount in each line because it will be updated dynamically. The image information comes from an xml file so I’m able to update the xml file but still have the thumbs in a grid

The problem is that the thumbs are different widths, but I need to space them equal distances apart on seperate lines.

So what I need to do is space them equally until they come to a certain distance or number of thumbs across and then have them drop down to another line and continue to have the same spacing

Here is code I’m using


//Variables
//-------------------------------------
var gutter = 4;
var btn_spacing = 20;
var btnRefs = new Array();

//
//XML
//-------------------------------------
my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
	if (success) {
		DisplayBands();
	} else {
		trace("XML Not Loaded");
	}
};
my_xml.load("images.xml");
//
//xml function
//-------------------------------------
function DisplayBands() {
	one = my_xml.firstChild.childNodes;
	for (i=0; i<one.length; i++) {
		two = one*;
		Btn = holder_mc.attachMovie("btn_mc", "btn_mc"+i, i+1);
		Btn._x = btn_spacing/1.6;
		Btn._y = btn_spacing*i;
		Btn.id = two.attributes.name;
		Btn.txt_txt.text = Btn.id;
		Btn.three = two.childNodes;
		Btn.holder_arr = new Array();
		for (s=0; s<Btn.three.length; s++) {
			Btn.four = Btn.three[s];
			Btn.five = Btn.four.childNodes;
			Btn.holder_arr.push(Btn.five);
			Btn.onRelease = function() {
				thHolder_mc.SequentialImages(this.holder_arr);
			};
		}
	}
}
//
//Load thumbnail images in sequence
//-------------------------------------
MovieClip.prototype.SequentialImages = function(images) {
	this.imgAmount = images.length;
	this.curImage = 0;
	this.images = images;
	this.ImageFromSequence();
	//check to see if thumbanil loaded before loading next
	this.onEnterFrame = function() {
		clipLoaded = this.imageClip.getBytesLoaded();
		clipTotal = this.imageClip.getBytesTotal();
		percent = clipLoaded/clipTotal;
		if (percent == 1) {
			this.imageClip._alpha = 40
			this.imageClip.onRollOver = function() {
				this._alpha = 100;
			};
			this.imageClip.onRollOut = this.imageClip.onDragOut=function () {
				this._alpha = 40;
			};
			this.curImage++;
			if (this.curImage>=this.images.length) {
				this.onEnterFrame = undefined;
			} else {
				this.ImageFromSequence();
			}
		}
	};
};

//
//
//loading the images form the holder_arr that comes from the xml file.
// 
MovieClip.prototype.ImageFromSequence = function() {
	this.imageClip = this.createEmptyMovieClip("thumb"+this.curImage+"_mc", this.curImage);
	this.imageClip.loadMovie(this.images[this.curImage]+".jpg");
	this.imageClip._alpha = 0;
	this.imageClip.id = this;
	this.imageClip.idx = this.curImage;
	this.imageClipPrev = this["thumb"+(this.curImage-1)+"_mc"];
	this.cols = 5;
	this.offSetXTest = this.imageClipPrev._x+this.imageClipPrev._width+gutter;
	this.offSetX = 85;
	this.offSetY = 75;
	//this.imageClip._x = this.offSetXTest*(this.curImage%this.cols);
	//this.imageClip._x = this.imageClipPrev._x+this.imageClipPrev._width+gutter
	//SPACE THE THUMBS SO THEY HAVE EQUAL DISTANCE BETWEEN THEM  
	this.imageClip._x = this.offSetX*(this.curImage%this.cols);
	this.imageClip._y = this.offSetY*Math.floor(this.curImage/this.cols);
	btnRefs.push(this.imageClip);
};

Here is the section for spacing the thumbs:


MovieClip.prototype.ImageFromSequence = function() {
	this.imageClip = this.createEmptyMovieClip("thumb"+this.curImage+"_mc", this.curImage);
	this.imageClip.loadMovie(this.images[this.curImage]+".jpg");
	this.imageClip._alpha = 0;
	this.imageClip.id = this;
	this.imageClip.idx = this.curImage;
	this.imageClipPrev = this["thumb"+(this.curImage-1)+"_mc"];
	this.cols = 5;
	this.offSetXTest = this.imageClipPrev._x+this.imageClipPrev._width+gutter;
	this.offSetX = 85;
	this.offSetY = 75;
	//this.imageClip._x = this.offSetXTest*(this.curImage%this.cols);
	//this.imageClip._x = this.imageClipPrev._x+this.imageClipPrev._width+gutter
	//SPACE THE THUMBS SO THEY HAVE EQUAL DISTANCE BETWEEN THEM  
	this.imageClip._x = this.offSetX*(this.curImage%this.cols);
	this.imageClip._y = this.offSetY*Math.floor(this.curImage/this.cols);
	btnRefs.push(this.imageClip);
};

From the attached image you can see I have the thumbs on different lines but the spacing the between them is all off.

As always any help would be greatly appreciated