Creating Dynamic Web Sites / Chap. 4: Interacting with Animation | WebReference

Creating Dynamic Web Sites / Chap. 4: Interacting with Animation

CHAPTER 4: Interacting with Animation

[Note: Originally published in 1996, it appears as though the support site for this book is no longer available. We have therefore removed the live links to it - Ed.]

If digital video is to multimedia what the elephants are to the circus, then animation has to be the trapeze act: flashy, entertaining, and seemingly something that ordinary mortals could never attempt. Yet with digital tools, animation can be tremendously simple. And with the advent of the Shockwave technology rising out of Macromedia's popular Director program, your animation can provide game-quality response, interactivity, and speed in a Web-based application.

In this chapter, we'll look at:

You don't need to be a programmer to use the technologies I present in this chapter. The most advanced, programming-like part we'll cover is the Lingo scripting language used to control interactivity in your Shockwave applications, but that's really no more difficult than HTML. And if you are looking to hire out a multimedia developer for the content and you're simply planning to integrate their work into your Web site, you'll be happy to know that incorporating Shockwave and Java into your Web page is no more complicated than embedding video or still images.

Furthermore, the Web site associated with this book includes several Java applets and Shockwave files that you can use in testing your own integration of animation and interactivity with your traditional Web documents and structure. It also includes step-by-step tutorials showing you how to use these resources -- which you can download for your practice -- in your own Web pages. And fortunately, because Director is fully cross-platform compatible between Windows and Macintosh, the Shockwave files here run equally well whether you display them on an Apple product or a PC. And as Netscape introduces the Shockwave plug-in for other platforms, this group of users will grow rapidly.

Most important, both Shockwave and Java really point to a new model of computer use, in which the programs as well as the information are distributed across the Web itself, rather than being loaded into each user's workstation. This distributed model of the Web -- putting the complex stuff on your user's workstations, where it can run quickly and efficiently with the least transfer of information across the Internet -- is a fundamentally new way of dealing with the Web that promises to provide faster response, more complex interaction, and less intrusion of the control structure into the user's immersive on-line experience (which is expanded on in Chapter 5).

The Big Benefits: Speed and Performance

One problem with clicking on URLs is that when you select a hyperlink that calls for another file, the Web browser has to contact the server, locate the file, transfer the file across the Internet, and then display the file on your local workstation. The overhead involved in contacting, finding, and displaying the file is relatively constant regardless of file size.

Shockwave and Java make possible instant interaction with your screen because they both run programs on your Web user's workstation; all overhead is included in the load time, which is comparable to that of large still images for complex Shockwave pieces. This allows your users to have fast local performance because the processing, image display, and other program operations happen locally instead of over the Internet. Furthermore, both Shockwave and Java are highly compact, in some cases requiring less transfer time than a GIF or JPEG image of the same size as the Shockwave animation that may be many seconds long and have multiple buttons.

What's So Hot About Java?

Java, in some ways, provides even more perceived performance than Shockwave because of the way it's designed. The Java programming language has been designed for optimum use over the Internet, particularly for what are called "applets." An applet is a miniature application: a piece of a program that performs, typically, one function as part of a larger scheme for a Web page or Web site. Where a full application -- for example, Microsoft Word or Adobe Photoshop -- takes up many megabytes of disk space and performs hundreds of functions, an applet usually takes up only a couple of kilobytes, sometimes even less, and it does usually one or two things. They're the programming equivalent of guerilla troops -- fast, light, and specialized, but very effective at what they do.

Teaching you how to create applets in the Java programming language is beyond the scope of this book. Fortunately many other resources are out there; the one I've referred to in developing the applets and examples for this chapter is Hooked on Java (Addison-Wesley, 1996). The authors -- Arthur van Hoff, Sami Shaio, and Orca Starbuck -- were all original members of Sun Microsystems' Java development team, and they've written an effective and compact book about this effective and compact programming language. Additionally, several Web sites are devoted to the training and development of Java programmers. You should definitely start with this one: https://www.javasoft.com/

This site is the home page of JavaSoft, which is Sun's division that pertains exclusively to Java. From there, you can browse to links of courses, additional books, and other resources (such as Usenet newsgroups and mailing lists) where you can ask questions and share information with others in the Java programming field. You can also keep track of some promising graphical environments that let you build Java applets by pointing and clicking on menus, imported graphics, and other resources.

What Puts the Shock in Shockwave?

Macromedia's Director multimedia authoring software is easily the most popular, powerful, and widespread authoring tool for creating multimedia presentations, CD-ROMs, and interactive movies. When Director 4.0 was released in 1994, it introduced an unprecedented level of cross-platform compatibility between Windows and Macintosh multimedia titles. You can take a Director movie from a Macintosh, load it into a Windows PC, and edit, compile, and play it on the Microsoft platform. To do this effectively, you need to make very few compromises (mainly in the way that Windows handles color maps, compared to the Mac), but by and large which platform you develop your Director pieces on is completely immaterial.

This made Director a natural for porting to the Web. The Shockwave technology is a joint project between Macromedia and Netscape that permits Director users to put their content up on the Internet and provide playable, CD-ROM quality games and other multimedia directly from a Web page. The way this works is that Netscape provided a plug-in to their Navigator product that permits Shockwave pieces to be played within the browser. Director's compatible source files adapted easily to this scheme, because it meant there was already a well-developed standard for Macintosh and PC users alike; this simplified the process of developing the plug-in. As this book was being prepared for final publication, more than a million Shockwave plug-ins had been downloaded.

One additional piece to the Shockwave puzzle is the Afterburner. This program compresses Director source movies, sometimes by a significant amount. Once compressed, these movies take less time to load over the Web, contributing to the sense of speed and performance that a well-designed Shockwave movie can provide.

To set up your workstation, your site, and your Web page to use Shockwave, you'll need to do a few things; we'll cover all these steps later in this chapter. One worthwhile point is that all of this is free, except for actually purchasing Director; you can download the Shockwave plug-in for Netscape, and also the Afterburner program for both Macintosh and PC, without cost.

As a final note, you may wonder whether I'm talking about Director or Shockwave from time to time. It's simple: Director is the authoring system in which you create multimedia titles, interactive movies, and such; Shockwave is the name of the technology that lets people play these movies after they're running on the Web. You author in Director; you then convert to Shockwave. But it all looks, plays, and works the same no matter what you call it.

What Can You Control with Shockwave?

At one level, Director makes interactivity very simple: if you can see it, you can make it mouse-sensitive -- and you can also animate it. This means that Shockwave is ideal for what I like to call dynamic user interfaces. (One specific kind of dynamic user interface is better known under the term "computer game.") In addition to games -- or simply providing a sense of play and fun to even the most mundane, professional, or scholarly topic in a corporate or educational Web page -- dynamic user interfaces let the developer measure a user's reaction time as a diagnostic for providing additional on-line help, they let you incorporate time-based media such as animation or narration into the user interface, and they let the user interface change as necessary for the user's needs, skill level, or intended application.

Macromedia uses a scripting language called Lingo to control interactivity within a Director title. When you port your Director titles to Shockwave, Lingo for the Web includes scripting commands that let you open other Web pages from within a Director document. You can also run Common Gateway Interchange (CGI) scripts from inside a Director movie as a way of interfacing with applications at your Web site such as database management systems, and you can also link to another Director movie from the same spot.

As with Java, teaching you how to create your own Shockwave pieces is beyond the scope of this book, and also as with Java, several resources are available for learning how to create compelling, exciting movies using Director. One of them is my own book, Macromedia Director: Your Personal Consultant (Ziff-Davis, 1995); in addition, the Macromedia home page provides great information about how to turn a Director title into a Shockwave application. For that, point your browser at: https://www.macromedia.com/

