Home / Special Report / Use animation to create a site that moves people

Use animation to create a site that moves people

As the Web emerges as a viable business environment, it is coming of age visually as well. Web sites are peppered with images, some of which are quite eye-catching. However, some sites are just so s-l-o-w that no one sticks around long enough to see anything. The problem with such sites is not the artistic execution of a particular image or the organization of the site, but the technical shortcomings of the medium itself and the site producer’s ability to work around them.
After all, an image is only successful if the audience actually sees it. For television viewers, that just means pressing “power.” Not so easy for Web surfers, whose computers must download each image to appear on screen. The more “complex” the image is (the more color information for example), the longer it will take the user to download and ultimately view. Without a megamachine, some images can take a few seconds to load, an eternity for those used to remote-control-quick responses.
Web animation is still so new and relatively rare that it almost always blows away its still-life brethren in pure “wow” ability. But even greater technical restrictions apply than with images. An animation can take a lot longer to download than an image, even if it’s about the size of a matchbook. The excruciating wait can result in a counterproductive and, frankly, rather annoying site.
For content creators, the trick is to make each visual in such a way that the widest audience can see it without ado –to shrink its complexity without sacrificing its visual integrity, so that the user’s energy is not spent preparing to view it, but actually viewing it. If done properly, viewers can see such intrigues almost as painlessly as they would a picture in a book or an ad on television. And more: Unlike conventional TV, users can interact with this stuff.
Generally, there are two types of animation on the Web: those that run by themselves, and those that are user- interactive. One can think of animation as a series of images that, when viewed in succession, seem to move–like a flip book.
GIF (graphics interchange format) is the standard file format for images on the Web; a GIF animation is just a series of these highly compressed images loaded up at once, then “played.” And a GIF animation can be compressed in such a way that it efficiently plays only the portion of the series that changes so that the entire image isn’t being “flipped” (although the user can’t tell). Very few images, or frames, of animation are actually needed, as the eye interpolates those in between. The viewer is tricked into thinking he’s seeing something more complex than what is really presented. Check out Warner Brothers’ site for great GIF animations (www.wbanimation.com).
The most popular types of interactive animation require users to download plug-ins–pieces of software that add capabilities to a browser’s built-in feature set (although some browsers still don’t support them). One widely used plug-in is Macromedia’s Shockwave, which allows effects one experiences on CD-ROMs–such as interactive sound and rollovers (when a graphic, for example, changes in some way as the user “rolls” his cursor over it)– and allows for other events when a user clicks.
At this writing, Netscape reportedly plans to incorporate Shockwave into future iterations of its browser so that downloading the plug-in will not be necessary. The Macromedia site itself hosts a fun, well-executed and (no wonder) “shocked” page with sound (www.macromedia.com). Another one to try: Campbell Soup Co. (www.campbellsoup.com).
On the Corea & Eibl Inc. Web site (www.coreaeibl.com), users encounter a non-shocked environment first, with the option of linking to an additional shocked site. To make it faster to download, our shocked movies use color very conservatively, and any sounds used are no lengthier than they need to be. Our blinking-dollar eye on the standard non-shocked home page is just a series of roughly five cycling GIFs, which, due to reduced color and small graphical changes from frame to frame, occupy a miniscule amount of space.
There are numerous other methods of animating the Web. The use of JAVA, a programing language, can enhance a site with custom-made “appelets,” which can range from a guest book to shoot-’em-up games. But whatever the method, the principles of use remain the same: Design within the medium and don’t succumb to technical “gotta-have-it” hysteria with a bloated, overdone site.
As the Web grows, a larger number of sites will contain animation, many in an attempt to be cutting-edge. However, being cutting-edge means not just using the latest technology, but using it well. The Web’s current technical limitations are amply counterbalanced by the infinite possibilities and features the medium boasts. While working with what the current state of the medium can bear, Web animation can be just as dynamic and the effect just as outstanding–often more so–as any television visual.
(Cynthia Satloff is a multimedia designer at Corea & Eibl Inc.)


Check Also


Gallina buys Xerox Square, plans multi-use facility with focus on education (access required)

Having already turned one aging centerpiece of the downtown Rochester skyline into a chic combination of office, retail and residential ...

The 312,000-square-foot Sands-Constellation Center for Critical Care will begin opening Sept. 25. (Provided photo)

Sands-Constellation Center for Critical Care to open (access required)

The Sands-Constellation Center for Critical Care, which begins opening Sept. 25, merges innovation with patient care, Rochester Regional Health leaders ...

2020 Super Lawyers & Rising Stars

The 2020 Upstate New York Super Lawyers and Rising Stars have been announced and the following Rochester lawyers have made ...


Ground floor investment opportunities: Risks and rewards (access required)

Many investors wish that they had invested in Netflix Inc. when its shares were initially offered to the public at ...