The Java language and Java-enabled browsers allow a more visually dynamic Web than possible before. Instead of hypertext pages containing only still images with helper applications to display video, Java Web pages can include animated graphics, text, and any moving visual elements a Java programmer can dream up.
This chapter surveys several Java applets that implement animation. In some cases, the chapter also includes key portions of the source code to demonstrate how these applets are made. If you want to understand these code portions in more detail, you can read more about Java programming basics in later parts of this book. If not, you can skip over the programming sections for now and return to them later. If you’d like to try out the applets described here, you should be familiar with Java’s connection with HTML as described in Chapter 2.
The purpose of this chapter is to familiarize you with the many types of animation possible using applets. If you are ready to place applets on your Web pages, this chapter will also be invaluable to you; it contains instructions for including some publicly available demonstration applets that you can customize and include on a hypertext page.
| A TREASURE TROVE OF JAVA APPLETS |
|---|
| Visit the Gamelan web site at http://www.gamelan.com/ to connect to a well-organized, frequently updated, and very comprehensive registry of Java applets, demonstrations, and documentation. This collection includes pointers to many of the demonstrations discussed in this book. |
If you are a new user of a Java-enabled browser, you will immediately notice that some Java pages contain moving text, figures, and animations. These moving images are made possible by Java applets that implement Java’s Runnable interface. These applets don’t just display static text or graphics; they can execute their content continuously.
One example of animated text is the NervousText applet. NervousText was originally developed by Daniel Wyszynski at the Center for Applied Large-Scale Computing. Wyszynski’s NervousText applet displays HotJava! in jostling on-screen letters. David Leach modified this applet so that it can display any programmer-defined string. Figure 4.1 shows both Wyszynski’s and David Leach’s NervousText applets on a Web page.
FIGURE 4.1.
The Nervous Text applet.
The NervousText applet is a good demonstration of how an applet can be included on any Web page, not just Web pages created by the applet’s developer. You are not limited to using only applets that you write. You can modify and use other developer’s applets from their sites, just as you link to hypertext pages at other sites. In fact, sharing applets across the Net is what Java’s capability to distribute executable content is all about.
You use the APPLET tag in HTML to place a publicly available applet in a Web page. The Codebase attribute identifies the path (using a Uniform Resource Locator, or URL) to a Java class anywhere on a publicly available server on the Net. The Code attribute then specifies the applet’s class name.
In general, the APPLET tag on an HTML page works like this:
<APPLET Codebase = “path (URL) of directory containing class files” Code = “name of class file” Width = “width of applet in pixels” Height = “height of applet in pixels”> <PARAM Name=”parameter name” Value=”value of parameter”> <PARAM Name=”parameter name” Value=”value of parameter”> </APPLET>
In Figure 4.1, Leach’s modification uses a parameter called msg to set the value of the message that the applet displays.
You can include a beta version of a NervousText applet in your page like this:
<APPLET Codebase=”http://www.javasoft.com/JDK-prebeta1/applets/NervousText/” Code=”NervousText.class” Width=”200" Height=”50"> <PARAM Name = “text” Value=”HotJava-Beta”> </APPLET>
Note that the parameters use the PARAM tag in HTML, and that these parameter tags occur between the opening <APPLET> tag and closing </APPLET> tag. When the Java-enabled browser reads the PARAM attributes Name and Value, it passes these values to the applet.
David Leach’s modification of NervousText demonstrates the programming technique of passing values to the applet with parameters. In the Java applet code, David uses the getAttribute method to find out the value of the parameter msg passed from the HTML tags to the Java applet. Leach’s class definition includes the data string userString; and the init() method includes this line:
userString = getAttribute(“msg”);
David uses this string in the paint() method to derive the characters that draw the applet. The trick of making the letters “nervous” is to vary their coordinates in the paint() method by using a random number generator for their X and Y coordinates:
x_coord = (int) (Math.random()*10+15*i); y_coord = (int) (Math.random()*10+36);
Similar to the NervousText applet, another good demonstration of Java’s animation capabilities is TickerTape. This applet was originally developed by Sven Heinicke at HotWired and later modified by David Leach and John Stone at the University of Missouri-Rolla. Many others have subsequently created variations on the TickerTape applet.
Figure 4.2 shows the display of the TickerTape applet. The text in the lines scrolls continuously to the left; with the bottom ticker line moving very rapidly.
FIGURE 4.2.
TickerTape applet eaxample.
The TickerTape applet uses a key programming trick to cause the letters to move. The code changes the X position of the string by an amount equal to the speed attribute prior to repainting the string in each cycle. Here’s the code to do this:
xpos -= speed;
This line of code subtracts the value of speed from the current horizontal position of the string. The line is a quick way of writing the equivalent xpos = xpos - speed.
You can include a beta version of a more elaborate kind of ticker tape on a Web page like this:
<APPLET
Codebase = “http://www.digitalfocus.com/digitalfocus/faq/”
Code = “reloadImage.class” Width=”600" Height=”70">
<PARAM Name=”rateOfMovement” Value=”2">
<PARAM Name=”sleepInterval” Value=”40">
<PARAM Name=”msgYLocation” Value=”12">
<PARAM Name=”passedMsg”
Value=”Microsoft announces support for Java....Pigs were seen flying in Wyoming.....Martians endorse Java....java to be used in ballot boxes during next elections...”>
<PARAM Name=”secondaryMsg”
Value=”This just in......Netscape stock fell 20% after Microsoft announced i-net strategy....Next release of PowerBuilder to be java aware.....stay tuned...”>
</APPLET>
Figure 4.3 shows a ticker tape with controls in action.
FIGURE 4.3.
TickerTape applet with controls.
Another variation on animation is to have graphics—rather than words only—flash across a page. Erik Wistrand has created an applet that transforms a Web page into a fireworks show (see Figure 4.4).
Similar to the TickerTape applet, you can include the Fireworks applet on a Web page, and you can control aspects of its appearance. The fireworks parameters set the number of rockets, points, size of points, duration of rockets, and even the constant of gravity.
This example sets a series of 50 rockets on a page (shown in Figure 4.4). The COLOR parameter uses hexadecimal (base 16) notation to describe the red, green, and blue values of the background image color.
FIGURE 4.4.
Fireworks applet example.
Not all animations involve moving text for aesthetic purposes. Other animations occur in instructional pages or as part of a user’s interaction with a Web page.
Chris Seguin has created a juggling instructional page (http://www.acm.uiuc.edu/webmonkeys/juggling/) that effectively uses animation to show—rather than tell—how to juggle. You see the juggling page in Figure 4.5. Viewed through a Java-enabled browser, the page shows the two model hands juggling one, two, and three balls. See Chapter 25, which was written by Chris, for more information on animation programming.
One of the programming keys in Chris’s applet source code is his use of arrays to store the path of the balls. He uses the same ball graphic and repositions it along this path. This is unlike a cartoon in which individual frames would show a ball in its different positions on its path.
Java programmers use both the technique of using a path for a graphic and frames of graphics to animate graphics. In general, the graphic and path approach leads to less memory drain and more flexibility. Although for complicated or animated images (refer back to Duke in Figure 1.3 in the first chapter), the frame approach is desirable.
FIGURE 4.5.
The Java juggling page.
Another variation in graphics on Web pages is to let you draw right on pictures on a page. Johan van der Hoeven has created the Magic applet, which has a fanciful appeal. You can use it to draw as if you were using a Magic Marker on famous pictures. Figure 4.6 shows markings on a world map and the Mona Lisa (this is an alpha applet).
FIGURE 4.6.
Marking on the world and the Mona Lisa.
Still another variation on Java graphics is to make images function just like HTML imagemaps; when the user clicks on certain parts of the image, other resources are retrieved. Jim Graham at Sun Microsystems has implemented an applet to demonstrate this capability. Shown in Figure 4.7, this applet demonstrates the equivalent functionality of an HTML imagemap, but with the additional features of live feedback. When a user passes the cursor over a “hot” region of the image, that region appears highlighted to indicate that clicking on it will retrieve another resource or some media content.
FIGURE 4.7.
Live feedback imagemap.
While the images shown so far are interesting, a more useful example is in Figure 4.8, a live weather map. Created by Alan Steremberg and Christopher Schwerzler, with weather data provided by University of Michigan, this Java applet lets you look at current weather conditions. Figure 4.8 shows the infrared satellite image for the United States. Other options are available, as shown in the figure, for obtaining other weather information.
FIGURE 4.8.
Weather map.
The demonstrations in this chapter show many of Java’s animation capabilities. But Java is more than a good show; it is also already at work on commercial Web sites. The Nando Times uses Java (refer back to Figure 1.13), as do George Coates Performance Works (refer back to Figure 1.10), ESPNET SportsZone (refer back to figure 1.14), Dimension X (http://www.dimensionx.com/), HotWired (http://www.hotwired.com/), and Sun Microsystems (http://www.sun.com/). Because Java brings so much visual interest to a Web page, it has great potential to draw attention, convey specialized information, and provide entertainment.
The Rolling Stones is a rock band that made a big splash on the Internet Multicast Backbone (MBONE—http://www.eit.com/techinfo/mbone/mbone.html) when they used it to simulcast part of their November 18, 1994, Dallas Cotton Bowl concert. Today, the Stones Web site ( http://www.stones.com/) is making a splash with Java.
The Stones site contains several interesting Java applets:
FIGURE 4.9.
The Rolling Stones Voodoo Lounge with Java.
Other commercial providers are using Java to add interest to their pages through animation. Accurate Information Systems (http://accurate.com.my) uses Java to greet users with a moving ticker tape and a bouncing ball (see Figure 4.10).
Of course, just as the BLINK tag and other graphics elements become overused to the point of excess on the Web, so might applets be used gratuitously. The potential for applets to add motion, interest, information, and real service to users of a Web is great, however, and we have yet to realize Java’s full potential.
FIGURE 4.10.
Accurate Information System Consultant ticker tape greeting.
You can use Java applets to place animations on Web pages. A user can set the parameters of an existing applet using the PARAM tag and bring a customized applet to his or her own Web page. Developers can create new applets to provide this functionality and make them available for users.