Update tweened target property

[edogusma]

Hi, I'm using TweenLite for a bit of time and I'm now playing with the latest features play(), pause(), reverse().

I looked around the forum for a solution but I founded nothing clearly solved my problem.

Some code:

var mainContainer:MovieClip = new MovieClip;
...
mainContainer.addChild(...);
...
var mainMovement = new TweenLite(mainContainer, _time, { x:stage.stageWidth-mainContainer.width, ease:None.easeNone, paused:true } );

private function onRollover(e:MouseEvent):void {
mainMovement.resume();
}

private function onRollout(e:MouseEvent):void {
mainMovement.pause();
var arrive:Number = 100;
TweenLite.to(mainContainer, _duration, { x: -arrive } );
}

 

After a cycle of rollover/rollout the "mainMovement" resume the target where it left it and not from where the following TweenLite move it.

Is there nothing like:

TweenLite.to(mainContainer, _duration, { x: -arrive, onComplete: function() { mainMovement.UPDATE_X = mainContainer.x  } } );

?

 

First I tried with TweenMax.setDestination() that partially work but "kill", or better "reset", "mainMovement"; further reverse() not working.

Then I tried with overwrite property but it just control the way the two different tween work together leaves them as they are.

[GreenSock]

Sorry, I don't quite understand your question. You can update the destination value with setDetination() (TweenMax only). Your code didn't make any changes to the mainMovement variable - maybe that's where the confusion is. Did you mean to do:

 

mainMovement = TweenLite.to(mainContainer, _duration, { x: -arrive } );

 

So that then when you rollout/over it affects the proper tween instance? Again, I don't really understand what you're asking so I may be off here.

[edogusma]

I'm trying to tween a movieclip form 0 to his width, back and forward using resume() and reverse(). The movement is controlled from 2 button, each of them on rollover resumes the tween and on rollout pauses the tween; obviously one of them reverses it...

I' d like not to stop immediatly the tween on rollout (like the pause() does...); but to slowly stop it while maintaining the initial "range of movement", from 0 to movieclip.width. To do that I simply launch a new tween...

The problem is that at the end of the second tween the movieclip results "moved" from the position "frozen" in the first tween; so when I resume that, the movieclip steps back to where it was at the pause()...

 

Hope I made myself understood.

[GreenSock]

I'm not quite sure I understand - maybe some sample code or a demo FLA would help.

 

If you want to gradually slow down or speed up a tween, you can actually tween its timeScale property (as long as it's a TweenMax, TimelineLite, or TimelineMax). That's right - you can tween another tween's properties.

[edogusma]

I have a container of images I would move:

private var mainContainer:MovieClip = new MovieClip;
private var mainMovement:TweenMax;

public function moveTest() {
...
for each(var item:XML in xmlData.BANNERS.ITEM) {
bannerArray[index] = new Image(item.toString(), index);
IMAGE_WIDTH = bannerArray[index].width;
IMAGE_HEIGHT = bannerArray[index].height;

bannerArray[index].x = index * IMAGE_WIDTH + index * PADDING_IMAGE;
mainContainer.addChild(bannerArray[index]);

index++;
}

var _space:Number = mainContainer.width - STAGE.stageWidth;
_time = _space / _speed;
mainMovement = new TweenMax(mainContainer, _time, { x:STAGE.stageWidth-mainContainer.width, ease:None.easeNone, paused:true } );

private function setupArrows():void {
var areaLeft:MovieClip = new MovieClip;
with (areaLeft) {
graphics.beginFill(0xFFFFFF, 0);
graphics.drawRect(0, 0, 70, 10);
graphics.endFill();
buttonMode = true;
addEventListener(MouseEvent.ROLL_OVER, onLeftRollover);
addEventListener(MouseEvent.ROLL_OUT, onLeftRollout);
}
addChild(areaLeft);

var areaRight:MovieClip = new MovieClip;
with (areaRight) {
graphics.beginFill(0xFFFFFF, 0);
graphics.drawRect(0, 0, 70, 10);
graphics.endFill();
buttonMode = true;
addEventListener(MouseEvent.ROLL_OVER, onRightRollover);
addEventListener(MouseEvent.ROLL_OUT, onRightRollout);
}
addChild(areaRight);

}

private function onLeftRollover(e:MouseEvent):void {
mainMovement.reverse();
}

private function onLeftRollout(e:MouseEvent):void {
mainMovement.pause();
}

private function onRightRollover(e:MouseEvent):void {
mainMovement.reversed = false;
mainMovement.resume();
}

private function onRightRollout(e:MouseEvent):void {
mainMovement.pause();
var arrive:Number = (Math.floor( -mainContainer.x / (IMAGE_WIDTH + PADDING_IMAGE)) + 1) * (IMAGE_WIDTH + PADDING_IMAGE);
TweenLite.to(mainContainer, _duration, { x: -arrive } );
}
}

 

I'm not trying to tween another tween's properties, I would to update a properties of an existing tween after a "manual" movement of its target... I could have written even something like this:

private function onRightRollout(e:MouseEvent):void {
mainMovement.pause();
var arrive:Number = (Math.floor( -mainContainer.x / (IMAGE_WIDTH + PADDING_IMAGE)) + 1) * (IMAGE_WIDTH + PADDING_IMAGE);
mainContainer.x = -arrive;
}

[edogusma]

That's right - you can tween another tween's properties.

 

Yes, I can:

private function onRightRollout(e:MouseEvent):void {
TweenLite.to(mainMovement, _duration, { timeScale:0 } );	
}

This woks. But I want to control the x position... (...not the time...)

[edogusma]

...some hint?

[edogusma]

I solved this way:

mainMovement = new TweenMax(mainContainer, _mainTime, { x:STAGE.stageWidth-mainContainer.width, ease:None.easeNone, paused:true } );
....
TweenNano.to(mainContainer, _duration, { x: -((current + 1) * (IMAGE_WIDTH + PADDING_IMAGE)), onComplete: function() {
																		mainMovement.currentTime = _mainTime / ((STAGE.stageWidth - mainContainer.width) / mainContainer.x);
																		} } );