Toggle Button Event Listener

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.

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.

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

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