Some of the examples from this book are conveniently placed in this appendix for you to browse through. There are also several examples that are not mentioned in the book that you will want to check out; they are in the second part of the appendix.
On the CD-ROM, you can load the HTML document called append-a.html in the Appendix A directory. This will allow you to easily see each example in the context of your Web browser. The source for each example may be a .DCR file, but .DIR files are also included so that you may open them in Director to see how they are created.
Each example gives the HTML file name, the Director file name, the compressed size, and a brief description of the movie.
The first section contains many of the examples contained in this book. You may decide to look here for examples and ideas rather than paging through the chapters to see sample Shockwave movies. Only select movies are displayed in this section; examples used merely to demonstrate a basic concept are not included in the appendix.
HTML example: new.html
File name: new.dir
Size compressed: 4.33 K
Description: The flashing "NEW" movie is an extremely simple movie that is small enough to place just about anywhere on the page to draw attention to an item. If you have a list that is continually changing, you may want to put it near the latest items added to the list so that the user can quickly see the current additions.
The movie is merely two frames alternating between each other. The same effect could also be achieved through an animated GIF (figure A.1).
Figure A.1 : Using a small movie to draw attention to something.
HTML example: home.html
File name: home.dir
Size compressed: 5.04 K
Description: This is a generic title for any home page. The letters zoom in from off the stage and remain jiggling in place. This is a fairly simple animation using very little Lingo. The graphics were intended to be placed on a black background so that the bounding rectangle of the movie would not show up once it has loaded (figure A.2).
Figure A.2 : An animated home page title.
HTML example: notdone.html
File name: jack.dir
Size compressed: 32.8 K
Description: A cartoon character vibrates with a jackhammer as a sign drops down to inform the viewer that the page or site is not yet completed. The sound effects were intentionally stopped after playing once so that the viewer is not annoyed while he or she stays on the page (figure A.3).
Figure A.3 : An animation alerting the viewer that the page is under construction.
HTML example: map.html
File name: map.dir
Size compressed: 12.9 K
Description: This is an informative movie that describes how to reach a location. The basic concept can be adapted to any map. As an animated dot travels along a path on the map, text announces road names and turns. Though large in physical dimensions, the map is fairly lightweight in file size due to flat colors and character text (figure A.4).
Figure A.4 : An animated road map offering directions.
HTML example: tires.html
File name: tires.dir
Size compressed: 144 K
Description: In this example, the layers of a bicycle tire are peeled away and the various parts are labeled. This example might be easily understood with a static image, but you can imagine how some technical diagrams could be enhanced through motion. 144 K is a hefty price for this simple movie, but someone looking for detailed information may be willing to wait (figure A.5).
Figure A.5 : Animating a technical diagram of a bicycle tire.
HTML example: gallery.html
File name: gallery.dir
Size compressed: 11.9 K
Description: The pulsing "Gallery" image is only one image that is in between using sprite blends and scaled size. The background color is intended to match the background of the Web page for a seamless movie. Palette issues can often be confusing. My testing found this to be an exact match when running in 24-bit color mode (millions of colors), but slightly off in 16-bit mode (thousands of colors) (figure A.6).
Figure A.6 : The pulsing image matches the background color of the Web page.
HTML example: texture.html
File name: texlogo.dir
Size compressed: 16.3 K
Description: Matching a textured background is another way of seamlessly integrating a Shockwave movie to a Web page. This example animates the Macromedia Shockwave logo over a textured background. The same image was used in the HTML document and in the Director movie to create tiled backgrounds. The animation itself is a few sprite blends, stretches, and colored 1-bit images (figure A.7).
Figure A.7 : Matching a patterned background with this animated Shockwave logo.
HTML example: pdgwave.html
File name: pdgwave.dir
Size compressed: 32 K
Description: The rippling logo movie is static until the user passes his or her mouse over the movie location. Then the animated logo ripples while a sound effect plays. Definitely one of the bells and whistles of a Shockwave page-a bit useless perhaps, but still fun (figure A.8).
Figure A.8 : The logo quivers as the mouse rolls over it.
HTML example: prepare.html
File name: prepare.dir
Size compressed: 4.74 K
Description: This movie goes along with the next movie pdgmain.dir. It's a very small movie that downloads quickly to eliminate the ugly white box that Shockwave usually begins with. Then it calls another movie and animates an image while the larger movie loads (figure A.9).
Figure A.9 : The quickloading go-to file.
Because you are running this from a CD-ROM, there will be very little delay in loading the larger movie, but the download time over the Internet would be much longer.
HTML example: prepare.html - loaded by the preceding movie
File name: pdgmain.dir
Size compressed: 148 K
Description: This movie offers an interface for the user to select the area of the Web site to visit. A slider moves left or right and a laser beam zaps the words that are possible choices for the user. The accompanying Web pages are not included on the CD-ROM-this is just to show the navigation movie as an example (figure A.10).
Figure A.10: PDG's navigation movie.
HTML example: getnet.html
File name: getnet.dir
Size compressed: 4.42 K
Description: This is a simple utility that lets you experiment with some network Lingo. It will only work in your browser while you are connected to the Internet. You may enter the http location of any text file (or HTML document), and the movie loads the item and displays it in a scrollable window. Other network information is also displayed-error, done state, ID number, and last modified date (figure A.11).
Figure A.11: A utility to test the Internet Lingo functions.
HTML example: graph.html
File name: graph.dir
Size compressed: 8.55 K
Description: This compact but powerful movie takes a series of numbers that the user enters and creates a line graph. The Lingo programming uses lists to store and retrieve the information. The scale of the graph is adjusted to fit the data. By itself, this may not be the most useful movie, but used to load data via a getnettext statement, this could be a very valuable tool for Web sites that report data (figure A.12).
Figure A.12: A movie that graphs data entered by the user.
HTML example: shocked.html
File names: nav.dir,
homeglow.dir, gallglow.dir,
linkglow.dir, and
mailglow.dir
Sizes compressed: (in order of above list)
17.6 K, 2.61 K, 4.48 K, 2.56 K, 2.87 K
Description: This entire site was described in detail in chapter 15, "Putting It All Together: A Shocked Site." The page is divided into three frames. In the left frame, a Shockwave movie allows the user to navigate the site. In the top frame, another Shockwave movie displays the title of the area the user is currently viewing. The bottom frame contains the content of the site itself. By targeting frames, the navigation movie and the title movies can stay visible while the user scrolls through the content of the Web site (figure A.13).
Figure A.13: A Shockwave site using multiple movies and frames.
HTML example: audio.html
File name: stereo.dcr
Size compressed: 39.8 K
Description: This example demonstrates audio streaming using several .SWA files. The HTML document passes file names and descriptions to the movie using external parameters. The movie loads and plays the streaming files. Running from the CD-ROM will be fast, of course, but streaming over the Web is relatively fast as well. The movie loads fairly quickly also because the streaming files are externally loaded (figure A.14).
Figure A.14: A Shockwave site that uses audio streaming.
This section contains a few movies that were not used as examples in this book, but you may find them helpful in understanding more about Shockwave and Director, and helpful in giving you ideas for your own Web site.
HTML example: puzzle.html
File name: puzzle.dir
Size compressed: 39.7 K
Description: Remember this old puzzle game? It may have had numbers or letters or a picture, with one position left open. Then you slide the other pieces around to try to get them in order. The logic is fairly straightforward. A Lingo script checks if the square you click has the open square next to it. If it does, the squares are switched. When the squares are in proper order, it jumps to a different frame to alert you that you have won (figure A.15).
Figure A.15: A small puzzle game that everyone used to play.
HTML example: counter.html
File name: counter.dir
Size compressed: 29.5 K
Description: All over the Web you will find counters proudly displaying the number of visitors a Web page has received. (Of course, this is usually inaccurate because it doesn't really count how many people have seen the page. One person could hit the same page ten times and it would count all of them.) This Shockwave movie is an animated Web counter that gives the appearance that thousands of people are hitting the Web page, until the counter finally breaks from the strain. The numbers of the counter are the same cast members animated in different ways for each digit. The only interaction involved is the option of turning the counter on or off by clicking it (figure A.16).
Figure A.16: An animated Web counter.
HTML example: finline.html
File names: finstart.dir
and finishnt.dir
Sizes compressed: 5.81 K, 80.5 K
Description: Used on the Finish Line athletic shoe store Web site, this game loads trivia questions using the getnettext command. The trivia questions can periodically change while the game remains the same. Using lists, the questions are randomly chosen while a timer keeps track of the player's speed. After passing ten hurdles by correctly answering questions, the user is taken to another Web page with a winning certificate (figure A.17).
Figure A.17: The Finish Line trivia game loads questions
from a text file.
| Note |
The game will not work properly from the CD-ROM because it calls a text file that must be retrieved from the Internet. The game may or may not be at the Finish Line Web site at the time you are reading this (www.thefinishline.com). To play the game from the CD-ROM, run the file called finline.exe which will load the text file using a fileio command. |