KillTweensOf() on stage resize.

[mhulse]

Hello,

 

I LOVE GreenSock framework!!!!! Amazing! Purely genius!

 

With that said, here is my (abbreviated) code:

 

private function init($e:Event):void {
...
_video.addEventListener(VideoLoader.VIDEO_BUFFER_FULL, onReady);
...
stage.addEventListener(Event.RESIZE, onResize, false, 0, true);
...
};
private function onReady($e:Event):void {
showButtons();
};
private function showButtons():void {
//These tweens only happen once, when the movie first loads:
TweenLite.to(_btnA, 2, { delay: .75, x: 10, alpha: .5, ease: Elastic.easeOut, easeParams: [.25, .9] });
TweenLite.to(_btnB, 2, { delay: .75, x: (stage.stageWidth - _btnB.width - 10), alpha: .5, ease: Elastic.easeOut, easeParams: [.25, .9] });
};
private function onResize($e:Event):void {
TweenLite.killTweensOf(_btnB);
TweenLite.killTweensOf(_btnA);
...
};

 

My concern:

 

See where I am kiling the tweens? Is this a bad spot to put a kill for a tween (i.e. every time the stage is resized)?

 

If I do not kill the tweens, then the tween, and the movieclip, gets funky if the stage is resized before the tween is finished.

 

My question:

 

Is there a better way to kill the tweens only IF the tween is happening?

 

I only need these tweens the first time they appear, and then I am done with them. It kinda seems overkill to "kill" the tweens upon every stage resize... I am just not sure of a better way to avoid animation oddities when movie is scaled before the buttons have finished tweening.

 

Any tips ya'll could provide would be spectacular!

 

Many thanks in advance!

 

Cheers,

Micky

[GreenSock]

Sure, the simplest way would probably be to add your RESIZE listener right when your tweens begin, and then use an onComplete to remove that listener. That way, it's only getting called if/when the tweens are in-progress.

 

For the record, LiquidStage can literally update tweens on the fly to new destinations when the stage resizes. There's even a LiquidPositionPlugin for that (only for use with LiquidStage). http://www.greensock.com/liquidstage/

[mhulse]

Ahhhh, that's a great idea!

 

I actually need the resize for after the tweens too, so I could add another resize listener when the tweens complete.

 

Nice!

 

I was just looking at LiquidStage yesterday afternoon... Awesome stuff! As soon as I have the extra cash (prob next paycheck) I am going to pay the 100$ for a Shockingly Green membership!

 

I can't thank you enough for sharing your amazing code with the rest of the world!

 

Thanks!

 

Cheers,

Micky

[mhulse]

Thanks to your suggestion greensock, this works:

 

private function onResizeInit($e:Event):void {

trace('onResizeInit()');

// Kill the initial resize event listener:
stage.removeEventListener(Event.RESIZE, onResizeInit);

// Remove tweens:
TweenLite.killTweensOf(_btnB);
TweenLite.killTweensOf(_btnA);

// Setup a new resize listener:
stage.addEventListener(Event.RESIZE, onResize, false, 0, true);

};

 

I am going to have to use the above solution until I can afford to purchase a membership for the extra goodies!

 

Thanks again!

 

Have an excellent day!

 

Cheers,

Micky