Problem adapting flash structure tutorial

1

Hi,

Ive been following [COLOR=black]Mark Angeletti’s “Best Structure for your flash site” tutorial. I’ve then tried to adapt it to produce a well structured XML photogallery. Heres my attempt. The file is 4 frames and 2 layers in size. The first frame simply sets up global variables.[/COLOR]

 
var xmlFile:String = "gallery.xml"; 
var cssFile:String = "gallery.css"; 
var nCounter:Number = 0; 
var xPosition:Number = 0;
var framePosition = 0;
var nTotalImages:Number = 0; 
 
var astrThumb:Array = new Array();
var astrLarge:Array = new Array();
var astrName:Array = new Array(); 
var astrCaption:Array = new Array(); 
 
var image_mcl:MovieClipLoader = new MovieClipLoader(); 
var mclListener:Object = new Object();

The second frame loads the XML. This seems to all work fine. The trace of the arrays which store the XML data show that everything is getting loaded in the correct place and order.

 
/*
* This frame loads all data from XML file
*/
stop();
function loadXML(loaded) {
 if (loaded) {
  var xnRootNode:XMLNode = this;
  //trace( xnRootNode );
  // number on buttons
  nTotalImages = xnRootNode.firstChild.childNodes.length;
  // fill arrays
  for (var i = 0; i<nTotalImages; i++) {
   astrThumb.push(xnRootNode.firstChild.childNodes*.childNodes[0].firstChild.nodeValue);
   astrLarge.push(xnRootNode.firstChild.childNodes*.childNodes[1].firstChild.nodeValue);
   astrName.push(xnRootNode.firstChild.childNodes*.childNodes[2].firstChild.nodeValue);
   astrCaption.push(xnRootNode.firstChild.childNodes*.childNodes[3].firstChild.nodeValue);
  }
  // everthing is loaded; we can move on
  gotoAndStop(3);
 }
}
var xmlData:XML = new XML();
xmlData.ignoreWhite = true;
xmlData.load( xmlFile );
xmlData.onLoad = loadXML;


   
<gallery>
      <image>
       <thumb>images/1thumb.jpg</thumb>
       <large>images/1picture.jpg</large>
       <name>Steve with Samurai warriors.</name>
       <caption>A castle fort in northern Osaka, Japan.</caption>  
      </image>
      <image>
       <thumb>images/2thumb.jpg</thumb>
       <large>images/2picture.jpg</large>
       <name>Neon Haze</name>
       <caption>The billboards along one of Osakas main shopping streets.</caption>  
      </image>
      <image>
       <thumb>images/3thumb.jpg</thumb>
       <large>images/3picture.jpg</large>
       <name>Borneo Paradise</name>
       <caption>A small island off the coast of Kota Kinabalu, Sabah</caption>  
      </image>
      <image>
       <thumb>images/4thumb.jpg</thumb>
       <large>images/4picture.jpg</large>
       <name>Asian Metropolis</name>
       <caption>Petronas Towers. The tallest twin towers in the world.</caption>  
      </image>
</gallery>

The third frame remains unchanged from the tutorial and simply loads a CSS file which as yet is unused so was not included. The last frame creates an empty movie clip, loads the thumbnail image and provides the code for the movieclip listener to execute when the load operation finishes.

 
/*
* This frame we will build the gallery
*/
stop();
trace("Thumb 1:"+ astrThumb );
trace("Large: "+ astrLarge );
for (var i = 0; i<nTotalImages; i++) {
 
 navHolder_mc.createEmptyMovieClip( "thumbImage"+i, i );
 
 // make new MovieClip and set to newly created button
 var thumbImage:MovieClip = navHolder_mc["thumbImage"+i];
 
 // load images
 image_mcl.loadClip( astrThumb*, thumbImage );
}
// Invoked when the actions on the first frame of the loaded clip have been executed
mclListener.onLoadInit = function(target_mc:MovieClip) {
 // add link property
 target_mc.linkURL = astrLarge[nCounter];
 
 // add events
 target_mc.onPress = buttonClick;
 
 var buttonImgHeight:Number = target_mc._height;
 var buttonImgWidth:Number = target_mc._width;
 target_mc._x = Math.round( xPosition );
 xPosition += buttonImgWidth+10;
 nCounter += 1;
};
image_mcl.addListener(mclListener);
// Event handlers
function buttonClick():Void {
 trace( this.linkURL );
}

The problem is that the images seem to load back to front, 4thumb.jpg first and 1thumb.jpg last. As a result the linkURL asigned to each is back to front aswell ie 4thumb.jpg receives a linkURL value of 1picture.jpg.

It has me stumped but all I can think is that because they use the same listener you cannot guarentee that the order they complete loading is the order they were started in the initial for loop. Can someone please help me, much appreciated.