A few weeks ago, my fiancée and I met with the harpist who will be playing in our wedding. We didn't have any idea what we wanted for music in the ceremony, so we asked her for some suggestions. She sat down at the harp and immediately began strumming through various songs that she already knew. Within a few minutes, we had picked out a few that we liked, and the rest of our meeting could be spent throwing a tennis ball for her big dog.
I suppose you'd like to know how this relates to Shockwave. Well, the tennis ball doesn't. But the harpist's repertoire does. Imagine if she had to learn all new songs every time she performed-every job would be a lot of work for her. But by having a group of songs that she is already familiar with, she may hardly even need to practice. Similarly, you may have a lot of existing material that can be used for Shockwave; so instead of completely building from scratch, you can use what you already have.
This chapter covers using and modifying your existing materials to be put on the Web:
Let's say you have a standard logo that is used on all of your printed materials: brochures, business cards, letterhead and envelopes, and so on. Before it can be used on the Web, you will need to make some modifications.
Printed images need to be high resolution. Your average home laser printer can be 300 or 600 dots per inch (dpi). This allows for relatively smooth curves for detailed graphics. Remember dot-matrix printers? They are still around, but more for economy than graphics quality. Low resolution output results in choppy, jagged edges. See figure 16.1.
Figure 16.1 : Low-resolution images show more jagged pixels than high-resolution images.
Professional output is very high resolution-often 1000-2000 dpi. This doesn't mean the images are scanned at 1000 dpi. Actually, most color photos are scanned and output at a resolution of 300 dpi; but higher resolution output means more accurate control of halftones and crisp, clean text. We won't go into details of the printing process, but the point here is that graphics must be fairly high resolution for high-quality printed work.
On-screen graphics, however, are low resolution. There's not much that can be done about it-your computer monitor displays images at a resolution of 72 dots per inch and no more. An image that is higher than 72 dpi doesn't appear more sharp or clear, it simply appears larger. This is because on-screen images are measured in pixels, not inches.
A printed image may be set at 5 inches wide. If it is 300 dpi,
it will be smooth; if it's 72 dpi, it will be rough-but it will
stay 5 inches wide when printed. In contrast, an on-screen graphic
as displayed on a Web page is measured in pixels. A 5-inch image
at 300 dpi is 1500 dots wide, which appears larger than a 5-inch
image at 72 dpi-a total width of 360 pixels.
| Note |
Dots per inch on a computer screen is not necessarily an actual measurement of the number of pixels in an inch of space. A 14-inch monitor can be set to the same resolution as a 21-inch monitor, though one will appear much larger than the other. The size of the pixels changes depending on the physical size of the monitor. Similarly, a monitor in 640 by 480 mode will have larger pixels than a monitor set to 800 by 600 mode-the actual monitor size does not change, just the number of pixels used. |
Enough math; your printed image is too big to be used for Shockwave. Because the computer screen is most often set for 640 pixels wide by 480 pixels high, the image needs to be reduced to that size-and actually needs to be smaller because the browser frame takes up part of the screen. You can't be sure whether people have their monitors set for 640 by 480 or 800 by 600 so it is best to be safe with the lower resolution.
Transforming the existing graphic can be as simple as opening the image in Photoshop and changing the image size to be within 640 by 480 pixels. Sometimes you may have a logo that is in another format and needs to be converted. Postscript output (.EPS) allows vector data to be used, such as curves, lines, angles, and so on, to draw the image at high resolutions. But Shockwave requires bit-map images. This may require you to use an illustration program to load the vector image, then export it as a bit-map file type.
As mentioned throughout the book, if anything can be displayed in a lower bit-depth, it is a great advantage for Shockwave. You might have some small images that look nice in 8-bits, but are not noticeably different as 1-bit images. If you are using 16-bit images, they definitely need to be reduced to 8-bits. Authoring using 16-bit images is fairly rare anyway.
Figures 16.2 through 16.6 compare the same image displayed in 16-, 8-, 4-, 3-, and 1- bit versions. You can see how quality is sacrificed as bit-depth is reduced. For many animation purposes, however, the motion and sound make up for lost color quality.
Color palettes take up space, too. I recently viewed a CD-ROM project that the user moves around a 3-D world where every screen has a different color palette. It looked great having a custom palette for each view since the 256 colors were optimized for that particular image. But in Director, each custom palette is over 2K. A few is all right, but a dozen adds up quickly.
If your images already use a variety of palettes, consider creating one palette that contains most of the colors you need, then map every image to the same palette. Not only does this shrink size a bit, it makes things easier on your transitions between movie segments because you won't experience a palette flash.
If you are used to authoring for CD-ROMs or Kiosks, you will feel like a giant boa constrictor is squeezing the very life out of your work. You no longer have 600 megabytes to fill with full screens, video clips, and sound effects. Someday, you probably will have 600 megabytes that can be downloaded quickly, but until then you'll have to do with only a few hundred kilobytes at most.
Chapter 4 "Considerations for the Internet," mentions ways of keeping file size small as you create for the Internet. Transforming your CD-ROM project follows the same rules.
Not only do you need to leave room on the screen for the browser controls, you probably don't even need to fill the available window. A physically small movie can be just as effective as a large one, and will most likely save on download time.
So what if your screens are already created to be 640 by 480? You have two options: Reduce the size or crop the image.
If you want everything in its same location, only smaller, you
can use Photoshop to reduce the image size. Director can scale
an image smaller using the transform
bit map command, but I have found that Photoshop often
does a better job-particularly if you have the original high color
images to work with.
| Tip |
If you decide to shrink images, you will need to make sure that everything is scaled down equally. You may choose a new pixel size (instead of 640 pixels wide, you make it 400 pixels wide) but a better way is to use percentages. This way, you can scale all of your objects the same amount (60% for example). So if the original is 640 pixels wide or if the original is 349 pixels wide, the new size of both images will be in proportion. |
If you find you have a lot of open space in your screen designs, you may want to crop or rearrange the screens. Cropping is an easy step-you just cut away the unnecessary areas around the edges. But if you have open areas within the image and want to rearrange the layout (where buttons are located, and so on), you will have more work to do. If your buttons are independent cast members in Director, this is fairly easy. But if they are created as a part of the background, you might not be able to move them as easily.
I recently had to redesign a game for Shockwave. The original size was a bit too tall, so parts of it were covered by the browser. If the user selected to hide the location and toolbar, it would all fit; or if the video display was set for 800 ¥ 600 it would fit, but I couldn't count on either of those, so I rearranged a few things to squeeze it down. The game is seen in the Example Gallery in Appendix A (the trivia hurdles game).
If you are using a 3-D graphics package or another tool to create animations, consider size and frame rate as you create the animation. Some software is easier than others to use to modify this.
You might think you need 15 frames per second to accurately represent the animation. But try it at 10, or even lower. The fewer the frames you have, the smaller the file size it is.
I recently wanted to modify an animation that we used on a CD-ROM so that it could be made into a Shockwave movie. I asked the person who created it to make a scaled down version of it. Without much difficulty, he exported only a few frames at a reduced size. After importing the frames to Director, I had a smaller version of the same animation at a slower frame rate. It still looked OK and was much smaller for download time.
Audio is a killer when it comes to file size. If you don't need the sound, go ahead and take it out completely. But some sounds are worth keeping to enhance the Shockwave movie. The easiest way to reduce their size is to modify their format. Change all the sounds to 8-bit, 11.025 kHz. If that sounds too terrible, use 8-bit, 22.050 kHz.
Be sure to check the audio in a sound utility. Sometimes there is a short amount of silence before or after the actual sound. You might not hear it, but it can make the file size of the sound larger than it has to be.
If music can be looped, definitely do so. If it can't, it might be best to leave it out completely. A few seconds of a tune might not be worth the wait for the end user.
For longer audio clips, you can use streaming audio. You will need SoundEdit 16 to create a special file format to be used over the Web. Chapter 18, "Shockwave for Audio," covers this process more thoroughly.
MIDI is not currently supported by Shockwave. It would be efficient for file size, but may be difficult to predict the user's configuration of MIDI instruments. There may be other MIDI utilities that function over the Internet that could be used in addition to Shockwave. Being able to utilize a variety of audio and video options is a definite benefit to any Web site or multimedia project.
You were hoping I wouldn't mention this. There are few things worse than having to cut out some of the content of your existing material. It's like putting a hacked-up version on the Internet, leaving out large parts of your hard labor.
You are often going to have to cut out entire parts of your project that are not absolutely necessary. You will have to evaluate every animation, button click, rollover, image, sound effect, and so on, to determine if it is necessary for the "Shocked" version of the movie. You know what you intend to offer and you know what your audience expects. If it doesn't fit completely, leave it out. People will be very annoyed to download a big movie full of stuff they don't want to see.
You might consider breaking the content of your project into pieces. Give the Internet users the choice of which segment to see. Then users can just download the content that interests them without having to spend forever loading a lot of information that they have no desire to view.
Cutting content implies that your original project contained a lot of information. You might reconsider whether Shockwave is the way to go for your project. Shockwave for the Internet is still limited enough that it is not practical as a major information tool. You might just have selected elements enhanced through Shockwave, with most information in normal Web pages.
Shockwave for Intranets (using Director or Authorware) may be more useful for high-content projects. Of course, you know whether your project is designed to be viewed on an Intranet or on the Internet.
Figure 16.7 shows a screen from an existing CD-ROM project, a marketing CD for ZIPP bicycles. The project is not included on your CD-ROM, but you probably can imagine how it would work. The original work was a full-screen, interactive project with audio announcing possible choices and video clips introducing each area. This particular section used .AVI files with animations of the bicycle tires separated into pieces. The user presses one of the three buttons at the bottom of the screen to switch between the types of tires and read information while watching the videos and listening to the audio clips.
Figure 16.7 : An original CD-ROM project that must be modified for use in Shockwave.
Even this one small section of the CD-ROM would be far too big to use as a Shockwave movie, so it must be modified. I decided that I would create separate HTML pages for each of the three tires. This means the user doesn't need to load the information for all three tires at once, which will help with download time.
My first step was to break the large image into pieces. The text was originally created as a bit-map image in Photoshop, but I could just use normal text in Director or as part of the HTML document. I separated the "Tires" title to be it's own image which can be displayed on the Web page as a .GIF or .JPG image. The buttons used to select each tire are cropped as .GIF images and will be set up as links to other Web pages with the other tire types. Figure 16.8 shows the images that were cut out of the original project to be used in the Web page.
Figure 16.8 : Graphics cropped from the original project.
I eliminated the audio voice that announces the menu options. This can be done with text just as easily. The video that introduced the tires section can also be eliminated-it's a great addition to a CD-ROM project, but simply not practical for a Shockwave application.
The only other major elements were the animations of the tires. You may remember this example from Chapter 7 "Animations to Demonstrate or Teach"-the peel-away diagram. The original CD-ROM used an .AVI file created from an animation in 3-D Studio. But to adapt it to Shockwave, we needed to make it much smaller. Instead of using linked media (such as a video clip) we exported only 12 frames from the animation. These images were then imported into Director to be animated together internally. The text labeling the diagram was created using Director's text tool.
Figure 16.9 shows the pieces compiled into a Web page. This is only one of three pages, but the other two are very similar. The only part of the page that really needed Shockwave was the animation. The text was easily typed as part of the HTML document. The title and link buttons were cropped from the original CD-ROM image.
Figure 16.9 : The Shocked version of part of the CD-ROM project.
In certain cases, you will need to ask yourself, "Is it really worth the effort to modify my existing material, or should I start over?" You might find that to reduce image sizes, sounds, animation frames, and whatever else, is just as much work as it is to completely start over and create a new movie from the ground up.
Sometimes you might like to take a movie and re-create it. Because I have already created it once, I know exactly what I need and I can really streamline the process to create the most efficient version of the same idea.
Much of the creation process may be conceptual, anyway. Once you have an idea and know how the pieces must fit together, it is often fairly simple to re-create a few graphics and construct a new movie.
You may find that it is more practical to design new movies for Shockwave than it is to modify your existing material. But that doesn't mean you can't take pieces and parts from other projects and use them in your new movies.