Victor Gaudioso

Victor Gaudioso is a Sr. Application developer for an advertising firm in Hollywood, CA.  He specializes in Flash / ActionScirpt but also programs in other languages including but not limited to C#, XAML, WPF and ASP .NET.  He has engineered Flash sites for the major entertainment studios including Disney, Universal, TouchStone, Mattel and Warner Bros. among others. Victor is known as dvlnblk in the http://actionscript.org forums and has recently been appointed a site moderator.  AIM: dvlnblk2004 Yahoo: victoratdeadline

View all articles by Victor Gaudioso

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

Happy Coding!

Victor Gaudioso