Java Animation

To create an animation we write an extension to the applet class that includes
1) The 'implements Runnable' signature for our applet.
2) An instance variable to hold the applet's thread. (below we declare a thread called runner)
3) The start and stop method that do nothing but spawn a thread and start or stop it from running.
4) The run method containing the code that starts running when the applet begins.

1) 
import java.awt.Graphics;
import java.awt.Font;
import java.awt.Color;

public class marquee extends java.applet.Applet 
implements Runnable
{
We want to include the Graphics
font and color capabilities


and create an applet that
is 'runnable'
allowing multithreading

2)		 String mesag ="Scrolling text is a simple animation.
Just draw the text, wait a while and then redraw it
one pixel to the left!";
Font mfont = new Font("TimesRoman",Font.BOLD, 24);
int Xposition = 600;
Thread runner;

 These Declarations ....
Set up the string that will scroll

the font and size
The x coordinate
And a thread to control the flow
of the program
3)



 public void start()
{
if (runner == null);
{
runner = new Thread(this);
runner.start();
}
}

 The thread will not start until
the parent thread calls this
Thread.start
The new thread begins
executing the run method of
our runnable class.
3)



 public void stop()
{
if (runner != null);
{
runner.stop();
runner = null;

}
}
 This stops the thread
from executing.
Returning from the run method
causes an automatic call to
stop
4)



 public void run()
{
while(true)
{
setBackground(Color.white);
repaint();
try {Thread.sleep(30);}
catch(InterruptedException e) { }
}
}		 Control passes here as soon
as the thread starts
When this method returns
the thread stops
We simply set the background color
Paint the screen with the paint method
Put the thread to sleep
and check for any errors
  public void paint(Graphics g)
{
g.setFont(mfont);
g.drawString(mesag,Xposition,35);
Xposition--;
if (Xposition < -1200)
{
Xposition = 600;
}
}
}		 The paint method actually
places the text on the screen
First set the font
Draw the string at the current x position
and decrement the x position
If the text has scrolled off the screen

reset the x position to start the process
over on the right side

In order to place graphics on the screen repaint makes an automatic call to the update method that does the following.

1) sets up to print in the background color public void update (Graphics g){
g.setColor(getBackground());
2) fills a rectangle with the background color to clear the screen g.fillRect(0,0,width,height);
3) sets up to print in the foreground color g.setColor(getForeground());
4) calls the paint method to place the graphics on the screen paint(g); }

At this point the paint method performs the printing of the text and adjustment of its position .

The easiest way to copy the code for this example is to click here, copy the contents of the screen that loads in your browser , paste it in a text editor and save it in a file called "marquee.java".

After compiling this program we need to create an HTML page with a reference to the class file. It must run in a graphic window that is large enough to accommodate the pixels in the grid. The following HTML Code will meet all the requirements.

<html>
<head>
<title>Applet Page</title>
</head>
<p align="left"><font size="6">
<strong>View of the applet's
output</strong></font></p>

<p><applet code="marquee.class"
align="baseline" width="600"
height="50"></applet></p>
</body>
</html>



<This line places a label above the applet


< The Applet is inserted here
with a window of 600 pixels in height and
50 width.

Save the HTML code in the same directory as the class file. Notice that this differs with the generic HTML page code only in the width and height of the Java window.

When you load the HTML file in your browser the applet will execute within the window. The results should resemble what you see below.

View of the applet's output

The text starts at position 600, 35 (bottom left of the first character) and moves one pixel to the left every time a new thread starts. When the x coordinate decreases below -1200 the text has scrolled off the screen and the x coordinate is reset to 600 to make the text start from the right once again.
There is a problem with this animation. Notice the flicker effect. We need to change our method of updating the screen to eliminate the problem. In the update method the screen is first 'cleared' by drawing a filled rectangle on the output screen (g.fillRect(0,0,width,height);) Unfortunately the monitor screen may be redrawn before Java places the text on the screen. For an instant, the text disappears and our eyes perceive a flickering effect. The next section discusses a method of buffering the screen output to avoid this problem.

Go on to the Flicker free version