Tutorial 5
Using imagemaps in the media object.
Instructions
Drag and arrange states onto the canvas so that you have the following setup:
Next, enter the following prompts into their respective states:
| keiko | Click on the country where Keiko the killer whale lives now. |
| sorry | I'm sorry, that's $target. Try again. |
| right | You got it, that was $target. |
The use of "$target" in the text of the states will substitute the relevant text into
that portion of the prompt. This is an example of Tcl variable substitution, a way to
add dynamic values to your application. More information on this technique is available
in later tutorials.
Once you've configure the prompts, use the context menu on the "imagemap" state to raise the open media dialogue. Enter the words "North America" in the text region of the dialogue, and choose a location for the image.
Once you've configure the prompts, use the context menu on the "imagemap" state to raise the open media dialogue. Enter the words "North America" in the text region of the dialogue, and choose a location for the image.
 |
Next, you'll be adding an imagemap to the application. An imagemap is an image that has clickable regions defined on it. These regions can be configured to correspond to separate output ports or to set a variable. To create an imagemap, select "Edit" from the open media dialogue. This will open the imagemap editor. |
Select "Open..." to load an image. For this state, you'll be using the image
"canada.gif" which is included with the tutorial application. Locate and select this file
in the file browser. The image will then be loaded into the imagemap editor window.
To define a clickable region on the image, you must select one of the drawing tools and outline the region which you wish to define with it. In this case, the best tool to use is the freehand drawing tool. Draw individual regions over three countries in the image: USA, Canada and Greenland. Don't worry about Alaska, just draw one region for the USA.
To define a clickable region on the image, you must select one of the drawing tools and outline the region which you wish to define with it. In this case, the best tool to use is the freehand drawing tool. Draw individual regions over three countries in the image: USA, Canada and Greenland. Don't worry about Alaska, just draw one region for the USA.
 |
Once you've drawn the required regions, you'll need to configure them. To do so, right click in a region and select "Properties" to raise the imagemap region dialogue. If you've made an error in drawing a region, you can select "Delete" to remove it and start over. |
This dialogue is used to configure various attributes of a clickable region. The only thing that you
need to configure for this tutorial is the name of the region. This name will be associated with the
out port that corresponds to the region. Open the imagemap region diaogue for each of the four regions
that you have defined and assign it a name.
As mentioned previously, a media object with an imagemap in it can have either one port or several ports, with each corresponding to a clickable region. In the option menu of the imagemap editor, select "One port per region". With this option set, at run time, the media object exit through the port that corresponds to the clicked region. A variable named "$target" will also be set to the name of the selected region. This is the value that you entered in your prompts earlier.
Once you've finished configuring the imagemap, select "Ok" in the imagemap editor, and "Ok" in the present media dialogue.
When you create an imagemap for "canada.gif", RAD saves the imagemap in a file named "canada.map" which can be found in the same directory as the image. If you want to use this imagemap in another application, you can simply open the map file from the imagemap editor and all of the existing regions will be loaded. You must always have the image file as well, since the image itself is not copied into the map file.
As mentioned previously, a media object with an imagemap in it can have either one port or several ports, with each corresponding to a clickable region. In the option menu of the imagemap editor, select "One port per region". With this option set, at run time, the media object exit through the port that corresponds to the clicked region. A variable named "$target" will also be set to the name of the selected region. This is the value that you entered in your prompts earlier.
Once you've finished configuring the imagemap, select "Ok" in the imagemap editor, and "Ok" in the present media dialogue.
When you create an imagemap for "canada.gif", RAD saves the imagemap in a file named "canada.map" which can be found in the same directory as the image. If you want to use this imagemap in another application, you can simply open the map file from the imagemap editor and all of the existing regions will be loaded. You must always have the image file as well, since the image itself is not copied into the map file.
 |
To remove the imagemap, open the remove media dialogue in the "remove_imagemap" state, and select "imagemap". Then run your application to see the imagemap in action. |