Whitewater Example Using Annotations


Introduction
Installation
Capabilities
Design examples
Usage notes
This example is derived from design example1. However, in this example, behavior will be defined using textual annotations as opposed to the multiview editor. Also, the narration will be recorded and will not rely on the use of a text-to-speech synthesizer. I assume that you have already stepped through the first design example and have a working knowledge of DEMAIS. Another important note is that if you used spaces in any of the storyboard names, you must remove them. Unfortunately, the underlying parser does NOT handle spaces within a content object's name, for now. Also, do not use hyphens (-) in a content object's name for a similar reason.

First, record your voice using the narration editor's capture function. Open your design from example 1. Open the content manager and then open the voice narration. Press the record button in lower left corner and start reading the text aloud. When finished, press the stop button and close the narration editor. The MP3 narration file was placed in the media\audio directory off the main application directory.

Open your first storyboard for editing using the content manager. Using a mouse, double click on the storyboard to edit. Using a stylus, just tap on the storyboard to edit. Sketch a short, but wide rectangle at the bottom of the storyboard. Within that rectangle, tap or click once to bring up a file browser. Select the narration audio file you just recorded. An audio controller will be scaled and positioned to fill that rectangle. The storyboard should look similar to this.

Anywhere on the canvas, enter the text Go to S, where S is replaced by the name of the storyboard to navigate to. Play the audio (select the play button on the controller) and listen up to the point where you want a navigation to occur and press pause. Then sketch an ink stroke from the controller to the text. Notice the visual language icons that appear. The source event is a synchronization marker that uses the current media time of the audio controller as its default value, while the destination action picks up the semantic meaning from the text. Replace the default action of navigation with a transition. The storyboard should look similar to this. Perform the same sequence of steps for the other storyboards.

All that is left is to start the audio playing. Go to the first storyboard and move the audio controller back to media time 0. Sketch an ink stroke from the storyboard's start symbol to the audio controller and enter a reasonable delay time. The final storyboard should look similar to this.

You could also define this same behavior using a multi-view. Assuming you have erased the textual annotations, open a multi-view and drag each stoyboard into the multi-view editor. Notice how the audtio controller remains visible. You can adjust the controller and sketch an ink stroke from the controller to another storyboard. Once complete, you end up with a multi-view that looks similar to this.

To operationalize the design, press the "play" button the lower left corner of the main application window and your design is now a working example! Be sure to save the design to a file!