TimeLineLite Issue [SOLVED]

[samsouhrada.com]

I have created a sequence of three TweenLite instances... Very basic (Fade out, resize, fade in). For some reason I can't get the second fade in to work correctly. Attached is my source code. Any help is appreciated.

 

Thanks

 

Aside from the images (and the greensock code) here is my main application where I create the effect:

 

 

<?xml version="1.0" encoding="utf-8"?>
creationComplete="init()" 
 backgroundGradientAlphas="[1.0, 1.0]" 
 backgroundGradientColors="[#FFFFFF, #8D8D8D]" 
 width="100%" height="100%">

[GreenSock]

It sounds like possibly an overwriting thing - have you tried setting overwrite:false on the alpha tweens of that object to see if that "fixes" it? I put "fixes" in quotes because if it's getting overwritten like that, it means you created overlapping tweens that are fighting for control of the same property of the same object at the same time. I'm running out the door in a sec for a meeting and didn't have time to look at your source, so if this doesn't nudge you in the right direction and you still need help, just let us know.

[samsouhrada.com]

No such luck using .overwrite variable...

 

NONE = 0, ALL_IMMEDIATE = 1, AUTO = 2, CONCURRENT = 3, ALL_ONSTART = 4, PREEXISTING = 5

 

As you can see below I added .overwrite as a variable in the TweenLiteVars object. The basic function of this animation is to fade out the login, resize the box, and fade in the registration. It will do one instance of it however when it plays the second animation which fades out registration, resizes, and goes back to login... the Fade in on the login doesn't work. The effects are setup exactly the same so I can't figure out why it's doing this. Also they shouldn't be accessing the same canvas at the same time. One effect sequence plays and completes... Then they have to click another button to go back to login.

 

 

 

     //Dissolve Registration 
	var dissolveOutVars:TweenLiteVars = new TweenLiteVars();
	dissolveOutVars.addProp("alpha", 0);
	dissolveOutVars.overwrite = 0;
	dissolveOutVars.ease = Quad.easeOut;
	dissolveOutVars.onComplete = 
		function():void{
			setDimensions(registerCanvas);
			registerCanvas.includeInLayout = false;
			registerCanvas.visible = false;
		};
	var dissolveOutTween:TweenLite = new TweenLite(registerCanvas, fadeDuration, dissolveOutVars);

 

 

Here is the code I created using the built in Flex Effects. This code works for me:

 

private function createRegister():void{

	var dissolveOut:Dissolve = new Dissolve(loginCanvas);
	dissolveOut.alphaFrom = 1;
	dissolveOut.alphaTo = 0;
	dissolveOut.duration = fadeDuration;
	dissolveOut.targetArea = new RoundedRectangle(0,0,loginCanvas.width,loginCanvas.height,8);
	dissolveOut.addEventListener(EffectEvent.EFFECT_END,
		function():void{
			loginCanvas.includeInLayout = false;
			loginCanvas.visible = false;
		}
	);		

	var resize:Resize = new Resize(userBox);
	resize.heightFrom = loginCanvas.height + borderNumber;
	resize.heightTo = registerCanvas.height + borderNumber;
	resize.widthFrom = loginCanvas.width + borderNumber;
	resize.widthTo = registerCanvas.width + borderNumber;
	resize.duration = resizeDuration;
	resize.easingFunction = Quadratic.easeOut;
	resize.addEventListener(EffectEvent.EFFECT_END, 
		function():void{
			registerCanvas.includeInLayout = true;
			registerCanvas.visible = true;
		}
	);

	var dissolveIn:Dissolve = new Dissolve(registerCanvas);
	dissolveIn.alphaFrom = 0;
	dissolveIn.alphaTo = 1;
	dissolveIn.duration = fadeDuration;
	dissolveIn.targetArea = new RoundedRectangle(0,0,registerCanvas.width,registerCanvas.height,8);		

	openRegister = new Sequence();
	openRegister.addChild(dissolveOut);
	openRegister.addChild(resize);
	openRegister.addChild(dissolveIn);
}

private function createLogin():void{

	var dissolveOut:Dissolve = new Dissolve(registerCanvas);
	dissolveOut.alphaFrom = 1;
	dissolveOut.alphaTo = 0;
	dissolveOut.duration = fadeDuration;
	dissolveOut.targetArea = new RoundedRectangle(0,0,registerCanvas.width,registerCanvas.height,8);
	dissolveOut.addEventListener(EffectEvent.EFFECT_END,
		function():void{
			registerCanvas.includeInLayout = false;
			registerCanvas.visible = false;
		}
	);	

	var resize:Resize = new Resize(userBox);
	resize.heightFrom = registerCanvas.height + borderNumber;
	resize.heightTo = loginCanvas.height + borderNumber;
	resize.widthFrom = registerCanvas.width + borderNumber;
	resize.widthTo = loginCanvas.width + borderNumber;
	resize.duration = resizeDuration;
	resize.easingFunction = Quadratic.easeOut;
	resize.addEventListener(EffectEvent.EFFECT_END, 
		function():void{
			loginCanvas.includeInLayout = true;
			loginCanvas.visible = true;
		}
	);

	var dissolveIn:Dissolve = new Dissolve(loginCanvas);
	dissolveIn.alphaFrom = 0;
	dissolveIn.alphaTo = 1;
	dissolveIn.duration = fadeDuration;
	dissolveIn.targetArea = new RoundedRectangle(0,0,loginCanvas.width,loginCanvas.height,8);

	openLogin = new Sequence();
	openLogin.addChild(dissolveOut);
	openLogin.addChild(resize);
	openLogin.addChild(dissolveIn);
}

[GreenSock]

Okay, now that I peeked at your source, I see the problem - your target (loginCanvas) starts at an alpha of 1. So when you tween to 1, nothing really happens - it's going from 1 to 1. If you want to tween it from alpha 0 to 1, you must either set alpha to 0 first or use TweenMax.fromTo() so that you can explicitly define the starting value.

[samsouhrada.com]

Yes thank you... it was solved by setting the alpha = 0 which I overlooked. I was wearing my green sock on the wrong foot that day.

 

Thanks