It's the Great Shockwave, Charlie Brown

Carve (and design) your own cyber jack-o'-lantern

By Bob Schmitt
October 25, 1996

A year since its release, Macromedia's Shockwave is the most popular tool for viewing multimedia on the Web. The hundreds of thousands of designers who were already using Director found it an easy transition to designing Shockwave movies for the Web. Shockwave's incorporation into the next version of Netscape will further boost its popularity.

Happy trails to you

A very popular Director technique is the trails ink effect, which leaves a trail of duplicates behind when you drag a graphic across the screen. Designers often use this technique to simulate drawing, since the trail appears as a solid line. I've varied this simple technique to simulate virtual pumpkin carving.

Look at the two main graphics that make up the pumpkin, shown in Figure 1. The base graphic is the background image and the inside of the back of the pumpkin. Over this I placed the second graphic, which is the front of the pumpkin.

Figure 1. The background graphic shows the sky
and the pumpkin's innards. It's overlayed by the
foreground graphic, the pumpkin's front skin.

To simulate the effect of carving away the front graphic, I placed it over the base graphic, turned on the trails ink function, then quickly moved the pumpkin front out of the visible area of the movie. This leaves behind a trail image of the pumpkin skin in the graphic's original position. The nature of this trailed image (a temporary copy of the original graphic) allows us to create an erasing effect by dragging an invisible little dot across the pumpkin. Rather than drawing, we're erasing — or in this case, carving away — portions of the pumpkin skin to reveal the underlying graphic, the pumpkin's innards.

Both of these things — the setting of the trails effect and the movement of the invisible graphic (the little dot) — are accomplished with Lingo, Director's authoring language.

Lingo is easily understood, since it uses plain English statements. For example if you want a Lingo script that will jump to another frame in the movie, it's as simple as go to frame "whatever". But, before we dive into our pumpkin's Lingo, it's important to understand a few of the basic workings of Director.

Director Basics

Three basic components make up any Director movie: the Stage, the Cast and the Score.

The Stage is the canvas of the movie, the visible area where text and graphics are placed.

The Cast stores the movie's elements, including graphics, sounds, palettes, scripts and text. It's a library of the movie's elements, and to use an element, it must first be imported into the Cast.

The Score is the movie's timeline. It's a grid of cells made up of frames (running horizontally) and channels (running vertically). Frames act very much like the individual frames of a motion picture, and each frame can contain different elements in different positions. For the Pumpkin game I use only two frames (seen in Figure 2).

There are several different types of channels.

The tempo channel controls the movie's speed, measured in frames per second (fps).
The palette channel holds custom palettes for each frame.
The transition channel holds several
Two sound channels let you play two audio tracks.
The script channel is where you place Lingo scripts, which activate when the movie reaches or exits that frame.
Finally, the score offers 48 sprite channels, where you place Cast members (mostly graphics) that will appear on the Stage.

Now that we've covered Director basics, let's look at the Lingo script that sets up the pumpkin skin (shown in Figure 1).

Lingo Language

Figure 3 shows the code in the first of the jack-o'-lantern scripts, on startMovie. The first line calls one of Lingo's built in handlers. The lines of code in this script are activated at the start of the movie.

Figure 3. Lingo contains several built-in
handlers that activate when certain events
happen in the movie. For example, on the
start of the movie, as in this case.

Line 2 calls the puppetSprite command to put the sprite contained in channel 2 (the pumpkin skin) under Lingo's control.

Line 3 turns the trails property of sprite 2 on.

Lines 4 and 5 move the pumpkin skin graphic off the stage by setting its horizontal and vertical position to a point outside the confines of the stage. (Lines 6 and 7 are outside our discussion here, so we'll ignore them.)

Line 8 issues the updateStage command, which tells the movie to show these changes on the stage. The next line starts Lingo's built-in timer, which is used later in this movie.

The end command closes the handler in line 10.

This handler has moved the pumpkin skin graphic off stage, leaving in its place a trail of the image — which the user can now erase. The entire operation is instantaneous and invisible to the user.

Virtual Carving

Next let's look at what makes the carving possible. I created an invisible shape (unfilled and unstroked) with Director's oval tool and placed it over the pumpkin skin.

This shape is in sprite channel 4, and its only purpose is to capture the user's mouse clicks on the pumpkin's face. When the user clicks on this invisible sprite, a mouseDown handler goes into effect.

This handler moves another invisible sprite (this time a small round dot) to the tip of the cursor. Lingo instructs this dot to follow the cursor, which has the effect of erasing the trailed image of the pumpkin face and revealing the pumpkin innards on the layer below.

Figure 4 shows the script that makes this work.

Figure 4. The mouseDown handler is another predefined
Lingo handler. It's activated when the mouse button
is pushed down while placed over an object that has
a mouseDown script attached to it.

As with the startMovie handler, the on mouseDown command in line 1 sets this script in motion. In line 2, the puppetSprite command places sprite 3 (the dot) under Lingo's control.

Lines 3 and 4 set the horizontal and vertical position of the dot (sprite 3) to match the location of the mouse cursor, minus three pixels. (We subtract three pixels from the mouse position to compensate for the dot's registration point, which is set to the graphic's upper left corner. Because the dot is a shape cast, created with Director's Tool Palette, its registration point cannot be altered, unlike a bitmap graphic which can have its registration point repositioned. Consequently, without the offset, the registration point of the shape would map to the tip of the cursor and appear as if the dot was beneath the cursor rather than directly on its tip. By offsetting the graphic, it appears in the correct position.)

Line 5 then updates the stage.

After this, the handler enters a repeat loop. This loop, comprising the lines between repeat and end repeat, plays as long as the mouse button is held down. It continually moves sprite 3 (the dot) to the mouse's location, wherever the user has moved it, and constantly updates the stage.

Once the mouse button is released, the repeat loop ends and the final lines of code execute. Lines 11 and 12 place the dot off the stage, and line 13 takes it out of the control of Lingo, ending the erasing function.

Smashing Pumpkins

In this limited space, I've only been able to show the pumpkin's basic functionality. There are many other functions left to discover, such as the small smashing pumpkin in the lower right corner that refreshes the screen, the custom cursors, and the ghosts that pop up in the background.

I discuss the details of these and other examples in my forthcoming book, Shockwave Studio: Designing Multimedia for the Web, due in January, 1997. Shockwave Studio is lushly illustrated with full-color illustrations, and it contains a wealth of useful content for beginners through advanced users, including the source code for many of the examples.

Happy Halloween!