Separating movement tween and alpha tween using GreenSock

Question

I'm using GreenSock's TweenMax in AS3, Flash AIR 3.2 for iOS. I'm trying to get a string of text to start fading using the autoAlpha plugin at a certain point (such as after it reaches the middle of the tween) during the movement tween, and not from start to finish. At the moment it is tweening both the movement and alpha from the start position to finish. Is this possible to do?

TweenMax.to(textOne, 14, {x:xScreenPos - 150, ease:SlowMo.ease.config(1, 0), repeat:-1, autoAlpha:0.5});

EDIT: This is the current code with the functions and syntax fixed, but it does not work for some reason. There is still a movement tween, but the alpha is not tweening anymore. The logic seems correct though. (alpha now replaces autoAlpha because it works over the latter).

import com.greensock.events.TweenEvent;
import com.greensock.TweenMax;

var _middle:Boolean = false;
var _tween:TweenMax;

public function run():void {
    _tween = TweenMax.to(textOne, 14, {x:xScreenPosEnd, ease:SlowMo.ease.config(1, 0), repeat:-1});
    _tween.addEventListener(TweenEvent.UPDATE, updateListener);
    _tween.addEventListener(TweenEvent.REPEAT, repeatListener);
}

function updateListener(e:TweenEvent):void {
    if(_tween.totalProgress() > 0.5 && _middle == false) {
        TweenMax.to(textOne, 7, {ease:SlowMo.ease.config(1, 0), repeat:-1, alpha:0});
        _middle = true;
    }
}

function repeatListener(e:TweenEvent):void {
    textOne.alpha = 1.0;
    _middle = false;
}

EDIT: totalProgress() has been replaced with progress() and the alpha tweens again – but there's another problem with the alpha tween. I've traced out both textOne.alpha and _tween.progress() to debug. Either it's because of the single-threaded nature of AS3, it is messing up the call logic at the end of each loop... because there is a delayed end to the alpha tween, the REPEAT call cannot set the alpha to 1 in time, before the progress tween starts. Or it's something in the logic which is wrong. I tried setting the (alpha) tween time of TextOne to 6, but it still messes it up.

Actually, I'm not too sure what's going on after thinking about it a bit more. It makes NO logical sense. The first alpha tween is fine, then it messes up on repeat and repeats the alpha tween (but at the wrong progress() position) a few times, then stays at 0 forever. Here's a snapshot of the traces:

ALPHA: 0.0078125
PROGRESS: 0.9979285714285714
MIDDLE: true
...
ALPHA: 0
PROGRESS: 0.9992857142857144
MIDDLE: true

ALPHA: 0
PROGRESS: 0.00028571428571438115
MIDDLE: true

ALPHA: 0
PROGRESS: 0.000714285714285826
MIDDLE: false

ALPHA: 0.99609375
PROGRESS: 0.0015714285714287155
MIDDLE: false
...
ALPHA: 0.1015625
PROGRESS: 0.4504285714285715
MIDDLE: false

ALPHA: 0.09765625
PROGRESS: 0.4515714285714285
MIDDLE: false
...
ALPHA: 0.00390625
PROGRESS: 0.4992142857142858
MIDDLE: false

ALPHA: 0
PROGRESS: 0.5003571428571431
MIDDLE: false

score 1 · Answer 1 · answered Feb 04 '13 at 19:12

1

Just use two TweenMax.to() calls. Give one a delay: parameter and a smaller value for duration.

answered Feb 04 '13 at 19:12

frankhermes

4,720
1
22
39

