Scene Creation

The graphics created for mysteryjones.com are photo-realistic compilations from various original photography by the creator. Props and scenes were used to approximate the fictional CyberCity, a strangely nostalgic impression of the Internet itself as it would be seen through the genre of 1950's Film Noir.

One example of this photo-manipulation was to create the office of mysteryjones, with objects that could be used as links to the website's content. After many storyboards to establish the scene, props were photographed under proper lighting conditions so that they could be placed within the scene seamlessly. Pieces of the scene were then altered so that they could be manipulated by the user (i.e. hands were removed from the clock face so that they could be rendered to the user's local time).

Animated Avatar

Cybercity seemed a lonely place without the help of mysteryjones, our guide through the networked jungle. His appearance and animation were made possible using a chroma removal technique of filming common actions in front of a solid green screen. In between each motion, it was essential to return to a standard mark - facing forward, head straight, arms down at sides. This way, each motion could be animated independently and linked together to simulate realistic actions.

To reduce file size for internet transfer, video was reduced to 10 greyscale colours and vectorized in Flash. Vector images can be scaled to any size without a loss of quality, which allowed very close scenes and very distant scenes with the same footage. This method of optimization allowed mysteryjones to have over 360 frames of animation (30 seconds of total animation at 12 frames per second) while maintaining a file size under 300Kb.

Music & Sound

A total sound experience was necessary to give mysteryjones.com a cinematic approach to web design. Small sound effects were added to the character animation (footsteps, reaction to punches) and the scenes were given a running monologue, describing mysteryjones' continued struggle against the archetypal governor to save Cybercity. These scenes were written (tongue firmly in cheek) to set the film noir atmosphere and express mysteryjones' mission: to help people share their ideas through multimedia, without losing sight of their vision in the complex reality of the Internet.

The soundtrack was excerpted from Chet Baker's "Deep in a Dream" re-release from Blue Note Records, the first two minutes of "Alone Together", also featuring Pepper Adams on baritone saxophone.

"Dynamic Decay" Portfolio

The focal point for this project is the collected work of the creator, which is presented as a portfolio in different file folders scattered throughout mysteryjones' office. Since the graphics only allowed ten files to be shown on the desk and fifteen inside the filing cabinet, it was necessary to ensure that the best items from the portfolio were displayed first.

Rating scale	Age Decay	Dynamic Decay

To implement this, two systems were combined to create an effect called "dynamic decay". First, users were encouraged to rate their impression of the portfolio item, from -2 to +2. These ratings would push higher quality material to the top of the list for the subsequent visitors. But quality was not the only factor to consider, since the creator's most recent work would be more relevant to prospective clients. To achieve this a database of all portfolio items was assembled and marked by their release date. Each time mysteryjones.com is viewed, software splits the XML portfolio into four sections: new, old, older & oldest. New items remain unaffected, while old items have their rating decreased by 1, older items by 2 and finally the oldest material is automatically rated 3 points lower. The combination of these create a portfolio in constant flux, with older items slipping to the bottom unless they are consistently rated highly by visitors.