Button Animation With Rollover State That Stays When User Clicks A Button

We are going to need animation and I don't like to use time-line animation so I use AS to code my animation. A very good reason to not use timeline animation is this: Say in my example (located here: http://www.creativenetdesign.com/menuWithScalingBox/) say I made the little red squares animate with a time-line animation and when the user rolls over the button I tell it to start. Say the red square is half way through its animation and I rollOff of it. The red square will automatically "jump" to the rollOut animation which will make it appear to change size from say half size to it's whole size and then start to shrink. That would look really bad. But if we use code to do the sizing this will not happen because the code does not care what size it currently is, it will just tell it to become large or small.

Hope I didn't loose you there. My point is we are going to need some imported code to make the AS animation. I like to use Fuse. You can get fuse at www.mosesSupposes.com. In this tutorial/article I will show you how to use it.

Make a directory named "com" in the root directory of your project and in there place the mosesSupposes directory that you just downloaded. Trust me, it is very simple to use (Fuse CAN get much more complex but that is for another article).

Create your buttons

In order to have rollOvers we need buttons. To do this I created a simple rectangle, selected it and hit F8 to make it a MovieClip called button, and gave it an instance name of button0. I opened up that button and made a red rectangle (again use the example as a guide) and then selected it, hit F8 to select it and called it scaler with an instance name of scaler. Then in my root I selected button0 and copied it twice so now there are three buttons on the stage with instance names of button0, button1, and button2.

Now lets code!

Import Fuse
In order to use Fuse for animation we have to tell Flash that it exists. This is pretty simple:


That was simple wasn't it?

Now lets code the buttons!

Coding the Buttons

When a button is clicked we need to know which one it is, and so does everyone else because when we make functions to scale the buttons down (actually just scales down the red MovieClip in the button) we don't want to scale down the button that was just clicked. Lets declare that variable now:


Now lets create an Array that holds the names of our buttons so we can assess them in a for loop:


Now lets add the code for the first button (button0):

The above code creates an exception variable with a value of this (this IS button0) and passes it to the scaleButtonsDown function so that function will scale down all buttons except the "exception" variable.

it also sets the buttonClicked to this (again, this refers to itself [button0]).

Now we will create the rollOver and RollOut functions for button0:


Now before we create the functionality for the other two buttons lets make the scaleButtonsUp and scaleButtonsDown functions because it will become very simple to understand what is happening with only code for one button.

This function takes the args (remember we passed in this [button0]) and scales the button's scaler to 100% over one second. This occurs when the user rolls over the the button.

Simple hu? Now lets make the scale buttons down function, it is a little more complex but easy to understand.

this function creates a loop that will loop as many times as we have items in our myButtonsArray (that'll be three times because our array has 3 items, mybutton0, mybutton1, and myButton2).

In this loop we tell myButtonArray[i] scale to 0% in one second .

Outside the loop we tell buttonClicked (remember we set this to THIS when the button was clicked?).

Then all you have to do is copy the code for button0 and paste it and make it the code for button1 (do the same for button 2)

The very last thing you need to do it to tell all the buttons on the stage to scale down their scaler movieClips as we don't want them big until the user rolls over them:

That's it we are done and now you have buttons that do something on rollOver and something on rollOut but when clicked the rollOver state stays on that button.

Here is all of the code together: