Francis Baptiste

Graduate of Langara Electronice Media Design Program and Lagnara Publishing Program in Vancouver, BC, Canada. Practicing member of the GDC (Association of Graphic Designers of Canada). Freelance Actionscript developer and web designer currently living in Kelowna, BC, Canada.

View all articles by Francis Baptiste

When designing in Flash, using a button symbol for an animated button presents several problem. The biggest problem for most designers being, if you put an animation in the roll over state, it'll snap back to the beginning once you roll out. Today I’ll show you one way you can approach animated buttons using a MovieClip and the nextFrame() and prevFrame() methods. The advantage to this method is when you hover on the button then mouse off, it’ll play backwards from wherever it is, instead of snapping to the beginning the way it would if you designed it using the built-in button symbols.

Get Adobe Flash player

It’s a simple four-step process:

Step 1:
Create your movie clip animation. This can be anything at any length. Usually 30 to 45 frames will do it. For my example I’ll just create a black square that increases in width (lame, yes, but it gets the point across). Add an instance of your movie clip to the stage. Give it an instance name. I’m naming mine btn.

Step 2:
In your AS file (or in the timeline, if that’s where you’re writing your code), set the button mode for your movie clip to true. Also, add mouse event listeners for mouse over and mouse out.

btn.buttonMode = true;
btn.addEventListener(MouseEvent.MOUSE_OVER, onOver);
btn.addEventListener(MosueEvent.MOUSE_OUT, onOut);

Step 3:
Add a boolean, to say whether or not the mouse is hovering over your button. Then write the functions for your mouse events, feeding a true or false to the boolean.

var overBtn:Boolean = false;
function onOver(e:MouseEvent):void {
    overBtn = true;
}
function onOut(e:MouseEvent):void {
    overBtn = false;
}

Step 4:
In the actionscript, add an event listener for the enter frame event. In your onEnter function add an if statement that says your movie clip will go to the next frame if the mouse if over your button and to the previous frame other wise.

addEventListener(Event.ENTER_FRAME, onEnter);

function onEnter (e:Event):void {
    if(overBtn){
        btn.nextFrame();
    }else {
        btn.prevFrame();
    }
}

The advantage of doing your buttons like this is the button will play through your animation if your hovering, and when you move the mouse away it’ll play backward from where it is, instead of snapping back to the beginning, as it would if you’re using a built-in button symbol. It’s a good way to make smooth transitions. If you want to take it a step further, you can incorporate a tweening engine like Tweener or TweenLite to make things even smoother.