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

Lesson 16. A Component-Based Flash Quiz > Building the Quiz Interface with Comp...

Building the Quiz Interface with Components

In this task you'll return to Flash and build the quiz interface using Flash components. When you are finished, the first screen of the quiz will look complete. It won't work—that will require a little ActionScript—but at least it will look right.

Return to Flash and open dante_quiz.fla, if necessary.

You can also close Dreamweaver. You won't need it for this lesson.

Click Frame 1 of the form layer. Open the Components panel (Window > Components). Expand, if necessary, the UI Components category. Drag an instance of the radio button onto the stage, beneath the question.

Using components is usually a simple matter of drag and drop. If you have trouble aligning the radio button on the first try, just let it go, and reselect and drag again. Flash's new auto-alignment feature (represented by the dashed line that sometimes appears when you are dragging an object around) should help you get it right.

With the radio button still selected, in the Parameters tab of the Property inspector (which should be activated automatically), click in the Label field and type, It's not. It is a sin of weakness.

Press Return/Enter to apply the value. This text string now appears beside the radio button, where it previously said radio button. By labeling each radio button, your user knows what she or he is selecting.

Notice, though, that part of the label is truncated. The label area beside the button is wide enough to accommodate the words, radio button, but does not accommodate the full text string.

Select the RadioButton component instance, and using the Free Transform tool, drag the box to the right, to make the whole label visible.

Customization does not affect the functionality of the component. It just makes the full label readable for the user.

With the radio button still selected, set the Data to a and the Group Name to q1_radio in the Parameters tab of the Property inspector.

The Group Name setting is critical: This is the name of the radio group, and the name under which the actual data will be stored. The Data setting is likewise vital: The value you enter is the value that will be stored if the user selects this particular button. So if the user selects this radio button, then Flash will know that the value of q1_radio is a. If the user selects a different radio button (though you haven't created it yet), Flash would know that the value of q1_radio is b, c, or whatever the Data setting is for that button.

This radio button is now good to go. Of course, by itself it doesn't make much of a group.

Copy the radio button and paste three copies of it, one beneath the other. Change the labels and data values as follows. All should have the Group Name set to q1_radio. When you are finished, adjust the length of the label areas to accommodate the long labels.

Label: Suicide is cruel towards one's relatives. Data: b.

Label: Because suicides want to hurt God. Data: c.

Label: Suicides' souls are so poisoned that they cast away their bodies. Data: d.

In this step you individualized each of the buttons, both for the user (by changing the labels) and for the computer (by changing the Data values). In spite of this individuation, they all still belong to the same radio button group, q1_radio.

Remember not to change the Group Name; all four should be q1_radio.

Drag an instance of the Button component onto the stage.

The Button component is going to be the Submit button, so you'll have to configure it to fulfill that role. To do that, you should first understand how Flash handles a form made of components.

While Flash component forms might resemble HTML forms in many ways, they are not identical. There is no overarching <form> element in Flash as there is in HTML. And remember that the HTML <form> element has an action attribute that lets you specify what the Submit button should do (such as POST the information to another page).

Because Flash doesn't see these elements as a part of a larger form, there is no way to tell it unilaterally what to do with all of this data. For Flash to do something with the data requires some ActionScript, which you'll write later. Clicking this Submit button will serve as the event that triggers a custom function, much like the ones you've written throughout this book, all of which used the following syntax:

myButton_btn.onRelease = function() {
  // some code here;

With the push button still selected, enter Next Question as its label. Give it an instance name of q1_button.

The instance name, as you probably remember from earlier lessons, is this object's unique ID. Thanks to this ID, this object can now be seen and/or manipulated by ActionScript. Again, the Label value is for the user. It has no effect as far as Flash is concerned.


You might remember that for all of the buttons we have used up to this point, we have added the _btn suffix to the instance name to indicate that it is a button. So you might be surprised that the instance name on this button is _button. The reason for the change is that the Button component is distinct from the standard Button symbol in Flash, however confusing that might seem.

You are now finished with this screen.



Not a subscriber?

Start A Free Trial

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