And, as with Java, this chapter will give you a sense of what's possible in using Director as a tool for animation and interactivity, without really training you in how to develop a Director movie from scratch. However, if your company has Director products (such as CD-ROM titles or corporate multimedia training materials) already, or if you are working with a multimedia production company to create them, this chapter will give you everything you need to put these dynamic, interactive pieces up on your Web site.

The Big Gotchas: Where This Stuff Doesn't Work

So if Shockwave and Java are as cool as they are, how come everybody isn't using them? Well, there are a couple of limitations.

To begin with, at the time that I wrote this book, only Netscape supported Shockwave, and that only for the Macintosh and Windows (16- and 32-bit) browsers. If you're using Spyglass Mosaic, or if you're running on a Unix box, you may have to wait a while to be able to see my friendly alien, the vicious life-or-death struggle between Tobiko and Aji, or the peaceful journey of the Bayou Browser as it steams down Ol' Muddy.

Likewise, if you are relying on Netscape 2.0 for the Macintosh, you won't be able to see the Java applets running. In version 3.0 of Netscape (which has just left beta as I completed this book), Java has been included in all Netscape platforms. If you or your organization has chosen to stay with Netscape 2.0 on Macintoshes, you'll at least have the consolation of knowing that Shockwave isn't really well integrated yet in Netscape 3.0 on PCI-bus Power Macs. In short, the Web itself is more dynamic than any content you could possibly create for it, so go with the flow and be on the lookout for "not yet implemented" in a product description.

And none of this addresses people running OS/2 Web browsers or many Unix workstations (aside from Sun and Silicon Graphics, which collectively have the most powerful Web packages in the business). If there's a Netscape browser for your platform, you can probably see much of this, but if you're using some Web-browsing package other than Netscape or Microsoft Internet Explorer, you may not be able to view the animations that this chapter teaches you how to make.

That being said, this chapter assumes that you are using either a Macintosh or a Windows PC as your authoring tool -- except for the animated GIF section, which works on pretty much any graphics-capable personal computer or workstation. Some of the examples here are from one system or another; when the differences matter, I point them out. And with that preamble, let's dive into the various ways of playing -- and interacting with -- animated movies over the Web.

But First, the Old-Fashioned Way

Before diving into Director or Java as animation tools, it's worth taking a look at a simpler way of creating moving pictures on your Web site: animated GIFs. The GIF89a standard permits the encapsulation of multiple images in a single file, and Netscape (among other Web browsers) can display these in sequence.

Animated GIFs rely on the traditional method of animation: drawing multiple versions of a scene, with the characters or objects in a slightly different position in each successive frame. When displayed rapidly, the frames give the illusion of motion.

Animated GIFs are a simple but effective way to create small animations that you can incorporate easily in a Web page. To create them, you'll need an image editor capable of storing multiple images in a single file; these are available over the Net, many as freeware applications. In this chapter, we'll go over a tutorial for creating animated GIFs using GifBuilder, a simple and effective freeware application created by Yves Piguet of Lausanne, Switzerland. This specific application runs on the Macintosh, but the Web site for this book includes references to GIF animation packages for Windows and Unix as well.

The key to GIF animation is that speed -- and hence the fluidity of apparent motion -- is dependent largely on the size of the images. This means that you can animate a whole screen somewhat slowly, but you can animate a thumbnail-sized illustration in such a manner that it blazes along. And with careful design, you can actually create GIF animations that blend into your Web page's background color to give the illusion of depth to a scene -- such as flickering candles or torches on a black background to give the appearance of an underground grotto. For now, let's go over the basics of animation -- whether you're using Director, Java, animated GIFs, or ink and paint.

Animating 2D Images

The art of animation involves making subtle changes to images in such a way that, when the images are flashed before our eyes in rapid succession, they give the appearance of movement. The changes can be simple -- one of the simplest is merely making an object slide across a scene. The changes can be more complex -- the artist may want to manipulate perspective, viewing angle, light, and shadow in the scene being created. These changes can be made by talented human beings. The animators who designed, drew, inked, and painted the opening scene of Pinocchio (considered by many to be the finest piece of animation yet recorded) -- in which Jiminy Cricket hops down the street toward Gepetto's shop and the perspective through the open window changes as Jiminy moves up, down, and closer to the shop -- developed this landmark of animation history without the use of computers, scanners, digitizers, or even hand-held calculators. They did it with pure, raw talent and years of hard work.

Fortunately computers offer the rest of us a wealth of shortcuts in making animation, even if we may never attempt something as vast as a Disney feature. Most important, computers make it incredibly easy to copy images, pixel by pixel, from one frame to the next. We can then modify these images, changing their shape or color or location in the scene, to suit the needs of the animation. We can, perhaps most importantly, undo the operation we just performed with a single mouse click, which eliminates potentially hours of redrawing to correct for a simple mistake. And best of all, we can view our animations immediately and decide immediately whether they work or what needs to be changed. With computers, the playback of animation can become part of the drawing process -- there's no tedious waiting for films to be developed, prints to be made, and rushes to be screened in a darkened mini-theater. The power to be Walt Disney, Cecil B. De Mille, and Orson Welles all rolled into one is within the grasp of anyone with access to a medium-powered computer, a few good books, and a dream. So let's start with a short tutorial on the basics of animation. You can follow along with this one in several ways, on any platform that lets you draw bitmapped images. The tutorial is in two parts:

  1. Creating the frames, using a drawing program of choice
  2. Creating the movie, using a GIF animation package such as GifBuilder

The instructions in each part will be kept general enough that you can use them on a Mac, PC, or Unix workstation as long as you have access to a simple bitmap drawing program (such as Paintbrush on the PC, MacDraw on the Macintosh, or an equivalent on a Unix workstation). If you prefer, you can start with the examples stored in the Web site: https://www.living-history.org/dynaweb/chap4/ This page contains pointers to all the images used in the creation of the animated GIF that this tutorial describes.

Tutorial: Animating GIF Images

Creating animations with multilayer GIF images is a three-part process:

  1. Design the animation and determine its place in the page.
  2. Create the individual frames in the animation.
  3. Import the individual frames into your GIF animation program and create the single file containing the animation you have created.

To include an animated GIF image in a Web page, use the IMG SRC= tag just as for a still image. At the end of this tutorial, I have included the source HTML for the following Web page: https://www.living-history.org/dynaweb/flicker.html

Part 1: Designing the Animation

