The following process will let you create a roll-on / roll-off animation for your “buttons”.
Part 1: “Button” Setup
Create a movieclip which will act as the button. Inside this movie clip create the roll-on animation you wish to have for your button. Do not create the roll-off portion, this will happen automatically.
Regardless of how many layers you create inside if your movieclip (for text, art, etc), create an actions later with a stop frame at the start and end of your animation. For example, if you had a 20 frame roll-on animation, you would have a stop frame at frame 1 and frame 20.
Part 2: Actions Layer Code Setup
Next place the following code on Frame 1 of your Actions layer of your Main Timeline (not inside of a symbol):
This section of code is your event listener for the roll-on, roll-off ONLY. This has nothing to do with clicking, or navigation. Change “b1” to your instance name.
b1.addEventListener(Event.ENTER_FRAME, animateBtn);
This next bank of code you do not need to change at all, but does need to show up in your actions. I recommend putting it all the way at the bottom, out of the way.
var curr:Number;
curr = 0;
function animateBtn(e:Event):void {
if(e.target.hitTestPoint(mouseX, mouseY, false)) {
if (curr < 10) {
e.target.nextFrame();
curr = curr + 1;
} else {
stop();
}
}else{
e.target.prevFrame();
curr = curr - 1;
}
}
Step 3: Linking Movieclip to code
However many movieclip buttons you have, add an our event listener to it. Remember this event listener will only control the roll-on, roll-off animation, you have to do another event listener to listening for the clicking.