|
In this example, I will step you through the
creation of a simple narrated slide show consisting of a single voice over
and several photographs of a recent whitewater rafting trip. However, you can design and use
your own narration and photographs if you wish. As I go through the example, keep in mind
that DEMAIS is a design tool, not a prototyping tool, meaning that DEMAIS
supports the creative thought process rather than the creation of a
high-fidelity prototype.
As I step you through this example, I will describe the key components of DEMAIS and the interaction differences between using a stylus and mouse. When DEMAIS launches, you should see the main application window appear. Along the bottom of the main application window are three quick-command buttons for opening the content manager, toggling between the storyboard and multiview editor, and operationalizing a sketch. The initial main window places you in the storyboard editor, which is used to edit a storyboard in the current design. Pulling down the Storyboard menu enables you to view and navigate among all the storyboards in the current design. Spend a few minutes sketching on the canvas and editing that sketch using gestures. To sketch an ink stroke using a stylus, place the stylus against the canvas and make a stroke. Using a mouse, press the left mouse button and make a stroke. To activate a gesture using a stylus, press and hold the modifier button on the stylus before you sketch an ink stroke. Using a mouse, press the right mouse button and sketch an ink stroke. A gesture is drawn using a thicker black line to differentiate it from a non-gesture ink stroke. To activate a cut gesture, sketch an 'X' or squiggly line over the top of the ink stroke(s) you want to delete. To activate a selection gesture, sketch a circle around the ink stroke(s) you want to select. To activate a copy gesture, sketch a 'C' over the ink stroke(s) you want to copy. To activate a paste gesture, sketch a 'V' anywhere on the canvas. Let's move on with the example. Using the moue or stylus, sketch a large rectangle somewhat centered on the screen. Left click the mouse or tap the stylus within the rectangle to bring up a file dialog browser. If a dialog browser does not appear, then DEMAIS did not recognize your sketched rectangle as an actual rectangle. Either re-sketch the rectangle or increase the APPLICATION_RECTANGLE_THRESHHOLD property in the properties file In the dialog browser, locate the image you would like to import and select it. The image is scaled and positioned to the sketched rectangle. Create a title for the image by pressing and holding the left mouse button or stylus on the storyboard canvas. A text insertion cursor will appear. After entering the desired text, select that text using a selection gesture. By holding the CTRL key and pressing the up and down arrows you can change the font size. If you release the CTRL key, you can use the arrow keys to position the text, or simply drag the text with the mouse or stylus. Make two copies of the storyboard using the Storyboard::copy menu command located either in the menu bar at the top of the main application window or in the pie menu set. To activate the pie menus using the mouse, right click anywhere on the canvas, but not within a sketched rectangle. To activate the pie menus using the stylus, press and hold the modifier button, and then tap the stylus anywhere on the canvas, but not within a sketched rectangle. The two different menu components are synchronized so that you can perform any command using either set of menus. Within each copied storyboard, replace the current image with another one from your set. Using a mouse, left-click on the image and select an image appropriate for that storyboard. Using a stylus, tap on the image and select an image appropriate for that storyboard. To update the text caption placed under the photograph, first delete that caption using a cut gesture, then re-type a more appropriate caption. Also, update the name of the storyboard in the text field located at the bottom center of the storyboard editor window. Now let's create a voice narration to accompany the storyboards. To create a voice script, select the Window::Voice Script menu command in the main menu or pie menu set. A narration editor window will appear. Type what you think is the appropriate dialog and then insert synchronization markers where you want the storyboard transitions to occur. The narration editor should look similar to this. Once you are satisfied with the text content and location of the synchronization markers, close the voice script editor window. You can re-name the voice script in the content manager window. To open the content manager window, select the left-most quick-command button located at the lower left of the main application window or select the Window::Content Manager menu command in the main menu or pie menu set. In the content manager window, right click on the narration object and select 'properties'. A dialog appears in which you can enter a new name. To synchronize the voice script text with the storyboards, we will use the multiview editor. To create a multiview, select the second icon from the bottom left, or select the Edit::Multiview menu command in the main menu or pie menu set. An important feature of DEMAIS is that you can create as many multi-views as you like containing any of the storyboards and narrations, thus supporting a rich set of complex behavior Next, open the content manager window. Click on and then drag the voice over from the content manager to any cell in the multiview window. Then do the same for each of the storyboards. The multi-view editor should look similar to this. From each of the voice script synchronization markers, sketch an ink stroke from the synchronization marker to the desired storyboard. This specifies that when the synchronization marker is reached during playback, the specific storyboard should be displayed. The default action assigned to the behavioral ink stroke ia a navigation action. To enhance the design, replace the default action of navigation with a medium-speed, dissolve transition. Using a mouse, drag and drop the Transition action icon from the visual language icon panel (located along bottom of the main application window and has a 'T' in it) to the behavioral ink stroke. Using a stylus, tap on the Transition action icon and then tap on the desired behavioral ink stroke. A dialog appears prompting you to select a transition type (wipe or dissolve) along with a transition speed (slow, medium, or fast). All combinations have been tested and function correctly. I may add more transition types in the future, but for now, these are enough to demonstrate the idea. The displayed transition icon displays small letters indicating your selected choices. At this point, the multiview editor should look similar to this. To finish the design, sketch an ink stroke from the first storyboard window's start symbol to anywhere in the narration text. Notice the green start symbol that appears. When the design is operationalized, the first storyboard is displayed, the narration begins playing, and transitions to the specified storyboards occur when the synchronization markers are reached. The final multiview editor should look 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! |