Clicking Text Element in Tween Halts Animation...

Question

Hi guys, I've been having some trouble with tweens. Here's a description of my usage:

I have a system where a textbox is the child of a movieclip. When you click the "Next" button, the movieclip fades to 0-alpha and upon completion, the text in the textbox is changed (to the next index in an array) and it tweens back in to 100-alpha. This makes a nice transition through the text.

My issue is that sometimes it doesn't tween back in, only out, leaving the user with an empty box where text should be.

However, I'd asked this question previously with the thought that it was "Timing out". Now, after significant testing I realised that it only happens if I click or select some of the text on the text box. Could it have something to do with this text selection intefering with the changeText function below... (it's the same text box, just the text changes).

Has anyone else experienced similar faults?

CODE:

function changeClick(e:MouseEvent):void {
    if (e.currentTarget==btnRight) {
        newDirect="right";
    } else {
        newDirect="left";
    }
    if (newDirect=="right") {
        if (pageTotal!=pageCurrent) {
            tweenText=new Tween(b_textB,"alpha",Strong.easeOut,1,0,.5,true);
            tweenText.addEventListener(TweenEvent.MOTION_FINISH, changeText);
        }
    } else {
        if (pageCurrent!=1) {
            tweenText=new Tween(b_textB,"alpha",Strong.easeOut,1,0,.5,true);
            tweenText.addEventListener(TweenEvent.MOTION_FINISH, changeText);
        }
    }
}

function changeText(e:TweenEvent):void {
    var newText:String;
    var pageCurrentConstant:int=pageCurrent;
    if (newDirect=="right") {
        for (var i=0; i<=(pageTotal-1); i++) {
            if ((pageCurrentConstant-1)==i) {
                if (i!=pageTotal-1) {
                    newText=pageText[i+1];
                    pageCurrent++;
                } else {
                    newText=pageText[i];
                }
            }
        }
    } else {
        for (var j=0; j<=pageTotal; j++) {
            if (pageCurrentConstant==j) {
                if (j!=0) {
                    newText=pageText[j-2];
                    pageCurrent--;
                } else {
                    newText=pageText[j];
                }
            }
        }
    }
    b_textB.htmlText=newText;
    tweenText=new Tween(b_textB,"alpha",Strong.easeOut,0,1,.5,true);
    drawWidget();
}

changeClick is initiated by either btnRight or btnLeft to navigate through the text

Answer 1

The standard Tween class is kind of stupid in many situations. When using it, you have to be careful that you don't overwrite or remove its instance, as the Garbage Collection could start then. In the same way it always requires you to specify a start value which can lead to disrupting behaviour in the animation.

I'm not exactly sure what exactly your problem is, and with that less code it is hard to reproduce it (you might want to provide a full working example code if you still experience the problem). However I suggest you to try out a different tweening framework. I for myself have made very good experience with Greensock's TweenLite. It might have a weird syntax (at least I could imagine a better one), but in general it works really well, and I have solved very many problems with the standard Tween class by simply using TweenLite instead.

Answer 2

Try disabling the text selection, with b_textB.selectable = false

You will be able to quickly rule out the possibility of a selection issue. But the sometimes in your question strongly indicates that's what the issue is.

If you need the text to be selectable when it's visible, just switch it off and on at the start and end of the tweens.

Hope this solves it.

Oh by the way, here's a list of several completely free alternatives to the Tween class... (Greensock's Tween packages are not free.)

• Between AS3
• Desuade Motion ... This one in particular is awesome.
• Tweener
• Tweensy
• Twease

Update...

The only way you can solve this and allow the user to select the text, is to make a duplicate textfield that's selectable, and toggle visible off for this when the tween begins and on again when it ends, the alpha property on the effected textfield will then work properly.

Pretty kludgy I know, but it will get the effect to work, and allow the user to select the text when it's visible.

You may also try to wrap the original textfield in a Sprite and do the alpha Tween on that instead, however I don't guarantee that will be a 100% fix.