Java Animates Web Pages
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 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. |
Applets in Motion
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.
NervousText
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.
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:
| |
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:
| |
Note that the parameters use the PARAM tag in HTML, and that these parameter tags occur between the opening tag. When the Java-enabled browser reads the PARAM attributes Name and Value, it passes these values to the applet.
| USING JAVA APPLETS WITHOUT JAVA |
| You can put together a Web page that includes applets you didn’t create or at any location using the APPLET element. You don’t have to have a Java-enabled browser or the Java compiler to serve applets. You need only a reference to the class file of the applet. If you use applets that are at remote locations, you need to identify where on the Net the class file for the applet exists. To do so, use the Codebase attribute of the APPLET tag. Of course, users who do not have a Java-enabled browser cannot observe the applets. If you use a remote applet in this way, consider downloading and serving a copy of the class file from your own site. Before taking this step, however, check with the information provider. And, of course, check out the applet’s behavior—it is executable content and runs on the computer of anyone requesting to view it. |
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); |
TickerTape
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.
| ARE JAVA USERS WASTING BANDWIDTH? |
| After a Java applet’s bytecodes have been downloaded across the network, the user’s host is the processor that interpets them. The information provider’s host works only to distribute the bytecodes. Users of applets, therefore, might typically use far less bandwidth and far less time on the information provider’s computer than might Web surfers. Also, class files containing bytecodes aren’t all that large. For example, the TickerTape applet (see Figure 4.2) is 3,186 bytes—easily smaller than many graphics files routinely downloaded from the HotWired server. Therefore, although users may see more action with applets, they are not necessarily using more bandwidth on the Web. Of course, leaving a browser on autopilot (such as in the Surf-o-Matic applet in Chapter 6) and walking away would cause a browser to use much bandwidth for downloading Web pages. Information providers must be very careful about the size and processing power required by their applets; a CPU-intensive applet could bring the user’s computer to its knees. |
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.
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:
| |
Figure 4.3 shows a ticker tape with controls in action.
TickerTape applet with controls.
Fireworks
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.
Fireworks applet example.
Animation
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.
Juggling
Chris Seguin has created a juggling instructional page () 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.
The Java juggling page.
Drawing on Famous Pictures
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).
| WHO OWNS WHAT? |
| The drawing applet in this section demonstrates the blending of authorship and ownership that Java is opening on the Web. The author of the HTML page used an applet written by one person and an image created by another (and painted by still another—Leonardo da Vinci—long ago!) to create an environment for the user to alter the image. Who is the author of the resulting Web page and who finally owns the melded pieces? The talent of the Java programmer who made the applet? The Web page creator who put the pieces together? The browser manufacturer? The user who marks the image? The creator of the original image? da Vinci perhaps never would have imagined his painting would be transmitted around the world to be defaced with such glee. These questions raise just some of the legal and intellectual property issues involved in the use of Java and the Web. |
Marking on the world and the Mona Lisa.
A Live Feedback Imagemap
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.
Live feedback imagemap.
The Weather
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.
Weather map.
Commercial Sites Using Java
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 (), HotWired (), and Sun Microsystems (). 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
The Rolling Stones is a rock band that made a big splash on the Internet Multicast Backbone (MBONE—) when they used it to simulcast part of their November 18, 1994, Dallas Cotton Bowl concert. Today, the Stones Web site ( ) is making a splash with Java.
The Stones site contains several interesting Java applets:
· A Stones puzzle () in which you slide the squares to make the famous tongue logo.
· The Stones Java devil (), which animates the What’s New page for the site.
· On the opening page of the Stones Voodoo Lounge (), animated flags move back and forth across the screen. This page is shown in Figure 4.9.
The Rolling Stones Voodoo Lounge with Java.
Accurate Information System Consultant
Other commercial providers are using Java to add interest to their pages through animation. Accurate Information Systems () 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.
Accurate Information System Consultant ticker tape greeting.
Summary
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.
· Text can shimmer using NervousText. Users can include this applet on their pages by using the APP element. By setting attributes of the applet, the user can control characteristics and behavior of the applet.
· Text can scroll, as shown in the TickerTape applet.
· Graphics can repeat a visual pattern, such as in the Fireworks applet.
· Moving applets can teach a lesson, as in the Juggling applet.
· The Magic applet enables users to alter graphics, allowing them to draw on an image.
· A Java applet can perform the equivalent function of an HTML imagemap. Java’s advantage over traditional imagemaps is that Java imagemaps can give instant feedback regarding the user’s cursor position. Feedback does not need to be delayed until after a mouse click.
· Many companies already use Java, including rock bands and computer companies, to provide interest on Web pages.
إرسال تعليق