Overview:

This is an example of a multimedia design document describing a simple interactive slideshow program about waterfalls. A mockup is a great way to work out the details of a project before it is produced. In the images below, each screen is displayed similarly to the layout the actual functional program might have.

Specification:

This program should run efficiently in a web browser as a Shockwave or Flash movie. The navigation scheme should be easy to use, and the overall dimensions of the program should not exceed 640 x 480, or 800 x 600 pixels.

01-Title_Screen

Title Screen - From here the user may go to the Information (Credits) screen, or the Main Menu.

 

02-Overview_Screen

Main Menu Screen

The user may go to the Information (Credits) screen, or choose one of the navigation arrows. The left navigation arrow button takes the user to the last image in the available images. The right navigation arrow button takes the user to the first image in the available images. Clicking a thumbnail image takes the user directly to that image. The cursor changes to a "Pointing Hand" when any navigation element is rolled-over. Text labels will be placed under each waterfall image, and clicking the text label for each respective picture takes the user to that image.

For all full-screen images below, the Main Menu button takes the user to the Main Menu. The left and right arrow buttons navigate to the next and previous image respectively for all the available images. If the user clicks the left arrow button at the beginning of the available images, the Main Menu comes up. If the user clicks the right arrow button at the end of the available images the Information (Credits) screen comes up.

03-Ash_Cave

Ash Cave

 

04-Burgess_Falls

Burgess Falls

 

05-Columbia_River_Gorge

Columbia River Gorge

 

06-Fall_Creek_Falls

Fall Creek Falls

 

07-Sawtooth_Wilderness

Sawtooth Wilderness

 

08-Victoria_Falls

Victoria Falls

 

09-Credits_Screen

Credits Screen

 

Navigation Maps:

 

title-nav-overview


The above images show the results of navigation from the title screen.

 

The images below show the overall navigation options available to the user from the various screens available in the program.

nav-overview

 

The above mockup image screen layouts were assembled with Adobe Fireworks, and are available here. The mockup images are also available as .PNG and .JPEG images here. You may download the finished source Adobe Director 11.5 Waterfalls movie here.

An example of a finished Shockwave movie of the above design is available here:

 

Note: Waterfall images were obtained from the following URL: http://grandcanyon.free.fr/images/cascade/thumb.html.