Variable inside a TweenMax inside a TimelineMax...

[mooserooster]

I have a project where I'm calling canned animations I constructed in TimelineMax. I couldn't have done the project all in script this way with out TimelineMax, it rocks.

 

The one thing I'm wondering about is that I have one animation in there that is conditional. That is, the new y-value of a ball on screen needs to change via slider control each time the timeline runs. So I'm TweenMaxing the ball in the y-direction based on a slider's position. Am I right in concluding that if I append that TweenMax into a TimelineMax, the y-value of that TweenMax is now static - I can't get at it?

 

Here's an example of what I tried:

 

myTimeline.append( TweenMax.to(mcBall, 1, {y: sliderPosition}) )

 

And from what I can tell, once the tween is appended to myTimeline, "y:" is going to stay at whatever the value of sliderPosition was at that moment it was appended. Am I right on that?

 

TIA

[GreenSock]

Nope, not quite. Normal tweens (not from() or fromTo()) only record starting values when the tween initializes. A tween initializes the first time it renders. When you append() a tween to a timeline, it doesn't render it right away - it waits until it is supposed to run. So as soon as a tween renders for the first time, its start/end values are recorded. However, you can invalidate() a tween and/or timeline anytime which will erase that recorded data and force the tween to re-initialize next time it renders.

 

Make sense?

[jdb]

Good afternoon Greensock!

 

I'm at exactly the same point this previous poster was at and I understand your answer and the need to invalidate() the tween so it re-initializes the next time run. What I'm struggling with is the code necessary to do it.

 

Using his example, when I try to do:

 

mcBall.invalidate();

 

I'm getting the following error:

 

TypeError: Error #1006: invalidate is not a function.

 

So I'm missing something somewhere. Can you point me in the right direction please?

[GreenSock]

Did you name your tween "mcBall"? That sounds like the name of a MovieClip or something. You wouldn't invalidate() the MovieClip or the target of the tween - you invalidate() the tween itself. Like:

var myTween:TweenLite = new TweenLite(mcBall, 4, {x:400, y:250});

//then later...
myTween.invalidate();

 

Note that you can dynamically update the vars with TweenMax's updateTo() method. Make sure you have the latest version of the classes and then you can:

 

var myTween:TweenMax= new TweenMax(mcBall, 4, {x:400, y:250});

//then later...
myTween.updateTo({x:0, y:100}, true);

 

Have fun

[jdb]

Ahhhh. Ok. Thank you.

 

Yes, I was trying to directly invalidate() a MovieClip. I've been using the same technique as he when placing tweens in my timeline. He used:

 

myTimeline.append( TweenMax.to(mcBall, 1, {y: sliderPosition}) )

 

but if I now do what you describe:

 

var myTween:TweenMax= new TweenMax(mcBall, 1, {y:sliderPosition});

 

would I then add it to my timeline by using ?

 

myTimeline.append(myTween);

[GreenSock]

would I then add it to my timeline by using ?

 

myTimeline.append(myTween);

 

Exactamundo.

[jdb]

Thanks Jack!

 

With advancing age the generator isn't putting out as much power but it's still capable of turning on the lightbulbs so please bear with me.

 

Continuing with his example, suppose I'm currently doing this:

 

myTimeline.appendMultiple([TweenMax.to(mcBall1, 1, {y: sliderPosition(1)}),

TweenMax.to(mcBall2, 1, {y: sliderPosition(2)}),

TweenMax.to(mcBall3, 1, {y: sliderPosition(3)}),

TweenMax.to(mcBall4, 1, {y: sliderPosition(4)}),

TweenMax.to(mcBall5, 1, {y: sliderPosition(5)}))

]);

 

followed immediately with this:

 

