photo gallery help

[jerdunham]

I am trying to make a dynamic xml photo gallery with thumbnails and previous and next buttons. I have two problems that occur when I click on my next button. The first problem is that the button can't seem to keep track of the last image that was shown and always reverts back to the second from the first image in the array. I can't seem to find a way to make a variable that will contain the value of the current picture. The second problem is that I get this error message:
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display:: DisplayObjectContainer/removeChildAt()
at MethodInfo-287()

The problem seems to be on line 58 of the code where I remove the picture at 0. I'm not really sure how big of a problem this is since the button works even though I get the error. Here is the relevant code:
function loadTheThumbs(){

var thumbLoader:Loader = new Loader();
var thumbRequest:URLRequest = new URLRequest (thumbPathList[c]);
thumbLoader.load(thumbRequest);
thumbLoader.contentLoaderInfo.addEventListener(Eve nt.COMPLETE, whenThumbsLoad);

function whenThumbsLoad(event:Event):void{

var thisThumbsLink:Number = c;
trace ( thisThumbsLink);

thumbLoader.x = (xs * xSpacing) + 5;
thumbLoader.y = (ys * ySpacing) + 5;
xs = xs+1;
if(xs==thumbRowCount) {
xs = 0;
ys = ys+1;
}


/* Thumb Button Code */

thumbLoader.addEventListener(MouseEvent.CLICK, loadExtPic );
extNext.addEventListener(MouseEvent.CLICK, nextPhoto );


function loadExtPic(event:MouseEvent):void {

thumbLoader.removeEventListener(MouseEvent.CLICK, loadExtPic );
extPicArea.removeChildAt(0);
var extLoader:Loader = new Loader();
var extRequest:URLRequest = new URLRequest ( picturePathList[thisThumbsLink] );
extLoader.load( extRequest );
extLoader.contentLoaderInfo.addEventListener(Event .COMPLETE, extLoaded);

function extLoaded(event:Event):void{

thumbLoader.addEventListener(MouseEvent.CLICK, loadExtPic );
extPicPlacementX = ( stage.stageWidth/2) - (extLoader.width/2);
extPicArea.x = extPicPlacementX;
extPicArea.y = extPicPlacementY;

extPicArea.addChild(extLoader);
fadeIn = new Tween(extPicArea, "alpha", None.easeNone, 0, 1, 15, false);


}




}

function nextPhoto(event:MouseEvent):void {
thisThumbsLink = thisThumbsLink + 1;
extNext.removeEventListener(MouseEvent.CLICK, nextPhoto );
extPicArea.removeChildAt(0);
var extLoader:Loader = new Loader();
var extRequest:URLRequest = new URLRequest ( picturePathList[thisThumbsLink] );
extLoader.load( extRequest );
extLoader.contentLoaderInfo.addEventListener(Event .COMPLETE, extLoaded);

function extLoaded(event:Event):void{
extNext.addEventListener(MouseEvent.CLICK, nextPhoto );
thumbLoader.addEventListener(MouseEvent.CLICK, loadExtPic );
extPicPlacementX = ( stage.stageWidth/2) - (extLoader.width/2);
extPicArea.x = extPicPlacementX;
extPicArea.y = extPicPlacementY;

extPicArea.addChild(extLoader);
fadeIn = new Tween(extPicArea, "alpha", None.easeNone, 0, 1, 15, false);


}




}





ext_thumbs.addChild( thumbLoader);


c=c+1;

if(c<totalPics){
loadTheThumbs();
extPane.update();
}else {
xs = 0;
ys = 0;
c = 0;
extPane.update();
trace("done loading thumbs");
}

}


}

Anyway, any help would be appreciated. I hope this isn't too poorly formatted. Thanks in advance.

[raydowe]

I'm not too sure about the remembering the last image button, the code is a little hard to follow without seeing your entire application. If you wanted to post it on here, or a link to it, it would help.

The error code means that the supplied index (which is 0) is out of range. This gets thrown when you reference the 5th element in an array that is only 3 elements long, or more commonly when something is unexpectedly empty. Basically, you are trying to remove the first displayobject (0) from a parent that does not have any children. I'm sure if you trace

trace(extPicArea.numChildren);

right before the problematic line, it will return 0, indicating it has no child objects.