Array problem in Photo Gallery

Question

I want to have an array of buttons that each move with mouse over and mouse out. Then once user clicks the button the image is loaded from an array and put onto the screen. Once another button is clicked say B2 the B1 image is removed and a new image replaces it.
Here is the working code up to this point with no errors; I am using Flash cs5.
[AS]
var buttonArrayportfolio:Array = [ B1, B2, B3, B4, B5, B6, B7, B8];
for each( var B:MovieClip in buttonArrayportfolio)
          B.mouseChildren = false;
          B.addEventListener( MouseEvent.MOUSE_OVER, onButtonOver  );
          B.addEventListener( MouseEvent.MOUSE_OUT,  onButtonOut   );
          B.addEventListener( MouseEvent.CLICK,      onButtonClick );
function onButtonOver( e:MouseEvent ):void
          var B:MovieClip = MovieClip(e.target);
          if( B.tween )
                    B.tween.stop();
          B.tween = new Tween( button, "y", Regular.easeOut,622.9, 591, .5, true );
function onButtonOut( e:MouseEvent ):void
          var B:MovieClip = MovieClip(e.target);
          if( B.tween )
                    B.tween.stop();
          B.tween = new Tween( B, "y", Regular.easeOut, 591, 622.9, 1, true );
function onButtonClick( e:MouseEvent ):void
    var arrayB:Array = [ B1, B2, B3, B4, B5, B6, B7, B8,];
    var arrayImages:Array = ["KidRabbit.png","Hydrant.png","Hydrant.png"];
    for (var i:int = 0; i<1; i++)
        var B:BlackBox = new BlackBox();
        var pictLdr:Loader = new Loader();
        B.addChild(pictLdr);
        addChild(B);
                pictLdr.load(new URLRequest(arrayImages[i]));
        pictLdr.contentLoaderInfo.addEventListener( Event.COMPLETE , loaded);
        //arrayImages.push(B);
        //arrayImages[i].x = i * 150 +  i * 10;
        //addChild(arrayImages[i]);  
function loaded(event:Event):void
          var targetLoader:Loader = Loader(event.target.loader);
[/AS]

Answer 1

See if the following is more what you want.  It only uses one BlackBox object and one loader.  By using one loader you don't need to unlload it to load another because whatever you load into into will replace what was already loaded into it.  Part of the key to this solution is assigning the loop index value to each button as it increments in the first loop.  That number is what is used to call the image associated with the button in the onClick function.
import fl.transitions.Tween;
import fl.transitions.easing.*;
var arrayB:Array = [ B1, B2, B3, B4, B5, B6, B7, B8,];
var arrayImages:Array = ["KidRabbit.png","Hydrant.png","Hydrant.png","KidRabbit.png","Hydrant.png","Hydrant.png", "KidRabbit.png","Hydrant.png"];
var imgLoader:Loader = new Loader;
var B:BlackBox = new BlackBox();
B.addChild(imgLoader);
for (var i:uint=0; i<arrayB.length; i++){
     arrayB[i].mouseChildren = false;
     arrayB[i].addEventListener( MouseEvent.MOUSE_OVER, onButtonOver);
     arrayB[i].addEventListener( MouseEvent.MOUSE_OUT, onButtonOut);
     arrayB[i].addEventListener( MouseEvent.CLICK, onButtonClick);
     arrayB[i].imgNum = i;
function onButtonOver( e:MouseEvent ):void {
     var B:MovieClip = MovieClip(e.target);
     if(B.tween){
       B.tween.stop();
     B.tween = new Tween( B, "y", Regular.easeOut,622.9, 591, .5, true );
function onButtonOut( e:MouseEvent ):void {
     var B:MovieClip = MovieClip(e.target);
     if( B.tween ){
       B.tween.stop();
     B.tween = new Tween( B, "y", Regular.easeOut, 591, 622.9, 1, true );
function onButtonClick( e:MouseEvent ):void {
   if(this.contains(B)){
       removeChild(B);
   imgLoader.load(new URLRequest(arrayImages[e.currentTarget.imgNum]));
   imgLoader.contentLoaderInfo.addEventListener( Event.COMPLETE , loaded);
function loaded(event:Event):void {
     addChild(B);
      var targetLoader:Loader = Loader(event.target.loader);