I've tried something like: `TweenMax.to(textOne, timeVar, {x:xScreenPosEnd, ease:SlowMo.ease.config(1, 0), repeat:-1}); TweenMax.to(textOne, (timeVar/2), {x:xScreenPosEnd, ease:SlowMo.ease.config(1, 0), repeat:-1, autoAlpha:0, delay:(timeVar/2)});` but what happens is that it doesn't start from the set x position anymore. – ArrayOutOfBounds Feb 05 '13 at 10:59
Having the two TweenMax.to() calls seems to make them conflict with each other. – ArrayOutOfBounds Feb 05 '13 at 12:23
you should not have an x:xScreenPosEnd in both tweens. Then TweenMax will override the first with the second. So one should tween the x, the other the alpha. – frankhermes Feb 05 '13 at 15:03
I've removed it in the second tween and it's currently: `TweenMax.to(textOne, 7, {ease:SlowMo.ease.config(1, 0), repeat:-1, autoAlpha:0, delay:7, repeatDelay:7});` Here is my problem: I'm trying to have the text at alpha 1 at the start until the middle (still 1), then it tweens the alpha 1 from the middle to the end x position to alpha. This needs to happens every time the normal movement tween repeats. Having only `delay:7` doesn't work because it only runs once. The added `repeatDelay:7` was in hope that it would offset later repeats, but doesn't. – ArrayOutOfBounds Feb 05 '13 at 18:12
It seems as if it is still alpha 0 in the first 7 seconds of all the rest of the repeat tweens, then becomes alpha 1 in the 7th second, then tweens the alpha to 0 again. – ArrayOutOfBounds Feb 05 '13 at 18:16

Radu Diță · Answer 2 · 2013-02-12T21:32:43.290

0

You can save the first TweenMax.to and attach a listener for the TweenEvent.UPDATE event, this way you get a function that is called every time the tweener changes the values.

Then you get the value for the currentProgress and check if the value is above 0.5 (this means it got over the middle of the tween) and start the second tween. You need a bool variable so you only do this just once per middle tween.

You can add another listener for the TweenEvent.REPEAT event so you can reset the value of the alpha object to 1 if your tween is repeating.

var middle:Boolean = false;
TweenMax tween = TweenMax.to(textOne, 14, {x:xScreenPos - 150, ease:SlowMo.ease.config(1, 0), repeat:-1});
tween.addEventListener( TweenEvent.UPDATE, updateListener );
tween.addEventListener( TweenEvent.REPEAT, repeatListener );

function updateListener( e:TweenEvent ):void
{
  if( tween.currentProgress > 0.5 && middle == false )
  {
   TweenMax.to(textOne, 7, {ease:SlowMo.ease.config(1, 0), repeat:0, autoAlpha:0});
   middle = true;
  }
}

function repeatListener( e:TweenEvent ):void
{
 textOne.alpha = 1.0;
 middle = false;
}

Hope this helps

edited Feb 12 '13 at 21:32

answered Feb 08 '13 at 18:20

Radu Diță

13,476
2
30
34

It comes up with the error 1071: Syntax error: expected a definition keyword (such as function) after attribute TweenMax, not tween. for this line of code `TweenMax tween = TweenMax.to(textOne, 14, {x:xScreenPos - 150, ease:SlowMo.ease.config(1, 0), repeat:-1});` Also, is it possible to use the same logic of updateListender and repeatListener to make it alpha constantly fade in and out? – ArrayOutOfBounds Feb 11 '13 at 10:56
I've more or less fixed the issue. What is exactly is `currentProgress` and where is it in the above code? It comes up with the error 119: Access of possibly undefined property currentProgress through a reference with static type com.greensock:TweenMax. – ArrayOutOfBounds Feb 11 '13 at 14:23
I've updated my post to reflect the current situation. Do you have any idea as to why the alpha is not actually tweening? – ArrayOutOfBounds Feb 11 '13 at 16:10
sorry for the typo, it should read progress() instead of currentProgress, progress() should return the current position of the tween on this particular loop [link](http://api.greensock.com/as/com/greensock/TimelineMax.html#progress()), totalProgress() on the other hand returns the position of the tween taking into account the number of loops, this is why in your code, alpha never gets tweened because you want it to repeat indefinitely and I guess totalProgress() always returns 0. – Radu Diță Feb 12 '13 at 10:34
I see now. Okay, so I fixed that problem but there's something going totally wrong with the alpha tween logic and I can't work out what it is! I've edited my post to show the problem and debugging traces. – ArrayOutOfBounds Feb 12 '13 at 17:04
inside the updateListener when setting the second tween, the tween should have a repeat of 0 instead of -1: __TweenMax.to(textOne, 7, {ease:SlowMo.ease.config(1, 0), repeat:0, autoAlpha:0});__ – Radu Diță Feb 12 '13 at 21:33
But it should be repeating indefinitely just like the movement tween is repeating indefinitely. – ArrayOutOfBounds Feb 13 '13 at 13:14

Separating movement tween and alpha tween using GreenSock

2 Answers2