myTimeline.appendMultiple([TweenMax.to(mcBall1, 1, {y: newPosition(1)}),

TweenMax.to(mcBall2, 1, {y: newPosition(2)}),

TweenMax.to(mcBall3, 1, {y: newPosition(3)}),

TweenMax.to(mcBall4, 1, {y: newrPosition(4)}),

TweenMax.to(mcBall5, 1, {y: newPosition(5)}))

]);

 

Do I have to create 10 separate var myTweenX:TweenMax= new TweenMax(mcBallX... instances to re-initialize the values returned by the two functions or is there a way of attacking the re-initialization requirement using myTimeline?

 

I apologize for my ignorance as I grapple with OO concepts but, having read the docs and seeing invalidation also invalidates the children, are the tweens added to a timeline considered "children" of the timeline and they too will be invalidated if the timeline is invalidated?

 

Thank you for your support of this noob.

[GreenSock]

Are you wanting to have your tweens call newPosition() to determine new destination values after you created them initially? If so, invalidate() won't help you. All it would do is cause the tweens to forget any starting values and re-start from wherever the objects happen to be at that time. If you want to associate properties with getter functions (like having the destination "y" value get fed dynamically with a call to newPosition()), you'd need to use the dynamicProps plugin. There's an example in the Plugin Explorer. It's a membership benefit of Club GreenSock by the way (http://blog.greensock.com/club/).

 

By the way, if you wanted to be able to invalidate() a subset of tweens, you could just put those tweens into a TimelineLite of their own and nest that in another timeline. TimelineLite/Max instances can be nested as deeply as you want.

[jdb]

Good morning Jack!

 

I'm already a proud member of Club Greensock!

 

I've uploaded the current state of my SWF to our business's testing web site here:

 

http://www.make-shades.com/test6.php

 

We're in the business of selling the instructions and goods necessary for people to make their own roman shades. I'm trying to create a roman shade "design" application letting potential customers set the shade's width, length and folds and then accurately animate the shade's geometry and raising and lowering action.

 

One key consideration is what our industry calls shade "stackage". Stackage is the resulting length of a shade when it's in its fully raised position. For any given shade length and number of folds I can accurately determine the shade's stackage and I want to visually represent that value when my application's shade is in the fully raised position..

 

To understand my initialization requirement please visit my app and, using the default shade, do the following:

 

1) Click anywhere within the grid or within the shade to start my raising timeline. Subsequent clicks will toggle the timelines forward and backward.

 

- Notice my default shade is 50 inches long and when fully raised its bottom ends up near 11 1/2 inches on the grid. A 50 inch shade made with 4 folds (represented by 5 shade sections) has a predictable stackage of 11 1/2 inches.

 

2) Using the "Shade Length" stepper (located near the app's upper, right corner) lengthen the shade to exactly 60 inches and then raise it.

 

- You'll see when fully raised its bottom ends up just shy of 22 inches on the grid. I need it to end up at 12 1/2 inches.

 

Here's my timeline code for raising those five sections. The dynamic y values are what need to be reinitialized whenever the shade length changes:

 

frontTimeline.append(TweenMax.to(frontSection5, myTweenTime/2, {y: bottomSectionRaiseValue(), ease:Linear.easeNone}));

frontTimeline.appendMultiple([TweenMax.to(frontSection5, myTweenTime, {y:frontSectionRaiseValue(4), ease:Linear.easeNone}),
					   TweenMax.to(frontSection4, myTweenTime, {y:frontSectionRaiseValue(4), ease:Linear.easeNone})
					]);

frontTimeline.appendMultiple([TweenMax.to(frontSection5, myTweenTime, {y:frontSectionRaiseValue(3), ease:Linear.easeNone}),
					   TweenMax.to(frontSection4, myTweenTime, {y:frontSectionRaiseValue(3), ease:Linear.easeNone}),
					   TweenMax.to(frontSection3, myTweenTime, {y:frontSectionRaiseValue(3), ease:Linear.easeNone})
					]);

frontTimeline.appendMultiple([TweenMax.to(frontSection5, myTweenTime, {y:frontSectionRaiseValue(2), ease:Linear.easeNone}),
					   TweenMax.to(frontSection4, myTweenTime, {y:frontSectionRaiseValue(2), ease:Linear.easeNone}),
					   TweenMax.to(frontSection3, myTweenTime, {y:frontSectionRaiseValue(2), ease:Linear.easeNone}),
					   TweenMax.to(frontSection2, myTweenTime, {y:frontSectionRaiseValue(2), ease:Linear.easeNone})
					]);

frontTimeline.appendMultiple([TweenMax.to(frontSection5, myTweenTime/2, {y: topSectionRaiseValue(), ease:Linear.easeNone}),
					   TweenMax.to(frontSection4, myTweenTime/2, {y: topSectionRaiseValue(), ease:Linear.easeNone}),
					   TweenMax.to(frontSection3, myTweenTime/2, {y: topSectionRaiseValue(), ease:Linear.easeNone}),
					   TweenMax.to(frontSection2, myTweenTime/2, {y: topSectionRaiseValue(), ease:Linear.easeNone}),
					   TweenMax.to(frontSection1, myTweenTime/2, {y: topSectionRaiseValue(), ease:Linear.easeNone})
					]);

 

Here's my timeline initialization code:

 

    var timeline:TimelineMax = new TimelineMax();
    // frontTimeline and backTimeline are timelineLite instances for the front and back shade views
    var frontTimeline:TimelineLite = new TimelineLite();
    var backTimeline:TimelineLite = new TimelineLite();
    timeline.appendMultiple([frontTimeline, backTimeline]);

 

Here's my shade length stepper change function:

 

function stepWindowLength(event:Event):void  {
theWindowLength = stepperWindowLength.value;
theShadeLength = stepperWindowLength.value;
stepperCoverUpWindowLength.text = stepperCoverUpString(theWindowLength);
      // call changeShade function
changeShade();
}

 

Here's the salient timeline code within my changeShade() function:

 

    timeline.stop();    
    timeline.totalProgress = 0;  // snap the shade to its fully lowered position
    timelineStarted = false;

 

By the end of the changeShade() function the shade sections have been resized and the shade has been snapped down to its fully lowered position ready to be raised upon the next click.

 

Finally, here's the salient code that raises and lowers the shade by managing my main timeline. I think it's here I need to do my invalidation but I don't know how:

 

buttonRaiseLower.addEventListener(MouseEvent.CLICK, manageTimeline);

function manageTimeline(event:MouseEvent):void {
if (!timelineStarted)
{
	frontTimeline.invalidate();  <==== this isn't causing re-initialization of my dynamic y-values
	timeline.gotoAndPlay(0);
	timelineStarted = true;
	timelineReversed = false;
}

 

You can see I've tried frontTimeline.invalidate(); but it doesn't work.

 

Is creating individual tweenMax instances, adding them to my frontTimeline and then invalidating them the correct tool for my requirement? If not, what would you suggest?

[GreenSock]

Did you read my previous post?

 

I didn't have time to sift through all your code or logic (I'm up against a deadline myself) but if you are trying to change destination values, invalidate() is NOT what you want. When you do {y:sliderPosition(1)}, the result of sliderPosition(1) is put in as the y value. That code is NOT telling TweenLite to go call that function every time you invalidate() the tween. Remember, your function is simply returning a numeric value - TweenLite has no idea where that number came from, what function was called, etc. If you need to associate the destination values with a function (as it appears you are doing), you need the dynamicProps plugin. Please see the Plugin Explorer for an example.

 

One other option is the updateTo() method in TweenMax (which is new by the way). Feel free to check out the documentation at http://www.greensock.com/as/docs/tween/

 

I wish I had more time to walk through all your code & logic. Good luck with the project. And thanks for being a club member!

[jdb]

Thank you sir. I do appreciate deadlines. They make the world go around.

 

Best of luck with your project.

 

Jeffrey Bowman