Special Effects and Game Development
in Java(TM) - A configurable and effectfull image slide show
(SlideShow)
by Anibal Wainstein
4.1.4 A configurable
and effectfull image slide show (SlideShow)
Even if AppletAnimator II can be used to display
images, yet it is not very impressive. We will now develop
an animated slide show that slowly translates an image from
a random location until it covers the old image completely.
At last we are about to use random numbers. There is a very
useful class in Java which is called Math. This class contains
mostly static methods, so you do not have to create a Math-object
to use these, you can call them directly. A very important
method is the random() method. It returns a double floating
point random number between 0 and 0.9999999... By multiplying
with 10, you could get random numbers between 0 and 9. Please
note that when you type cast a double to an integer, then
the number will be rounded to the lowest integer value. Look
at the following line:
int randomnumber = (int)(Math.random()*2.0);
The variable "randomnumber" will be
set to 0 or 1. In the slide show we will use random numbers
to indicate from what corner an image is going to be translated
from. Actually to make this applet, we can just take all the
variables and methods in the AppletAnimatorII applet and use
these with just one change in the run() and paint() methods.
We must also add the following global variables below the
declaration of the "currentimage" variable:
int nextimage = 0; int nextimagexposition = 0; int nextimageyposition = 0;
These variables indicates what image will be animated into
the applet screen and what its current position is. The
paint() method will then look like this:
public synchronized void paint(Graphics g)
{ g.drawImage(images[currentimage],0,0,this);
//The following image is drawn on top of the last
//image.
g.drawImage(images[nextimage]
,nextimagexposition,nextimageyposition,this);
}
The run() method will be a bit more complicated.
We must for the first time find out what the applet dimensions
are, because the person that will use the applet will probably
change the dimensions. You do that with the size() method,
which returns a Dimension object. With this object, we can
find out the applet dimensions with its internal variables,
"width" and "height".
public void run()
{ //We must find out the applet's dimension and save it
//in the "d" variable. We can now get the applet
//width and height by writing d.width and d.height.
Dimension d=size();
//The "displacement" variables specify the
//starting coordinates for the image. int displacementx=0; int displacementy=0;
//"pathsize" will be used to know what distance
//that the new image will be moved. int pathsize=0;
//"currentimage" is initialized to the first image,
//followed by the next image, who becomes image
//number 2, and so on. currentimage=0;
nextimage=1; while (true)
{ //We calculate from which direction that
//the new image should be moved from. int directionx=(int) (Math.random()*3.0)-1; int directiony=(int) (Math.random()*3.0)-1; //"directionx" and "directiony" may have
//three values: -1, 0 and 1. It is not
//interesting if both variables get the value 0
//at the same time so therefore we change
//"directiony" so that the effect becomes
//more interesting. if (directionx==0 && directiony==0) directiony=1;
//The variable "pathsize" is set to the applet
//width or height depending on what side is the
//shortest. if (d.width<d.height) pathsize=d.width; else pathsize=d.height;
//The following line is the protection to the
//problem if the user should only specify one
//image. if (nextimage>maxitems-1) nextimage=0;
//The following loop handles the screen update
//during the animation. It will move the image
//the number of times specifies by "pathsize",
//which is the short side of the applet screen. for (int i=0; i<=pathsize; i++)
{ //The image positions are moved
//with the fraction (i/pathsize).
nextimagexposition=displacementx
-directionx*(i*d.width)/pathsize;
nextimageyposition=displacementy
-directiony*(i*d.height)/pathsize;
update(getGraphics()); try {Thread.sleep(sleeptime);} catch(InterruptedException e) {}
} //When the translation is finished,
//then "currentimage" is set to the new
//image.
currentimage=nextimage;
//We increase "nextimage" so that it points to the
//next image. At the same time we make sure that
//"nextimage" extends above the array index but
//that it is forced to start over from 0 if it does.
nextimage++;
if (nextimage>maxitems-1) nextimage=0;
}
The applet begins by placing an image out of visual range
of the spectator, that is outside the applet screen. Slowly
the image is translated to the center, one pixel at the
time. A problem that can appear here, is the case when the
applet is a rectangle and not a quadrate. Because then the
applet must move the image with different horizontal and
vertical steps. Therefore we use the short side of the applet
screen and use it in the for loop to count to the number
of pixels (the variable "pathsize"). We calculate
a percent of how much the image must move (i/pathsize)
and multiplicate this with d.width or d.height to get the
total horizontal and vertical distance that it has translated
and the new x and y position for the image.
The problem here is, because we are working with integers,
we must make the division last. Therefore we write ((i*d.width)/pathsize)
instead. Or else (i/pathsize) will always give the result
zero because the value of "pathsize" is larger
than "i". This is important, if you divide
a smaller integer with a larger integer, then the result
is always zero.
Finally we must also multiply this expression with "directionx"
or "directiony", so that the image moves in the
right direction and deduce this expression from "displacementx"
and "displacementy" respectively, which are the
images start coordinates.

The image demonstrates how the slide show
works. The new image "nextimage" will be translated
over the old image "currentimage".
After the for loop, we set "currentimage"
to indicate the new image and increase "nextimage"
so that it points to the next image in the slide show. If
"nextimage" is pointing at the last image, then
we set it to zero, so that it points to the first image instead
(zero index). The result is that the images will rotate around
in the slide show, so that the effect never ends. This line
must also be used before the for loop, in the case that the
user for some strange reason would like to specify just one
image in the applet. This must be done in order to keep the
applet from crashing. Now you can look at the result by clicking
here.
You are disappointed, right? All this trouble
just for a flimmering applet! The problem with the applet
is, that when the first image has been drawn in the paint()
method with drawImage(), then the applet screen is updated
immediately. It will therefore fully display the old image
before it finds the time to cover it with the next image.
We must therefore find a way to prevent the applet screen
to be updated between the two drawImage() calls. It is here
we will have use for the double buffering technique, which
will be discussed in the next section of this chapter.
Next Page >>
|