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 Flash^R 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 {

if(showMenu)
{
moveSetMenuDown();
}
else
{
moveSetMenuUp();

}
// 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.

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.


Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.