Every computer graphics book has a chapter called "Special Effects" that usually leads readers to think they will soon know secrets that only Hollywood knows. Well, the best special effects are the ones you create yourself because no one else will be reading about them in a book somewhere. This chapter offers some Shockwave ideas that don't fall into any other categories. Some of the topics covered in this chapter are:
Rectangular shapes have acquired the stereotype of being an unimpressive computer default. Graphic images are automatically set in a rectangle, so hard edges can be expected. Many designers have broken free of this restriction through various methods so that their work is not limited to boxy shapes. One method for the Internet is using transparent GIFs to drop out one color in the image so that the background can be seen. But Shockwave movies offer no way of leaving part of the stage transparent. Another method (and the solution for Shockwave) is to match the background of the image with the background of the Web page. In doing this, you no longer have to separate the Shockwave movie so distinctly from the rest of the page. It can be integrated seamlessly.
Matching the background color of a Web page is fairly simple. All you need to do is make sure that the background color of your Director movie is exactly the same hue as the background color you specify in your HTML command. But first you need to know how color is specified.
HTML uses hexadecimal codes to identify colors. You learned earlier how Director uses a palette for its color identification. So how do you match them up? Easy.
First, decide what color you want the background to be. It doesn't matter if you use a standard system palette or a custom palette, but the background color must be in the palette for Director to use it as a background. The HTML can specify any color, but Director is limited to its own palette. When you have decided on a color, you need to convert the RGB information to hexadecimal to use in the HTML command.
For example, I have a custom palette loaded in Director, and the background color I want is a shade of green. In the palette window, I can double-click that color and see its RGB information. It turns out to be Red 102, Green 153, and Blue 102. Now I need a way to convert those decimal values to hexadecimal. Fortunately, Windows calculator has this feature built in, as would any good scientific calculator. Other utilities are available that will convert between hex and decimal. So the red value of 102 becomes 66 in hex, the green 153 becomes 99, and the blue 102 also becomes 66. The HTML command requires all three of these values stuck together as 669966. That is the hex value of my green color. So the HTML background command would look like this:
<body bgcolor=669966>
Then I can choose the same color in Director to be the stage color, and the movie is no longer defined by a box shape. The examples gallery.dir and gallery.html on the CD-ROM both use this technique (figure 8.1).
Figure 8.1 : A seamless Shockwave movie that uses the same background color as the Web page.
The technique described in the preceding section is fine for solid color backgrounds, but what if you want to use a tiled background on your Web page? You can follow the same principle, but it may be trickier to line up the patterns properly.
There are two types of background tiles: with seams or seamless.
Both are acceptable, depending on your intentions. A seamed tile
is simply a rectangular shape repeated, while seamless tiles appear
continuous so that the viewer can't tell where one seam begins
and another ends.
| Note |
Achieving a seamless tile can be difficult and can look pretty lousy if not done properly. Lynda Weinman describes a good process for seamless tiles in her book, Designing Web Graphics (New Riders Publishing). To summarize the method, you use the offset filter in Photoshop to see your progress as you create a tile. The offset filter has the option of wrapping the pixel information. This allows you to see if your tile has spots that will show seams or empty areas that may need to be filled. |
To use a tiled background, you'll need to use the same file for your tile in Director and for your tile in the HTML document. Follow these steps:
<body background="bluetex.gif">
Aligning your tiled Shockwave movie above a tiled HTML page can be tricky. A simple textured tile offers more freedom for misalignment than recognizable images on a tile. Often a texture can be placed anywhere, and it will appear to blend in. If your tile has images that need to be lined up, you need to use other techniques for lining up the movie. The methods would be the same as if you were going to position any image in a specific spot on a Web page-using spacer images, hspace and vspace tags, and so on. A book describing Web page design would cover this process better.
On the CD-ROM, the movie shlogo.dir and the HTML page shockex.html use the same textured background to appear seamless. A JPEG image (example.jpg) also uses the same background so all three blend together. Figure 8.3 shows the patterned Web page in Netscape Navigator.
Figure 8.3 : Tiled backgrounds on the HTML page, Shockwave movie, and a JPEG image.
The tile feature in Director is a great way of enhancing a boring background without using up a lot of space with a big cast member. This is an excellent shortcut as you work to keep your file size small.
Fade-ins and fade-outs are often desirable over other transitions. Director offers wipes, dissolves, and others, but standard Director transitions halt the playback head. A sprite blend can fade over a course of frames while other action is occurring. The previous example using the Shockwave logo shlogo.dir uses a sprite blend to fade one image while the rest of the animationcontinues.
Using a sprite blend is simple. Put the cast member to be faded in one frame and choose Set Sprite Blend from the Score menu (or Sprite Properties from the Modify menu in Director 5). The range between 1 and 100 selects how much to fade the sprite. To fade from nothing, choose 0 for the first frame. Then copy the sprite to another frame-for example, frame 10-and set the new sprite blend value (100 to be completely visible). Select the range of cells, choose In-Between Special, and select Blend. Just like that, the sprite fades from nothing to full view.
Sprite blends are great for enhancing a simple movie without adding extra cast members. It is also the only way to create a smooth fade, rather than individual pixels disappearing through a standard Director transition (figures 8.4 and 8.5).
Figure 8.4 : A standard Director transition dissolves individual pixels.
Figure 8.5 : A sprite blend fades the image smoothly.
Looped audio can be used as background music for your Web page.
This example uses a small graphic image that lets the user click
between "Sound on" and "Sound off" because
looped sounds can quickly become annoying.
| Caution |
If you put multiple Shockwave movies on one Web page, you should use audio in only one of them. Otherwise, you will have more than one element attempting to access the computer's sound hardware, which may be unpredictable. |
The file mloop.wav on the CD-ROM is the sound that was used (mloop.dir is the finished Director movie). If you load it into a sound utility and play it back, it goes through eight beats of music on one chord, then eight beats on another chord. When set in Director to loop, it smoothly repeats. Note that this example is not streaming audio, it is simply downloading and playing it. Chapter 18, "Shockwave for Audio," covers the process of streaming an audio file.
Only a few frames are needed in Director. Set up a marker in one frame called "On." This will be where the music is playing. Put the sound in a sound channel and set the playback head to repeat using the "go to the frame" Lingo statement. In a sprite channel, put the graphic of the button to turn the sound off. We haven't discussed interaction yet, but this will give you a preview if you haven't done this before. Attach a Lingo script to the sprite with the "Sound Off" button that looks like this:
on mouseup
sound stop 1
go "off"
end
When the user clicks the button, it turns the sound off and goes to a second marker called "Off." In the frame with the "Off" marker, put the graphic of the "Sound On" button and attach a Lingo script to go back to the "On" marker. Figure 8.6 shows the example as seen in Director.
Figure 8.6 : The Looping Sound Movie in Director.
Now you have two frames that the movie can jump between. "On"
contains the looping music and the button to turn it off. "Off"
contains no music, but has a button to jump back to "On"
if the user wants.
| Note |
You're probably thinking, "Audio files are so large, why would I want to have the viewer download a huge Director movie just to hear some dumb music?" Well, you may be right. This example is 95K. Pretty big just for background music. But this is just to demonstrate the possibilities of Shockwave. Maybe you have a looping sound that is much smaller, and you don't mind the download time for it. If it's the last thing the HTML page loads, it may be all right because the viewers can read the rest of the page while the sound loads. Or maybe you're a musician and you have a demo of a song on your page that you want available for people to hear-or even just a short announcement sound that says, "Welcome to (whatever)" when the page loads. |
The last example from this chapter uses a simple interaction that switches between frames when the user clicks a button. Next, you move into interactive Director movies that allow the user much more involvement with Shockwave, rather than simply watching something happen.