Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Building the Quiz Interface with Components

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

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

[View full size image]

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 then reselect and drag again.

Flash's new auto-alignment feature (represented by the dashed line that sometimes appears when you drag an object around) should help you get it right.

[View full size image]

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

Notice 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.

[View full size image]

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

[View full size image]

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 also vital; the value you enter is the value that will be stored if the user selects this particular button. Therefore, if the user selects this radio button, Flash will know that the value of q1_radio is a. If the user selects a different radio button (although you haven't created it yet), Flash will 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.

[View full size image]

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, the buttons all still belong to the same radio button group, q1_radio.

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

[View full size image]

<form> element in Flash, as there is i227. And remember that th218 <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's no way to tell it unilaterally what to do with all of this data. Telling Flash to do something with the data requires 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;
};

[View full size image]

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.

Note

You might remember that for all the buttons we've used up to this point, we've added the _btn suffix to the instance name to indicate that it's a button. So you might be surprised to see 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're now finished with this screen.