Modularity is one of the foundations on which the web is built. A web browser is essentially an engine or interpreter that loads elements from a vast database of HTML pages. Modular elements including blocks of text, links, and graphics all take their places based on the html code that defines their relationships. The fundamental interactive object in a web page is the hyperlink, whose behaviour is similar in the infinite number of contexts in which it exists. Whether it appears as red text, green text, , or is practically invisible, its behaviour is consistent. Click on it and it performs an action.

A web page consisting of solely HTML provides relatively few interactive posssibilities. Even with addition of other technologies such as Flash and DHTML, the actions taken with the mouse are point and click type gestures. The complexity of what happens after the click can vary tremendously: from simply loading a new page, to performing a complex search in a database, or manipulating a piece of equipment.

I have dealt so far with the click aspect but the point gesture is also quite important. An interactive screen-based context must provide a way for a person to know what to point to and what to click on. Two tools available to identify what is clickable are the cursor image, and the ability to change the appearance of the area the cursor is on top of, commonly referred to as a rollover ( ). Within a web browser in a straight-forward HTML context, the appearance of the cursor placed over a hyperlink is always the same. The HTML page itself defines the rollovers. Again the use of modularity makes this possible and relatively straightforward.

By far the most common gesture in interactive screen-based works is point and click. Other interactive gestures involve moving the mouse while a button is up or down. Moving the mouse, while holding a button down, is referred to as dragging. The following examples illustrate moving and dragging.

• cursor moves with the mouse
• cursor varies a parameter in the space
• draggable objects

Due to their modular construction, these techniques can be used in different contexts by changing graphics associated with the objects. The first example can be modified in a number of different ways. Here are two possibilities:

• cursor snake
• revealing cursor

The extent of modularity in software development environments is increasing. Macromedia's Director is a case in point. Puppet Motel was created in version 4.04 and the current version is 8.5. Director has always contained its own programming language called Lingo. In version 6 Macromedia introduced what they called behaviours. Behaviours were essentially modular Lingo code that could be easily applied to a number of different contexts. Behaviours are applied by dragging a desired behaviour from a palette of choices onto Director's stage or score. The number of behaviours has grown to over 100. Behaviours include: rollover member change (graphic rollover), rollover cursor change (cursor change) and jump to marker (point and click). Whereas the programmers of Puppet Motel had to create all of their interactive techniques from scratch, programmers can now use modular versions included with Director.

Puppet Motel, like any other interactive screen-based work uses point and click gestures. Observing the sheer number of cursor actions that involve the click gesture in the Rooms Interaction section, clearly demonstrates the popularity of that gesture. The more interesting and complicated gestures are the continuous ones involving move and drag. Despite having no access to behaviours, the programmers of Puppet Motel must have employed strategies to reuse their Lingo programming code in modular ways.

The use of a number of unique interactive techniques in different contexts in the work is evidence of modular techniques. Take, for example, the dragging in the breakfast room. At the breakfast table, dragging the middle of the cover of the cereal box, causes the ingredients to grow in size, their text becoming legible. When the mouse button is released the ingredients shrink back into the face of the box. Two pieces of cereal in the bowl use the same technique with a slight variation. Dragging one of the cereal pieces causes it to rise out of the bowl with an object following it. In one case what follows is the text of a story. In the other case what follows, is the plug object that can be clicked to return to the hall of time. In both cases, when the mouse button is released, the objects fall back into the cereal bowl. This technique can now be achieved using a combination of behaviours.

The Breakfast Room

Puppet Motel uses what I call a space effect to reinforce the notion of depth on the two dimensional screen. This effect is employed when the cursor is a larger graphical object, not a small hand. The effect involves changing the size of the graphic so that it becomes larger when the mouse is moved down (closer to the person using the mouse) and smaller when the mouse is moved up. Most often this technique is used in conjunction with a two dimensional graphic simulating a three dimensional space. This space effect is used extensively and is very effective at creating a sense of depth.

• space effect example

Puppet Motel relies heavily on modular construction and coding. Developing any elaborate new media work also requires extensive modular coding. Puppet Motel, however, was created when fewer modular resources were available in the production environment. Modular elements were used extensively, but incorporated enough variation, so that different applications of any given technique did not seem trite.