Adding rows and columns to flash/xml gallery?

1

Hi,

I have a thumbnail gallery that gets its images from an xml file, at the moment if there are more than 8 thumbs they go off the page to the right, I’d like to have it so they continue to load in rows and columns but I’m not sure how I’d do this? I limited the images in the xml to 8 and duplicated the mc and xml to get the look, but it needs to really be updatable from the one xml file. Heres the Actionscript-

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
	//portfolioTag = this.firstChild;
	numimages = this.firstChild.childNodes.length;
	spacing = 110;
	var numimages:Array = this.firstChild.childNodes;
	for (i=0; i<numimages.length; i++) {
		this.picHolder = this.firstChild.childNodes*;
		this.thumbHolder.id = i;
		this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
		this.thumbHolder._x = i*spacing;
		this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
		this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
		this.thumbHolder.title = this.picHolder.attributes.title;
		this.thumbHolder.position = this.picHolder.attributes.position;
		this.thumbHolder.main = this.picHolder.attributes.main;
		this.thumbHolder.onRelease = function() {
			tellTarget (_global._myTimeline) {
			picture.loadMovie(this.main);
			p = this.id-1;
			desc_txt.text = this.title;
			pos_txt.text = this.position;
			unloadMovieNum(1);
			}
		};
	}
};
myPhoto.load("xmlphoto.xml");

Anyone got any ideas, I know its possible, but can’t find any threads/tutorials on it?

Thanks,

Tom

2

I’m not sure if this is what you need but here it goes. I’m assuming all the thumbnails have the same size

This is the idea, very simple but you should be able to implement it on your code. Sorry if there are some syntaxis errors, I’ve written the code directly here…


total_pictures = 34;//you get this number from the xml
pictures_row = 8;
pos_y = 0;
pos_x = 0;
pic_width = 200; //you can get this from the xml or put a a constant value
pic_height = 100;
space = 20; //space between thumbs
scope:MovieClip = _root.my_mc;

for(i=0;i<total_pictures;i++){
scope.attachMovie("thumb","thumb_"+i,i);
scope["thumb_"+i]._x = pos_x;
scope["thumb_"+i]._y = pos_y;

pos_x += pic_width + spacing;

//this is the trick
if(pos_x >= (pic_width + spacing) * pictures_row){
pos_x = 0;
pos_y += pic_height + spacing;
}

}
3

Hi,

I just tried to use that code but I’m not sure where it should go/the way to implement it to work? I’ve been trying a few ways but no success so far?

Thanks for your help so far!

4

Fixed it, heres the working code incase anybody needs it in the future-

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
	//portfolioTag = this.firstChild;
	numimages = this.firstChild.childNodes.length;
	spacing = 110;
	var numimages:Array = this.firstChild.childNodes;
	for (i=0; i<numimages.length; i++) {
		this.picHolder = this.firstChild.childNodes*;
		this.thumbHolder.id = i;
		this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
		this.thumbHolder._x= (i%8) * 110;
		this.thumbHolder._y = Math.floor(i/8) * 75;
		this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
		this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
		this.thumbHolder.title = this.picHolder.attributes.title;
		this.thumbHolder.position = this.picHolder.attributes.position;
		this.thumbHolder.main = this.picHolder.attributes.main;
		this.thumbHolder.onRelease = function() {
			tellTarget (_global._myTimeline) {
			picture.loadMovie(this.main);
			p = this.id-1;
			desc_txt.text = this.title;
			pos_txt.text = this.position;
			unloadMovieNum(1);
			}
		};
	}
};
myPhoto.load("xmlphoto.xml");