Animating Your Site with Shockwave for Director
by Eileen Mullin
Armed with recently introduced plug-ins and inline players for Web animation, multimedia developers are gaining the tools they need to serve up interactive presentations on the Web. One early entrant--Shockwave for Director, which allows Web playback of movies created in Macromedia's Director application--opened the doors for developers to take their expertise in Director (and its scripting language,
Lingo) to the Web platform. They also gained opportunities for repurposing existing Director movies--whether business presentations, training materials, or consumer entertainment titles--into "Shocked" pages for the Web.
Before you roll up your sleeves to create your own Shocking presentations, it's important to consider a number of practical multimedia planning and production issues. From clarifying your presentation's message to optimizing file size for quicker downloads, you'll need to determine how your Shocked material will be integrated into the rest of your site.
For our design guide overview of Shockwave for Director, we asked several Web developers to relate their experiences with and design tips and techniques for creating Web-based Director presentations. Their suggestions for file optimization and organization principles will help you fine-tune your animations for a broad Web audience, and help your interactive presentations perform as intended.
Starting Out
Shockwave for Director consists of a program called Afterburner, for compressing standard Director movies for Web use, and a Shockwave player that's currently available only as a plug-in for Netscape Navigator 2.0. The first Shockwave for Director plug-in was released for Windows users at the end of 1995, while the Mac beta first appeared in mid-January.
Accomplished Director users won't encounter any difficulties with using Shockwave for Director, essentially a Web conversion tool. Instead, their challenge is in adjusting their presentation techniques for effective Web communication. Web designers who are new to Director can learn the program though computer books and tutorials or in a classroom setting, whichever makes the most sense for them.
"You don't have to be a programmer to use Director. Creative people are able to very quickly develop engaging content using the program," said Kelly Stewart, director of interactive development at NewOrder Media. The company uses Shocked promotional material on its own site to detail product offerings.
After you've created an animation (or a collection of animations) in Director, you'll need to compress it with the Afterburner program; this creates a file with a .DCR extension that you'll serve to the Web. The Director plug-in for Netscape does recognize Director movies with .DIR or .DXR file extensions, but offering the compressed format is what makes sense in considering user download time.
Web designers who rely on an outside Internet service provider shouldn't assume that the technical support staff has made provisions for serving up Shockwave movies. "It is critical that you call them and give them information on the new MIME type of Shockwave [application/x-director] that supports files with a DCR extension," said David Martin, programming director for SicolaMartin, an Austin, TX-based marketing firm. Other procedures for configuring a server for Shockwave movies are detailed at http://www.macromedia.com/Tools/Shockwave/sdc/Dev/getstart.htm.
A Shockwave movie file is referenced in an HTML document with an <EMBED> tag and attributes that specify the name of the movie, height and width. The <EMBED> element is a nonstandard HTML tag; it is a Netscape 2.0 extension that allows you to insert objects (like movie files) that are supported by application-specific plug-ins (like the Shockwave plug-in). This <EMBED> tag can--and should--contain a <NOEMBED> element that will display alternate text if the user's browser cannot display the movie and even if it does not recognize the <EMBED> tag itself. Viewing source code for existing Shockwave presentations naturally provides Web designers with opportunities for gaining insight on how others anticipate how their displays will appear when viewed by a varied Web audience.
Viewer Considerations
When visitors to your site activate links to your Director movies, they'll need to have the appropriate Netscape plug-in installed to play those files. Users accessing your pages with other graphical browsers will, of course, be unable to utilize any of the content contained in that movie. Again, using <NOEMBED> could also help avoid faults caused by non-Netscape 2.0 browsers attempting to access a page containing a Director movie.
"On all of our Shockwave pages we have built alternate routes for non-enabled browsers--usually a GIF image showing a screen shot of the Shockwave movie with a big Macromedia logo stamped on top, all hyperlinked to their Web site," noted Alan Levine, a technologist at Maricopa Community College in Phoenix, AZ.
"It's very important to assume that users don't have the Shockwave plug-in, and to design access to your Shocked pages in such a way that they know they need the plug-in and can link to it," said Mark Thompson, a developer for Radical Media, a Web and multimedia services firm based in New York. "If you're embellishing existing pages with animated icons and such, then you need to include the <NOEMBED> command and provide an alternate, static image so your pages don't have empty gaps. Although the plug-in is readily available, you can't assume people will have it.
Other Shockwave developers agree that user familiarity with the format cannot be taken for granted. SicolaMartin's David Martin recommended that designers "assume the user has never heard of Shockwave and has no software to support viewing it. Shockwave developers will need to create at least two helper links and some additional text on each site they Shock. The text should let the user know what is going on and the links should point to a browser site that supports the plug-in."
Capturing Your Audience's Attention
Like all interactive Web presentations, effective use of Shocked animations requires you to recognize that your site's audience is not a captive one. Other sites with a similar message or purpose--and perhaps with less bandwidth-heavy content--may redirect your visitors' attention at any time.
There may well be as many potential application areas for Shocked movies as there are for multimedia presentations as a whole--from corporate promotions to course materials. But while interactive movies add another dimension to the Web's capabilities as a sales and marketing tool, most users will not make extra efforts--like installing a plug-in--to watch an advertisement. The entertainment factor should not be underestimated when creating prototypes for new animated Web content.
"On the Web, you are always a click away from losing your audience," said David Thomas of SicolaMartin. A key consideration for Web designers in creating successful Web-based multimedia, he said, is to "get your message out quickly and memorably."
Unlike Director-based CD-ROMs purchased by users, the movies on the Web are not something that they have a lot invested in. As a rule, Web visitors make greater allowances for movie download time than they would for a sound clip or a slow-displaying graphic, but they will click away to another site if they feel they are waiting too long for an animation to download.
Announcing innovative uses of new Web technology--like an invitation to view a Shockwave animation--as a point of entry is a certain attention-grabber for drawing visitors to sites. This kind of entreaty is especially crucial for organizations that depend on being perceived as cutting-edge in the Internet sphere, such as new media companies or other businesses devoted to online ventures.
"We have been creating Shockwave movies for companies who feel they need to be leaders in providing compelling Web content," said Sasha McGee of InfraRed Communications. The company produced Shockwave movies for the initial announcement of Shockwave at the Digital World conference last June, and has gone on to produce Shocked material for CNN, Apple Computer, and Netscape among others; its site is at http://www.eline.com/Infrared.
The demand is proving to be a boon to traditional multimedia firms and Web consultants alike. "Instead of simply creating a CD-ROM-based marketing piece for instance, we can now say to our clients, 'How about a multimedia Web site with the same look and feel of your CD, that also provides weekly updates to your customers?'" said NewOrder's Stewart.
Minimizing Download Time
The user limitations you might already assume in your Web design for access speed, screen size, or sound capabilities should certainly apply here too. "Download time is the most critical issue," said David Martin. "We sacrifice almost everything to keep the file size small. It has challenged our team to be creative with our bandwidth restrictions. I compare it to challenging a writer to write a story in under seven words using only the letters A through G."
RadicalMedia's Mark Thompson agrees. "If a user has to wait too long for the download or has to scroll the browser to see the complete animation, you're going to lose your impact, and possibly the user."
One danger that Web movie designers must make an effort to avoid is assuming too much about their audience's access speeds. Since no computer is fast enough for multimedia developers, it can be easy to overlook how many users connect at 28.8 or 14.4 Kbps when a presentation runs just fine on your local machine.
"Download time is, unfortunately, the great restrainer in this technology," said NewOrder's Kelly Stewart. "Until a streaming Shockwave is available, movies should be kept small and simple, so as not to lose the viewer in the wait period."
Just as a Web designer should test non-standard pages on a variety of browsers to ensure a satisfactory across-the-board presentation, Shockwave developers need to test their creations on other machines to test their accessibility.
"The download time is reasonable from work--but I have Ethernet to a T1 connection. I test at home via 28.8 Kbps modem and frankly, the download time for most pages negatively affects the experience-- especially if I wait two minutes to see a spinning logo," said Maricopa's Alan Levine. His recommendations for placating impatient Web visitors is to "create a small stub movie--they can be as small as 4K--that loads quickly, displays a kind message, and then links to the larger movie." He also recommended breaking up a movie into several smaller-sized movies that are linked together, just as many Web designers already break up huge HTML documents into a series of smaller linked pages.
For the sake of advance planning when serving up Web content, it's important to examine some specific techniques for optimizing the graphics and sound contained in your Director movies. "Don't expect Afterburner to bail you out of trouble when you create a 500K Director movie," warned David Martin. Below, the Shockwave designers we surveyed offer some tips they've learned to put into practice.
Sound Management
Using sounds in Director was highly cumbersome before version 4.0, which is when sounds first became accessible as objects that Director calls "cast members". Dealing with sound in Director movies is still quirky at best, highly frustrating at worst, so it should be no surprise that Shockwave for Director is similarly burdened.
"The major difference between creating sound for Director movies and for Shockwave movies is size. Because audio does not compress under the current version of Shockwave, sound is very expensive in terms of download time," said InfraRed's Sasha McGee. "With a 28.8 Kbps modem, one second of sound adds six seconds of download time, so audio needs to be used very sparingly."
The lack of good sound compression in initial releases of Shockwave for Director means that you must make judicious use of sound clips. "If you plan on a message longer than one sentence long, use text instead of audio," advised David Martin.
Incorporating sound loops, especially for background tracks, and degrading the audio resolutions are the most efficient ways to reduce the hefty download times that sound inflicts upon Director movies.
McGee suggested using sound at 11.025 KHz, with very short loops. "Any sample rate lower than 11.025 KHz will not play on most Windows machines, and audio is still rare enough on the Web that the quality at 11.025 KHz is fine." This sampling rate is roughly equivalent to that of regular broadcast television audio.
As in ordinary Director movies, you'll need to save sounds in AIFF format, using a sound editing utility like Macromedia's SoundEdit 16 to test and save the file. You can make any sound into a loop by selecting the Looped checkbox in its Info window. Lingo's sound functions can alter the sound's volume and fade out sounds--useful for ending sounds that loop a few times as a background track before the repetition becomes annoying for listeners.
Graphics and Animation
There are several reliable methods for reducing the file size of artwork cast members, from rescaling image size to using background tiling (instead of patterns). Like any Web graphic file, it's important to reduce the number of colors used in your movie's images wherever possible.
"Use the same 1-bit cast member colored differently rather than several 4 or 8-bit cast members," is the advice given by InfraRed's Sasha McGee. "When possible, use solid colors rather than dithers--they compress better." Director's Dithering option, like anti-aliasing in Photoshop, introduces a number of levels of grey to images, bumping up the number of colors used.
Reducing the number of colors used in sprites is also key to reducing movie size. Several of the Shockwave developers queried here suggested applying ink effects to different sprites representing the same cast member to achieve different looks without needing to duplicate the cast member.
"Keep your art to 8 bits or less and keep sprites small," said RadicalMedia's Mark Thompson. "The fewer elements you've got animating at the same time, the better."
The Power of Compression
As most Web designers have learned, a key part of building familiarity with and acceptance of any new Web technology is reducing download time for users, especially for users with slower modems. Without video streaming capabilities, Shockwave designers rely heavily on Afterburner's compression capabilities. The designers queried here gave the current incarnation a favorable rating overall, ranging from "a first good impression" to "exceptional."
"The graphics compression is tremendous," said Sasha McGee of InfraRed. "We are pretty ruthless about keeping our file sizes small. Probably 95 percent of the movies we have made so far have been under 100K, and the vast majority less than 50K."
RadicalMedia's Mark Thompson estimated that Shocked movies should be no more than 300-350K in size. He extrapolated this to using source Director movies that total 700K for movies containing only graphics, no audio, or 400K for movies containing both graphics and audio. "Graphics compression is about three to one, whereas sound compression seems negligible," he said.
Obtaining Movie Content
Web video is very demanding on user resources, even with application-specific plug-ins like Shockwave for Director. Therefore, you'll want to be selective in choosing what Director content to serve up; experimental content or material that would be lacking in any other medium are your best bets.
"We have repurposed existing Director movies and created originals to produce our Shockwave movies. For existing Director movies, the challenge was to 'skinny them up' for optimal network transmission," said SicolaMartin's David Martin. "Since we typically augment existing content with Shockwave--as opposed to creating all new Web pages with them--our goal is often to simply highlight something special on the page using Shockwave."
Instead of repurposing existing content, RadicalMedia is creating original Director movies specifically for the Web platform, according to Mark Thompson. "Our existing movies were designed for machines with 640 x 480 screens and hard drive storage, way too big for delivery over the Web."
Determining Communicative Purposes
Some Web design firms are offering their clients Shocked material as an alternative for static graphics or imagemaps that could hog even more bandwidth than an inline Director movie. NewOrder's Kelly Stewart emphasized how sophisticated use of Director's scripting tools adds even more value to the interactivity. "Shockwave movies not only allow animated graphics and improved user feedback with rollovers and the like, but also we are able to do intelligent calculations with Lingo that don't require response from the server."
As Sasha McGee of InfraRed reported, "We have found there are three main uses for Shockwave movies on a Web site--navigation, decoration, and content provision." The first two uses, he added, can replace navigational imagemaps and static decorative graphics; in doing so, Shocked movies can add more innovative interactivity without incurring much of a time-related barrier to downloading. The third use he cited relates to where using video adds value to the site's content. "An example of this is a model of a dynamic system like a power plant or an ecosystem. These processes can be best illustrated using motion and change."
Integrating Shockwave material with the rest of a site's visual elements is important, said NewOrder's Kelly Stewart. "We used Shockwave where it was needed most, providing quick user feedback in buttons, and animations where still graphics were just not enough," he said. "Furthermore, we try to blur the line between traditional HTML and our Shockwave content by using similar tiled backgrounds and visual elements."
David Martin described how Shockwave content was incorporated into the American Cancer Society's site (http://www.tx.cancer.org/scream/cool.html). "For the ACS main page, there were various static graphics that take the user to other places in their organization site. The stylized graphics that existed lent themselves well to producing animated versions of these images in a very small data footprint. For example, the Shockwave movie for Ike, the SmokeScream icon, lets out a scream." Another small movie on the site depicts a beating heart using audio and image animation. Yet another Shockwave movie on the site is designed to be educational, promoting an anti-smoking message in a longer, movie clip format. On the SicolaMartin site
(http://www.sicolamartin.com/interactive/),
the Shockwave content more heavily promotes animation capabilities to represent the company's product offerings.
"We are focusing on the more highly interactive things we can do with Shockwave, especially integrating it with some CGI programming," said Alan Levine of Maricopa Community College. "One example was a demo called Quizzer. The Shockwave movie reads a text file from our server that contains a multiple choice quiz. We can update the quizzes at any time by editing the data file, add new quizzes by just adding a new file. The application asks the questions in a random order and each time it shuffles the order in which the answers appear."
Another use for Shockwave at his site was the "Shockwave List o' Sites." According to Levine, the movie incorporates a CGI form to add the name and URL of a new Shockwave site; every time the Shockwave movie is launched it displays a scrolling field listing the URLs, each line hyperlinked to the remote site. "It seemed to make sense to have a Shockwave list itself a Shockwave movie," said Levine. These two Shockwave creations are available online at http://www.mcli.dist.maricopa.edu/alan/nojava/quiz/ and http://www.mcli.dist.maricopa.edu/director/shockwavelist.html, respectively.
Future Design Opportunities
The greater versatility in serving Web animations provided by technologies like Shockwave for Director is an extraordinary development. The growth in popularity of such Web-based applications, however, will be inextricably tied to increased support across platforms. "More browser support of Shockwave is critical," said David Martin. "We need Shockwave support for browsers running on OS/2 and Unix systems to get complete coverage." The delayed release of a Macintosh version of the Shockwave plug-in until this January kept many multimedia developers restless at first.
Some developers have promoted a more integrated vision of incorporating Shockwave movies into Web sites, especially as the technology gains a wider audience and its novelty wears off. "I see it as just another media element in a Web page, and it should be more transparent in its presence," said Maricopa's Levine.
While the behind-the-scenes functionality of a Web application like Shockwave for Director will continue to fascinate developers, the larger Web audience is likely to grow more accustomed to the interface and judge the content apart from the novel technology. As Kelly Stewart put it, "Most users don't care that you used Shockwave, they just want visually appealing, engaging content."
Reprinted from Web Developer® magazine, Vol. 2 No. 1 Spring 1996 (c) 1996 internet.com LLM. All rights reserved.
Web Developer® Site Feedback
|
HP Storage Disaster Proof Enterprise Solutions:
|
