logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 {

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.


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

|


Add ActionScript+Toggle+Button+Explained to Twitter Add ActionScript+Toggle+Button+Explained to Facebook Add ActionScript+Toggle+Button+Explained to MySpace Add ActionScript+Toggle+Button+Explained to Del.icio.us Digg ActionScript+Toggle+Button+Explained Add ActionScript+Toggle+Button+Explained to Yahoo My Web Add ActionScript+Toggle+Button+Explained to Google Bookmarks Add ActionScript+Toggle+Button+Explained to Stumbleupon Add ActionScript+Toggle+Button+Explained to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Add Static Text To Craft Product Trailer Template

Drop Zones and Transitions in Motion 5

Craft Product Template - Background Layer

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor