Printer Friendly Version

BellaOnline's Flash and Animation Editor

Toggle Button Event Listener

In the last tutorial, we discussed the ActionScript code needed for a toggle button. We discovered that an if statement is used to determine what action Flash should take each time the button is clicked based on the current Boolean value of a variable.

But how exactly do we attach the if statement to the user input (the button click). One way is to put the if statement inside a function and then use an Event Listener to run that function each time the button is clicked.

As we have already set up for our FlashR storybook app, the toggle button is named setTogBtn. Let's call this new function PositionSetMenu because it will position the settings menu overlay on or off the stage as needed.

setTogBtn.addEventListener(MouseEvent.CLICK, PositionSetMenu, false, 0, true);

In the code above, we are attaching a mouse click event listener to the setTogBtn button which will run the PosititonSetMenu function. There are three other parameters after the name of the function. The first two are the defaults for the useCapture and priority parameters. The third parameter sets the useWeakReference Boolean value to the non-default value of true.

By setting the useWeakReference parameter to true, we tell Flash to remove the event listener via the garbage-collection process. You may not have seen this used when programming for the web. However, in programming for mobile devices, we need to remove all event listeners as soon as they are no longer needed in order to conserve CPU and memory resources.

There are two other lines of code that we need to discuss before moving on. In mobile devices, you will not see the familiar hand cursor over a button, as you do in web browsers. The following two lines will tell Flash that we want to see that hand cursor over the buttons in our iPad app.

setTogBtn.buttonMode = true;
setTogBtn.useHandCursor = true;

At this point, we have our toggle button programmed to run a function (PositionSetMenu). Inside that funtion is an if statement that will determine which of two functions (moveSetMenuDown or moveSetMenuUp) will be run next, depending on the Boolean value of the showMenu variable. Now we need to code those two functions.

In our example, these two functions will position the settings menu overlay. However, you can program your toggle button to control other processes, such as playing/stopping background music or showing/hiding an object on the stage simply by what code you use in these two functions.

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