Flash - Controls fade in and out on rollovers

Question

I've been hacking away at this a while to come up with a good solution, but basically, I have a Flash project that has a set of controls on it. When you roll over the controls, the controls will fade in, then when you roll out, they will fade back out again. I have all the controls on a seperate movie clip that has the tweens to handle the roll effect. It would seem like you could just go to the frame where you want to start fading in and place from that on roll_over and the frame to start fading out on roll_out. However, it seems like if you come in before the animation has finished, or roll in from the side of the Flash piece, you get weird effects of it not working correctly. My solution is the code below:

function fade_in(evt:MouseEvent) {
    stop();
    if(this.currentFrame == 1 || this.currentFrame == 10) {
     this.gotoAndPlay(1);  
    } else {
     gotoAndStop(10);
    }
}
function fade_out(evt:MouseEvent) {
    stop();
    if(this.currentFrame == 10) {
     this.gotoAndPlay(10);  
    } else {
     gotoAndStop(1);
    }
}

This for the most part solves the buggy issue, but still isn't quite perfect. Does anyone know of a more elegant way of doing this that will reduce the likely hood of a flash bug?

Answer 1

If you look up TweenLite (blog.greensock.com/tweenliteas3/) you can animate through frames in an as you say "more elegant way" It should be a bit smoother and both functions can be reduced to one or two lines each :D

Use their interactive demo to get an idea how it works.