The PushButton

[ LiB ]

The PushButton Component is one of the simplest of all. It's a button that you can program in a similar way to how you can program a regular Flash button symbol. To use it requires but a few steps:

  1. Drag the Component to the stage.

  2. Name the instance.

  3. In the Properties panel or in the Component Parameters panel, assign a label and a Click Handler.

  4. Write the Click Handleruse one parameter that will hold the name of the instance that was clicked. All you'll have to do is check to see if this is the instance that was clicked.

Open up file GDA_PROG15.1.fla and notice that I followed the steps above. I dragged the PushButton to the stage to create an instance, and then named the instance clickme . I then changed the label to Click Me! and the Click Handler function to clickmeHandler . This handler detects whether clickme was the instance clicked before it does anything. Check out the following listing. This code was written in the main timelineall Components require their handlers to be written on the same Timeline their instance is on.

NOTE

TIP

You have to check whether your instance was the one that was pressed because when there are many instances on the stage, they all receive a message when the mouse is down.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This function is attached to the // PushButton Component on stage. // It also detects to see if it was // its instance that was clicked. function clickmeHandler(buttonInstance) {   if (buttonInstance == clickme) {         trace("Yeah baby!!");   } } 

The function that we define must have one parameter. This parameter will carry the name of the instance that was pressed. You can then use this information to figure out if this instance of the button was the last button that was pressed in order to execute whatever the button was designed to do.

What if you had multiple buttons on the stage? Take a look at GDA_PROG15.2.fla, and notice that I placed three buttons on the stage. These three buttons are sharing the same Click Handler. The Click Handler is written on the main Timeline in the first frameit's also listed in the following listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This function is attached to the // PushButton Component on stage. function clickmeHandler(buttonInstance) {   // Echo which button was recently pressed.   trace("You pressed "+buttonInstance._name); } 

All this function does is tell you what button instance you pressed. You can easily write up a conditional structure that will route the code to a function that pertains to the last button that was pressed (see Figure 15.2). In other words, you can detect which button was pressed with this one handler and make it do something like saving your game.

Figure 15.2. The relationship between buttons and a Click Handler

graphic/15fig02.gif


The CheckBox

The CheckBox Component is not much more difficult to use or program than the PushButton componentit just introduces a few differences. If you take a look at Figure 15.3, you'll see that there are a couple more parameters for the CheckBox.

Figure 15.3. Adjusting parameters for the CheckBox

graphic/15fig03.gif


Besides having a label parameter, you'll also catch an Initial Value parameter. This parameter is false by default, and all that means is that the CheckBox will be unchecked when the movie is started. If the Initial Value parameter is set to true, this means that the CheckBox is checked.

There's also a Label Placement parameter. This parameter allows you to place the text either on the left or right of the CheckBox.

The Change Handler parameter is similar to the button's Click Handlerit's a function that you write on the same timeline as the instance that will respond when the user clicks on the CheckBox.

GDA_PROG15.3.fla has two CheckBoxes on the stage. They were both dragged from the Components palette. When you drag the CheckBoxes to the stage, Flash creates a very organized component folder in your Library window. Check out Figure 15.4.

Figure 15.4. Neatly packed Components

graphic/15fig04.gif


The program doesn't do much but display the last CheckBox checked. Once you can detect which was the last CheckBox checked (and also know the current state) you can do anything you wish with the CheckBox. See the handler that I wrote in the main Timeline in the following listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This handler takes care of the CheckBox // that was last clicked. function checkboxHandler(boxInstance) {    display = boxInstance._name; } 

The display variable is a variable that is attached to a textbox on the stage. This variable displays the name of the last box instance that was checked.

What if you wanted to check the current state of the box? See the screenshot of my next demo, GDA_PROG15.4.fla, in Figure 15.5, and check out the code.

Figure 15.5. Displaying a CheckBox state

graphic/15fig05.gif


