Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
heyitsjayy

Way to stop Mouse Events until Tween is complete?

Recommended Posts

Wondering if anyone knows a good, simpler way of doing such a thing (perhaps using TweenLite onComplete)? Basically, I have some tween.to code which slides a panel from left to right (x position) based on arrow buttons/MovieClips which are clicked.

Inside specific (MouseEvent.CLICK) functions, the tween code gets run, and moves a slider/stage object back and forth: TweenLite.to(slide, 1, {x:"500"});

 

Thing is, when you click the arrow buttons in rapid succession one after another the 'x' position is thrown off. (It must be 500px apart each button click -based on width per slide). When the button is clicked quickly before the 1 second tween is done, it starts another tween up, and repositions where 'x' starts sliding at when the button gets clicked again.

 

So is there a way to either use onComplete to do this, or a way such as removing an event Listener for the click until the first tween is completely done? Then adding it back on after it's done? Did I just answer my own question? If so, still not sure how to code this, so wondering if someone may be willing to help with code ideas!

Link to comment
Share on other sites

Hello Jayy,

 

I'm by no means an expert, but you could try putting in {x:500} or wherever it is you need the panel to slide off to. By having the number in quotes, you are effectively adding 500 pixels onto it's current x. position, hence it disappearing over the hills every time you click the button.

Link to comment
Share on other sites

Thanks for the idea, but it needed to add onto the last 500. The button needs to move in 500px increments, and not to just any one position, since it is a series of a few panels being "slid" through back & forth by the left and right arrow buttons. Any other ideas out there?

Link to comment
Share on other sites

The easiest approach would be to use TweenMax's isTweening() method to check to see if your slides are currently being tweened before creating a new tween

 

 

left_btn.addEventListener(MouseEvent.CLICK, leftClickHandler);

function leftClickHandler(e:MouseEvent):void{
if( ! TweenMax.isTweening( slides_mc ) ){
TweenLite.to(slides_mc, 3, {x:"50"});
}else{
trace("hey buddy, you can't tween now");
}
}

 

}

 

Basically, that code says "if slides_mc isn't being tweened, then create a new tween, or else do nothing"

 

CS5 fla attached

noFastClick_CS5.zip

Link to comment
Share on other sites

Thanks Carl, you're always quick!

 

This does work essentially for making the tween complete. So it works & thanks for that. I should've mentioned though, that these buttons are set to disappear(alpha:0), after being clicked 3 times, basically so you can't progress / tween any further when you've hit then end of the slides.

 

So what's happening is that the tweens complete fine now (thanks!) but if the button is clicked quickly more than once before tweens are done, it'll vanish partway through (which is not supposed to happen).

 

Guessing that removeEventListener is the only way to really accomplish this.. Though tried this approach earlier inside the MouseEvent function with the tween.to. And made a separate 'onComplete' function to re-addEventListener back on, which obviously didn't wok :)

Link to comment
Share on other sites

I think the best approach to this type of thing is to simply keep track of the destination value in a variable and each time the button is clicked, you add the amount to that variable and feed it into a tween. For example:

 

var xDest:Number = mc.x;

function onClick(event:MouseEvent):void {
   xDest += 500;
   TweenLite.to(mc, 1, {x:xDest});
}

 

This is much more intuitive for the end user too because their clicks make a difference. Otherwise, if you simply ignore clicks in certain scenarios, it can get really frustrating for the end user. What if they really want to zoom ahead quickly, so they click multiple times fast? The above code would accommodate that just fine. Plus it'll perform a bit better than having to check isTweening() on every click.

  • Like 1
Link to comment
Share on other sites

Thanks Jack (and everyone else too)! This is a good way too accomplish this sort of thing, and would work out the best for what's needing to happen... Should be good now.

Link to comment
Share on other sites

By the way, it's cool to know that it's possible to feed a variable into a tween for position, etc.. Wasn't aware that was a possibility before now! Good stuff.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×