Prof. Man-Gon Park Division of IT& Comm. Colombo Plan Staff College

1. AUTHORWARE SYSTEM:MOUSE-DRIVEN INTERACTION Prof. Man-Gon Park Division of IT& Comm. Colombo Plan Staff College

2. CONTENTS 1. Buttons, Hot Spot, Hot Object, Target Area 2. Creating Your Own Buttons 3. Hot Spot Interactions 4. Hot Object Interactions 5. Target Area Interactions

3. Mouse-Driven Interactions The Interactions that use the mouse are: • Buttons • Hot Spots • Hot Objects, and • Target Areas.

4. Buttons • Buttons are the means to conventional navigation. You’ve probably seen multimedia titles that have buttons labeled “Next”, “Previous”, and so on.Pushing such buttons invoke further actions, such as advancing to another page.

5. Hot Spot • A Hot Spot is a rectangular area, which if clicked, invokes a response --- some new graphics, a sound, or a jump to another section of the project.

6. Hot Object • A Hot Object is similar to Hot Spot. Hot spots are rectangular but a hot object doesn’t have this restriction. The entire object is clickable.

7. Target Area • A Target Area involves moving an object from one location to another. Usually, one of the destination areas is designated as being “Correct”. For example, you might create a child’s game where the child is asked to drag the object to the correct spelling of the object.

8. Creating Your Own Buttons You can create your own buttons by following these steps: 1. Draw a rounded rectangle (or rectangle, or use the polygon tool). 2. Add a fill color. 3. Select it. 4. Copy it (Ctrl+C) 5. Paste it (Ctrl+V)

9. 6. Color it Black. 7. Place it on top of the original button. 8. Use the arrow keys to nudge the black version down two and over two pixels to the right. 9. Select the black image. 10. Use Attributes>Send to Back.

10. 11. Add text to the button. 12. Make the text transparent. 13. Drag over all three objects to select them all. 14. Group them by selecting Modify>Group 15. Move the button to its desired location.

11. The Button Editor To achieve a polished and professional look of your own created buttons, you should have at least two “Looks” or states to your button: One before the button is pressed, and another while it’s pressed. You should also associate a sound with the button-push. These features are added by using the Button Editor.

12. The Button Editor The Button Editor enables you to associate different look to a button, depending on its state. A button in its “Up”(unselected) state should appear different from its “down” (selected) state. To view the Button Library dialog box, follow these steps: 1. Add an interaction icon to the flowline. 2. Add a response icon.

13. Figure. The Button Editor Dialog Box

14. The Button Editor • For a “Help” button, you would probably want to display text, so a display icon would the appropriate choice. For a “Quit” button you need to invoke a calculation icon containing an Authorware function, so you would attach a calculation icon (See Figure for a complete flowline.)

15. Figure. A Flowline Containing Two Button Responses

16. The Button Editor 3. Specify “Button” as the type (it’s the default) 4. Double-click the response type icon ( ). 5. You will then see the Button Response Properties dialog box, shown in Figure. Notice the first tab says, “Button”, corresponding to our choice for response type. 6.The current button definition is shown graphically in the upper left corner of Figure.

17. Figure. The Button Response Properties Dialog Box. To view this, double-click on the button response type icon within an interaction.

18. Push that button “Help” to view Buttons Dialog box as shown below. This dialog box shows the current list of available button styles for the piece. The above Button Dialog Box, is used to select a button style, font family and font size

19. The button captions in above figure are all the same, and match the response icon’s name. If we had double-clicked on the response type icon for the Quit button, all captions in above figure would have reed “Quit”. The dialog box merely shows the author the set of available button-types. To change the characteristics of an existing button-type, push the Edit button. To add a new button, push the Add button. In either case, the Button Editor will open. If you choose to edit one of the standard buttons, you will be asked if you would like to create a copy to work with. It’s generally a good idea to do so, so you don’t lose any of the original standard button types.

20. The Button Editor Dialog Box

21. The Button Editor Dialog Box • The Button Editor dialog box is used to add or change the following button properties: • Captioning • Providing for up-to four different “looks”; one each for up, down, inactivate or when the cursor rolls over the button. • Applying a sound to the button as it is pushed.

22. The Button Editor Dialog Box • Specifying the location of the button caption. • Adding a graphic instead of a caption. The Components of the Button Editor includes: • The States window. • Button Description. • Button Assets window

23. The Button Editor Dialog Box The State Window Button Assets Window Button Description

24. States Window • Each button has four possible states or conditions. This means you can customize user feedback in many creative ways. For example, you could have one button graphic for its up state, another for its down state, and yet another if it’s inactive. • One of the characteristics of interactive multimedia is the ability to provide feedback.

25. States Window • Differentiate active from inactive buttons and button that have been pushed from those that haven’t Add an audio click as a button is pushed.Use the different media. Use your creative skills, make use of the multi in multimedia!

26. Purpose of Button States • UP is the state when the button is unused. That is, the button has not been pushed. • DOWN is the way the button will look when pushed. A common technique is to somehow highlight the button when it has been pushed. When the mouse is released, the button returns to its up state. If you want sound to play as the button is pushed, attach the sound effect to the down state.

