Inserting a Button
You can use a Button control interaction to create complex simulations or to control other objects onscreen. In this example, you'll modify the page where you placed the Flash controls in Chapter 9, "Adding Rich Media Content." There are two different types of Button control interactions, listed in Table 10.6.
Table 10.6 Button Category Interactions
|
Icon |
Interaction Name |
Description |
|
|
Toggle button |
Remains in a certain state when clicked by the learner. |
|
|
Push button |
Returns to its original state after being clicked by the learner. |
Open the Web page you created in Chapter 9 with a Flash movie, save, and name the file. To insert three CourseBuilder Button controls, do the following:
Place the cursor before the hyperlinked word Play and insert a new table. The table should have two rows and three columns and be 350 pixels wide. You can set the other attributes to 0.
Drag the word Play into the second row, first column. Drag the word Stop into the second row, second column. Drag the word Rewind into the second row, third column. Place the cursor in the first row, first column cell. This is where you'll insert the first button, the button that plays the Flash movie.
Insert a CourseBuilder interaction, and select the Button category. Click on the push button.
Select the General tab. Leave the default name in the Interaction Name text box. In the Appearance drop-down list, select Emboss. In the Type drop-down list, make sure that Push is selected. The Highlight on Mouse Over check box should be selected.
-
The Initial State drop-down list should be set to Deselected and select Enabled in the drop-down list box next to that setting. The General tab of the Button control should look like Figure 10.22.
){kind=link}
Figure 10.22 You set up most of the Button control settings in the General tab.
-
Judge the interaction when the user clicks the button.
-
Set the interaction as Not Judged. The Tries and Time limits should be set to Unlimited.
-
The Button control should not be placed in a layer.
-
Click OK. You'll set up the Action Manager later in this section.
-
The interaction places some text in the table cell that you need to delete.
-
Place your cursor close to the new button until you see the <interaction> tag in the tag Selector. Select the <interaction> tag in the tag Selector, and copy the interaction by using the Copy command (Edit, Copy on the menu, Ctrl+C for Windows, or Command+C for Macintosh). Place your cursor in the cell in the first row, second column and paste the interaction by using the Paste command (Edit, Paste on the menu, Ctrl+V for Windows, or Command+V for Macintosh). Also, paste the interaction in the cell in the first row, third column.
You now have three different Button controls for the CourseBuilder interaction in this Web page. When you select one of the CourseBuilder interactions, you can drop down the Name list box and select which one you will edit when you click the Edit button. Before you proceed, preview the Web page in a browser. When you click each Button control, you should see a pop-up message.
Now you'll go into the Action Mgr tab and change the feedback for the buttons:
Select one of the interactions. Next, select the first Button interaction, Button_Push01, in the Name list box, and click the Edit button.
Select the Action Mgr tab. You can delete the Check Time and Check Tries segments.
The remaining segment, Button Feedback, contains a single behavior: Popup Message. Select the Popup Message line and delete it by clicking the Cut button.
-
Add a new action to the Button Feedback segment by selecting one of the actions from the drop-down list at the top of the dialog box, shown in Figure 10.23.
){kind=link}
Figure 10.23 The drop-down list at the top of the Action Mgr tab lists the types of new expressions, including actions, that you can add in Action Manager.
-
Toward the end of the list, you should find the Play_Flash command that you loaded with the JavaScript Integration Kit for Flash 5 extension. With that action displayed in the drop-down list, click the Add button. Or, you can use the Control Shockwave or Flash action.
-
The Play Flash dialog box appears. Select the coffee movie and click the OK button.
-
A Play_Flash action is added to Action Manager, so clicking the Button_Push01 button now triggers this action.
-
Click OK to save your settings. Preview the Web page in a browser and check that the Play button does indeed play the Flash movie as expected.
-
Repeat these steps, selecting the second button, Button_Push02, and adding the Stop_Flash action. Then select the third button, Button_Push03, and add the Rewind_Flash action.