Home E-Books Special Effects and Game Development in Java image slide show

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 >>