• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 16. Building a Quiz with Components > Using the ComboBox Component

Using the ComboBox Component

Now that the first question's page is developed, it's time to do the second. On this page, you'll use a different component, the ComboBox component. Though graphically it will look much different to the user, behind the scenes it will work almost exactly the same as far as Flash is concerned. The combo box will contain a number of options, each of which will have its own label and data value. And at the bottom of the page, another Continue button, identical to the one you finished at the end of the last task, will appear.

Select frame 20 on the components layer. From the Components panel, drag out an instance of the ComboBox component. As usual, if the Resolve Component Conflict dialog appears, choose Replace Existing Component. Position it not too far below the question, because you need to leave some room for the drop-down menu.

The ComboBox component creates a drop-down menu. By default, it is not populated; that is, it has no data or labels. You'll fix that in a moment.

Before doing so, though, let's pause a moment and introduce a new programming term: arrays. An array is a special kind of variable. That is, an array is a piece of information stored under a name, which can be accessed or changed later in a script. What distinguishes an array from a variable, though, is that arrays can store multiple values. For example, we could create an authors array that contains several values, such as Dante, Milton, Austen, and 1306. In script, the array might look as follows:

							authors = ["Dante", "Milton","Austen", 1306]

Arrays can hold diverse types of data, as you can see above, where a number is grouped with three text strings. Another thing to understand about arrays is that the data stored in them appears in a certain order. “Dante” precedes “Milton,” which precedes “Austen” and so on. Items in an array are always indexed, which simply means that their positions are recorded in sequential order, as in 0, 1, 2, and so on. This enables you to access these items by their indexed value, or, in plain English, specify that you want to pull item 2, whatever that may be (in this case, “Austen,” since the indexing always starts with 0).

To work with combo boxes, you will have to create arrays. Fortunately, Flash hides most of the programming behind the creation and handling of arrays, so you don't need to be an arrays expert. But you should know what an array is. In addition, if you understand that array values are always enclosed in [] square brackets, as in the example above, you'll understand why the ComboBox component parameters use square brackets.

With the combo box selected, double-click the Labels field of the Parameters tab of the Property inspector. Click the + button four times to add four lines. From top to bottom, name them Cassius, Phlegyas, Brutus, and Judas. Click OK. Following the same procedures, enter 0, 1, 2, and 3 in the Data field. In the Rows field, enter 4. Give the component a name of q2.

By entering these values, you are effectively creating a pair of arrays: an array of labels and an array of data values. Flash will correlate the labels and data values by their respective index values. For example, Flash knows that Cassius goes with 0, because they both appear first in their arrays and so share an index value of 0.

When you are finished, the Property inspector should look like the one in the following screenshot. Notice that the values you have entered are listed in the proper array format. I told you Flash made it pretty easy!

Go back to frame 10 and select the push button. Choose Command+C/Ctrl+C to copy it. Select frame 20 again in the components layer. Press Shift+Command+V/Ctrl+Shift+V, which is the shortcut for Paste In Place.

The pasted button should be positioned and configured identically to the one in frame 10. And that's almost exactly what we want. It needs to call the same function, onClick(), and its label should be Continue.

But it is not yet unique, since it shares the same name as the first button.

Change the push button's name to q2_btn.

This gives the push button a unique identity.

It also completes the second page of the test.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint