Making a continuous up and over button animation

By Blue_Chi | Flash | Intermediate

In this tutorial you will learn how to make a button with a true reversed up and over animation. The trick here is not to put the animation inside the button itself but put the button inside the animated movie that you as whole would use as a button. The animation method of this tutorial is to create a one way animation that rolls out as you put the mouse on the button and rolls back once back starting from its current position once you move the mouse away from the button.

Example:


FLA source file here.

1- Make an empty MovieClip by pressing Ctrl+F8. Name it MyButtonMC

2- The animation used in this tutorial plays is a one way animation that starts from the "Up" state of the button animation and stops at the end of the "Over" state animation. This is done by making a very simple animation using motion tweens and KeyFraming. You can make the animation the way you do as one object stays static during the whole animation, in this example the black cirlce will act as the hit area in the final working version.

3- After making the animation that you wish to use for your button, you will have to create the object that will interact with the user's mouse pointer. In our example, we use the black circle as the button. If you didn't do that already, draw a circle on a new layer and convert it to a Button Symbol by highting it and pressing on F8.

4- While the button is highlighted, using the property inspector, give it the instance name of "enter_btn"

5- Now go back to the main timeline of the movie and insert a new instance of your whole button animation. To do this you would have to view the Library (Ctrl+L) and drag a copy of "MyButtonMC" symbol from there into the canvas of the main timeline.

6- Highlight your movie clip then use the Action Panel to apply the following code to it:

onClipEvent (enterFrame) {
if (go) {
nextFrame();
} else {
prevFrame();
}
}

onClipEvent (load) {
var go;
stop();
enter_btn.onRollOver = function() {
go = true;
};
enter_btn.onRollOut = function() {
go = false;
};
enter_btn.OnRelease = function (){
//what you want your button to actuall do when clicked goes here.
}

You should be able now to test your movie to see the button working properly. The code used is very basic; the enter_btn movieclip goes either backwords or forwards by checking the variable "go". The variable "go" changes when you roll the mouse over the button and when you roll it out of it.

End of tutorial.

x