Designing an animation means analyzing the moving drawing into its component parts, determining which parts need to be redrawn in every frame and which can remain constant, and many other issues. Here is a set of questions you can ask yourself as you begin designing a piece of animation:

  1. What is your visual topic sentence? That is, what is the most important visual element of the scene? Just as a topic sentence in a paragraph introduces the main theme or idea of that paragraph, the visual topic sentence in a piece of animation or video is the backbone on which the rest of that scene's action and imagery is supported. And just like a topic sentence, a visual topic sentence has a subject -- the character you are animating -- and a verb -- the action or motion you are representing.
  2. What is the subject of your visual topic sentence? Is it an animated character (a mouse, a rabbit, a lamp, etc.)? Is it a corporate logo? Is it -- as in the example I use here -- a candle?
  3. What is the verb of your visual topic sentence? Does the character get in a fight with a peg-legged villain? Does the corporate logo fly onto the screen and spin around? Does the candle's flame flicker gently?
  4. What is the nature and purpose of this animated scene? Is it part of a storyline -- either the plot in a piece of fiction or a subject in a corporate marketing or training piece? Is it meant to draw attention to something (like the words "NEW AND IMPROVED!" with a glowing halo around them)? Is it adding atmosphere to a scene (like the flickering candle I've done here as part of an Edgar Allan Poe page)? Is it just to make something look really cool?
  5. How long does or can this action go on? Do you want it to loop and continue playing as long as the page is displayed? For my flickering candle flame, the answer was yes; for the fly-on of a corporate logo, the answer is probably no (because such a motion would both be too distracting and serve no purpose after the initial introduction -- in short, it would look silly). On the other hand, having that logo revolve in place or gleam gently while the page is on view is probably a good way to keep some motion and visual interest in the scene.

For this example, I knew the following:

  1. My visual topic sentence was "A candle flickered slowly in a dark room." Apart from setting the stage for a gloriously Gothic scene of suspense and terror, this introduces the subject (a candle), the verb (flickered), and also gives us some information about the setting (we want it to be on a black background).
  2. Because I wanted the action to go on indefinitely, I could use the same illustration for the candle and simply make the flame dance from side to side. (If I were really being detailed, I would animate drips of wax running down the side of the candle, but we'll let that go for now.)
  3. There were two ways to make the background black. One way was to fill the screen with black and then draw over it with the colors of my candle, the wick, and the flame. The other was to make the background transparent and then set the background of the page to black in HTML. I chose the latter for several reasons, one of them simply being to demonstrate how this works to my readers. Remember also that transparent backgrounds let any background patterns in your Web page show through; you can use this to make an object look as though it's flying, rolling, or crawling across your Web page.

Part 2: Creating the Frames

This section is pure, classic animation -- you draw each frame one after the other, saving each one in a different file, just the way a cartoonist would save each cel out of an animated short before they were copied onto film for the finished product. But because you're using a computer, you have a few advantages that the cel animator doesn't:

By the way, remember also that Photoshop may let you antialias (that is, blend smoothly) the edges of the region you select with the lasso. In smaller GIF animations or in Director cast members, this is almost certainly not what you want. (Why not? Because Photoshop antialiases by blending with the background of the picture you are clipping it from. When you put this cutout into a new part of the background, or an altogether new image, the blended colors will look obviously wrong at the edges. In general, I've found that using the lasso in Director gives better results, when the goal is a Shockwave piece, than using Photoshop. But that's getting ahead of myself.) In short, creating animation directly on the computer has many advantages. On the other hand, if you are more comfortable with the feel of the media under direct fingertip control, or if you're going for a particular look (pencil on coarse drawing paper, for example, or charcoal), you can always draw your frames on paper or paint them on canvas, then scan them into the computer and animate just the scanned images. For certain effects, this may in fact be the method that works best for you. If so, you will be creating the frames on the scanner, retouching them in something like Photoshop, and then saving them as GIF images in preparation for part 3.

For the candle animation used in this tutorial, I created five frames of a candle flame. In each frame, I left the candle and the candle holder as in the original image, then erased the flame and redrew it. The drawing program I used has a "spray-can" option (on some it's an airbrush); I used this option to get see-through flames that would convey the kind of image I wanted. One of the frames is shown here (unavailable).

By erasing the flames and redrawing them with a different set of colors, I ensured that the flames would never be too similar in shape, color, or density -- exactly the effect I wanted to achieve in this piece. Now it was time to put them together into my short movie.

Part 3: Creating the Movie

After you have drawn the individual frames, it's time to open your GIF animation package and begin assembling the frames into a movie. At this point, I was glad of two practices I had adopted earlier in the process:

On the PC, you can use a drawing program such as Paintbrush to create BMP files that you can then copy into the GIF animation package. Again, the Web site associated with this book has details on where to download PC-based GIF animation packages.

GifBuilder takes individual frames that you have saved as GIF, TIFF, or PICT files. I chose to save my drawings as PICTs, with extensions of .pic. GifBuilder works enough like all other GIF animation packages that it's worth looking at here no matter what keystrokes you'll use on the GIF animation package you eventually select.

  1. Open GifBuilder. This gives you a blank frame list and a window, labeled Untitled, that shows the individual frames of your animation as you add them:
  2. Start adding frames. In GifBuilder, you can do this either by pulling down the File menu and selecting Add Frame, or you can type Command-K from the keyboard.

    This brings up the Add Frame dialog, from which you can select the file to add at this point in the sequence of frames you are creating:

  3. When you have added all the files you want to use in the sequence you want to create, pull down the File menu and select Save. This brings up the Save dialog:
  4. Preview the animation by pulling down the Animation menu and selecting Start. This lets you check the motion, sequence, smoothness, and appearance of your GIF animation.

Depending on the effect you want to create, you may want to explore the following options in GifBuilder (or their equivalents in whatever GIF animation package you choose):

One advantage to transparent backgrounds (rather than choosing a solid colored background) is that if you later choose to use a background image in your HTML file, it will show through your GIF animation's transparent areas. If you set the background of your image to a single, predetermined solid color, it'll be that color no matter what background you select in your HTML file.

Finally, I incorporated the animation into an HTML document, with the usual IMG SRC= statement:

<html>

<head>

<title>

Flickering Flames

</title>

</head>

<body text="ff0000">

<h1> The Cask of Amontillado</h1>

<h2> by Edgar Allan Poe</h2>

<img src=""candle2.gif">

The thousands of injuries of Fortunato I bore as best I could, but when he ventured upon insult, I vowed revenge...

<p>

</body>

</html>

The key to this image's appearance is in the <BODY...> line. Because I set the BGCOLOR to 000000 (the hexadecimal value indicating black), this color shows through the transparent areas of my candle-flame animation. Had I set the background of my candle to black, it would look the same in this case, but not if I changed the background of my HTML file. (In later examples, you'll see how to do just this.)

That file, by the way, is available at the following URL: https://www.living-history.org/dynaweb/chap4/flicker.html

Shockwave: Interactivity for Artists

When I was developing my book on Director, I noticed that many people had serious apprehensions about using Director as an authoring tool. It was "too complicated" for some. It had "too steep a learning curve" for others. For a third group, it was "only for programmers."

So I taught my six-year-old daughter how to create animated cartoons with Director. I sat back with my hands in my pockets, guided her through the menus, and she created the piece -- drew it, determined the motion, and animated it -- that I've incorporated on the Web site under the following URL: https://www.living-history.org/dynaweb/chap4/tk_tobi.html

What I suggest is that many people have a particular paradigm with which they view Director -- and now, by extension, Shockwave. Under this paradigm, Director -- which is a powerful and feature-rich program -- is complicated, has a steep learning curve, and is only for programmers.

I'd like to propose an alternate paradigm: that Director is nothing but MacDraw on wheels. If you were working in the computer business when the Macintosh first came out, you probably had a chance to see MacDraw, the simple, bitmap drawing program that let people create surprisingly good illustrations if they had the time and the talent for them. This, of course, has morphed into powerful applications for professional artists and illustrators such as Adobe Illustrator, Macromedia's own Freehand, and many more, but the consumer illustration market all started with the almost ridiculously simple MacDraw.

Fundamentally Director gives you a multicolored version of MacDraw -- with, admittedly, a lot of special effects that determine how it looks -- but one with a special difference. That special difference is that it lets you move your drawings around on the screen (hence the "on wheels" part of this new paradigm).

In the GIF animation tutorial, you placed your illustrations at different locations on the drawing area in the file you were planning to draw, then you had to redraw the image content in order to make it look as though the flames were moving. In Director, one of the types of animation you can create lets you draw the content once, and then you can instruct Director to move the drawings as you command. This introduces the three kinds of animation that Director supports:

In point-to-point animation, you simply specify a beginning and an ending point for your objects to move between. You determine the time value for this movement by choosing the beginning and ending frames of the motion, based on the frame rate you select for this piece. Then Director does the rest. The motion of the boat from left to right across the screen is done with point-to-point animation.

In frame-by-frame animation, you move or redraw or otherwise modify part of the illustration in each frame. This is essentially the same as for GIF animation, except that the program to draw these illustrations and the program to incorporate them into a presentation is the same program. The bobbing of the boat as it moves across the screen and the splashing of the water are done with frame-by-frame animation.

In looped animation, you create a sequence of several individual drawings, one per frame, that repeats over and over throughout a longer clip -- for example, the flapping of butterfly wings as the butterfly circles the screen. You create a single element of your Director piece (called a "cast member") that contains all these individual frames. Then you place that into your Director movie, and Director automatically fills out the time that you select with as many repetitions of that loop as are required.

Some Director Basics

Although this book can't do much more than introduce you to the terminology of Director, we need to cover a few phrases and concepts before beginning to use it in the animation tutorial. The following section gets you started understanding Director's fundamental metaphor for creating animated multimedia pieces.

All the Screen's a Stage

Director uses a theatrical metaphor for the components of the multimedia movies you create with it. This begins by using the word "movie" to describe the file that you create with Director. The part of the screen that contains the animation is called the stage. You can have a stage that is as large as the screen of the computer you're using to author your document, or you can scale it down to various sizes. To keep images small and easily downloaded, I've selected half-NTSC -- 320 by 240 -- as the stage size for this Director piece.

On a real stage, what moves around and chews up the scenery? The cast members, of course. But in Director, everything that shows up on stage is a cast member -- including the scenery, the background, any QuickTime movie clips that you have digitized from video, and even the instructions on what to do when someone clicks on one of the visible cast members.

To determine when and where the cast members move about on the stage, Director has a score. The score keeps track of both time and depth. To determine time, the score shows individual frames, as in frames of animation or of a motion picture. The frames to the right of the screen come after those to the left. You can determine the frame rate individually for each frame, if necessary, to control special effects. Each column in the Director score represents a single frame of the final movie. To position your cast members in the score, simply drag them from their location in the Cast window into the desired frame in the Director Score window. Then you can drag them around on the Stage to position them where they need to be in that particular frame.

Additionally the score determines whether a cast member is closer to or farther from the audience. Each of the rows across the score is called a channel; cast members in channels closer to the top of the screen appear behind cast members in channels closer to the bottom of the screen. A Director movie has 48 channels, meaning that you can have that many cast members on stage at any time.

You can freely move a cast member from one channel to another in any frame. This, for example, would let two characters chase each other around a bush, or let a satellite orbit a planet in outer space.

And All the Seas Are Ink

The next important metaphor for Director is the concept of "ink styles." Neither inks nor styles, ink styles define how the screen looks when you animate your Director movie -- when the cast members actually appear on the stage. Some ink styles are useful mainly for special effects; the ones you'll probably use most often are:

Of Sprites and Scripts

The last two Director concepts are sprites and scripts. Sprites are the visual representations of Cast members. That is, while you drag a Cast member into the Score window, selecting a given frame and channel as described earlier, it is the Sprite that actually is displayed on the Stage when you animate your Director movie. The Cast member itself is like the template; the Sprite is what actually moves, is acted on, and is displayed visually.

This is how the ink styles work: you specify an ink style in the Score window, associated with a particular sprite. This means that you can use a single cast member to display a Sprite using Matte ink, and then later you can use the same Cast member to display a Sprite using Background Transparent ink.


The other place in which the distinction between Sprites and Cast members is important is when you begin writing scripts. A script, in Director, is not the dialog spoken by the characters: it's the instructions on what a cast member or a sprite is to do under certain circumstances -- typically when someone clicks on them with the mouse.

The most common Director script you'll use looks something like this:

on mouseUP
  go to frame I
end


This tells the Director movie that when it detects that the mouse button is lifted (that is, when someone completes a mouse click), the movie is to start playing at frame 1. This script, then, might be one you associate with a button used to rewind the movie, or to start from the beginning.


Director scripts are written in a scripting language called Lingo. I have been known to say (somewhat tongue in cheek) that scripting languages are to programming languages what "downsizing" is to "layoffs" -- in both instances, something that the people in charge think will sound less negative than the more blunt alternative, but equally daunting to someone who is not expecting it.

That being said, the Lingo scripting language is pretty simple. As with HTML, you only really need to know about a half dozen Lingo commands to manage a high degree of interactivity. In fact, probably 90% of a typical interactive movie's point-and-click activity can be handled with a script like the common one just shown. The only real difference is likely to be the frame to which you tell the movie to jump when the script executes.

Lingo and scripting are demonstrated in somewhat more detail later in this chapter. Note, however, that because there are just over 100 Lingo statements, keywords, and commands, the examples given in this chapter are extremely limited and do not represent a significant fraction of what Lingo makes possible. However, they are all you need to know to make interactive movies, on or off the Web.

The generic form of a script is as follows: 

on <some event>
  <do something>
end

The values most commonly used for <some event> (and therefore called event handlers) are:

The most commonly used values for <do something>, at least for the degree of interactivity we'll be discussing here, are:

For example, consider the following two scripts:

Script connected to a button in Frame 100:
on mouseUp
play frame 200
end


Script connected directly to Frame 200"
on exitFrame
play done
end

When you click the button in frame 100, the movie immediately jumps to frame 200, but it remembers where it came from -- in this case, frame 100. The movie plays frame 200, and when it exits the frame, it executes the play done script and returns to frame 101 -- the first frame after the play frame script.

This is very useful for branching to and from menus, such as you might do for a pop-up. We'll go over the specific commands you can use to go to other URLs and other Web resources a little later in this chapter. Right now, however, it's worth taking a look at how Director lets you select an on-screen object: through one of three kinds of scripts.

Director's Script Types
For the purposes of this introduction, consider the following three objects with which you can associate a Director script:

Frame scripts are useful for pausing the movie at a certain point -- for example, when you want to present a menu of choices for the user to select from. To create a frame script, use the Script channel from the Score window -- that's the channel immediately above channel 1.

A typical frame script to pause your movie while the user reads a menu (or reads instructions before continuing, or stops for any other reason) looks like this: 

on exitFrame
    pause
end

This is about as simple as a script can get: when the movie exits this frame -- that is, when it completes all the actions defined in this frame and is ready to move on to the next one -- it pauses. A pause in Director has no predetermined limit. Unless you do something, the Director movie that executes this script pauses until the machine shuts down.

A cast member script is associated with the cast member every time it is displayed in your movie -- with certain exceptions, which we'll get to next. To create a cast member script, click on the Script button from the Paint window. Although our typical frame script tells the movie to do nothing until further notice, a typical Cast member script is the further notice. For instance, the following script might be associated with the Quit button -- which could either be the word "Quit" in a fancy font or might be the ubiquitous red octagon meaning "STOP" in every country that uses traffic signs:

on mouseUp
    quit
end

This script waits for the event mouseUp -- meaning that the user has clicked on the mouse inside the boundaries of the Cast member for which this script is in effect. If the mouse goes up anywhere else on the screen, this script does not execute; the mouse has to be inside this cast member for this script to run.

Finally, there's a sprite script. A sprite script works much like a cast member script, but with two differences:

It's this last point that makes sprite scripts so powerful. You can change the sprite script on a frame-by-frame basis so that different actions occur at different times in your movie. For example, in a twitch game, you might give more points for clicking on something as soon as it appears, and fewer points when it's been on the screen for longer. This ability lets you create Director movies with a high degree of interactivity, in which literally everything that you can see on the screen can be interactive.

For the moment, let's go on with Director as an animation tool. You can create a pretty dynamic Web page with straight, linear Director movies and HTML to control the flow and direction of play. But if you can manage HTML, you can manage Lingo -- it's not that much more complex.

Tutorial: Big Wheel Keep on Turnin'
In this tutorial, you'll see how to use Director to create an animation of an old-time stern-wheeler riverboat. I picked this image because it introduces you to the two most fundamental concepts in animation: motion in a scene and motion in place. In addition, this subject makes it easy to copy whole images within a motion loop, where an action is repeated many times -- a bird's wings flapping, for instance, or in this case a paddle-wheel turning over and over as the riverboat heads across the screen.

For this simple animation, I wanted to use these distinct pieces of the main character:

First, let's make a film loop of the paddle-wheel rotating:

  1. Drag the first cast member of the paddle-wheel animation into any empty frame of the Score window.
  2. Drag the second cast member of the paddle-wheel animation into the next frame after the one selected in step 1.
  3. Drag the third cast member of the paddle-wheel animation into the next frame after the one selected in step 2.
  4. Drag the fourth cast member of the paddle-wheel animation into the next frame after the one selected in step 3.

    If you had more than four frames worth of animation, you would simply continue this until you had all the cast members loaded into consecutive frames this way. The longest movie I've ever made this way was 15 frames, but I don't believe there is a practical upper limit.

  5. Select all four frames from within the Score window, then pull down the Ink Styles menu (at the left of the Score window) and select Bkgnd Transparent.
  6. Test your movie by rewinding the movie, clearing the Stage, and playing the sequence. To do this, type the commands Control-1, Control-R, Control-P (or on the Macintosh Command-1, Command-R, Command-P, where the Command key is the one with the apple shape on it). If you are satisfied with your movie, continue with the following step.
  7. Select all four frames from within the Score window, then pull down the Edit menu and select Copy Cells.
  8. Click on an open Cast member, pull down the Edit menu, and select Paste Cells. Director presents the Name Cast Member dialog:
  9. Type a name for the film loop, then click OK.

You're now ready to move this animation across the screen. To do this:

  1. Drag the film loop cast member into the first frame of your movie -- drag it directly into the frame in the Score window.
  2. Clear the stage by typing Control-1 (on the Macintosh, Command-1). The first frame of the film loop cast member is displayed in the middle of the screen.
  3. Drag the film loop cast member to the leftmost edge of the stage, so that it is not visible at all. When it is positioned as you want it, type Control-1 (Command-1 on the Macintosh) to redisplay the Score window.
  4. Assuming that the frame rate is set to 30 frames per second (the default), set up a 2-second animation by dragging the film loop cast member into frame 60.
  5. Type Control-1 (Command-1 on the Macintosh) to clear the stage, then drag the paddle-wheel to the rightmost edge of the stage, so that it is not visible at all. Then type Control-1 (Command-1 on the Macintosh) to redisplay the Score window.
  6. Click on the movie in frame 60, then scroll back to frame 1 and shift-click the movie in frame 1 (that is, hold down the shift key and click with the mouse).
  7. Type Control-B (or Command-B on the Macintosh). Director fills in the intermediate frames between frame 1 and frame 60.
  8. Play your movie: type Control-1, Control-R, Control-P (or Command-1, Command-R, Command-P on the Macintosh). You should see the paddle-wheel rotating as it moves from left to right.

To move the riverboat as well, follow the same procedure but make the riverboat's alignment the same, with respect to the center of the paddle-wheel, in frames 1 and 60. Then perform steps 6 and 7 of the preceding sequence to generate the intermediate frames for the riverboat as well. Now when you play your movie, you will see the riverboat moving from left to right, and the paddle-wheel turning as it moves from left to right.

Some things to look out for:

  1. Is the paddle-wheel in front of the boat or behind it? If you've made your riverboat a stern-wheeler, the paddle-wheel should be in a channel closer to the top of the screen than the boat's channel. If it's a side-wheeler, the paddle-wheel's channel should be closer to the bottom of the screen so that it's visible in front of the hull.
  2. Do the hull and the paddle-wheel retain their alignment all the way through the movie? If not, you can select one frame at a time, choosing either the paddle-wheel or the hull, and "tweak" that sprite's location on the stage with the arrow keys. Each time you press on an arrow key, the sprite you selected moves one pixel in the direction of the arrow. This is a great way to fine-tune your animation.

If you do nothing but animation like this, you can develop exciting, dynamic multimedia content for your Web page. There's a lot more -- but what's particularly exciting about Shockwave is that once I ran my own riverboat movie through Macromedia's compression program, the entire animation resulted in a file of only 22 kilobytes. And what makes that so exciting is that the candle animation that I created for my animated GIFs example is 17 kilobytes -- and there's no opportunity to put additional buttons within the candle animation. This means that load time is short and animation/interactivity is fast -- just the combination Web surfers and Webmasters alike have been looking for.

What's involved in converting your Director movie to a Shockwave movie? Only about four mouse clicks and a call to your system administrator (or a little file editing if you're comfortable working in Unix). In the next tutorial, we'll see exactly what's involved in converting Director movies so they'll run from your Web page.

Tutorial: Adding a Shockwave Title to Your Web Page

To use a Shockwave title in your Web page, you need to take the following steps (detailed instructions for each activity come next):

  1. Set up the correct MIME application types on your Web server's home page directory. (Must be done once per site.)
  2. Run your Director movie through Macromedia's Afterburner program to compress it for faster loading. (Must be done once per movie.)
  3. Copy the compressed Director movie to your Web site. (Must be done once per movie.)
  4. Embed the URL for your compressed Director movie into the appropriate Web page using the correct HTML tag and format. (Must be done once per HTML page using this movie.)
  5. Download the Netscape Shockwave plug-in for your Web browser so that you can view your Shockwave movie on your Web page. (Must be done for every browser that wants to view the Shockwave movie.)

In order, then, here are the detailed instructions for each step of setting up your site and your Web page for Shockwave.

Set Up the MIME Application Types

MIME is a multimedia encoding technique supported across multiple platforms as a way of distributing media types. Your Web server needs to have an entry in your top-level directory indicating that your Web server supports all three primary Director file types -- .DIR (plain Director files), .DCR (compressed Director files), and .DXR (locked Director files).

To do this on a Unix system, you need to create a file called .hdefaults, with the following three lines in it:
x-application/dcr
x-application/dxr
x-application/dir

On other Web servers, you need to locate the appropriate MIME encapsulation settings (whether in system files or in a menu) and give permission for these application file types to be served.

Run Your Director Movie Through Afterburner

The Afterburner program is a utility (distributed without cost by Macromedia) with which you can compress Director files, significantly speeding their load time. The Director movie that produces the riverboat animation used in this chapter is 116 kilobytes uncompressed; after running the file through Afterburner, the output is only 22K.

To run a file through Afterburner, follow this procedure:

  1. Double-click on the Afterburner icon to open it.
  2. From the File menu, select Open. Browse to the Director file you want to compress, and double-click onÊit.
  3. Afterburner displays a Save As dialog box. For safest results across platforms, save your file with a name that uses no more than eight characters, followed by a period and the letters DCR.
  4. From the File menu, pull down and select Quit.

Copy the Compressed Movie to Your Web Site

Follow the steps you use to copy files to your Web server. If your Web server is the same machine with which you authored this Director piece and compressed it using Afterburner, simply copy the file into the appropriate directory on your server.

If you use the Macintosh to develop your Shockwave files, you'll have to make sure to use several settings when copying your compressed Director movie. The notes here apply to the popular Fetch FTP program.

  1. In your FTP program, make sure you select Binary as the file transfer type. In Fetch, for example, the transfer dialog has three radio buttons: Automatic, Text, and Binary. Select Binary.
  2. Click on the Put command to begin the transfer, then navigate to the appropriate directory for the Director movie you converted with Afterburner.
  3. Double-click on the Director movie you converted with Afterburner. Fetch displays a dialog box from which you can select the filename at the destination, and also the file transmission format.
  4. Make sure the filename ends in .DCR, and select Raw Data as the file transmission format. (The file transmission format list is available under the pull-down box at the bottom of this dialog; it typically reads MacBinary by default for binary files.)

This setting copies the Shockwave file in a format that other computer systems can read and play.

Embed the URL into the Appropriate Web Page

Now that you've got your Shockwave file uploaded to your Web server, and your Web server knows how to deal with the MIME type, all that's left is to embed the Shockwave movie in a Web page. The following line of HTML shows how to do this for our riverboat example:

<EMBED SRC="riverboat.dcr" WIDTH = 480 HEIGHT= 360

TEXT FOCUS=onStart PALETTE=foreground>


In this line, the EMBED tag sets up Netscape to embed a media element at this point in the page. (Note that EMBED is one of the few HTML tags that does not have a corresponding /EMBED tag to turn it off. Like the <P> tag, the EMBED tag is self-contained.) As with images, the SRC="riverboat.dcr" parameter tells Netscape to look in the same directory (because no alternate directory is named) and to load the riverboat.dcr file. Next come the WIDTH and HEIGHT parameters, which tell Netscape how much room in each axis to leave for the image when it is loaded.

TEXTFOCUS=onStart tells Netscape that the Macromedia file you want to load will have text focus -- that is, will be listening for input -- as soon as it starts running. (For other values, see the Macromedia Web page, at https://www.macromedia.com.)

PALETTE=foreground tells Netscape to use the movie's color palette for the movie, not the entire page. Omitting this parameter can cause interesting results if you play a Macintosh-generated Director movie on a machine running Windows. Be sure to save the palette you want to use as an explicit part of your Director file. (Briefly, Director lets you incorporate specific color palettes, which lets a talented art director optimize a series of palettes around a particular object, color scheme, or other motif.)

If Your User Doesn't Have Shockwave

You can use the NOEMBED tag to set up an alternative for users who do not have Shockwave loaded on their browser. This way they can at least see some images -- and if you use animated GIFs, they may even be able to see some motion as well. 

The NOEMBED tag works as follows:

<NOEMBED>
<IMG SRC="replacement.gif">
</NOEMBED>


If this Web page is read by a browser that does not support the Shockwave
plug-in, that user's screen displays the file replacement.gif (or any other
file that you include in the IMG SRC= line). 


Of course, if you're really being considerate (and if you really think
your Director movies are the coolest things since sliced bytes), you'll
include a hypertext link to Macromedia's download site so that your users
can easily obtain the Shockwave plug-in. 


