Theatre Design & Technology - Spring 2002 - 52

work well together. (ImageReady now comes bundled with
Photoshop.) ImageReady can save animated scenes as "animated GIF" files or as HTML pages made up of separate, nonanimated GIF files. (GIF is an acronym for Graphics
Interchange Format, a standard file format developed by
Compuserve. Animated GIF files are special collections of images, contained in a single file, which display sequentially.) A
Web browser is needed to display ImageReady files. This
meant that we needed to provide a way to hide the browser
window when we projected our ImageReady scenes.

The director, John Schneider of Theatre X
in Milwaukee, wanted to try something
different. In our initial meetings he talked
about animated scenic backgrounds.

the design process
The development of the animation was basically divided into
two parts: the development of the static images and the animation of those static pieces along designated paths. The show's
design required six basic static scenes, with portions of each
being animated.
Each of the six scenes started out as a pencil sketch
which was scanned and brought into Photoshop (fig. 1) where
it was painted with pastel colors. We then divided each scene
into foreground, middle ground and background objects, and
we cut and pasted the objects onto three different layers. This
layering process allowed the animated elements to move in
front of some objects and in back of others, thereby giving the
scenes a three-dimensional quality. The various animated objects that needed to move in the scenes were also created on
separate layers in Photoshop with each placed in the appropriate layer in relation to the fore-, middle or background layer.
(For those not familiar with Photoshop, layers are best visualized as separate pictures on acetate overlay sheets.)
To illustrate the layering technique, let's look at the scene
in the forest which has wind blowing the leaves and fish jumping in and out of the river. The forest image was divided into
two layers, a foreground which contained the front half of the
river and all the land in front of it, and a background layer
which contained all of the scenic elements behind the river.
The fish were created on a layer between the two forest layers.
This allowed us to use ImageReady to move the fish images
beneath the foreground and follow an animated path out of the
river and into the air (in front of the background) and disappear back into the river (behind the foreground layer) (fig.
2). The blowing leaves were drawn on a top layer in front of
the foreground layer, since we did not need the leaves to disappear behind any of the scenery, they simply followed a path
that began and ended off of the viewing area.
The scenes we created in Photoshop retained their layers
when we opened them in ImageReady. For the flying fish animation, the student animators moved the fish layer, frame by
frame, forming a fluid motion of fish jumping out of the water
and back into it.

Figure 4. The blowing leaves animation, frame number 33.

slices
ImageReady is designed to reduce the amount of data needed
to display pictures, especially animations, on the Web where
each byte of data is precious when you are connected via a

Figure 5. Animated snow scene in Macromedia Flash.

TD & T

S P R I N G

2 0 0 2

Table of Contents for the Digital Edition of Theatre Design & Technology - Spring 2002