Problem with transition between background images

programming flash
1

Hi all, I’m new here and to flash so hopefully what I’m about to ask isn’t stupid…

I’m making a portfolio website, and I have everything set up and working nicely, with the exception of the background images.

I’ve got 5 different links, each one told to load it’s own background image when clicked via a UILoader from the main index file. The problem I’m having is in-between the transitioning of the old and new image, the old image completely disappears while the new one is loading and fades in. Basically, the background image disappears and I’m left with a white screen while the other image is loading and before it shows. What I want it to do it for the old image to remain on the screen and then the new image to fade in on top of it.

The script I’m using is as follows: (Relevant code highlighted in red)

[COLOR="Red"]mainImage.source="images/Bkgd1.jpg";
mainImage.addEventListener(ProgressEvent.PROGRESS, bkgdImagePreloader);
function bkgdImagePreloader(event:ProgressEvent):void {
	var percent:Number = Math.round((event.bytesLoaded*100)/event.bytesTotal);
	percent_txt.text="Background Loading "+percent+"%";
}[/COLOR]

//Background 4 = ABOUT
//Background 5 = SERVICES
//Background 8 = CONTACT
//Background 6 - PORTFOLIO

//Fade in of image
[COLOR="red"]mainImage.addEventListener(Event.COMPLETE,fadeIn);
function fadeIn(e:Event):void {
	var myAlphaTween:Tween=new Tween(mainImage,"alpha",Regular.easeOut,0,1,1,true);
}[/COLOR]

Then after some movement:

function moveLogo(theXLPosition:Number, theYLPosition:Number, theLRotation:Number, theSection:String, [COLOR="red"]theBackground:String[/COLOR]):void {
	sectionLoader.source=null;
	var myxTween:Tween=new Tween(logo_mc,"x",Regular.easeOut,logo_mc.x,theXLPosition,1,true);
	var myyTween:Tween=new Tween(logo_mc,"y",Regular.easeOut,logo_mc.y,theYLPosition,1,true);
	var myrotateTween:Tween=new Tween(logo_mc,"rotation",Regular.easeOut,logo_mc.rotation,theLRotation,1,true);
	myrotateTween.addEventListener(TweenEvent.MOTION_FINISH, donePlaying);
	function donePlaying(e:TweenEvent):void {
		sectionLoader.source=theSection;
		[COLOR="red"]mainImage.source=theBackground;[/COLOR]
	}
}

Hope someone can help me, it’s driving me nuts.

Thanks :slight_smile: