tweenlite and fast mouse click?

[ziociro]

hi, for first happy new year to everybody!

there's a "myBtn_left" that move for every click another mc "myMc":

 

myBtn_left.addEventListener(MouseEvent.CLICK, moveleft); //<---tried wit CLICK, MOUSE_UP, MOUSE_DOWN, nothing function! 
function moveleft(e:MouseEvent):void{
TweenLite.to(myMc, 1, {myMc.x - myMc.nmbr_1.width, ease:Sine.easeOut});
}

 

i need an exact step for move "myMc", but if click really fast the mouse, this don't happen and seems like something's wrong on tweenlite... but... what's really wrong?

tnx!!!

[Carl]

Hello Ziociro,

 

Welcome to the forums and Happy New Year to you.

 

TweenLite is behaving exactly as you are telling it to.

Your tween always says " move to the left the value of your width". for the sake of clarity lets just say the width is 100 pixels and we want to move right.

 

assume your mc has an initial x of 0

 

So if I start a tween and say "hey mc, move 100 pixels to the right of where you are now" the mc will start moving from 0 to 100.

If I get impatient half way through and yell again "hey mc, move 100 pixels to the right of where you are now".

If the box had an x of 50 when I yelled or clicked again it will move to 150.

 

This is what is happening in your example. Every time you hit the button, a new starting and end value are generated based on where the mc or btn currently is.

 

With TweenMax there is an isTweening method available that allows you to easily test whether an object is tweening or not. So in your case what you want to do is make sure that a new Tween isn't being created while an existing tween is still in progress.

 

TweenMax.isTweening(mc) will return a value of true of false.

 

To make you code work do this:

 

myBtn_left.addEventListener(MouseEvent.CLICK, moveleft); //
function moveleft(e:MouseEvent):void{

 trace(TweenMax.isTweening(myMc); //will output true of false


//only if myMc is NOT tweening allow the tween to occur
 if(!TweenMax.isTweening(myMc){
  TweenMax.to(myMc, 1, {x:myMc.x - myMc.nmbr_1.width, ease:Sine.easeOut});
  }
}

 

Also also if you are going to be tweening to a relative value such as "100 pixels from where the mc is"

 

you can pass in the target value as a String by putting it in quotes

 

TweenMax.to(mc, 1, {x"100"});

 

if you are passing in a relative value that is the outcome of an equation or expression do this

 

TweenMax.to(myMc, 1, {x:String(-myMc.nmbr_1.width), ease:Sine.easeOut});

 

 

enjoy

 

Carl

[ziociro]

works great, tnx!

[ziociro]

hope this 'll be a little help for someone beginner like me!

it's a little mc slided from 2 btn (with tweenmax classes) and masked via as. data in mc can be changed in mc timeline.

[eyevolt]

An alternate solution if you want to allow fast mouse clicks is to round the current mc.x value to the nearest whole width value. This will make sure that you are always using even increments.

 

myBtn_left.addEventListener(MouseEvent.CLICK, moveleft); //<---tried wit CLICK, MOUSE_UP, MOUSE_DOWN, nothing function! 
function moveleft(e:MouseEvent):void{

// round to nearest whole width then subtract the width as the move increment
var moveStep:Number = Math.round(myMc.x/myMc.nmbr_1.width)*myMc.nmbr_1.width - myMc.nmbr_1.width;


//perform the tween
TweenLite.to(myMc, 1, {x:moveStep, ease:Sine.easeOut});

 

if you need to constrain the x value to a minimum limit place a conditional statement around the Tween call like this:

 

// if moveStep > 0 allow Tween otherwise Tween to 0 (min value)
if (moveStep > 0) {
     TweenLite.to(myMc, 1, {x:moveStep, ease:Sine.easeOut});
} else {
     TweenLite.to(myMc, 1, {x:0, ease:Sine.easeOut});
}

[ziociro]

tnx eyev...