Two loaders interchanging images

[Tarik Monem]

Hi guys,

As usual, I've found some code from the net, changed it around, added some things and it works, but not exactly the way that I'd like it to work. I want it to work like the app on mtv.com, where one image remains on the main stage, then another image eases in over the top of the previous image.

Basically, I have two loaders. When the timer ends, the bottom loader assumes the image that was on the stage and the second loader eases in the second image. The problem is that when the timer ends, both images disappear momentarily while the loaders reload with the previous image going to the underneath loader and the new image being eased in with the above loader.

How can avoid the momentary loss of images?

Here's the code:

// don't worry about this img, it's used for another loader in a different location on stage.
image_loader.contentPath = "someOtherImg.jpg";

//images to load 
var pictures:Array= ["img1.jpg", "img2.jpg","img3.jpg","img4.jpg","img5.jpg","img6.jpg"]; 
//image to start on, 0 is the first image in the array 
var myItem:Number =0;
var myFlag:Number =0; // used for distinguishing between the beginning of the array and the end of the array of images, because the loop will reset to myItem to 0 when the loop completes


//loop variables 
var loopAmount:Number = 5000; 
var endTimer:Number = getTimer()+ loopAmount; 

//load first image 
loader.contentPath = pictures[myItem]; 

onEnterFrame = loop; 
function loop() { 
    timer = getTimer(); 

	if (timer >= endTimer) 
	{ 
        if (myItem < (pictures.length-1)) 
		{ 
            myItem++;
			myFlag=0;
        }
		else 
		{ 
            myItem=0;
			myFlag=1;
        } 

		loader.contentPath = pictures[myItem];
                // myFlag let's me know that we are at the beginning of the pictures array
		if(myItem==0 && (myFlag==0))
		{
			loader2.contentPath = pictures[myItem];
		}
                // myFlag let's me know that we are at the end of the pictures array and to load the last image in the underneath loader
		else if(myItem==0 && (myFlag==1))
		{
			loader2.contentPath = pictures[5];
		}
		else
		{
			loader2.contentPath = pictures[myItem-1];
		}
		
		easeType = mx.transitions.easing.Regular.easeOut;
		
        var begin = 660;
        var end = 10;
        var time = 1.5;
        var mc = loader;
        ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true);
		
               // my feeble attempt at synchronizing the transitions to allow the underneath loader to remain a little longer than the above loader
		/* easeType2 = mx.transitions.easing.Regular.easeIn;
		var begin2 = 10;
		var end2 = 10;
		var time2 = 0;
		var mc2 = loader2;
		ballTween2 = new mx.transitions.Tween(mc2, "_x", easeType2, begin2, end2, time2, true); */
		
        	endTimer = getTimer()+ loopAmount;
    }
}

I've tried two separate loops as well, in the attempt to have the underneath loader remain visible while the above loader changed images.

Any help is appreciated as usual and thanks in advance :-)

[Tarik Monem]

The solution was for me to create an image that was 4000 px wide, which would be in the underneath loader, followed by having it move the exact width of each individual image, plus 10 px before the image in the above loader would be loaded.

I know crude, but simple.

Getting ready to post another question in regards to stopping the loop in the onEnterFrame.