27. Purpose of Button States • OVER is the way the button should appear when the mouse is positioned over the button, Sometimes this is called a rollover. • DISABLED is the way you want the button to appear when it is not available. A common practice is to dim such buttons.

28. Application of State to Button • To apply a button look to a state, select the state, and then import the button graphic that will apply to that state. For example, you might use an imaging program to create a button called Help-up. A second button, called Help-down, would also be created. They would differ from each other slightly. Perhaps the “down” version would be darkened, or have the light appear to come from a different angle.

29. Button Description • Use the Button Description text box to enter up to 80 characters of descriptive text. This is not the text to be used on the button: that is its Label. The Automatically Check option creates buttons that toggle between checked and unchecked, and is used with radio buttons and check boxes.

30. Button Asset Window • Here is where the creative work begins. Within this section of dialog box, we define the graphic and associated sound for each state.

31. Button Display Window • The large white area is where the button is previewed. It will be blank when you first enter this dialog box, provided you have chosen to add a new button. If you editing an existing button, it will be shown in this area.

32. Button Graphic • Click in this drop-down menu area to import a graphic to be used a button. The usual Authorware graphic formats are supported.

33. Button Label • This is the text that optionally appears on the button. Using this field, you might specified a different caption for each state, or chose to delete a caption in one of the four states. The label is actually entered in to the Button Name field in the Button Options dialog box.

34. Associating Sound with States: The Sound Property • Use this drop down list to specify when to display a sound that was imported for the button. Each of the states may or may not have an associated sound to play. • Click the Sound Import button to import a sound to associate with a button. Figure given below shows the resulting Load Sound dialog box. • Click the Play button on the Button Editor dialog box to hear the sound you’ve imported

35. Figure. The Load Sound Dialog Box. Specify the file name, and then push the Import button.

36. Button Interactions • When you add a button interaction to the flowline, Authorware automatically creates a default button in a default location in the Presentation window. The button’s name will match that of the icon used to create the button. Similar to all interactions, when the button is clicked, the contents of the associated result (target) icon are executed. By default a button’s look and name consist of a traditional button shape with a name matching that of the icon that created it.

37. Button Interactions • The above facts are shown below: Fig: An Example Showing That Button and Icon Names will be the same.

38. Switch over to Authorware 4.0 for: 1. Creation of Simple default Buttons by following Example, and then.

39. Changing the Button Name • Authorware creates buttons, one for each icon. The button labels match their respective icon names. You will alter the name of button with the help of opening the Properties:Response dialog box. Do this by double-clicking the response type icon. If you alter the name here, the icon’s title will change accordingly.

40. Changing the Button Name Figure: The Properties Dialog Box for Button Responses.

41. Assigning Shortcut (Hot Keys) to Button • With the help of Properties Dialog box you should assigned keystroke in addition to being able to push the button. For example, you might want to use Ctrl+Q for the Quit Button and Ctrl+H for the help button. • You should accommodate upper and lower case by using the “or” separator (“|”). To allow H or h, enter: H|h

42. Making a Button Perpetual • This option makes the button active, even if the interaction is exited. Don’t forget to erase when the button when it is no longer needed. • Switch over to Authorware 4.0 to Example Example 5.2

43. Creating a Perpetual Quit Button Follow the steps that follow to create a Quit Button that is always active. 1. Create an interaction with a button response type. 2. Attach a calculation icon to the interaction icon. 3. Open the calculation icon and add: Quit(0) as the single statement. 4. Select the interaction icon and set its layer to 10 (any number above zero). This will keep the button on the top layer. Switch Over to Authorware4.0 to explain Example5.3

44. Controlling the Active State of a Button: The Active if Field • Suppose you only want the button to be active under a certain condition. In that case, you would specify the condition in the option “Active If” at Properties Response Dialog box. • Switch over to Authorware 4.0 to explain Example 5.4

45. Specifying How to Show an inactive Button: The Options Field • There are two options, which specify how to show an inactive button: dim the button (the default) or hide it. In the example “Counter”, you can see we chose to make the button dim when the value of counter wasn’t within the specified limits. This is because we did not check the Hide option button.

46. Showing a Default Button If you are presenting a series of buttons and want one to be the default (that is, it will be pushed if the Enter or Return key is used), check the Make Default button for the default button only. A heavy line will be drawn around the button.

47. Specifying a Custom Cursor If you want the cursor to change shape while over your button, push the Cursor button, and then choose a cursor shape from the list. You can add your own custom cursors to the list by using programs specifically for this purpose.

48. Specifying a Button’s Position & Size You can specify pixel values to precisely locate a button. However, it is much easier to simply drag and drop. That is, use your mouse to drag your button to its desired location, then release the mouse button.

49. Specifying the Button Type Clicking on the “Buttons” button or the preview button displays what the default button looks like, or allows you to select another button type via the Button Library.

50. Hot Spot Interactions • Hot spots are rectangular areas over which the user can click, double-click, or simply move the cursor. As the hot spot is activated, the contents of the associated result icon are executed. • To create a hot spot, switch over to Authorware 4.0 to Examples 5.5 & 5.6