Proper way for animated rollover buttons?

I tried making a rollover text button that plays a movie on it’s up state when the mouse rollsover it and then a movie plays on the down state when the mouse rollsoff it.

Initially I created a button (let’s say btn_home) and created keyframes for the up and down states. In these keyframes I inserted the movie clips. The animation is simply a masked animation of the text colour changing from left to right.

The problem was that it would play fine on the up state when the mouse rolled over the button, but when the mouse rolled off, it wouldnt play the second movie.

I then tried a different approach. The first rollover would go through as a keyframe on the button up state. The second animation would end up being a different instance, placed on the stage in the exact location of the main button. I then used actionscript below to signal the movie when the mouse rolls off of it.

It works fine at the moment, but I was wondering if there was a cleaner way to do it in pure actionscript without having to worry about aligning instances and making so many labels up. There is however a tiny 1 frame lag between when the mouse rolls off the button and when the second movie plays. I wonder if actionscript for controlling both movies would help.

 
//   Navigation buttons
home_btn.addEventListener(MouseEvent.ROLL_OUT, homeOff);
function homeOff(event:MouseEvent):void
{
 mcHomeBack.gotoAndPlay(1);
}

Any feedback on this please?