This chapter is from the book

This chapter is from the book

Whether you are reading this book in 24 one-hour sessions or in a single
24-hour-long-bring-me-more-coffee-can't-feel-my-hand-are-you-going-to-finish-that-donut
marathon, you deserve something for making it all this way. Unfortunately, Sams
Publishing declined my request to buy you a pony, so the best I can offer as a
reward is the most entertaining subject in the book: animation.

At this point, you have learned how to use text, fonts, color, lines,
polygons, and sound in your Java programs. For the last hour on Java's
multimedia capabilities, and the last hour of the book, you will learn how to
display image files in GIF and JPEG formats in your programs and present them in
animated sequences. The following topics will be covered:

Using Image objects to hold image files

Putting a series of images into an array

Cycling through an image array to produce animation

Using the update() method to reduce flickering problems

Using the drawImage() command

Establishing rules for the movement of an image

Animating a Sequence of Images

Computer animation at its most basic consists of drawing an image at a
specific place, moving the location of the image, and telling the computer to
redraw the image at its new location. Many animations on Web pages are a series
of image files, usually .GIF or .JPG files that are displayed
in the same place in a certain order. You can do this to simulate motion or to
create some other effect.

The first program you will be writing today uses a series of image files to
create an animated picture of the Anastasia Island Lighthouse in St. Augustine,
Florida. Several details about the animation will be customizable with
parameters, so you can replace any images of your own for those provided for
this example.

Create a new file in your word processor called Animate.java. Enter
Listing 24.1 into the file, and remember to save the file when you're done
entering the text.

Because animation is usually a process that continues over a period of time,
the portion of the program that manipulates and animates images should be
designed to run in its own thread. This becomes especially important in a Swing
program that must be able to respond to user input while an animation is taking
place. Without threads, animation often takes up so much of the Java
interpreter's time that the rest of a program's graphical user
interface is sluggish to respond.

The Animate program uses the same threaded applet structure that you
used during Hour 19, "Creating a Threaded Program." Threads are also
useful in animation programming because they give you the ability to control the
timing of the animation. The Thread.sleep() method is an effective way
to determine how long each image should be displayed before the next image is
shown.

The Animate applet retrieves images as parameters on a Web page. The
parameters should have names starting at "image0" and ending
at the last image of the animation, such as "image3" in this
hour's example. The maximum number of images that can be displayed by this
applet is six, but you could raise this number by making changes to Lines 6 and
13.

The totalPicture integer variable determines how many different
images will be displayed in an animation. If less than six image files have been
specified by parameters, the Animate applet will determine this during
the init() method when imageText equals null after
Line 15.

The speed of the animation is specified by a "pause"
parameter. Because all parameters from a Web page are received as strings, the
Integer.parseInt() method is needed to convert the text into an
integer. The pause variable keeps track of the number of milliseconds
to pause after displaying each image in an animation.

Loading and Displaying Images

As with most threaded programs, the run() method contains the main
part of the program. A while (runner == thisThread) statement in Line
44 causes Lines 4551 to loop until something causes these two
Thread objects to have different values.

The first thing that happens in the while loop is a call to the
applet's repaint() method. This statement requests that the
applet's paint() method be called so that the screen can be
updated. Use repaint() any time you know something has changed and the
display needs to be changed to bring it up to date. In this case, every time the
Animate loop goes around once, a different image should be shown.

NOTE

In Java, you can never be sure that calling repaint() will result in
the component or applet window being repainted. The interpreter will ignore
calls to repaint() if it can't process them as quickly as they are
being called, or if some other task is taking up most of its time.

First, a Graphics2D object is cast so that it can be used when
drawing to the applet window. Next, an if statement determines whether
the Image object stored in picture[current] has a
null value. When it does not equal null, this indicates that
an image is ready to be displayed. The drawImage() method of the
screen2D object displays the current Image object at the (x,y)
position specified.

NOTE

The paint() method of this applet does not call the paint()
method of its superclass, unlike some of the other graphical programs in the
book, because it makes the animated sequence look terrible. The applet's
paint() method clears the window each time it is called, which is OK
when you're drawing a graphical user interface or some other graphics that
don't change. However, clearing it again and again in a short time causes
an animation to flicker.

The this statement sent as the fourth argument to
drawImage() enables the program to use a class called
ImageObserver. This class tracks when an image is being loaded and when
it is finished. The JApplet class contains behavior that works behind
the scenes to take care of this process, so all you have to do is specify
this as an argument to drawImage() and some other methods
related to image display. The rest is taken care of for you.

An Image object must be created and loaded with a valid image before
you can use the drawImage() method. The way to load an image in an
applet is to use the getImage() method. This method takes two
arguments: the Web address or folder that contains the image file and the file
name of the image.

The first argument is taken care of with the getCodeBase() method,
which is part of the JApplet class. This method returns the location of
the applet itself, so if you put your images in the same folder as the
applet's class file, you can use getCodeBase(). The second
argument should be a .GIF file or .JPG file to load. In the
following example, a turtlePicture object is created and an image file
called Mertle.gif is loaded into it:

Image turtlePicture = getImage(getCodeBase(), "Mertle.gif");

NOTE

As you look over the source code to the Animate applet, you might
wonder why the test for a null value in Line 31 is necessary. This check is
required because the paint() method may be called before an image file
has been fully loaded into a picture[] element. Calling
getImage() begins the process of loading an image. To prevent a
slowdown, the Java interpreter continues to run the rest of the program while
images are being loaded.

Storing a Group of Related Images

In the Animate applet, images are loaded into an array of
Image objects called pictures. The pictures array is
set up to handle six elements in Line 6 of the program, so you can have
Image objects ranging from picture[0] to picture[5].
The following statement in the applet's paint() method displays
the current image:

screen.drawImage(picture[current], 0, 0, this);

The current variable is used in the applet to keep track of which
image to display in the paint() method. It has an initial value of
0, so the first image to be displayed is the one stored in
picture[0]. After each call to the repaint() statement in Line
45 of the run() method, the current variable is incremented by
one in Line 46.

The totalPictures variable is an integer that keeps track of how
many images should be displayed. It is set when images are loaded from
parameters off the Web page. When current equals
totalPictures, it is set back to 0. As a result,
current cycles through each image of the animation, and then begins
again at the first image.