tweening with different buttons

[godassesddor]

hi !

I'm a newbie, trying to use tweenLite & I have problems !

 

there is a sprite (vit_activ) & 4 buttons (scaleX, scaleY, rot90 & rot-90).

 

when i push the scaleX button, the sprite flips horizontally.

 

if(vit_activ.scaleX==1)

{TweenLite.to(vit_activ,1,{scaleX:-1})}

else

{TweenLite.to(vit_activ,1,{scaleX:1})}

 

It works but is there a nice way to make it work without the test ?

 

Yet, the big problem occurs when I push rapidly on different buttons.

For instance, the sprite is supposed to rotate 90° clockwise or anticlockwise but when i push another button, while rotating, It stops rotating immediately and the other Tween starts.

The sprite.rotation has now a value not equal to 0, 90, 180 or -90.

 

How can I force the Tween effect to be finished before starting the next one ?

 

(sorry for my bad english)

[Carl]

the issue of your tweens stopping immediately when you press another button is most likely due to Tweenlite's default OverwriteManager setting which will kill all existing tweens on an object when a new tween is set on that object.

 

http://www.greensock.com/overwritemanager/

 

after you import the greensock classes add this code:

 

OverwriteManager.init(2);

 

that will allow multiple tweens to happen simultaneously on the same object.

 

I think waiting for a tween to finish before a new tween starts could be kind of odd.

 

suppose the user hits the buttons very quickly..

 

rotate

rotate

rotate

scaleX

scaleX

scaleX

rotate

 

do you really intend for them to watch a 7 second long series of animations? (assuming all your tweens have the same duration).

 

If you do not get the desired behavior by using the OverwriteManager.init(2) setting, you could certainly append all those tweens to a TimelineLite that would manage playing each of them in sequence. I would not recommend this method before getting comfortable with TweenLite first.

 

You can learn more about TimelineLite here: http://www.greensock.com/timelinelite

and watch some videos here: http://active.tutsplus.com/series/timel ... ter-guide/

 

as for your scaling issue, be careful with that conditional since you are allowing the user to scale from -1 to 1 there will be many times that the scaleX is NOT exactly equal to 1.

you may want to check if the scalceX is >= 0 (positive).

 

instead of using a conditional you could also create a TweenLite that tweens from a scaleX of 1 to a scaleX of -1 and then use your button to toggle the direction of the tween.

 

I can provide an example later.... got to eat dinner.

[godassesddor]

Thanks Carl for answering so quickly.

 

I've read the overwritemanager documentation & 2 is the default mode.

It still kills the previous tween.

 

i've tried this :

OverwriteManager.init(0);

 

And it seems to resolve most of the problems i've had.

the only one remaining is when I rotate several times rapidly.

 

By the way, I use this code :

TweenLite.to(vit_activ,1,{rotation:"+90"})

 

and I suppose I can fix it by replacing "+90" by a switch to 0, 90, 180 or -90.

 

I think I will read more about TweenLite settings !

[Carl]

I've read the overwritemanager documentation & 2 is the default mode.

 

Just to be totally clear here, 1 is the default mode for TweenLite unless you are using TweenMax, TimelineLite, or TimelineMax elsewhere in your project. TweenMax uses mode 2 / auto which will allow multiple tweens of multiple properties on the same object at the same time.

If you use init(2) you will not kill previous tweens unless your new tween is tweening the same property of a previous tween.

 

if you press a button that rotates something "90" degrees and then quickly press a button that moves it 100 px both tweens will run at the same time no problem.

 

If you click a button that rotates an object "+90" and then press that same button again (before the tween finishes), well then the new rotation tween will overwrite the previous rotation tween and rotate another 90 degrees from the object's rotation at the time the button was pressed.

so its very possible that if you click the rotate button quickly the rotation is going to end up at something other than 0, 90, 180 etc.

 

 

 

for instance if you have an object named mc at a rotation of 0 and you have a button that is supposed to tween it to a value of "+90".

 

TweenLite.to(mc, 1, {rotation:"90"});

 

if you press the button while that mc is rotating to 90 and the current rotation is 11, the new tween is going to rotate it to 101.

[godassesddor]

sorry for the misunderstanding about overwritemanager.

 

I had trouble using at the same time :

TweenLite.to(vit_activ,1,{scaleX:-1});

TweenLite.to(vit_activ,1,{scaleY:-1});

TweenLite.to(vit_activ,1,{rotation:"+90"});

TweenLite.to(vit_activ,1,{rotation:"-90"});

 

the remaining one is with rotations & i'm working on a switch mode in order to avoid it.

 

you said first you had an idea about scaleX going -1,1,-1.. without tests ?

 

thanks for the support

[Carl]

please see the attached file.

 

here is the code:

 

import com.greensock.*; 
import com.greensock.easing.*;
import flash.events.MouseEvent;

var scaleTween:TweenLite = TweenLite.to(mc, .5, {scaleX:-1, paused:true, reversed:true});

scale_btn.addEventListener(MouseEvent.CLICK, scaleTweenClick);

function scaleTweenClick(e:MouseEvent):void{
scaleTween.reversed = !scaleTween.reversed;
scaleTween.resume();
}

[godassesddor]

thanks Carl.

 

A bit difficult to understand.

 

i think i'll keep my old fashioned test.

[Procise]

Just want to Thank you Carl for answering a problem I have been banging my head for 2 days..

 

I was trying to scale and do a colorTransform on a mc and couldn't figure out why it wasn't working..But now I do. OverwriteManager.init(2);

worked perfectly. I do have one question for ya...is there a way to only use one Tween.to line for both Tweens? meaning combine them some how?

 

here is the code:

 

 

mc.addEventListener(MouseEvent.MOUSE_OVER, mc1);

mc.addEventListener(MouseEvent.MOUSE_OUT, mc2);

 

function mc1(event:MouseEvent):void{

TweenLite.to(mc, .75,{scaleX:2, ease:Back.easeOut});

TweenLite.to(mc, .75, {colorTransform:{tint:0x334466, tintAmount:1}});

}

 

function mc2(event:MouseEvent):void{

TweenLite.to(mc, .75,{scaleX:1, ease:Back.easeOut});

TweenLite.to(mc, .75, {colorTransform:{tint:0xCCCCCC, tintAmount:1}});

}

[Carl]

sure.

 

TweenLite.to(mc, .75, {colorTransform:{tint:0x334466, tintAmount:1}, scaleX:2, ease:Back.easeOut});

 

you can tween as many properties as you like with one tween.

[Procise]

Thanks works like a charm.