WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Getting Into Motion: A Guide for Adding Animation to Your Web Pages

Getting Into Motion:
A Guide for Adding Animation to Your Web Pages

By David P. Geller

As a frequent Web traveler, you've probably encountered a number of pages that contain various animated objects — from bouncing logos to ads for speeding cars and bubbling soft drinks. It used to be that a striking background image or a fancy rule line was all that differentiated the average Web page from one that was really cool. That, however, has all changed with the advent of animated GIFs, Java applets, and Web browsers that make it easy to host these new elements.If you're thinking that you'll have to learn a new programming language, you can breathe a sigh of relief. Although we'll explore animation techniques that rely on Java, there are several ways you can spice up your pages without having to perform any programming.

GIF89aD New Life for a Familiar Format

The GIF format has exploded in popularity, thanks largely to the fact that it was one of the first formats supported by graphical Web browsers. GIF images offer fairly good compression and can be edited using a variety of commercial and shareware imaging programs. GIF images support interlacing, which allows for more realistic progressive rendering, and transparency — the key to making images that can sit nicely on top of other graphical backgrounds. But the most exciting feature of this now-mature format (GIF89a standard) is its ability to store multiple images or frames and display them in a controlled, sequential manner.

Netscape 2.0 was one of the first browsers to support animated GIFs, and a quick survey of some of the Internet's most popular sites indicates that the use of animated GIFs has started taking off in a very big way. During the NBA finals, for example, animated GIFs were used to demonstrate basketball highlights. Many advertisers have turned to animated GIFs to draw attention to their products. Now that Microsoft's Internet Explorer 3.0 has been released (also with support for animated GIF images), there's little reason not to consider using this versatile and compact file type. Beside being easy to create, animated GIFs now support image looping, and they don't require special programming on the server side, which used to be required with server-push animations.

GIF Construction Set

On the PC, the most popular program for creating animated GIFs is GIF Construction Set from Alchemy Mindworks. This easy-to-use, inexpensive shareware package supports image looping, interlaced GIF images, and transparency. It also features an Animation Wizard that will guide you through the process of selecting and preparing an animation sequence.

Two other notable features in Construction Set are the "banner" and "transition" tools. The banner tool allows you to type in a text message, which is then turned into a scrolling GIF image. The transition tool lets you select an image and then apply one of several special effects to create one that's animated. The release I tested supported four types of wipes, several splits, tiling, and an interlaced effect.

GifBuilder for Macintosh

Macintosh users will find an equally powerful tool in Yves Piguet's freeware application GifBuilder. This program even surpasses some of the capabilities found in Construction Set by supporting a built-in scripting language that offers you total control over the creation and sequencing of images.If you want to see some examples of work done by other people and technical information on the GIF89a format, visit http://members.aol.com/royalef/gifanim.htm and then follow the link to the GIF Animation Gallery.

Java Gyrations

Since Java is a programming language, you can have enormous control over the way animation sequences are performed — provided you do the programming. Applets, which are Java programs meant to be run from inside a Java-enabled browser (such as Netscape or Internet Explorer), allow you to do virtually anything with images. Java also includes built-in classes for manipulating GIF and JPEG images. But writing code to do really cool things is difficult — in any language. So why not use some pre-built, off-the-shelf Java classes for animation?

  • Animator: At Sun Microsystem's Java site you'll find the Animator applet, written by Herb Jellinek. Configuring this applet is performed entirely through <PARAM> entries inside the <APPLET> tag in your HTML file. Like ClickBoard, Animator provides smooth non-flickering drawing, support for background images and sound, and navigation to another page via a mouse click. Positional control for individual images is also supported, and Animator provides a debugging feature, which brings up a dialog box on your screen if you click on the applet while the shift key is depressed. You can use this feature to verify proper settings specified through your HTML file. Like all of the samples on the Sun Java site, free source code to Animator is available. If you're so inclined, you can jump in with a development tool like Symantec CafŽ or Microsoft Jakarta and make changes or add new features.A great source for Java information of all kinds is Gamelan. Their section on animation contains more than 100 examples of applets that are either available for your use, or were part of demos prepared to showcase Java's potential.

ActiveX

Microsoft is pulling out all the stops to make sure you learn about the ActiveX framework. Centered in part around OLE (Object Linking and Embedding) Controls, ActiveX is the vehicle that the software giant hopes will carry interactive content on the Internet. If you had to compare ActiveX to something more familiar, a Java applet would probably be the closest thing. But unlike Java, ActiveX controls aren't platform-independent. Even with Microsoft promoting cross-platform awareness and eventual support for ActiveX on other platforms (Metrowerks is driving support for ActiveX through Java on the Mac), a majority of ActiveX controls will be designed expressly for Intel-based PCs running Windows 95 or NT. If you're targeting animations for an intranet consisting primarily of Windows PCs, then this shouldn't be a concern.

The ActiveX site at Microsoft provides links to information, demonstrations, and software.

Which Way Do We Go?

The question of whether to use GIF images or Java applets for your animation depends on what you want to do. If you want to use both GIF and JPEG images, tie in sound, support navigational control, and can rely on your users to have a Java-enabled browser (which will be practically everyone very soon), then Java is a great way to go. Applets like Animator offer ready-to-use solutions that don't require any programming. All you do is create the artwork, store some Java class files on your Web server, and add an <APPLET> tag in your HTML file.

The downside to using Java applets, compared to GIF89a images, is the additional download time. The two Java applets we've described are each approximately 20 KB in size. Plus, they both use separate image files for each frame. If you had an animation sequence that required 10 images, that would mean 10 separate GETs your Java applet would be performing back to a Web server. Animated GIF images, on the other hand, are completely self-contained, with no extra code to download.

What makes Enhanced CU-SeeMe great for Webmasters is that you can add a few lines of HTML to your page and point people to reflector software residing on your server, so that they only have to click on a link to start up their own CU-SeeMe software and join your conference automatically. The White Pine Reflector software, needed to run conferences with more than two people, is currently available on 11 Unix platforms, as well as for Windows 95 and Windows NT. [Editor's Note: In 2001, CUseeMe Networks (formerly White Pine Software) merged with First Virtual Communications and can be found at www.fvc.com.]

For simple animations intended for Netscape 2.0 or later and Internet Explorer 3.0, consider going the GIF route. Both GIF Construction Set and GifBuilder are capable tools. For animation purposes, ActiveX components are, for now, a relative unknown. They have the potential to do almost anything a Java applet can do, but faster. Some of the early ActiveX animation controls, such as FutureWave's FutureSplash, are very impressive. Expect your choices in this arena to mushroom. The hardest part is preparing artwork that strikes a balance between appearance and compactness. On the Web, the name of the game, besides looking good, is loading fast.




HTML5 Development Center


Recent Articles