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

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

Using the RadioButton Component

In this task, you will create the first page of the test. This page will make use of the RadioButton component to create a multiple-choice-type test. As you will see, using the RadioButton component is much like adding radio buttons in Dreamweaver, which you did in Lesson 15.

Open test_dante.fla from your elearning folder.

You can also find this file in Lesson 16's elearning folder on the CD-ROM.

If you like, take a moment to look over the timeline to get a sense for what the file already contains and how it's structured. The file uses the pagelike structure you used in earlier lessons, where keyframes are clustered every ten frames. You should also note that I've already added a copy of the preloader that you built in Lesson 11.

Click in frame 10 of the components layer.

As you can see, a question is already on the page, though its answers are not. In addition, you'll see a green line running vertically down the left side. This is a guide, which you can use to help line up the radio button elements.

Open the Components panel (Window > Components). In the component group menu, make sure Flash UI Components is selected. Drag an instance of RadioButton onto the stage, aligned with the guide. If a Resolve Component Conflict dialog appears, choose Replace Existing Component (Not Undoable), and press OK.

Using components is usually a simple matter of drag and drop. However, conflicts sometimes occur when a component has already been added to the document and customized. For example, you can change the appearance of components by modifying their skins. Component skins are the collection of graphic assets used to create the component. If you look in a file's library after you add a component, you will see several folders, one of which contains the component skins. You can modify these skins just like you would modify any asset in your library.

If you attempt to drag out a new instance of a component from the Components panel after you have modified an existing component, this dialog appears. If you choose the default, Use Existing Component, then the new component dragged out will use the modified skins. If you choose Replace Existing Component, then all of your customizations will be lost. Either way, all components—new and existing—should function as normal. This dialog resolves only a conflict of appearance, not of functionality.

The appearance of this dialog aside, I did not customize any of the skins. However, when I was testing this lesson, I saw the dialog pop-up a few times anyway; evidently, Flash thinks I did customize some of the components. This could be due to slightly different versions of the component or perhaps even an inadvertent change on my part. So it really shouldn't make any difference which of these two options you choose, and I recommend choosing Replace Existing Components only to ensure that the versions you have in your document are standard.

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 it does not accommodate the full text string.

Select the label, and using the free transform tool, drag to the right, so the whole label is visible.

This kind of customization has no effect on the functionality of the component. It just makes the full label readable for the user.

With the radio button still selected, set the Initial State to false, the Group Name to q1, the Data to 0 and the Label Placement to right.

The Initial State refers to whether the option is selected when the screen first loads, and the false setting indicates that it should not be selected.

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 here is the value that will be stored if the user selects this particular button. So if the user selects this radio button from the whole group, then Flash will know that that the value of q1 is 0. If the user selects a different radio button (though you haven't created it yet), then Flash would know that the value of q1 is 1, 2, or whatever the Data setting is for that button.

Obviously, the Label Placement setting enables you to specify where to place the label relative to the button itself.

This 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 more copies of it, one beneath the other. Change the labels and data values as follows. 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: 1.

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

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

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.

Drag an instance of the PushButton component onto the stage, and align it against the guide. Again, if the Resolve Component Conflict dialog appears, choose Replace Existing Component, and click OK.

The PushButton component is going to play the role of 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 may resemble HTML forms in many ways, they are not identical. There is no overarching <form> element 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. To do something with the data requires some ActionScript, which you'll write later. Clicking this button will serve as the event that triggers a custom function, which will be called onClick, and whose purpose is to process the data.

With the push button still selected, enter Continue as its Label. Enter onClick as its Click Handler. Enter q1_btn as its name.

The 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. This one, unlike some of the movie clips you created in earlier lessons, won't be manipulated. But it will definitely need to be seen.

Again, the Label value is for the sake of the user. It has no effect as far as Flash is concerned.

Entering onClick as the Click Handler value, on the other hand, has quite an effect on Flash. Any time this push button is clicked, Flash will execute a function called onClick().

You might be wondering when you'll get to enter the gotoAndStop() action; after all, isn't that usually attached to Next and Continue buttons? But this movie's going to work a bit differently. You will need a gotoAndStop() action at some point, to get the user to the next page, but it will be embedded in the onClick() function. The advantage to this architecture, which represents a departure from earlier versions of Flash, is that a single script handles almost all of the functionality in the movie, which makes the movie easier to maintain.

You are now finished with this page.



Not a subscriber?

Start A Free Trial

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