The easiest applications of Shockwave to a Web site are immediately apparent for the common Internet surfer who visits your page: motion and sound. Whereas previously multimedia such as this needed to be downloaded and viewed through other programs, movement and audio can now be presented immediately to the user.
This chapter begins with a few simple examples of Shocking your Web site. Interactivity and other more advanced features will be discussed in Parts III and IV. For now, we'll just focus on putting basic motion and sound on your page by doing three examples:
The following are the four steps of the Shockwave creation process:
This book focuses less on the actual graphics and animation processes
and more on covering the concepts behind each example. This way,
you can see more applications of Shockwave in a variety of circumstances.
You'll soon see that the possibilities are endless!
| Note |
Many of the examples in this book are provided not only as learning tools, but are also useful clips for your Web site. They may be seen as templates to modify for your own purpose or to use as they are if you don't have access to Director or other software necessary in creating original movies for a Shocked Web page. |
The word "New" is often seen on Web pages that are continually being changed and updated. To draw attention to a new link or new information, this example will cause the word "New" to flash repeatedly. With a final compressed file of only 5K, it is very efficient. With a 28.8 Kbps modem, it would take only a few seconds. This example is the most elementary of all Director movies. It involves alternating two images to achieve the flickering effect.
The file new.dir in the chapter six folder of the CD-ROM contains the finished product. Here's how it was done.
Begin by creating a graphic of the word "New." I used
Photoshop, though any bit-map graphics program may be used. To
be versatile on any color background, be sure that what you create
has an aliased edge with a white background. This way, you can
later change the background color of the Director movie without
seeing a rectangle around the "New" image.
| Aliased versus Anti-Aliased Edges |
Ever noticed a tiny white rim around the edge of an irregularly shaped image that was placed on a dark background? Chances are the designer had anti-aliased edges on the image, then tried to use a transparency feature (such as transparent GIFs or transparency in Director) to show the image on a different color background. Anti-aliasing is a way that the computer smooths rounded edges to make them appear less choppy from the low resolution of a computer screen. When the image is made transparent, you are allowed to choose only one specific color to be removed. To eliminate a white background and see another color beneath it, a transparency feature may remove all white pixels. But it will hide only pixels that are exactly white. Anti-aliasing blurs edges to smooth them out, which means there are pixels that are nearly white but are shades of the edge of your image. These light pixels will not be made transparent, so they show up harshly on a dark background. To have a clean transparency, disable any features that will anti-alias the edges of your image. Note that this affects only images that are irregular in shape because the computer displays images in a rectangle. Graphics that are already rectangular have no need for transparency (unless you want an area within the borders to be made transparent). Director 5 supports certain extra modules developed by third parties that support multiple levels of transparency, which will allow soft, feathered edges and transparent effects. The process of using these may vary and will not be covered in this book. |
If the image was created in RGB color (24-bit), it needs to be converted to indexed color (8-bit) before being imported into Director. Wipe those tears away, all you who are spoiled by JPEG and other high-color formats! The average viewer will probably not even notice. For now, use a Windows system palette because most viewers will be capable of this. Director has the option of converting an image's color depth and palette, though I prefer to do this in Photoshop so that I can see the results and make changes if necessary.
You'll need two images to alternate for the flickering effect, so create a second image of the word "New" that is the same, exact size as the first one. To keep this example simple and compact, make this a 1-bit image (black-and-white). With the two graphic images created, you can now animate them. Figure 6.1 shows the two images.
Figure 6.1 : The two "NEW" graphic images.
The stage can be very small for this movie. Under Preferences, choose 48 pixels high by 48 pixels wide. Import the two graphics into Director as cast members one and two. Place the 8-bit image in channel one of the score and copy it from frame 1 to frame 2. Under the Ink menu, choose matte. This will make the white area around the edges disappear. In channel two, frame 2, place the 1-bit image so that the word "New" lines up with the word beneath it. Set this to be matte ink, also. The color chip on the control panel lets you choose a background color for the stage that will match your Web page.
In the script channel of frame 2, set the playback head to loop to the previous frame:
On exitframe
go to the frame - 1
end
Run the movie and see the word "New" flash. Choose Save and Compact from the File menu. Figure 6.2 shows the movie as seen in Director.
Figure 6.2 : The finished "NEW" Director movie.
Compressing the movie is the easiest step because there's really nothing to think about. On the Macintosh, just drag the Director file onto the Afterburner icon. In Windows, run Afterburner and choose your .DIR file to be compressed. In Director 5, Afterburner is available as an Xtra. Figure 6.3 shows the Afterburner menu. The result: a compact .DCR file ready to be uploaded to your Web server-in this example, a slim 5K Shockbite.
Figure 6.3 : Using Afterburner to compress your Movie.
If you already have an existing Web page, you probably know the procedure for uploading the file to your server using FTP or another method. The .DCR file can be treated just like any other .GIF or .JPEG image. As long as the browser can find the file, it will work. Remember that HTML documents are uploaded as text, but .DCR files need to be uploaded as binary.
Many Web page HTML editors do not support Shockwave, so you will most likely have to enter the HTML command in a text editor (such as Windows Notepad). Besides the file name, you will need to know the dimensions of the Shockwave movie. For our example, the HTML syntax is:
<embed src="new.dcr" height=48 width=48>
Figure 6.4 shows the context of our embed statement. In this example, the .DCR file resides in the same directory as the HTML document it is embedded into.
Figure 6.4 : Put the embed statement in your HTML document.
To place the image exactly where you want it on the page may be tricky, but it's just like any other Web image. If you're using a WYSIWYG HTML editor that supports Shockwave, this may be easy. If it does not support Shockwave, you may wish to create a temporary .GIF image to use in the editor. Make it the same dimensions as the Shockwave movie. Then when it is in the position you want, edit the HTML code and replace the <img src="temp.gif"> with the <embed src="filename.dcr" height=n width=n>.
Run your browser and test out your first Shockwave movie! (see figure 6.5.)
Figure 6.5 : The finished movie viewed in Netscape Navigator.
Because the title of a Web page is a focal point, you can distinguish it from the rest of the page by adding a little motion. The following is an example of a simple animation that moves the letters of the words "Home Page" onto the screen and leaves them jiggling in place.
The first step is to create a graphic image of the words "Home Page." In this case, I chose to have anti-aliased edges on my graphic because they look better. Because I won't be able to change my background color later with transparency, I created this image on black, the same color as the background of the final Web page. This way, the Shockwave movie blends in with the rest of the Web page. Remember to convert to 8-bit. Again, let's use a Windows system palette. The created graphic is seen in figure 6.6.
Figure 6.6 : The Home Page graphic.
Set up the stage to be fairly small, but large enough to allow for some movement. Under Preferences, choose 400 pixels wide by 80 pixels high. Using the color chip on the control panel, set the stage background to be black.
To animate each letter individually, they need to be broken apart. You may have cropped each letter and saved each one as an individual file, but this is unnecessary. After importing the image into Director, use the Duplicate Cast Member command under the Cast menu to make four copies of the graphic (I broke apart only the word "Home" and left "Page" as one graphic). Then, using the paint window, erase part of each of the cast members until you are left with "H" as cast member one, "O" as cast member two, and so on (see figure 6.7). If the part you leave unerased is a rectangle, it can be animated with the copy ink, which is the fastest. If it is an irregular shape, you'll have to use matte ink or background transparent ink; both animate more slowly to eliminate white areas.
Figure 6.7 : The words broken into five cast members.
In the first five channels of frame 2, place each cast member in various positions around the edge of the stage (see figure 6.8). Frame 1 is blank, so they appear to come from off the stage. Then in frame 10, place the images in the center, as they would appear in their proper location for the title. Select all five sprites from frame 2 to frame 10 and use the in-between linear command (Control-B) to animate them across the eight frames. This gives the movement from off the screen to the final position.
Figure 6.8 : The image are placed around the edge of the stage.
To cause the letters to jiggle repeatedly, copy all five sprites from frame 10 to frame 11. Then adjust the position of each one slightly: one to the left a bit, one to the right, one up and to the right, and so on. In the script channel of frame 11, set the playback head to loop to the previous frame:
On exitframe
go to the frame - 1
end
Play the movie, and you'll see the letters zoom in from off the stage, then shake in place.
After saving the movie as a .DIR file, run Afterburner to compress it to a .DCR file. This one is still very small: only 6K. Remember, though, that as the browser loads the .DCR file on the Web page, it also needs to run the Shockwave plug-in to view the file. This may take a few seconds for each Shocked movie.
In this example, you may want to center the Shockwave movie at the top of the page. Just like any other image on a Web page, you can use the alignment commands. In your HTML code, add the following lines at the beginning of the <body> section:
<center> <embed src="home.dcr" height=80 width=400> </center>
This will center your Shockwave movie on the Web page. To align it to the left or right, you can leave out the <center> codes and put a statement directly in the embed line:
<embed src="home.dcr" align=left height=80 width=400>
Test this using align=right to see how it works. Figure 6.9 shows the movie in a Web page.
Figure 6.9 : The Home Page title as it appears on the Web page.
There may be times when you want people to know that a page exists, though you haven't completed it yet. Such pages usually say something like, "Page is under construction." This can be discouraging to visitors who think they have found what they are looking for, only to realize that the page isn't ready yet. To ease the pain, and to provide a taste of what may be to come, this example is an animated "Under Construction" scene. A cartoon man is shown with a jackhammer as a sign drops down from above. Sound effects help add to the fun of this Shockwave movie.
Five graphics are used in this example. You may re-create your own or examine the movie jack.dir in the chapter 6 folder on the CD-ROM. In figure 6.10, you see the following five graphics:
Figure 6.10: The five graphics that were created.
The man standing still
The man while he is jackhammering
Two images of dirt flying away from the jackhammer
The "Under Construction" sign
Two other elements must be gathered for this movie: a sound effect for the jackhammer and a sound for the sign dropping, both .WAV files in my example.
You can probably guess how to piece this one together. Import the five graphics and two sounds. The calm-looking man can be put into the first range of about 15 frames. Then put the wide-eyed man in frames 16 to 25. One by one, select every other frame (17, 19, 21, and so on) and move the man's position a few pixels in various directions. This gives the vibrating effect of the jackhammer. Also, in every other frame, alternate the two images of the dirt and gravel flying away from the hammer. Put the man in channel three and the dirt in channels one and two, then set the man's ink to matte. This way, the hammer is in a layer that overlaps the dirt, rather than the dirt overlapping the hammer.
In the sound channel, put the jackhamm.wav sound across the frames where the man is hammering. Figure 6.11 shows how the sound channel corresponds to the hammering sprites.
Figure 6.11: Aligning the jackhammer sound with the motion of the animation.
Next, animate the sign dropping from the top of the stage. As it lands, put the newbreak.wav sound in one of the sound channels. Notice how it appears to bounce a bit to give it some realism.
We could loop the entire movie; however, I thought the viewer might be annoyed with constant noises of jackhammering, so I set the man to continue hammering without the sound effects. Notice how I placed a marker (the triangle in the top row of the score window) in the frame I wanted to jump back to. Then in the last frame, I used the lingo "go loop" to move back to the last marker it encountered:
On exitframe
go loop
end
Figure 6.12 shows the "Under Construction" movie as seen in Director.
Figure 6.12: The Under Construction movie in Director.
Compressing this file in the same way as the last two yields a DCR file of 39K-larger than the previous examples, but still quite manageable. With a 28.8 Kbps modem, it might take about 20 seconds; a 14.4 modem would take twice as long.
You're probably getting the hang of this pretty well.
<embed src="jack.dcr" align=right height=150 width=256>
Perhaps you want to include an alternative image that will appear in case the viewer does not have a browser that supports Shockwave. It could be just a static image of the "Under Construction" sign. By adding a few additional lines to the HTML document, you can substitute a GIF or JPEG image for non-Shockwave browsers.
<embed src="jack.dcr" align=right height=150 width=256><noembed> <img src="subst.gif"> </noembed>
The above additions to our embed statement allow a substitute image. How does it work? Netscape or a compatible browser understands all of the commands above. So it will embed the Director movie in the Web page, then will not embed the graphic substitute (it ignores anything within the <noembed> tags). Other browsers that do not recognize the <embed> or <noembed> tags will ignore them, but they will recognize the <img src="subst.gif"> statement and will then display the alternate image.
Figure 6.13 shows the movie in a Web page.
Figure 6.13: A Web page using the Under Construction movie.
You have now been through the entire process of Shocking a Web site. From here onward, it is just a matter of learning to work with Director to create good movies for the Internet. Here's what you can look forward to next: