How to ease out and stop a tween on ROLL_OUT ?

[adifrank]

Hi. I'm a newbie, pretty much starting out with AC3 and with barely any experience using GreenSock. I've done some searching to try and figure out my question, but haven't been successful. If someone can help me out here, that would be great!

 

So here's the thing... I have a masked MovieClip in the center of my stage and two buttons on each side. one button moves the masked movie clip slowly left when ROLL_OVER and the other moves it slowly to the right when ROLL_OVER.

 

Currently the ROLL_OVER triggers the MovieClip to tween to it's maximum left position or maximum right position, and there's the nice smooth ease out when it arrives at the end of the tween. So far so good.

 

Now I want to add the ROLL_OUT functionality to the buttons. In other words, I want the MovieClip to stop tweening on ROLL_OUT rather than continue to it's farthest left or right point. But I also don't want the MovieClip to stop it's motion abruptly, but rather ease out and eventually come to a smooth stop.

 

Can someone please help me understand how to do this with GreenSock? Thank you.

[Carl]

this will make the existing tween easeOut for an additional 20% on ROLL_OUT

var slideTween:TweenMax = TweenMax.to(mc, 2, {x:300, paused:true});

btn.addEventListener(MouseEvent.ROLL_OVER, btnOver);

btn.addEventListener(MouseEvent.ROLL_OUT, btnOut);
function btnOver(e:MouseEvent){
slideTween.play();
}

function btnOut(e:MouseEvent){
slideTween.pause();
//advance the slideTween's progress by an additional 20% and ease out
TweenMax.to(slideTween, .5, {currentProgress:".2"});
}		

[adifrank]

Hey Carl, thanks for replying.

 

You're suggestion is pretty much what I already had. I used the pause() on ROLL_OUT, but just didn't know how to make the pause() ease out and stop rather than come to an abrupt halt.

 

You're addition:

TweenMax.to(slideTween, .5, {currentProgress:".2"});

Seems to be getting close to what I need, but not quite there yet.

On one hand, it doesn't stop the tween dead in it's tracks, yet on the other hand it hasn't exactly succeeded in smoothly continuing the motion of the tween before slowing down and stopping. Instead, upon ROLL_OUT the tween actually accelerates sharply at first and then slows down and eases out to a stop.

[Carl]

try tweening the timeScale

 

function btnOver(e:MouseEvent){
slideTween.timeScale = 1;
  slideTween.play();
  }

function btnOut(e:MouseEvent){

  //advance the slideTween's progress by an additional 20% and ease out
  TweenMax.to(slideTween, .5, {timeScale:0});
  }    

[adifrank]

Hi Carl. I tried using the timeScale as you suggested. I'm afraid it doesn't help. Now, upon ROLL_OUT the tween just stops immediately, without easing out.

 

Here's what my code looks like currently... (maybe I'm missing something?):

 

panLeftBtn.addEventListener(MouseEvent.ROLL_OVER, earthPanLeft);
panRightBtn.addEventListener(MouseEvent.ROLL_OVER, earthPanRight);
panLeftBtn.addEventListener(MouseEvent.ROLL_OUT, pauseEarthPanLeft);
panRightBtn.addEventListener(MouseEvent.ROLL_OUT, pauseEarthPanRight);

public function earthPanLeft(e:MouseEvent):void {
var panLeftDuration:Number = Math.abs(panningEarth.width - panningEarth.x) / stage.width;
earthPanLeftTween = TweenMax.to(panningEarth, 20, {x:0, paused:true});
earthPanLeftTween.timeScale = 1;
earthPanLeftTween.play();
}

public function earthPanRight(e:MouseEvent):void {
earthPanRightTween = TweenMax.to(panningEarth, 20, {x:5200, paused:true});
earthPanRightTween.timeScale = 1;
earthPanRightTween.play();
}

public function pauseEarthPanLeft(e:MouseEvent):void {
earthPanLeftTween.pause();
TweenMax.to(earthPanLeftTween, .5, {timeScale:0});
}

public function pauseEarthPanRight(e:MouseEvent):void {
earthPanRightTween.pause();
TweenMax.to(earthPanRightTween, .5, {timeScale:0});
}

[Carl]

yup, you shouldn't be using pause() on ROLL_OUT. that will make the tween stop abruptly.

 

please excuse the confusing comment:

//advance the slideTween's progress by an additional 20% and ease out

 

as I forgot to remove that when making the change.

 

 

file attached

[adifrank]

Thanks.

 

We're getting there....

 

I erased the lines:

earthPanLeftTween.pause();

and

earthPanRightTween.pause();

 