Download the Netscape Shockwave Plug-in


To download Shockwave, browse to the following URL: https://www-1.macromedia.com/Tools/Shockwave/Plugin/plugin.cgi
This page lists the currently available servers for downloading the Shockwave
plug-in for all supported platforms. Note that Windows 16-bit and Windows
32-bit versions are different; be sure you download the correct plug-in.



After you download the plug-in, it's stored as a self-extracting archive
document that automatically uncompresses itself. When the plug-in is uncompressed,
you must install it as indicated in the README file that comes with your
system's version of Shockwave. 


There are no surprises -- PC users will find the familiar setup.exe,
which installs the appropriate .DLL files and all the other information
necessary to run Shockwave, whereas on the Macintosh, the files are automatically
copied into the right directory. In either case, you will need to restart
your computer after you have installed the Shockwave plug-in. 


For More Information


The best source of information on Shockwave at this time is Macromedia's
own Web page on the subject: https://www-1.macromedia.com/Tools/Shockwave/Director/contents.html



Be sure not to break the line in your Web browser -- that should all
be typed in without a carriage return to get to the right place within
Macromedia. 


Using Shockwave as a Dynamic User Interface


So far, we've covered how to make dynamic pieces with Director and
Shockwave, and how to incorporate them into your Web site. It's one thing
to have an animation running at the top of your Web page, drawing people's
attention to the main features of your site or your organization's primary
function, service, product, or benefits. But you can also make the Shockwave
portion of your Web page the user interface to your entire site. Doing
this requires that you learn a little of the Lingo scripting language.



