flash / Actionscript - .alpha property not always working

Question

I'm fixing someone else's code and everything is done is actionscript 3.0 on Flash CS5. Here is the actionscript:

var buttons = ["suspend", "dissolve"];
// there are two buttons on the screen. One says 'Suspend' and the other says 'dissolve'.
// When 'suspend' is clicked, information on the word 'suspend' fades in onto the screen
// and, if information on the word 'dissolve' is on the screen, it disappears.

// When 'dissolve' is clicked, information on the word 'dissolve' fades in onto the screen
// and, if information on the word 'suspend' is on the screen, it disappears.

// the code below explains this:

function changeContent (mc:MovieClip):void{

for (var i: int = 0; i < buttons.length ; i++){
    if (buttons[i].associated == mc){ // if 'suspend' or 'dissolve' is clicked
        tweenA = new Tween (buttons[i].associated, "alpha", Strong.easeOut, buttons[i].associated.alpha, 1, tweenSpeed, false); 
        // the line above makes the information corresponding to the button fade in

    }else{
        buttons[i].associated.alpha = 0; // otherwise make the information corresponding to the button disappear
    }
}
checkDone (); // checks if both buttons are clicked.. this part works fine
}

Now, this animation works, when I click 'suspend', the information on 'suspend' fades into view and the information on dissolve disappears, and vise versa. However, if click 'suspend' and then really quickly click 'dissolve' right after (if I click the two buttons one after the other, really fast) then the information on 'suspend' and the information on 'dissolve' but appear and overlap each other. It seems as if the line

buttons[i].associated.alpha = 0; // this line is supposed to make the button which
                                 // isn't clicked disappear

doesn't work if the two buttons are clicked one after the other, really fast. Any idea how to solve this?

Answer 1

You have a tween animation that has a duration, and a statement to set tweened property, so you've got a situation when two parts of your code change one variable while not knowing about it being changed elsewhere. The solution is to stop the tween before setting alpha.

    }else{  
        if (tweenA.isPlaying) tweenA.stop(); // there!
        buttons[i].associated.alpha = 0; // otherwise make the information corresponding to the button disappear
    }

But you need to avoid a situation when one variable is related to multiple objects that can change concurrently, say you want both your "suspend" and "dissolve" associated texts to fade in at once (in different places maybe) and you have only one variable for a tween, you can't control them both. Here we meet the same thing: with this code as is you'll not be able to fade in any text but the last button's! This is because we use tweenA for all possible tweens, even if there can be only one active at a certain time. So, we have to fix it a little more.

var tweenB:Tween; // a temporary tween for a new fade in animation
for (var i: int = 0; i < buttons.length ; i++){
    if (buttons[i].associated == mc){ // if 'suspend' or 'dissolve' is clicked
        tweenB = new Tween (buttons[i].associated, "alpha", Strong.easeOut, buttons[i].associated.alpha, 1, tweenSpeed, false); 
        // the line above makes the information corresponding to the button fade in
        // and now we store a new tween in another var so that it won't be stopped at once
    }else{  
        if (tweenA && tweenA.isPlaying) tweenA.stop(); // And here we stop old tween
        // also protecting self from 1009 if no tween was stored yet
        buttons[i].associated.alpha = 0; // otherwise make the information corresponding to the button disappear
    }
}
tweenA=tweenB; // store newly created tween, if any (!) into our current tween var