[Yusuke96]

Quote

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.creativen...ithScalingBox/) 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:

// import Fuse
import com.mosesSupposes.fuse.*;
// set up  zigoEngine to use just simple shortcut animation
ZigoEngine 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 movieClips
var 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 function
scaleButtonsUp = 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 func
scaleButtonsDown = 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[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)

//
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 movie
scaleButtonsDown();

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 zigoEngine
ZigoEngine.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 movieClips
var 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 func
scaleButtonsDown = 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 function
scaleButtonsUp = 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 movie
scaleButtonsDown();

Notice from jlhaslip:

This tutorial is not Original material. quoted. Warned.
http://www.actionscript.org/resources/arti...tton/Page1.html