I have a little problem that i cant seem to solve, when trying to dynamically load a graphic into a MovieClip that is also scaled with code.

here's what i have so far
http://www.insurgentdesign.com/test/flash/index.html

and the files
http://www.insurgentdesign.com/test/...Kit_upload.zip

The process is as follows....
The stage is scaled with the users browser, then using the code below (which i took from a tutorial) the MC containing the image in question 'pic' is scaled to fit the browser resize whilst maintaining the correct aspect ratio.

////////// scaling /////////////////////////////////////////////

//define dynamic aspect ratios
picHeight = new Object ();
picHeight = pic._height / pic._width;

picWidth = new Object ();
picWidth = pic._width / pic._height;

//conditional statement to account for various initial browswer sizes and proportions

if ((Stage.height / Stage.width) < picHeight) {
pic._width = Stage.width;
pic._height = picHeight * pic._width;
} else {
pic._height = Stage.height;
pic._width = picWidth * pic._height;
};

//center picture on stage
pic._x = Stage.width / 2;
pic._y = Stage.height / 2;

// create listener
sizeListener = new Object();

// make listener change picture size and center picture on browser resize
sizeListener.onResize = function() {

if ((Stage.height / Stage.width) < picHeight) {

pic._width = Stage.width;
pic._height = picHeight * pic._width;
} else {
pic._height = Stage.height;
pic._width = picWidth * pic._height;
};
pic._x = Stage.width / 2;
pic._y = Stage.height / 2;
}

//add listener to stage
Stage.addListener(sizeListener);

////////// end scaling /////////////////////////////////////////////////


Now, as you can see this all works just fine. But i would like the images displayed in the scaled `mc to be loaded in dynamically. I have code which works for this normally (with loadBar etc but in this case does not display the image even when i know it has loaded.

Now, i am presuming at this stage it has something to do with the fact that the MC cannot be resized to the stage because it does not know what size the image is when it has not loaded fully. I have tried to put the scaling code (above) after the "onLoadComplete" part of the loading code... but no joy?

How do i load first, then scale the image so it fits the browser size, just like these embedded images do so nicely?


////////// loading code ///////////////////////////////////////////////////

bar._visible = false;
//border._visible = false;
this.createEmptyMovieClip("img_container", "100");
my_mc = new MovieClipLoader();
preload = new Object();
my_mc.addListener(preload);
preload.onLoadStart = function(targetMC) {

trace("started loading "+targetMC);
//img1Mc._visible = false;
bar._visible = true;
//border._visible = true;
//pText._visible = true;

this.img_container._visible = false;


};
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {

bar._width = (lBytes/tBytes)*550;
//pText.text = "% "+Math.round((lBytes/tBytes)*100);

};
preload.onLoadComplete = function(targetMC) {

this.img_container._visible = true;

//border._visible = false;
bar._visible = false;
//pText._visible = false;
trace(targetMC+" finished");

};

//default image
my_mc.loadClip("image1.jpg", "img_container");

////////// end loading code /////////////////////////////////////////////


Now i really want to learn about this, but my AS is still basic so any help would be amazing in helping me learn and solve this problem

many thanks in advance
chunk.