As mentioned earlier, Director lets you make any visual element into
a button -- that is, into an object that you can click on as a way of controlling
the flow of the Director movie. This level of interactivity is carried
over completely to Shockwave, which means it is available within your Web
page. 


This provides the developer of multimedia for the Web with two specific
benefits. First, it means that if you have time-based media or interactivity-based
products or services (and CD-ROM games are the most obvious, but by no
means exclusive, example of this), you can now incorporate those directly
on your Web page. For example, if your company produces interactive CD-ROMs
using Director, you can create "trial versions" of your company's
products, previews if you will, that run on the Web. And just as obviously,
one of the buttons that will be included in the preview that is not in
the consumer version is a button to order your company's product over the
Web. 


But more important, especially for companies that deliver their product
or service directly over the Web, is the second benefit: you can use Director
as the guide to other locations on your Web site by linking the buttons
in your Director title to specific URLs. For example, you can have a visual
table of contents to your site's services or to other information elsewhere
in your hierarchy. This, of course, you can do with an image map. 


But there's more. Because Director is a powerful multimedia package
on its own, you can add sound, animation, or other effects to the table
of contents itself. For example, you can associate narration with each
button, allowing your Web users to hear a description of the information
available at the destination of each link. You can have a short demonstration
or sample image of what's available when they choose a destination from
your table of contents. And, of course, you can simply put in wicked awesome
cool special effects when people click on something. This is supposed to
be fun, after all, right? 


