Everything freezes after my image loads?

[Mattynabib]

So, I seem to have a small problem. I have a bunch of buttons on my stage, and when I click them, they load different images as dictated by an XML document. To allow me to use one button instance repeatedly with different click actions, I create the button array and the clickHandler. This is all by way of explaining why all the image load stuff is in a separate function called loadTheImage(name).

 

But the problem is that everything seems to work fine, I get to this screen, click one of the buttons, and whichever one I click, the proper image loads (I see my little "ok, that image was loaded..." message traced out... and then everything seems to freeze or lock up. As soon as the image has loaded, none of the other buttons will respond (even to rollover), and the only thing I can do is to close out the swf and scratch my head.

 

var buttonArray:Array = [pic1.daButton,pic2.daButton,pic3.daButton,vid1.daButton];//instance names
var urlArray:Array = [myXML.hfloor[0].d_location[0].d_image[0],myXML.hfloor[0].d_location[0].d_image[1],myXML.hfloor[0].d_location[0].d_image[2],myXML.hfloor[0].d_location[0].d_video[0]];
for (var i:int = 0; i < buttonArray.length; i++)
{
buttonArray[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

function clickHandler(event:MouseEvent):void
{
var clickedIndex:int = buttonArray.indexOf(event.currentTarget);
trace("ClickedIndex = "+clickedIndex+" and you clicked on button " + event.currentTarget.name);
loadTheImage(urlArray[clickedIndex]);
}

function loadTheImage(imgName)
{
var xPoint = stage.stageWidth / 2;
var yPoint = stage.stageHeight / 2;
trace("Ok, I'm going to load image: "+ imgName);
var theloader:ImageLoader = new ImageLoader(imgName,{container:this,x:xPoint,y:yPoint,width:1280,height:720,scaleMode:"proportionalInside",smoothing:true,centerRegistration:true,onComplete:onImageLoad});
//begin loading
theloader.load();
//when the image loads, fade it in from alpha:0 using TweenLite;
function onImageLoad(event:LoaderEvent):void
{
 TweenLite.from(event.target.content, .5, {alpha:0});
 trace("ok, that image was loaded and faded in!");
}
}

 

Can anyone give me any insight into why this might be happening? I am utterly perplexed... thank you!

[Carl]

the code looks pretty good. I have a hunch that perhaps your ImageLoader's ContenDisplay object may be covering up the nav buttons and impeding the click events. To test, turn on the bgColor and bgAlpha of your ImageLoader like so:

 

var theloader:ImageLoader = new ImageLoader(imgName,{container:this,x:xPoint,y:yPoint,width:1280,height:720,scaleMode:"proportionalInside",smoothing:true,centerRegistration:true,onComplete:onImageLoad, bgAlpha:.5, bgColor:0xff0000});

 

after modifying the code do you see a semi-transparent red rectangle on top of your buttons?