Printer Friendly Version

BellaOnline's Flash and Animation Editor

ActionScript Toggle Button Explained

In this tutorial, we will examine a toggle button. One use for this button is to turn something, such as music, on and off. Another is to move something from one position to another. This second example is our task for the settings menu overlay page in our FlashR storybook app. But the process is the same for any use of a toggle button.

So what's involved in the code for a toggle button. The first step in our example is to determine the X and Y positions for the overlay page. We did this in the last tutorial as we assembled the settings menu elements. As you would expect, the on setting for the toggle button will run a function that places the menu overlay on the stage, covering what is currently on the stage. The off position will run another function that moves the overlay page up and off the stage.

But there is one more factor we need to consider. How will we keep track of the location of the overlay page. We need to use a variable that will hold a Boolean value. A Boolean can only have two values - true or false. Let's name this variable showMenu because it will tell Flash the visibility of the menu overlay. The code to create this Boolean is the following.

var showMenu:Boolean = new Boolean(true);

You might ask why we first set the value to true when the menu overlay is initially not visible. This can be confusing when coding a toggle button for the first time. Let's walk it through.

When the user clicks on the toggle button, Flash works through an if statement that will determine how it will position the overlay. If the Boolean value is true, Flash will run a function to move the menu onto the stage. If the Boolean value is false, Flash will run a different function to move the menu off the stage.

When the app first loads, the settings menu overlay is off the stage and the if statement is waiting to be read for the first time. We want Flash to perform the first part of the if statement which will run the moveSetMenuDown function, which will move the menu overlay onto the stage. Therefore, the Boolean must be initially set to true.

function PositionSetMenu(event:MouseEvent):void {


// Toggle whether you want to load or unload the SWF
showMenu = !showMenu;


When the Boolean is true, the second half of the if statement, the else code, will be ignored. Lastly, we set the Boolean to the opposite of its current value. We do this so that the next time the button is clicked and the if statement read, the first half of the statement will be ignored and the second half, the moveSetMenuUp function, will be performed to remove the menu overlay from the stage.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor