"Carol, Whats Behind Door Number Three?"

Creating rollover effects in Shockwave

By Bob Schmitt
February 14, 1997

This column is an excerpt from the upcoming book, Shockwave Studio: Designing Multimedia for the Web, due out in early March, the second publication in the Web Review Studio series. This excerpt takes the reader through creating a basic rollover script using Shockwave.

One of the biggest problems with the Web is the lack of user feedback. Is something happening? Is this a clickable button or just a piece of art? Rollover effects are an excellent way to improve the Web experience by giving users clues about their interaction with the site.

Figure 1. A basic Shockwave rollover.

For years, rollover effects have been used in multimedia projects to enhance communication with the user, typically by highlighting graphics with a glow or color change. Creatively used, though, rollovers can do more than just highlight buttons. You can use them to create interesting and creative effects, one of which we'll look at now.

The Basic Rollover

The term rollover refers to the mouse rolling over an element. That is, something happens when the cursor is placed over the graphic and then returns to the original state when the cursor leaves the graphic. Figure 1 shows a basic rollover: a red button turns green when the mouse is placed over it and returns to red when the mouse moves off the graphic.

In Shockwave, the basic rollover effect is created with the Lingo command rollover. This command is usually placed in an exitFrame, enterFrame, or idle handler. The rule of thumb is that it needs to be in a place the movie checks constantly. The Lingo code below shows a typical rollover handler. This is a simple script that changes the red button to green when the mouse is over it.

The first line of this script (after the on exitFrame statement) checks to see if the mouse is over the sprite contained in sprite channel 1. This channel contains the graphic of the button in its "off" state (when the cursor is not over it). The next line puts this sprite under the control of Lingo. Next, the script sets the cast number of the sprite in channel 1 to 2. Cast member 2 is the graphic for the button in its "on" state (when the cursor is over the graphic.) Finally, the stage is updated to show the change.

While rollover buttons are a common use of Shockwave, the rollover command lets you do much more that. We'll look at more creative example of rollover in the following example.

The Mystery Door

The Mystery Door feature from my personal Web site uses a door metaphor to offer users a set of five mystery links. When the user moves the mouse over a door, it opens with a squeak and the number of the door appears below it. (See Figure 2.) When the mouse leaves, the door slams shut with a thump. Clicking on a door activates a link to a URL. This simple device adds interest, and an element of fun, to an otherwise static page of links.

Figure 2. Rolling over a door opens it
and displays the number beneath it.

Figure 3. The score for Mystery Door.

If you look at the score for this example (Figure 3), you'll see it's set up with five separate placements of the closed-door cast member (number 2: Figure 4 shows the cast for this movie). These are in sprite channels 2, 4, 6, 8, and 10. Each door has a corresponding number graphic in the following sprite channel. For example, there's a closed door in sprite channel 2, and the "ONE" graphic (cast member 4) is in sprite channel 3. The subsequent number graphics are in channels 5, 7, 9, and 11. All these number sprites are invisible at the start of the movie. We will make these channels visible with a rollover script.

Figure 4. The cast for Mystery Door.

First, let's look at the the exitFrame script contained in the script channel of frame 1 (shown below). After initializing a global variable called gCurrentSprite, the script immediately calls another script called spriteCast. This script, described in detail in the next section, simply determines which door the mouse is over (if any) and puts that information into a global variable called gCurrentSprite. At this point let's switch over to spriteCast.

The SpriteCast Script

The first line of the spriteCast script (shown below) initializes the global variable gCurrentSprite. Next the script executes a case statement. The case statement is a multibranching logic structure much like an if...then statement.

In this script, we are checking to see which door the mouse is over. (Remember, sprites 2, 4, 6, 8, and 10 contain doors) Rather than writing five if...then statements checking for rollover(2), rollover(4), etc., the case statement lets you quickly plug in a number of possible values into the function rollover( ). So the first line of the case statement checks for rollover(2), which means the mouse is over the sprite in channel 2, and if it is, it sets the variable gCurrentSprite to the number 2. The case statement checks each line to see if the mouse is over any of the numbers indicated in the case statement and sets the variable gCurrentSprite to the appropriate number. It then exits the handler, returning to the exitFrame handler.

After the spriteCast handler has executed, the exitFrame script (shown earlier) starts an if...then statement. First it checks to see if the mouse is still over the same door as specified in gCurrentSprite. If so, it executes the remaining lines of code in the if...then structure.

For example, say the mouse is over the third door. The graphic for the third door is in channel 6, so gCurrentSprite equals 6. The next line puts the sprite in that channel under the control of Lingo. In the next line, the cast number of sprite 6 is changed to the number of the open-door graphic, named doorOpen. This changes the closed door graphic to the opened door graphic. Next a local variable called visibleSprite adds 1 to the number of the current sprite (here, 6 + 1 = 7). In the next line the invisible sprite in channel 7 is turned visible. Remember, the graphic with the word "THREE" is in sprite channel 7.

After this, the script plays the sound called squeaky, which is the sound of a door creaking open. The stage is updated to show the graphic change. The script then repeats, doing nothing, while the mouse is still over the sprite in channel 6. This has the effect of pausing the movie until the user moves the mouse off the door graphic.

Once the mouse is moved off the third door, the cast number of the sprite in channel 6 is swapped with the number of the cast of the closed door (doorClosed). The graphic of the word THREE in channel 7 (visibleSprite) is then turned invisible again and the sound of the door slamming (doorClose) is played. The sprite in channel 6 is taken out of Lingo's control and the stage is once again updated to show the change. That concludes the if...then statement and the final command is executed, sending the movie back to the beginning of frame 1, starting the process over again.

By now you should have some idea of the ways in which rollovers can enhance your Web site and see how commands are structured in Lingo to provide a variety of results. In my book, Shockwave Studio, Designing Multimedia for the Web, I discuss many other ways in which you can further enhance your projects.