Roll-on / Roll-off

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.