How to Build a Basic Toggle Button (AS2)

ActionScript 2.0 Flash

kweku and nab have been interested a play/pause button — essentially a toggle button, something that “remembers” when it’s been clicked — and fortunately, the mechanics are fairly simple.  The key to the desired functionality is a Boolean variable.  Let’s take a look. 

Building the button itself

Even though we’re speaking of a “button,” this widget is going to be built out of a movie clip symbol.  Why?  The answer is found in the ActionScript 2.0 classes that define buttons and movie clips:  the Button class doesn’t allow for any way to direct the playhead along its own timeline, while the MovieClip class features two methods (gotoAndPlay() and gotoAndStop()) that do.  By using a movie clip, you’ll find you can create as many custom “button states” as you please and display them visually by sending the movie clip’s timeline to the desired frame.

In a new FLA file, use the Oval tool to draw a circle on the Stage, approximately 42 x 42 pixels.  Select the circle and convert it to a movie clip symbol.  Double click the movie clip to enter its timeline, which brings you back to the circle shape itself.  Select frame 2 and add a new keyframe.  This gives you the original circle on frame 1 and an identical duplicate on frame 2.  Change the color of the circle on frame 2 in a way that looks to you like a highlighted “over” state (the same thing you might do to the Over frame of a button symbol).  Add a blank keyframe to frame 3 and draw a square roughly the same size.  Duplicate to frame 4 and change the colors as appropriate.  (kweku and nab, in your own work, you’ll want to put play/pause artwork on these frames … two frames worth of “play” artwork, default and highlighted, on frames 1 and 2, and two frames worth of “pause” artwork, default and highlighted, on 3 and 4.)

When you’re done, return to the main timeline to add your code.

Coding up the button

Select your new movie clip “button” by clicking on it.  Give it an instance name in the Property inspector.  For the sample code here, I’ll use btnToggle.  Create a new layer for your ActionScript, if you don’t have one already.  In your scripts layer, open the Actions panel and type the following:

btnToggle.stop();
  btnToggle.toggled = false;
btnToggle.onRelease = function():Void {
  this.toggled = !this.toggled; // this flip-flips the Boolean
    if (this.toggled) {
  this.gotoAndStop(3);
    } else {
  this.gotoAndStop(1);
  }
}

Let’s break it down so far.  The first line invokes MovieClip.stop() on the btnToggle instance, which does nothing more than stop its timeline.  Without this line, the movie clip would animate through its four frames as usual, fluttering.  The second line creates a new toggled property on the movie clip and sets its to false by default.  This is effectively the same thing as having typed this …

var toggled:Boolean = false;

… in frame 1 of btnToggle’s own timeline.  It’s just more convenient to keep all our code in one place.

The MovieClip.onRelease event handler is the fun part.  A function is assigned to the onRelease handler of the btnToggle instance.  This function does very little, but what it does do is important.  First, it flip-flops the previously declared Boolean, toggled, to the opposite of whatever it is currently.  This occurs thanks to the logical NOT operator (!).  The expression is simply the following:

this.toggled = !this.toggled;

… which is to say, “The toggled variable’s value in this timeline is being set to ‘NOT the toggled variable’s value’,” which means false is set to true (or true is set to false, as the case may be).  Then it checks the value of toggledif (this.toggled) — and sends the playhead to the relevant frame (note:  the expression if (this.toggled) is just a shorthand way of saying if (this.toggled == true)).

The movie clip begins on frame 1, of course, and toggled defaults to false.  The very first time this function is triggered, it sets toggled to true, then runs through the if statement.  At this point, toggled is true, which means the first clause is performed — this.gotoAndPlay(3), which sends the playhead to frame 3 (the square shape’s “up” artwork).  The next time this function is triggered (because of another mouse click), toggled is set to false and the second clause is performed — this.gotoAndPlay(1) — which sends the playhead back to frame 1.

Introducing over states

If you want the button to show off those “over” states (frames 2 and 4), you’ll need to handle additional events, such as onRollOver and onRollOut.  Check out the new code:

btnToggle.stop();
btnToggle.toggled = false;

btnToggle.onRelease = function():Void {
  this.toggled = !this.toggled; // this flip-flips the Boolean
  if (this.toggled) {
    this.gotoAndStop(4);
  } else {
    this.gotoAndStop(2);
  }
}
btnToggle.onRollOver = function():Void {
  if (this.toggled) {
    this.gotoAndStop(4);
  } else {
    this.gotoAndStop(2);
  }
}
btnToggle.onRollOut = function():Void {
  if (this.toggled) {
    this.gotoAndStop(3);
  } else {
    this.gotoAndStop(1);
  }
}

The toggling itself — an actual change to the toggled variable — only occurs in response to an actual click (onRelease), but the other event handlers note the value of that variable and send the playhead to whatever frames make sense.  Note that in this updated code, frames 3 and 1 in the gotoAndStop() statements have been changed to 4 and 2.  Why?  Well, we’ve introduced highlights (over states), so this time when the artwork is toggled, it should go to the highlighted (over) frame when the change occurs.  After all, the user’s mouse would still be over the movie clip button.  The unhilighted frames, 3 and 1, are only visited when the user’s mouse leaves the button.

Using the button

In actual practice, your toggle button will contain additional code.  You’ll want the button to actually do something, rather than just update visually.  Presumably, you’ll only need to add code to the onRelease handler, but the end result is completely up to you.

btnToggle.onRelease = function():Void {
this.toggled = !this.toggled; // this flip-flips the Boolean
  if (this.toggled) {
    this.gotoAndStop(4);
    // additional code here, for what to do when
    // the button is clicked to its “on” position
  } else {
    this.gotoAndStop(2);
    // additional code here, for what to do when
    // the button is clicked to its “off” position
  }
}

Additionally, you can check the state of your button via ActionScript, simply be referencing its toggled property:

// Code that bases its actions on the state
// of this toggle button …
if (btnToggle.toggled) { … }

Leave a Reply