Actionscript Part 2
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("xmlphoto.xml");
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
for (i=0; i<numimages; i++) {
/* create a loop which repeats it self for the total number of images.*/
this.picHolder = this.firstChild.childNodes[i];
/* assigns a temporary name for each of the childNodes so that they can be referenced later on in the loop.*/
}
};
The firstChild in this case is the <gallery> tag from the xml
firstChild.childNodes is an array containing information about the image tags. And length returns the number of childNodes (which equals the total number of images). This in then used to loop though the firstChild.childNodes array.
Actionscript Part 3
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("xmlphoto.xml");
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
spacing = 70;
//sets the spacing variable for use later on
for (i=0; i<numimages; i++) {
this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = _root.thumbnails.createEmptyMovieClip("thumbnail"+i, i);
create a unique movie clip for each thumbnail, assign a temporary reference thumbholder for the movieclips
this.thumbHolder._x = i*spacing;
//set the x vaues for each newly created movieclip.
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
}
};
If our XML file read like this example:
<gallery> <image title="x" main="y" thmb="z"/> </gallery>
title, main, and thmb are the attributes of the image tag.picHolder is set as a temporary reference to each image tag . So in this example
- picHolder.attributes.main will equal 'y' and
- picHolder.attributes.title will equal 'x '
- picHolder.attributes.thmb will equal 'z '
thumbHolder.title and thumbHolder.title are variables. As the loop progresses each Thumbnail holder clip will have its own title,thmb and main variables
Final Actionscript
A this point most of the hard work is done all that's left is to load the images!
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("xmlphoto.xml");
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
picHolder = this.firstChild.childNodes[i];
this.thumbHolder = _root.thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing;
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image"+i, i);
this.thumbLoader.loadMovie(picHolder.attributes.thmb);
//create new movie and then load the thumbnails into it.
thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
};
}
};
A new movie is created within thumbholder specifically for the purpose of loading the thumbnails
Also actions are added to thumbholder so that on release it loads the main image inside the loader movie clip, and sets the title.
Download Source Files.
Finally if you have any trouble with this you can download the source files Download Source