Reference: Shockwave Commands for the Web


The key to Shockwave as a user interface for your Web page is that
it supports running asynchronous activities (meaning they can be started
independently without requiring synchronization with some other activity
such as the completion of a file transfer) over your Web connection. 


Examples of these asynchronous activities are: 


Shockwave supports only four such asynchronous operations at one time,
however, so be sure to manage your Shockwave titles so that no more than
four operations can be selected from any given location. 


Interacting with the Web Via Director
In addition to the standalone Lingo used in Director movies, Shockwave
supports the following Lingo commands as ways of interacting with items
on the Web:



getNetText 


This command uses HTTP to fetch text from a file somewhere on the Web.
The text will be available to another Lingo function, netTextResult();
you can then use that text to display information within a Director movie,
as the contents of a text field. 


        To use getNetText, follow this format:


        on mouseUp
            getNetText "https://www.foo.com/intro.txt"
        end



This Lingo script retrieves the contents of the file intro.txt
at the URL www.foo.com. This way, you can use Director as a dynamic
way of getting at text information, displaying it in an animated or interactive
form, or possibly even displaying the results of another activity (such
as the output of a database search called from a CGI script).



preloadNetThing 


This command preloads some object from the Net -- a Director movie,
a graphic, a Web page, or anything else that HTTP can transport. This asynchronous
command operates while the current movie is playing, making it possible
to display an animation or play a sound while your Shockwave movie downloads
the next chapter. 


To find out whether a preloadNetThing operation has finished,
use netDone (described later).


        To use preloadNetThing, follow this format:


        on mouseUp
            preloadNetThing "https://www.foo.com/movie.html"
        end



This Lingo script preloads the movie embedded in the HTML page found
at the URL in quotes. While that movie preloads into Netscape, the current
movie -- that is, whichever movie was displayed when the user clicked on
the object associated with the script shown here -- continues playing.