This demo isn't much different from what you have been learning so far; it's merely a combination of what I've gone over so far. You'll notice only one new command, getValue . This command returns the current state of the CheckBox component.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This handler takes care of the CheckBox // that was last clicked. function checkboxHandler(boxInstance) {   display = boxInstance._name; } // This handler takes care of the PushButton function pushbuttonHandler(buttonInstance) {   if (getValueButton == buttonInstance) {     display01 = check01.getValue();     display02 = check02.getValue();   } } 

The checkboxHandler only displays the name of the last instance that was checked. Simple enough.

The pushbuttonHandler goes a step furtherit checks to make sure that the getValueButton instance was the last clicked. It then runs the getValue method on both CheckBox instances and then stores the values in two textboxes on the stage. Everything's neat and everybody's happylet's move on.

The RadioButton

RadioButtons are a nice control to have built in to your movie. They allow the user to only select one option from a group . You can have as many groups of RadioButtons as you want.

Look at Figure 15.6 and notice all of the newly added properties. The panel that you see in the figure is the Component Properties panel, which can be accessed from the Window menu.

Figure 15.6. The parameters for a RadioButton

graphic/15fig06.gif


One important difference between a RadioButton and a CheckBox is the group name. Different sets of RadioButtons should have different group names . These groups will be treated as separate entities.

In demo file GDA_PROG15.5.fla, I have set up a group of RadioButtons called radioGroup . This information can be verified from the Properties panel. I have attached a handler to this group that alerts us, through the Output Window, that the RadioButton's state has changed.

There is also a PushButton on the stage that outputs the state of this group. Check out The following listing to see how this works.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This small program demos how to // use RadioButton Components.  // Let us know when something changed function radioHandler(component) {   trace("radioHandler was called"); } // Let's find the one that is active function buttonHandler(buttonInstance) {   // Make sure this is the button   if (button == buttonInstance) {         // Display the state of each RadioButton         trace(radioOne.getState());         trace(radioTwo.getState());         trace(radioThree.getState());         trace(radioFour.getState());   } } 

Before I start explaining this listing, you should know that I named the radioGroup RadioButtons radioOne, radioTwo, radioThree, and radioFour . I named the PushButton instance button .

The getState method of the RadioButton component returns a Boolean value indicating whether the radio button is selected or not.

The radioHandler function has one parameterthe object that was last clicked on is returned in this one. All the function does is shout out that a button from the group was pressed.

The buttonHandler also has one parameter. This is the button that was last clicked. As there is only one button on the stage, the conditional could be easily omitted. The button simply returns the current state of each RadioButton and outputs this information to the Output Window.

The ListBox

The ListBox is a great alternative to the previous two controls. It can vary the visual hierarchy of your controls and just make things look cool. A ListBox allows you to select multiple options at once, just like a CheckBox setup.

The ListBox has four parameters. Drag one to the stage from the Components panel or open GDA_PROG15.6.fla. Select the ListBox and take a look at the Properties panel. It should look like Figure 15.7.

Figure 15.7. ListBox properties

graphic/15fig07.gif


The Select Multiple parameter will allow the user to select more than one option if set to true. When the parameter is set to true, the user can use the Shift, Control, or the Command key (if on a Mac) to select multiple options.

The Change Handler is, of course, the function that will be called once this box is clicked. It's up to you to write it.

One of the most important parameters here is the Labels parameter. It allows you to enter a list of values that will be displayed when the program is run. If you double-click the Labels parameter, you should get a dialog box similar to that in Figure 15.8.

Figure 15.8. Adding options to your ListBox

graphic/15fig08.gif


You can use the plus sign at the top of the dialog box to add more options. You can use the minus sign to delete the entries, and you can use the Up and Down arrows to rearrange them.

NOTE

TIP

If you're paying close attention you have noticed that I am overlooking the Data parameter. This is because this is an optional parameter that you can use to store extra data. It can come in handy one day so don't forget it's there. You can use the getValue method to retrieve information from an internal Data variablethe getData method only works with RadioButton.

