Mark R. Johnson


[Interactive Screens]
[Amateur Recording]
[24 Hours]




A great deal of custom graphics and scripting work went into 24 Hours. The section below describes techniques used to create the finished appearance and interaction of the 24 Hours project:

Title Screen

The title screen of the 24 Hours project was designed to immediately set the tone of the comic and to catch the attention of the reader -- it is the hook, the gateway into the twisted world of John Dee and the Lord of Dreams. The original cover page for "24 Hours" was used as a foundation for the multimedia project's title screen. However, it was augmented with visual transitions, animation, and a compelling soundtrack to further the impact of the opening screen. To create the title screen, the "24 Hours" cover page was scanned and edited down to fit the computer screen. The lower half of the wooden cabinets pictured on the cover page were cropped out, and the faded image of the hands shielding the obscured face was moved upward to fit on the screen. When 24 Hours is started, the background music begins just as the hands and face first appear, fading in over a black screen. Then, the cabinets and title lettering fades in over the hands and face to form the scene shown in Figure 6, below.

Figure 6. 24 Hours cover page and title screen.

Finally, the contents of the cabinets that appear on the screen begin to morph into those of the cabinets that had been cropped out of the original image. For example, the eyes and hand in the top left cabinet changes into the frightening image of a skull. Likewise, the watch and doll's face in the lower two cabinets on the right morph into a pair of death masks that are wired together. This animation sequence continues to loop, heads slowly fading in and out again, until the reader clicks on the screen to enter the comic book.

The actual morphing effect was created in Adobe Photoshop by creating a base layer on which the initial title screen appears, and then adding separate layers on top of that containing the alternate heads for each cabinet. By adjusting the opacity of these layers, one could create the morphing effect between the two heads in each cabinet.

[Previous Page] [Table of Contents] [Next Page]
    [Return to Top] Copyright 1997, Mark R. Johnson.
Last modified 6/11/97.