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

[Yusuke96 0]

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/rg-erdr.php?_rpo=t) 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 http://forums.xisto.com/no_longer_exists/. 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:

// import Fuseimport com.mosesSupposes.fuse.*;// set up  zigoEngine to use just simple shortcut animationZigoEngine simpleSetup(Shortcuts);

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:

// declare the variable that will be the button that is clicked (MovieClip)var buttonClicked:MovieClip;

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

// create the array to hold all the names of the movieClipsvar myButtonsArray:Array = new Array(this["myButton0"], this["myButton1"], this["myButton2"]);

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

//myButton0.onRelease = function():Void  { // create the variable that we pass into the scaleButtonDown func var exception = this; // run the scale buttons down function scaleButtonsDown(exception); // set the buttonClicked to this buttonClicked = this;};//

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:

myButton0.onRollOver = function():Void  { // run scale buttons up func and pass in this scaleButtonsUp(this);};//myButton0.onRollOut = function():Void  { // run scale buttons down function scaleButtonsDown();};//

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.

// scale buttons up functionscaleButtonsUp = function (args):Void { // scale the args (remember the button passed in this) to 100 over 1 seconds args.scaler.scaleTo(100, 1);};

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.

// scale buttons down funcscaleButtonsDown = function ():Void { // loop through myButtonsArray for (var i:Number = 0; i<myButtonsArray.length; i++) {  // scale all buttons down over a 1 second period  myButtonsArray[i].scaler.scaleTo(0, 1);  // make the buttonClicked scale to 100 over zero seconds }   buttonClicked.scaler.scaleTo(100, 0);};

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 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)

//myButton1.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton1.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton1.onRollOut = function():Void  { scaleButtonsDown(null);};//myButton2.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton2.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton2.onRollOut = function():Void  { scaleButtonsDown(null);};

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:

// scale all buttons down at start of moviescaleButtonsDown();

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:

import com.mosesSupposes.fuse.*;// set up zigoEngineZigoEngine.simpleSetup(Shortcuts);// declare the variable that will be the button that is clicked (MovieClip)var buttonClicked:MovieClip;// create the array to hold all the names of the movieClipsvar myButtonsArray:Array = new Array(this["myButton0"], this["myButton1"], this["myButton2"]);//myButton0.onRelease = function():Void  { // create the variriable that we pass into the scaleButtonDown func var exception = this; // run the scale buttons down functino scaleButtonsDown(exception); // set the buttonClicked to this buttonClicked = this;};//myButton0.onRollOver = function():Void  { // run scale buttons up func and pass in this scaleButtonsUp(this);};//myButton0.onRollOut = function():Void  { // run scale buttons down function scaleButtonsDown();};//myButton1.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton1.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton1.onRollOut = function():Void  { scaleButtonsDown(null);};//myButton2.onRelease = function():Void  { buttonClicked = this; var exception = this; scaleButtonsDown(exception);};//myButton2.onRollOver = function():Void  { scaleButtonsUp(this);};//myButton2.onRollOut = function():Void  { scaleButtonsDown(null);};//// scale buttons down funcscaleButtonsDown = function ():Void { // loop through myButtonsArray for (var i:Number = 0; i<myButtonsArray.length; i++) {  trace(myButtonsArray[i]._name);  // scale all buttons down over a 1 second period  myButtonsArray[i].scaler.scaleTo(0, 1);  // make the buttonClicked scale to 100 over zero seconds   } buttonClicked.scaler.scaleTo(100, 0);};// scale buttons up functionscaleButtonsUp = function (args):Void { // scale the args (remember the button passed in this) to 100 over 1 seconds args.scaler.scaleTo(100, 1);};// scale all buttons down at start of moviescaleButtonsDown();

Notice from jlhaslip:

This tutorial is not Original material.