You could also preload a graphic, a video clip, a sound file, or any
other object, including an entire Web page with its own graphics, video,
and sound. Why this is so cool, however, is that you can leave a sound
clip or an animation playing while the loading goes on, giving your audience
something to do while they wait (kind of like the music playing while they're
on hold, only one hopes not quite so annoying.) Then, the user's copy of
Netscape can display the preloaded item immediately, as it's already on
your user's local disk cache instead of out on the Web somewhere. This
is the way to display video clips, for instance, or to give people something
entertaining to do while downloading.



gotoNetMovie


This command retrieves and begins playing a new Director movie from
the network. The current movie continues playing until the new movie is
available. When the new movie finishes loading, the Shockwave plug-in quits
playing the first movie immediately, without warning, and begins playing
the new movie inside the same display area as the current movie. (This
means it's a good idea to standardize on a screen size for your Shockwave
movies; I like 320 x 240, which is large enough to get some good content
yet small enough to load quickly and fit inside a typical Web page.) 


This command takes a URL as its parameter, but note that it can be either
of two kinds of URL:

1. A filename, in which case it takes the entire movie

2. A filename plus an anchor, in which case it begins playing the movie
at the frame indicated in the anchor.

Here is an example:


        on mouseUp
            gotoNetMovie "https://www.foo.com/movie2.dcr"
        end



This script loads movie2.dcr from www.foo.com, beginning to play it
from the first frame as soon as the movie finishes loading. (This is the
network equivalent of the traditional Lingo code, goto frame 1 of movie
"movie2".)

Here is another example:


        on mouseUp
            gotoNetMovie "https://www.foo.com/movie2.dcr#Part2"
        end



This script loads movie2.dcr from www.foo.com, but begins playing it
from the frame named Part2 as soon as it finishes loading. (This is the
network equivalent of the traditional Lingo code,


goto frame "Part2" of movie "movie2".) 




You can only run one gotoNetMovie statement at a time; if one gotoNetMovie
statement is in progress and you issue a second before the first one finishes,
the second one cancels the first.



gotoNetPage


This command opens a URL, which can be a shocked Director movie or any
other MIME type. On completion, this command opens a new page in the Web
browser. As with getNetText or preloadNetThing, you can check the status
of gotoNetPage with the netDone() function.



netTextResult() 


This function returns the text result of a getNetText statement. You
cannot call netTextResult until the getNetText statement completes; to
test for this, see the netDone() function.



netDone() 


This function returns a value, either true or false, depending on whether
getNetText, preloadNetThing, or gotoNetPage are finished. By default --
that is, if none of those other Lingo commands has been executed -- netDone()
returns TRUE. Once you have started a net operation, and while that operation
is in progress, netDone() returns FALSE. It returns TRUE again once the
operation is complete, or when the operation has been terminated by an
error in the browser. 


You must check netDone() and it must return TRUE, before you can put
the text retrieved by getNetText (and then returned by a call to netTextResult)
into a variable or a Cast member. For example:


        --cast member script:
        on mouseUp
            getNetText "https://www.foo.com/intro.txt"
        end
        --frame script:
        on exitFrame
            if netDone() = TRUE then
                put netTextResult() into field "Intro text"
                go to the frame + 1
            end if
            go to the frame
        end
        




When your user clicks the button to which the cast member script is attached,
the Director movie begins loading the text stored in the file intro.txt
at the location www.foo.com. The frame script then checks netDone as it
exits the frame. If netDone returns FALSE (as it will till the getNetText
call completes), the script jumps out of the if and executes the next line,
which is go to the frame -- meaning it loops on this frame until netDone
returns TRUE. When netDone returns TRUE, the script loads netTextResult
into a field titled "Intro Text," and then the script passes
control to the next frame, terminating the loop.



getLatestNetID() 


This function returns a unique identifier for the last asynchronous
operation that you started. This way you can check netDone() for each individual
process by storing the unique identifier for each of the operations you
have running.


What You Can't Do


Although most Director functions are supported in Shockwave, a few
are impossible to provide at present, because of the physical nature of
the network. 


The most crucial absence from Director is linked media. In standalone
Director movies, you can link a Cast member -- rather than importing it
directly into the movie. In particular, QuickTime movies work this way,
meaning that QuickTime is not supported in the 1.0 release of Shockwave.



In the interim, you can do one of two things: 


You also can't run a movie-in-a-window as you can in standalone Director
applications. (For more information on this feature, see the Director documentation.)



Shockwave files cannot use any of the Wait For options in the Tempo
channel. This means if your Director movie waits for a mouse click, you
must write a simple Lingo script that listens for a mouse click rather
than using the Tempo channel. 


One final feature of Shockwave is that you can play more than one movie
on a page; users can scroll up and down through the HTML page while the
Director movies play. The movie can also access information on the Web,
using the Lingo commands outlined here, and can also open additional URLs
if you've set the movies up to do so. 


This leads to two suggested restrictions, one on the number of movies
to include in a given page and another on sound tracks:


Finally, you can program a Director movie to repeat infinitely simply
by writing a Lingo script that goes to the first frame at the exit of the
last one. This can, however, cause problems for your users, as well as
tying up processor time. Macromedia strongly recommends that you program
the movie to stop playing after a certain number of loops, or better yet,
provide some way for the user to stop the movie at any time. 


Java: Interactivity for Programmers


Unlike GIF animation and Director, Java -- the third way of adding
high-performance interactivity to your Web site -- is a programming language.
This doesn't mean you have to be a programmer to use it; it just means
you have to be able to learn a programming language. And no, that's not
entirely as smart-alecky as it sounds. 


Java is a very simple form of a programming language, at least as programming
languages go. It handles many of the ugly, difficult concepts for you (like
memory reallocation) automatically. It's a very safe language, meaning
that its structure does not permit operations that can cause problems on
the client machines. Specifically it's a byte-code language rather than
a machine-code language; this means that all Java applets compile to a
series of byte codes, which in turn are interpreted by the Java browser
at run time. The Java instructions are never executed by the microprocessor
on the client machine, and the Java interpreter makes sure that only safe
operations (such as writing to local memory) are performed. 


If you want to get into Java, refer to one of the books I've mentioned
in this chapter, or check the Appendix under On-line Resources to learn
where you can find out more about Java. If you're not reluctant to dive
into a new programming language, Java offers you the power and flexibility
that only writing your own code can give you. In addition, Java compiles
into very compact applets, meaning that they cross the Net swiftly and
perform rapidly, saving both download time and performance time. 


If you don't particularly want to code your own Java applets, you can
still use already coded applets from some other source, whether from the
comp.lang.java newsgroup or from a hired programmer. Incorporating a Java
applet into your Web page is no more difficult than doing the same task
for a Shockwave file. The following tutorial shows you how to add a Java
applet to a Web page, using an example on the book's Web site. 


Tutorial: Adding a Java Applet to Your Web Page


This tutorial uses one of the Java applets written by James Gosling
and included on the CD-ROM distributed with Hooked on Java (Addison-Wesley,
1996). Gosling's animation applet, called ImageLoop, plays a sequence of
images in much the same way as the GIF animation we did earlier. In fact,
you can use the same images to generate animations, and you can compare
the animated GIFs to the Java version of the same scene. 


For this tutorial, you'll need to create a series of five small image
files, 160 pixels wide by 120 pixels high, in GIF format, and store them
on your Web site. For their names, call them T1.gif, T2.gif, T3.gif, T4.gif,
T5.gif, and T6.gif. Note the directory in which you stored them -- that
will become one of the parameters you need to pass to ImageLoop when you
build your sample Java-powered Web page.


  1. Download the Java applet titled ImageLoop, which you can find at the
