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:
- Three technologies for creating animation you can use in your Web page (animated GIFs, Java, and Director/Shockwave)
- Three different techniques for creating animation (point-to-point, path-based, and frame-by-frame animation)
- Strategies for maximizing the speed, performance, and interactivity of your animations while minimizing load time
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: http://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: http://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:
- Creating the frames, using a drawing program of choice
- 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: http://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:
- Design the animation and determine its place in the page.
- Create the individual frames in the animation.
- 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: http://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:
- 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.
- 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?
- 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?
- 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?
- 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:
- 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).
- 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.)
- 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:
- You can use your program's Save As menu option to make an exact copy of frame 1, then modify the drawing in it when you create frame 2. This means you don't have to redraw the parts of the scene or the character that are the same in both frames.
- You can easily undo a change you don't like by whatever your drawing program's Undo command uses -- probably Control-Z, Command-Z, or pull down the File menu and select Undo.
- As a tip for best use of Undo, remember to let go of the mouse button often -- the Undo command erases everything you did back to the last time you pressed the mouse button. Many times I have been frustrated when drawing: my image looks really great, I keep drawing away at it, and then after a 20-second one-line drawing operation I make a mistake or the mouse ball sticks or something else goes wrong and I have to throw away the whole thing. Now I let go of the mouse button the instant I have something I don't want to lose. (This is the counterpart of my advice to use the Save command often so that, in the worst case, you can get back to a previous version of the file if you make mistakes that you can't undo easily.)
- You can easily cut, copy, and paste pieces of an image into new orders, sequences, or locations. Thus, if you are moving an object across the screen, you can draw around it (in most draw programs, select the lasso button for this), then either drag it or cut it and repaste it into the desired spot.
- Another tip with the lasso key: Most graphics programs (I know this works in Photoshop and Director) let you "pin" down segments of the area you select with the lasso by holding down the Alt key (on PCs) or the Command key (on Macintoshes), then clicking at each place you want to become part of the outline you're selecting with the lasso.
- You can fill entire regions with a single mouse click (and the paint bucket icon). This makes it simple and very, very quick to fill in the bare patches in an animated character.
- You can copy the output of another program into your frames. For example, if you are using a 3D drawing tool to create the once-ubiquitous flying chrome logo for your corporate sponsor, you can position the logo at its desired angle, set up the lights just so, and then take a screen snapshot. You can then import that screen snapshot into your paint/draw package, edit out just the logo portion, and create the animated GIF as included in the rest of this chapter.
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:
- I put all my frames into the same directory, making it much simpler to find and open them.
- I named my frames in sequence, from candle02.pic through candle06.pic, making it easy to tell which one came when in the movie's order. (There is no candle01.pic. Don't worry about it.)
- Symantec GreatWorks, a word-processing/spreadsheet/database/drawing package I bought when I bought my Mac Classic in 1992. This $99 program handles an amazing amount of work, from writing and setting the type for my first book to drawing the frames for a GIF animation.
- GifBuilder 0.3.2, a freeware package created by Yves Piguet of Switzerland. This program allows you to create multiframe GIFs. You can find out where to download this program on the Web site associated with this book.
For this application, I used two pieces of software that run on the Macintosh:
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.
- 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:
- 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
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:
- 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:
- 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):
- Loop: This menu selection brings up the following dialog:
- Background: For this animation, I wanted the background to be transparent. I'd saved the individual frames with white backgrounds because GifBuilder lets you specify white as one of the options to make transparent. Note that you'll need to make sure that any white areas in your image are colored very pale gray or yellow instead of pure white if you choose to make white transparent.
For my animation, I wanted the candle to flicker as long as the image was on the screen. If I had a one-time animation such as a fly-on or a single sequence, I would have selected No. Additionally, GifBuilder lets you select a specified number of times to repeat before shutting off.
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:
<h1> The Cask of Amontillado</h1>
<h2> by Edgar Allan Poe</h2>
The thousands of injuries of Fortunato I bore as best I could, but when he ventured upon insult, I vowed revenge...
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: http://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: http://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:
- Point-to-point animation
- Frame-by-frame animation
- Looped animation
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:
- Copy -- this draws the Cast member exactly as it appears, including the "slug" of background color that appears behind the Cast member. This means that if your Cast member is circular (as is the paddle-wheel in the next tutorial), it appears as a circle on a white square when it shows up on the screen. This is probably not what you want, though it is useful for keeping contrasting background for text fly-ons and buttons. The following diagram demonstrates how these ink styles affect illustrations: (unavailable)
- Matte -- this draws the Cast member without the white slug in the background, following instead the outline of the shape. Any white areas inside the outermost perimeter of the Cast member, however, are kept opaque.
- Background transparent -- this draws the Cast member without either the white slug or any trapped white areas.
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:
go to frame I
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>
The values most commonly used for <some event> (and therefore
called event handlers) are:
- mouseUp -- execute this script when the mouse button is lifted, signifying the completion of a click
- mouseDown -- execute this script when the mouse button is first pressed. For example, this event handler could be used to pop up a menu of selections, just the way a menu pops up when you press the mouse button on the menu bar of a Macintosh or Windows system.
- enterFrame -- execute this script as soon as the movie starts playing the current frame. The typical use for this event handler is to perform some scripting operation (such as clearing or initializing a variable) that needs to be performed before a movie (or a portion of a movie) can begin playing.
- exitFrame -- execute this script as soon as the movie leaves the current frame. The typical use for this event handler is to pause a movie's action, for example, to keep displaying a menu until the user clicks on one or another of the options.
The most commonly used values for <do something>, at least for the degree of interactivity we'll be discussing here, are:
- go to frame ### -- jump to the named frame and begin playing
the movie at that point. Director lets you use names as well as numbers
for the frames in a movie; this is highly recommended, as you can add frames
inside a movie at any point (much the way you can splice film into a motion
picture when editing). If you add or remove frames, the frame numbers after
that point change, and a command to go to a given frame causes a jump to
the wrong part of the movie.
- pause -- suspend the movie operation until another event handler detects something. This is most typically used with the event handler on exitFrame, as a way of keeping the movie on a given frame (such as a menu or other choice) until the user selects something.
- go to the frame -- keep executing this frame. This has a similar effect to "pause," unless you have some calculation or some other scripted operation that this frame performs. In that case, a script reading on exitFrame pause executes its script once, then holds at the end of the frame; a script reading on exitFrame go to the frame executes its script every time the frame is executed.
- play frame ### -- begin executing the movie at the frame indicated (by name or number), but remember what frame you jumped from and return to the frame immediately following it when play is completed. This works in conjunction with the next value, play done.
- play done -- terminate a jump previously set up with a play frame ### script, and return to the first frame after the frame containing the play frame ### script.
For example, consider the following two scripts:
Script connected to a button in Frame 100:
play frame 200
Script connected directly to Frame 200"
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:
- A frame of the Director movie
- A Cast member
- A sprite
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:
- You create a sprite script by clicking on the frame and channel that has a particular cast member loaded; then you click on the Script window (in the upper left corner of the Score window) and select New from the pull-down menu that appears.
- More important, a sprite script is associated only with the sprite in that frame -- not with any other sprite in any other frame, even if you use the same cast member somewhere else in your movie.
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:
- The riverboat itself, or specifically its hull and superstructure for boat enthusiasts
- The paddle-wheel, drawn as four separate components of a movie
- The water line, several opaque wavy lines that could be moved and modified individually to simulate the motion of the river's surface
- A background that would show through the spokes of the paddle-wheel
First, let's make a film loop of the paddle-wheel rotating:
- Drag the first cast member of the paddle-wheel animation into any empty frame of the Score window.
- Drag the second cast member of the paddle-wheel animation into the next frame after the one selected in step 1.
- Drag the third cast member of the paddle-wheel animation into the next frame after the one selected in step 2.
- 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.
- 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.
- 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.
- Select all four frames from within the Score window, then pull down the Edit menu and select Copy Cells.
- Click on an open Cast member, pull down the Edit menu, and select Paste Cells. Director presents the Name Cast Member dialog:
- Type a name for the film loop, then click OK.
You're now ready to move this animation across the screen. To do this:
- Drag the film loop cast member into the first frame of your movie -- drag it directly into the frame in the Score window.
- 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.
- 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.
- 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.
- 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.
- 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).
- Type Control-B (or Command-B on the Macintosh). Director fills in the intermediate frames between frame 1 and frame 60.
- 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:
- 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.
- 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):
- Set up the correct MIME application types on your Web server's home page directory. (Must be done once per site.)
- Run your Director movie through Macromedia's Afterburner program to compress it for faster loading. (Must be done once per movie.)
- Copy the compressed Director movie to your Web site. (Must be done once per movie.)
- 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.)
- 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:
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:
- Double-click on the Afterburner icon to open it.
- From the File menu, select Open. Browse to the Director file you want to compress, and double-click onÊit.
- 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.
- 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.
- 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.
- Click on the Put command to begin the transfer, then navigate to the appropriate directory for the Director movie you converted with Afterburner.
- 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.
- 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 http://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:
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: http://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: http://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:
- Getting the contents of a URL
- Preloading the contents of a URL into the Netscape disk cache
- Retrieving a separate Shockwave movie from the network
- Retrieving text from the Web (using HTTP) to be interpreted by Lingo as text
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:
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 "http://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).
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 "http://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.
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 "http://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
Here is another example:
on mouseUp gotoNetMovie "http://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.
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.
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.
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 "http://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.
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:
- Import each frame of the QuickTime movie as a separate PICT image and animate them individually using Director.
- Use Netscape 2.0's QuickTime plug-in to play video elsewhere in the Web page. You can even use preloadNetThing from Lingo to ensure that the video gets preloaded while your Director movie plays.
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:
- Although the number of movies you can include on a given Web page has no technical limit, Macromedia recommends a limit of three movies per HTML page.
- To avoid technical conflicts when trying to resolve multiple sound track issues, use sound in only one movie per page, and program the movie so that your users activate the sound track by clicking the mouse (that is, with a button that reacts by going to a frame in which the sound track is present) rather than having it automatically begin playing.
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.
- Download the Java applet titled ImageLoop, which you can find at the following URL: http://www.living-history.org/dynaweb/java/imageloop.html
- Put this Java applet on your own Web page (or in a directory that you can then open with Netscape).
- 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.
- 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>
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.
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.
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:
<img src="decoration.gif" border=0>
<img src="right_arrow.gif" border=0>
To set up your Web page for an example like this, you'd need the following
- index.html -- the basic home page for your Web site.
- home.gif -- an icon representing home, such as a house (and with animated GIFs, you could have some fun with this, making smoke curl out of the chimney or making the door open and close to display odd goings-on inside).
- decoration.gif -- a file containing some graphical motif, but in this case one used solely as a placeholder to position the next image at the right edge of the screen. There's no reason why this could not be animated as well, however.
- screen2.html -- whatever the logical destination for a "next" button would be from this screen.
- right_arrow.gif -- a graphic of an arrow pointing to the right. As with the other GIF files, this could be animated, either blinking on and off or containing some motion.
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: http://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:
<title>Cherry Chase Home Page</title>
Cherry Chase Elementary School
Check out some of the great activities we have on our Web page!
<a href="http://www.living-history.org/cchase/kids.html"><img src="kidsnaps.gif" border =0></a><a href="http://www.living-history.org/cchase/staff.html"><img src="staff.gif" border =0></a><a href="http://www.living-history.org/cchase/community.html"><img src="pizza.gif" border =0></a><a href="http://www.living-history.org/cchase/calendar.html"><img src="tree.gif" border =0></a><a href="http://www.living-history.org/cchase/activities.html"><img src="donna.gif" border =0></a>
Copyright (c) 1996 Scott Fisher/Sunnyvale School District
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
Revised: Dec. 26, 1996