Problem Tweening Out Current Child

[el_barto]

The problem I am having is a pretty simple one, but I'm having difficulty getting it to actually work. What I've got is a Sprite that is drawn and added to the stage using AS3. I am then loading and unloading various images into this box using the greensock ImageLoader class. I have also passed a few ImageLoaderVars through this constructor. The code below is for the first image that gets loaded into (the drawn sprite) by default and once the preloader does it's thing, the image then loads and it's alpha get's tweened to 1 giving it a nice fade in. This all works fine, but I'm having problems when it comes to removing this first image from it's sprite container and replacing it with another. I'd like to have the reverse of how the image loaded in happen so that it's alpha value goes from 1 to 0 again before the image is disposed of and the next image is loaded in. I cannot seem to work out how to target the current image's loader to therefore be able to tween it's alpha back to 0 before disposing of it. Currently I am tweening the alpha property of the sprite that contains the loaded image instead of tweening the images own loader.

 

 

// code for loading in first background image

var backgroundImageOne:ImageLoader = new ImageLoader("images/backgroundImages/1.jpg", new ImageLoaderVars()

.smoothing(true)

.container(imageBox)

.vAlign("top")

.hAlign("left")

.alpha(0)

.onProgress(defaultProgressHandler)

.onComplete(defaultcompleteHandler)

)

 

backgroundImage.load();

 

function defaultProgressHandler(event:LoaderEvent):void{

backgroundPreloader_mc.scaleX = backgroundImage.progress;

}

 

function defaultcompleteHandler(event:LoaderEvent):void{

var loadedImage:ContentDisplay = event.target.content;

TweenLite.to(loadedImage, 2, {alpha:1});

}

 

// code for removing current background image??

[Carl]

you will need a var to track the most recently loaded image, or more precisely the ContentDisplay object that contains the recently loaded image.

 

so you could do something like this at the beginning of your code

 

var:currentImage:ContentDisplay;

 

 

and then whenever you request an image

 

function loadSomeImage(){

//you can only tween currentImage if it exists.
//chances are the first time an image tweens in, there is no image to tween out.
if(currentImage){
     TweenLite.to(currentImage, .5, {alpha:0});
}

///code to load the next image
someLoaderSomeWhere.load();

//set currentImage to the new loader's content
currentImage = someLoaderSomeWhere.content;


}

 

this code is not exact. it should give you the general concept. I have no idea how you are communicating which image should load, so I don't know exactly how you are targeting your loaders.

 

the basic idea is store a reference to the most recently loaded content in the currentImage var

[el_barto]

Hi Carl,

 

Thanks for getting back to and for pointing me in the right direction. I read your reply a couple of times and eventually got my head around what you were suggesting. I guess it's not the most complicated of code and it took me a few goes to get it working but below is what I've ended up with and like I say, it works. One question I did find myself asking was why did include the code for tweening out the currentImage ( TweenLite.to(currentImage, 0.5, {alpha:0}); ) in an if statement as opposed to just having the TweenLite.to.....etc on it's own and not in an if statement?

 

Anyway, thanks again for the help and for your really helpful video tutorials. I know the greensock AS documentation is thorough but sometimes it helps to see the stuff working to get an even better idea of what's going on.

 

 

var imageBox:Sprite = new Sprite();
imageBox.graphics.lineStyle(1, 0x333333);
imageBox.graphics.drawRect(0, 0, 470, 300);
imageBox.x = 40;
imageBox.y = 20;
addChild(imageBox);



var currentImage:ContentDisplay;

btn1_btn.addEventListener(MouseEvent.CLICK, goLoadImg1);
btn2_btn.addEventListener(MouseEvent.CLICK, goLoadImg2);


var imgLoader:ImageLoader = new ImageLoader("openingImg.jpg", new ImageLoaderVars()							
                        .smoothing(true)
			.container(imageBox)
			.vAlign("top")
			.hAlign("left")
			.alpha(0)
			.onComplete(defaultcompleteHandler)

			)

	imgLoader.load();

function defaultcompleteHandler(event:LoaderEvent):void{

currentImage = imgLoader.content;

TweenLite.to(currentImage, 2, {alpha:1});

}


function goLoadImg1(event:MouseEvent):void{
if(currentImage){
	TweenLite.to(currentImage, 2, {alpha:0, onComplete:removeCurrentImg});

}

function removeCurrentImg():void{
	imgLoader.dispose(true);
	loadNewImage();

}

function loadNewImage():void{

	var imageLoader:ImageLoader = new ImageLoader("1.jpg", new ImageLoaderVars()
			.container(imageBox)
			.vAlign("top")
			.hAlign("left")
			.alpha(0)
			.onComplete(completeHandler)

			)				
	imageLoader.load();

	currentImage = imageLoader.content;

}


function completeHandler(event:LoaderEvent):void{
	trace("new image ready to load");

     	TweenLite.to(currentImage, 2, {alpha:1});		
}

}

[Carl]

hi el_barto,

 

very glad you were able to implement a solution based on my suggestion.

 

 

 

the conditional was just to make sure that there was an image to fade out. If you tried to remove currentImage before the first image loaded, it would have caused an error.

 

the way you have it set up, it may not be necessary