Dynamic tween values inside a timeline

[Wolfzor]

First of all I want to say hello since I am new here and to thank you for providing such a great tool.

 

What I am trying to do:

 

I have a navigation system made after the tutorial here and adapted to my needs.

When I append tweens to the timeline to make the animation in, for the values of the tween properties I use some formulas that are calculated depending on the browser window's size.

 

Example:

mainTimeline.addLabel("account_in", mainTimeline.duration);
mainTimeline.append(TweenMax.to(contentBg, 0, {alpha:1, immediateRender:false, onStart:setSection, onStartParams:["account"]}));
mainTimeline.append(TweenMax.to(bg_mask, 0, {alpha:1, immediateRender:false}));
mainTimeline.append(TweenMax.to(contentBg, 1, {y:((stgHeight/2)*1.4)/1.5, ease:Quad.easeIn}));
mainTimeline.append(TweenMax.to(bg_mask, 0, {alpha:0, immediateRender:false}));
mainTimeline.append(TweenMax.to(contentBg, 1, {x:stgWidth/2 + separWidth/2, y:stgHeight/2.5, width:(stgWidth - separWidth)/1.35, height:stgHeight/1.6, ease:Quad.easeIn}));
mainTimeline.append(TweenMax.to(loginPan, 0, {alpha:1, immediateRender:false}));
mainTimeline.append(TweenMax.from(loginPan, 1, {scaleX:0, scaleY:0, ease:Back.easeOut, onComplete:finishedAnimating}));
mainTimeline.addLabel("account_complete", mainTimeline.duration);
mainTimeline.append(TweenMax.to(contentBg, .5, {alpha:0}));
mainTimeline.append(TweenMax.to(loginPan, .5, {alpha:0}));

 

What is the problem:

 

If i resize the browser's window, the MovieClips are tweened using static values that were calculated when the mainTimeline was populated.

 

What i want to achieve is for the tweens to update the values used for tweening after the formulas passed.

 

What i tryed:

 

I tryed invalidate() -ing the mainTimeline or clear() -ing and repopulateing the mainTimeline when the browser's window was resized. Funny things happened.

[Carl]

does your resize function take into account that before the timeline is re-populated you also should also position all your elements where they should be when their tweens begin, including items that are tweened before and after the playhead's current position?

 

Suppose you resize the window when the "account_in" section is playing. Are you also adjusting the starting positions of all the elements that might be tweened in the "home" or "about" sections?

 

For instance, imagine the home section has a an element called "info" that is a 100x100px square that needs to fade in after 2 seconds.

 

When you export your swf the stage is 500x500px and info element is jammed into the upper right-hand corner with coordinates of x:400, y:0 and alpha of 0

 

Let's say 1 second into the animation you resize the window to 200x200. you clear your timeline and re-create all the tweens (including the fade-in of info). well, info will still fade in but it won't be repositioned.

 

I say all that just to illustrate that it is fairly complicated to accurately create a timeline animation that will flawlessly adjust as the stage is resizing (as far as I know).

 

Perhaps someone has some sort of bullet-proof approach. The best thing I have seen for this is the GreenSock LiquidStage:

http://www.greensock.com/liquidstage/

It allows you to pin items relative to stage coordinates and there are various methods/plugins for adjusting tweens as resizes happen.

 

I wish I had a solid answer for you, but personally I'm stumped as far as recommending an easy fix.

 

Perhaps, someone else will be able to clarify this better.

 

-c

[GreenSock]

Yep, it's a tricky issue indeed, but here are a few ideas:

 

1) As Carl mentioned, LiquidStage is made for this sort of thing, and there's a LiquidPinPlugin that can make adjustments on-the-fly during a tween when the stage resizes.

 

2) There's a DynamicPropsPlugin that allows you to point your tweening properties at your own custom functions and the tweens will constantly look at those functions for end values, so you can change those anytime. This might be an ideal solution for your BUT since everything is so dynamic and constantly being adjusted, you cannot go backwards in the timeline like you normally could (well, you can but things will almost surely look funky because of the math necessary to accommodate the live changes). If you're only going forward, though, this can work great.

 

3) Just re-populate your timeline whenever the stage resizes. Dump the old tweens and create new ones, but make sure that you adjust the FROM positions too. Either code them as fromTo() tweens so that the values are hard-coded or implement some code before you create the timeline each time that resets everything to where it was. Actually, you could just take the original timeline and gotoAndStop(0) before you clear() and repopulate it.

 

I hope one of those helps.

[Wolfzor]

Thank you both for replying!

 

@carl schooff:

Yes, It does reposition everything, but as you illustrated, it doesn't took in account ongoing tweens. On resize I tryed repositioning everything then clearing and repopulating.

What happened was that after repopulating the timeline:

1) autoplayed from start to end (i think this could be fixed by pausing and assigning the currentTime on repopulation),

2) the content was not showing anymore (alpha was 0 for some reason) only the contentBackground was animating

3) there was a delay from when the button was clicked till the animation started. Because of this delay I abandoned this approach.

 

@GreenSock:

1) I read about LiquidStage just before starting the topic and it is another great tool but as I read, you need to be a Club member to be able to use it and the current budget doesn't allow me to purchace a Club Membership at the moment.

 

2) This is what I was looking for. The backwards animation could be handeled using a custom animateOut animation.Unfortunately there is the same budged problem.

 

3) I will try this approach again if my current idea fails.

 

After studying the docs a bit more I found too methods that could theoretically do the trick: getTweensOf and updateTo. I am thinking that on resize to get the proper tweens and update them to the proper values. This should work for ongoing animations and should be faster too.

I will come back with some updates after I implement it.

[Wolfzor]

As I said, I came back with an update on how I did it.

 

This snippet:

1) gets all tweens of a MovieClip from the timeline ( I used false as a parameter to only check on the surfface)

2) Filters tweens by checking for setted properties that shouldn't be there

3) Removes current starting values

4) Finds out with what tween we are working in the current iteration by setted properties (if one or more tweens have the same properties setted you can set a dummy one like scaleX:1 or something like that)

5) Call updateTo method on the tween and update destination values and add the startAt parameter to pass the starting values

 

   	 private function refreshTimeline():void
	{
		var tempX:int = (stgWidth/2)*0.9;
		var tempY:int = (stgHeight/2)*1.4;
		var tempWidth:uint = stgWidth/12;
		var tempHeight:uint = stgHeight/6.73
		for each (var tween:TweenMax in mainTimeline.getTweensOf(contentBg,false)) //to get all the tweens in the timeline for the object
		{
			if(!tween.vars.hasOwnProperty("alpha")) //filter unwanted tweens of that object. For me the unwanted tweens had an alpha property set
			{
				tween.invalidate(); // to prevent starting values from piling up
				if(tween.vars.hasOwnProperty("width")) //find out what tween we are updating. For me the width property was unique to one of the 2 tweens
					tween.updateTo({x:stgWidth/2 + separWidth/2, y:stgHeight/2.5, width:(stgWidth - separWidth)/1.35, height:stgHeight/1.6, startAt:{x:tempX, y:tempY/1.5, width:tempWidth, height:tempHeight}});
				else
					tween.updateTo({y:tempY/1.5, startAt:{x:tempX, y:tempY, width:tempWidth, height:tempHeight}});
			}
		}
	}

 

In addition to this function I use a boolean parameter to see if the MovieClip is currently animating so it will not get resized by the resize function.

 

I am open to suggestions on how to improve the code.

 

Enjoy.