Check out the following listing. It'll show you how to retrieve values for a box that was set up for multiple selections.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This demo shows you how to install // and use the Component ListBox function buttonHandler(component) {   if (button == component) {            // Since we have Select Multiple ON, we use "getSelectedItems".         // This returns an array object with everything selected.         // If Select Multiple was OFF, you have to use "getSelectedItem"         var selectedChoices = choices.getSelectedItems();                  // Since we don't know how many objects were selected, we         // loop for the length of the array. This is an array of         // objects that have two properties: label and data. Since         // we didn't put anything in the data parameter, we will         // only be looking in the label section.         for (var i = 0; i < selectedChoices.length; i++)           trace("You have selected: "+selectedChoices[i].label);   } } 

This ListBox Component returns an array of objects if you have your Select Multiple option selected. If the Select Multiple option is off, then use getSelectedItems to retrieve the selections.

It's simple to get the information that the user input. As an array of objects is returned, it's best to assign the array to a local variable. Once the array is assigned, you have to find out how many options are selected in order to store them all. Loop for the length of the array to find out the number of selected options. Each object can use the iteration variable to access its properties. Each object returned has a label and a data property. As you didn't assign any data, you won't reference that property.

NOTE

TIP

The ListBox is very complicated internally and has a lot of methods . If you're interested in finding out more about these methods, look up ListBox in your Flash Help file.

The ComboBox

The ComboBox is another great Component. You can use it to add a drop-down box that allows users to select from a list, and if you, the programmer, adjust its parameters, even type their own values.

The Component parameters for the ComboBox are shown in Figure 15.9.

Figure 15.9. ComboBox parameters

graphic/15fig09.gif


Demo GDA_PROG15.7.fla contains a ComboBox and a PushButton that repeats the information selected in the ComboBox. The information in the ComboBox was added in much the same way the information was added for the ListBox in the last sectionall you have to do is double-click on the Labels property and add or delete entries.

The Data entry can be left blank as usual. It can come in handy when you want to include values with your labels, but ignore it for now.

The Row Count parameter allows you to change the amount of rows that are displayed when the drop-down box is open. If there are more options than there are rows, then a scrollbar will appear.

The Editable option is a new one. This option, if true, allows the user to type their value into the box. If the value is false, the user can only choose from the list.

Let's check out the code that was put in the button's handler.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This demo shows you how to install // and use the Component ListBox function buttonHandler(component) {   if (button == component) {     trace(combo.getValue());   } } 

Easy to decrypt, it's plain, simple, and neat. The ComboBox instance in the stage was named combo this is the instance name that I used to execute the getValue method.

When the user clicks on the button, the value of the ComboBox is output.

The ScrollBar

If you ask me, the ScrollBar Component is the easiest Component to use. You can just drag it to a dynamic text field and it installs itself. See GDA_PROG15.8.fla and play with the settings. You don't even have to adjust the Component properties to make it a vertical or horizontal ScrollBarjust drag it to the side or bottom and you're set.

NOTE

TIP

It's a great idea to name your dynamic textbox instance before dragging the ScrollBar to it. If you don't, your instance name will be chosen at random. It's also a great idea to set the text box to Multiline. If you don't do this, you may not get a working scroll bar.

The ScrollPane

The ScrollPane is a combination of a lot of the other objects. You use it to allow the user to scroll around and view a graphic on the screen. When you drag out an instance of the ScrollPane, it should look like the one in Figure 15.10, except it should have no graphics in it yet. Check out the file GDA_FIG15.9.fla for the complete story.

Figure 15.10. The ScrollPane at work

graphic/15fig10.gif


There is no code associated with this file except some adjusted parameters. See Figure 15.11 so we can go over what was done.

Figure 15.11. ScrollPane parameters

graphic/15fig11.gif


The first parameter, Scroll Content, takes the linkage export name of a Movie Clip. In this file, I created a graphic and gave it a generic linkage name. I then passed on this name to the ScrollPane. The horizontal and vertical parameters for the scroll bars are set to auto this disables the scrolling if the graphic is small enough to be within the pane. Drag

Content was set to truethis allows the user to move the graphic around by dragging it with the mouse.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net