Clicking Text Element in Tween Halts Animation

Question

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

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.