Adding Thumbnails with scrolling grid, instead?

programming flash
1

I’m hoping someone can help and take this modification of the ‘Adding Thumbnails’ tutorial by TheCanadian a bit further. TheCanadian’s modification to the code is below, and it looks great, but the images load in the grid out of order. I’ve tried for a week (creating all sorts of weird layouts) but I can’t get the grid to load in order. Can anyone help?

var xPos:Number = 0;
var yPos:Number = 0;
function loadXML(loaded) {
 if (loaded) {
  xmlNode = this.firstChild;
  image = [];
  description = [];
  thumbnails = [];
  total = xmlNode.childNodes.length;
  for (i = 0; i < total; i++) {
   image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
   description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
   thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
   thumbnails_fn(i);
  }
  firstImage();
 } else {
  content = "file not loaded!";
 }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
 if (Key.getCode() == Key.LEFT) {
  prevImage();
 } else if (Key.getCode() == Key.RIGHT) {
  nextImage();
 }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
 prevImage();
};
next_btn.onRelease = function() {
 nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
 filesize = picture.getBytesTotal();
 loaded = picture.getBytesLoaded();
 preloader._visible = true;
 if (loaded != filesize) {
  preloader.preload_bar._xscale = 100 * loaded / filesize;
 } else {
  preloader._visible = false;
  if (picture._alpha < 100) {
   picture._alpha += 10;
  }
 }
};
function nextImage() {
 if (p < (total - 1)) {
  p++;
  if (loaded == filesize) {
   picture._alpha = 0;
   picture.loadMovie(image[p], 1);
   desc_txt.text = description[p];
   picture_num();
  }
 }
}
function prevImage() {
 if (p > 0) {
  p--;
  picture._alpha = 0;
  picture.loadMovie(image[p], 1);
  desc_txt.text = description[p];
  picture_num();
 }
}
function firstImage() {
 if (loaded == filesize) {
  picture._alpha = 0;
  picture.loadMovie(image[0], 1);
  desc_txt.text = description[0];
  picture_num();
 }
}
function picture_num() {
 current_pos = p + 1;
 pos_txt.text = current_pos + " / " + total;
}
function thumbNailScroller() {
 // thumbnail code!
 this.createEmptyMovieClip("tscroller", 1000);
 scroll_speed = 10;
 tscroller.onEnterFrame = function() {
  if ((_root._ymouse >= thumbnail_mc._y) && (_root._ymouse <= thumbnail_mc._y + thumbnail_mc._height)) {
   if ((_root._xmouse >= (hit_right._x - 40)) && (thumbnail_mc.hitTest(hit_right))) {
    thumbnail_mc._x -= scroll_speed;
   } else if ((_root._xmouse <= (hit_left._x + 40)) && (thumbnail_mc.hitTest(hit_left))) {
    thumbnail_mc._x += scroll_speed;
   }
  } else {
   delete tscroller.onEnterFrame;
  }
 };
}
function thumbnails_fn(k) {
 thumbnail_mc.createEmptyMovieClip("t" + k, thumbnail_mc.getNextHighestDepth());
 tlistener = new Object();
 tlistener.onLoadInit = function(target_mc) {
  target_mc._x = xPos;
  target_mc._y = yPos;
  xPos += target_mc._width;
  if (xPos >= target_mc._width * 3) {
   xPos = 0;
   yPos += target_mc._height;
  }
  target_mc.pictureValue = k;
  if (xPos > (target_mc._width) * 3) {
   xPos = 0;
   yPos += (target_mc._height);
  }
  target_mc.onRelease = function() {
   p = this.pictureValue - 1;
   nextImage();
  };
  target_mc.onRollOver = function() {
   this._alpha = 50;
   thumbNailScroller();
  };
  target_mc.onRollOut = function() {
   this._alpha = 100;
  };
 };
 image_mcl = new MovieClipLoader();
 image_mcl.addListener(tlistener);
 image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t" + k);
}

Specifically, this part deals with changing the scrolling row into a grid:

var xPos:Number = 0;
var yPos:Number = 0;
function thumbnails_fn(k) {
 thumbnail_mc.createEmptyMovieClip("t" + k, thumbnail_mc.getNextHighestDepth());
 tlistener = new Object();
 tlistener.onLoadInit = function(target_mc) {
  target_mc._x = xPos;
  target_mc._y = yPos;
  xPos += target_mc._width;
  if (xPos >= target_mc._width * 3) {
   xPos = 0;
   yPos += target_mc._height;
  }
  target_mc.pictureValue = k;
  if (xPos > (target_mc._width) * 3) {
   xPos = 0;
   yPos += (target_mc._height);
  }
  target_mc.onRelease = function() {
   p = this.pictureValue - 1;
   nextImage();
  };

Thanks so much in advance!