following URL: https://www.living-history.org/dynaweb/java/imageloop.html

  2. Put this Java applet on your own Web page (or in a directory that
you can then open with Netscape).

  3. Copy your five GIF images into the same directory on your Web page (or
on your workstation's local hard drive) that contains the Java applet you
downloaded in step 1. Then, at that same level, create another directory
called frames.

  4. In the same directory that contains the Java applet and the directory
called frames (but not in the frames directory itself), create an HTML
file with the following lines in the <BODY> portion of the
file:

<applet code=ImageLooopItem width=160 height=120 align=right>


<param name=nimgs value=6>


<param name=img value=frames>


<param name=pause value=100>


</applet>




That's all there is to it; these lines pass parameters -- special values
that control the way the applet works -- to ImageLoop when someone loads
this Web page. Here's what each line of HTML does:



<applet code=ImageLoopItem width=160 height=120 align=right>


This line loads the applet called ImageLoop at this point in your Web
page.  It reserves room for an image 160 pixels wide by 120 pixels high
-- 1/4 the size off a standard NTSC screen -- and aligns it with the right
edge of the page.


<paramname=nimgsvalue=6>




       This line sets up the nimgs (short for number of images) parameter
to the ImageLoop applet.  The nimgs parameter tells ImageLoop how many
individual images are in the loop, so that it can set its counters for
any number of images. 




       In this case, the value is 6, the number of frames used in this
tutorial.  Later, use the number that corespond s to theactual number of
frames you have created.


<param name=img value=frames>




     This line sets up the parameter that tells the applet where to look
for the images.  In this case, you created a directory called frames in
which all the images were stored.  This is why you need to name your individual
frames so carefully: ImageLoop expects files called T1.gif, T2.gif, and
so on through the last frame.  Furthermore, it expects a number of frames
equal to the value you specified for the nimgs parameter on the previous
line.


<param name=pause value=100>




        This line tells the applet how long to pause before displaying
the next image; the pause is measured in milliseconds (thousandths of a
second).  Therefore, this line pauses the applet for 1/10 of a second between
frames.


</applet>




        This line ends the applet tag.


Other Kinds of Buttons


Using Thumbnails as Hot Links

You can use any image as the contents of a hypertext link by following
this format:


<a href="jump.html"><img src="jumpthumb.jpg"></a>


In this example, jump.html represents the file that acts as the destination
of the hypertext jump; jumpthumb.jpg is the JPEG file that is displayed
as the contents of the jump. By default, this shows up with a blue border
around the image. You can turn this off by adding the parameter BORDER=0
to the end of the IMG SRC= tag. 


And, of course, you can combine this with the GIF animation technique
presented earlier in this chapter. By combining the two, you can create
small, animated buttons that flicker, blink, or otherwise move to attract
your users' attention, but which are themselves hyperlinks to other places
on your Web site. 


One way to build a kind of image map -- and possibly a dynamic one at
that -- is to build up an array of several animated GIFs, using the <BR>
tag at the end of each line and making a kind of animated mosaic. Not all
the GIFs have to be hypertext links. It's possible to have them act as
placeholders, as alignment markers, or as noninteractive visual content
(that is, pictures you don't click on). For example, you could come up
with a standard bottom-of-the-page menu bar using something like this:



<hr>


<a href="index.html">


<img src="home.gif"border=0>


</a>


<img src="decoration.gif" border=0>


<a href="screen2.html">


<img src="right_arrow.gif" border=0>


</a>




To set up your Web page for an example like this, you'd need the following
files:


The first time you try this with multiple thumbnails as a pieced image
map (call it an "image quilt" if you like), you'll notice that
Netscape 2.0 does something ugly. If you have spaces or line breaks --
that is, if you press the Return key -- between two image maps used as
the display portion of a hypertext anchor, Netscape shows a single, tiny
blue underline between the pictures. The solution to this problem is to
remove the line breaks and spaces -- just put everything on a single line
in your HTML file. (You'll need to open the file in a text editor, such
as Notepad, SimpleText, or vi, to make this kind of change -- it's not
something you can do in any of the WYSIWYG HTML editors I've used.) 


For an example of how to compose an HTML page with not only a graphical
menu bar, but an animated graphical menu bar, take a look at the following
URL: https://www.living-history.org/cchase/



This is the Web page for Cherry Chase Elementary School, and each of
the animated images represents a different hypertext link. If you browse
to that link and View Source, you'll see the following text: 


<html>

<head>

<title>Cherry Chase Home Page</title>

<body bgcolor="#ffffff">

<center>

<img src="ccicon.jpg">

<h1>

Cherry Chase Elementary School

</h1>

Check out some of the great activities we have on our Web page!

<p>

<a href="https://www.living-history.org/cchase/kids.html"><img
src="kidsnaps.gif" border =0></a><a href="https://www.living-history.org/cchase/staff.html"><img
src="staff.gif" border =0></a><a href="https://www.living-history.org/cchase/community.html"><img
src="pizza.gif" border =0></a><a href="https://www.living-history.org/cchase/calendar.html"><img
src="tree.gif" border =0></a><a href="https://www.living-history.org/cchase/activities.html"><img
src="donna.gif" border =0></a>

<p>

<font size=-6>

Copyright (c) 1996 Scott Fisher/Sunnyvale School District

</font>

</body>

</html>


This doesn't make for the most readable HTML code in the world, but
it has the desired effect in the browser. Each of the GIF animations appears
directly adjacent to its neighbor, with no space, borders, lines, or other
blemishes to mar the menu bar. 


If you click on any of the animated GIFs, you'll notice that the destination
page retains the same GIF animation at the top and center of the page.
This isn't technically an animation issue, it's a human-interface issue,
but one that is worth pointing out here. It reinforces the sense of where
in the Web page's structure you've ended up, and helps build additional
understanding for repeat visits. And since this Web page is meant to be
used again and again by students, parents, teachers, and other people associated
with the school, it's a good way to build this kind of usability. 


We noticed one other problem while creating some of the GIF animations
used elsewhere on the Web site as examples for this chapter: 


Netscape 2.0 for the Macintosh does not correctly handle GIF animations
that set the background color to transparent. Instead, the background was
transparent on the first frame of the image, but then turned black afterward.
(You'll notice that this doesn't appear as a problem in the Edgar Allan
Poe example, where the background of the HTML file is set to black.) This
caused something of a sleepless night, because I was sure I'd done something
wrong in GifBuilder -- chosen an incorrect disposition method, set some
value to the wrong option, or something like that. 


It turned out that on Windows and Unix workstations running Netscape
2.0, and on Macintoshes running Netscape 3.0, the GIF animations did "the
right thing" -- displayed the Web page's background correctly through
the transparent background of the GIF, as originally intended. So don't
be too hasty to assume, in these days of rapid Web development, that every
mistake on your Web page is your own fault. 


In the next chapter, we'll move away from a strict reliance on technology
and into a part of Web page design -- and for that matter, multimedia design
in general -- that gets very little attention, yet can make the single
biggest difference in how you develop your multimedia title and what effect
it has on your audience. For the coming chapter, we'll put programs and
coding aside for a while and concentrate on something a little different.
So let's gather around the digital campfire, listen to the crackling of
electronic logs, pull our windbreakers a little closer around our shoulders
as protection from the strange noises of the night that trickle in from
outside the lambent golden pool of light from the fire, and get ready to
dive into a question that's as old as language: what makes a good story?





Comments are welcome


Copyright © 1996 Addison Wesley
 and

Revised: Dec. 26, 1996