The ease out on ROLL_OUT works!!

So that's cool.

 

But after that, when I ROLL_OVER again on either of the buttons, the MovieClip doesn't continue the tween.

In your example which I downloaded (thanks for that!) it works, but for some reason when implementing the same idea in my code - it doesn't work.

 

Looking at my code, do you see what might be causing the problem? I can't figure it out

 

Thanks...

[Carl]

i think it is because you are defining your tween inside a ROLL_OVER function.

 

every time you roll over a button you are creating a new 20 second tween

 

 

public function earthPanLeft(e:MouseEvent):void {

var panLeftDuration:Number = Math.abs(panningEarth.width - panningEarth.x) / stage.width;

earthPanLeftTween = TweenMax.to(panningEarth, 20, {x:0, paused:true});

earthPanLeftTween.timeScale = 1;

earthPanLeftTween.play();

}

 

 

move it outside your function like in my example. that should do it.

 

c

[adifrank]

Hey Carl, thanks for sticking with me on this.... I'm afraid it's still not working though...

I DID move the tween definitions outside the ROLL_OVER event listeners.

The only thing I have setup differently is that I have two different tweens - left and right. Otherwise I can't figure out what could be making my code different from your example.

 

It's kind of hard to describe what is going on now. The left button seems to work perfectly. The right button only works if it is rolled-over first, after that it becomes does nothing on ROLL_OVER or ROLL_OUT.

 

Here's how the relevant part of my code looks currently:

 

public function PanningEarth() {
		earthPanLeftTween = TweenMax.to(panningEarth, 20, {x:0, paused:true});
		earthPanRightTween = TweenMax.to(panningEarth, 20, {x:-5200, paused:true});
	}

	public function deerControllerOnStage(e:Event):void {
		panLeftBtn.addEventListener(MouseEvent.ROLL_OVER, earthPanLeft);
		panRightBtn.addEventListener(MouseEvent.ROLL_OVER, earthPanRight);
		panLeftBtn.addEventListener(MouseEvent.ROLL_OUT, pauseEarthPanLeft);
		panRightBtn.addEventListener(MouseEvent.ROLL_OUT, pauseEarthPanRight);
	}

	public function earthPanLeft(e:MouseEvent):void {
		earthPanLeftTween.timeScale = 1;
		earthPanLeftTween.play();
	}

	public function earthPanRight(e:MouseEvent):void {
		earthPanRightTween.timeScale = 1;
		earthPanRightTween.play();
	}

	public function pauseEarthPanLeft(e:MouseEvent):void {
		TweenMax.to(earthPanLeftTween, .5, {timeScale:0});
	}

	public function pauseEarthPanRight(e:MouseEvent):void {
		TweenMax.to(earthPanRightTween, .5, {timeScale:0});
	}

[Carl]

I don't know for sure, but I'm guessing your tweens are fighting each other.

 

try using one tween that you play() and reverse();

 

import com.greensock.*;
import com.greensock.easing.*;

var slideTween:TweenMax = TweenMax.to(mc,4,{x:483,ease:Quad.easeInOut,paused:true});
slideTween.currentProgress = .5;//but mc in middle

left_btn.buttonMode = right_btn.buttonMode = true;

right_btn.addEventListener(MouseEvent.ROLL_OVER, btnOver);

right_btn.addEventListener(MouseEvent.ROLL_OUT, btnOut);

left_btn.addEventListener(MouseEvent.ROLL_OVER, btnOver);

left_btn.addEventListener(MouseEvent.ROLL_OUT, btnOut);



function btnOver(e:MouseEvent) {
TweenMax.killTweensOf(slideTween);

slideTween.timeScale = 1;

if (e.target == right_btn) {
	slideTween.play();
} else {
	slideTween.reverse();
}

}

function btnOut(e:MouseEvent) {
TweenMax.to(slideTween, .5, {timeScale:0});
}

 

fla attached:

[adifrank]

Thanks Carl, I think I see what you're getting at. The only thing though - I'm not sure using the reverse tween solution will be good in my case. The reason is that the MovieClip I'm tweening left and right has particular minimum and maximum x values that I don't want it to pass. When the MovieClip is farthest to the right x should equal 0, and when it is farthest to the left is should equal -5200 (which is basically the width of the MovieClip minus the width of the stage.

 

I'm figuring that if I start out with the MovieClip exactly at x= -2600 that maybe it will work (am I right?). But I would prefer not to limit myself to this.

 

Of course, I could be completely wrong here... as I've mentioned, I'm a newbie at AS3 and haven't really used GreenSock extensively before