Hi people,
I’m working on an imageviewer that uses an XML file to display a number of images with info attached. Reading the XML works fine, as wel as creating the movieclip containers. Even the loading of the images works fine. There is a small problem though: I want to display a preloader on all of the images. Below is an example of what I have right now.
for (var i:Number = 0; i < aCollection.length; i ++) {
// The code below will be executed for every product group
// Create a container for the productgroup
mcThumbnailsContainer.createEmptyMovieClip(["mcProductGroup" + i], mcThumbnailsContainer.getNextHighestDepth());
mcThumbnailsContainer["mcProductGroup" + i]._x = mcThumbnailsContainer._width;
if (i > 0) {
mcThumbnailsContainer["mcProductGroup" + i]._x += 10;
}
for (var j:Number = 0; j < aCollection*.length; j ++) {
// The code below will be executed for every product
// Create a container for the product. This will contain a border movieclip, a mask movieclip and the thumbnail movieclip itself
mcThumbnailsContainer["mcProductGroup" + i].createEmptyMovieClip(["mcProduct" + j], mcThumbnailsContainer["mcProductGroup" + i].getNextHighestDepth());
// Create and load the product thumbnail
mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].createEmptyMovieClip("mcThumbnail", mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].getNextHighestDepth());
// Create a movieclipcloader and listener for the product thumbnail
this["mclThumbnail" + i + j] = new MovieClipLoader();
this["oThumbnailListener" + i + j] = new Object();
// Function that is executed during the loading of the thumbnail image
this["oThumbnailListener" + i + j].onLoadProgress = function () {
var iT:Number = this.mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail.getBytesTotal();
var iL:Number = this.mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail.getBytesLoaded();
var iPercentage:Number = Math.floor((iL/iT) * 100);
trace(_parent.mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail + ": " + iPercentage + "%");
}
// Function that is executed when the thumbnail image is done loading
this["oThumbnailListener" + i + j].onLoadInit = function () {
if (mcTarget._width >= mcTarget._height) {
mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail._width = mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnailMask._width;
mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail._yscale = mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail._xscale;
} else {
mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail._height = mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnailMask._height;
mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail._xscale = mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail._yscale;
}
}
this["mclThumbnail" + i + j].addListener(this["oThumbnailListener" + i + j]);
var sThumbnailURL:String = "small/" + aCollection*[j][1];
this["mclThumbnail" + i + j].loadClip(sThumbnailURL, this.mcThumbnailsContainer["mcProductGroup" + i]["mcProduct" + j].mcThumbnail);
}
}
Now, the trace in the onLoadProgress event doesn’t work, which makes perfect sense. I don’t really know the best way to put this in English, but the scope of that function is limited to the listener object. So I’m basically executing code within that object. The problem is that I don’t know how to get out of that object, and use the path to my movieclip.
_parent doesn’t work, and _root is something I’d rather not use as I would like to keep the paths relative. Using an external function could work, but also: that would produce extra code, and I’d like to keep the actionscript as lean as possible.
What’s the best way to load all of these images at once and still get updates on their loading progress?
Thnx in advance!