Separating movement tween and alpha tween using GreenSock

0
votes

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

2
actionscript-3airtweenflash-cs6gsap

2 Answers

1
votes

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

0
votes

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