Sound & Animation

The annoying little animation above was created by changing a few lines in the buffered animation applet. The one at the bottom of the screen will take slightly longer to load and will create a second sound source. The one waving its hand is creating the sound. They will perform this ritual until you either turn off the sound of move on to the next page. You can create your own animations by creating the graphics and using the following code as a starting point.

The code contains the following changes:
1) An array of images is created and filled with the images for each frame
2) We count the frames and change the images or start sounds where it is required.
3) Reset the frame counter to repeat the animation.

The code changes to accomplish these tasks aren't very difficult as you can see below.

  
import java.awt.Graphics;
import java.awt.Color;
import java.awt.Font;
import java.awt.Image;
import java.applet.AudioClip;
This code remains the same except for the
addition of audioclip capabilities.
1) public class goodbye extends java.applet.Applet
implements Runnable
{
Image dukeImage[] = new Image[11];
int frm = 1;

Image scrnBuf;
Graphics scrnG;

Thread runner;		 An array of images holds the frames of the animation
And we need an integer to index through the frames
1) public void init()
{
for (int i=1;i <= 10;i++) {
dukeImage[i]= getImage(getDocumentBase(),"duke/T"+i+".gif");}
scrnBuf = createImage(100,100);
scrnG = scrnBuf.getGraphics();
}		 The images T1.GIF through T10.GIF in the duke subdirectory are placed in the array.
  public void start()
{
if (runner == null);
{
runner = new Thread(this);
runner.start();
}
}		 We still need to start and...
  public void stop()
{
if (runner != null);
{
runner.stop();
runner = null;

}
}		 Stop our threads as before.
  public void run()
{
while(true)
{
repaint();
try {Thread.sleep(100);}
catch(InterruptedException e) { }
}
}
 And follow the same overall method of repainting
the screen, sleeping for a while
and checking for errors
  public void update(Graphics g)
{
paint(g);
}		 Again we override the update method
to call paint without clearing the screen..
2)





3)
 
public void paint(Graphics g)
{
  Color c = new Color(128,128,192);
  scrnG.setColor(c);
  scrnG.fillRect(0,0,75,75);
  
  if (frm == 42)
  play(getCodeBase(),"duke/hi.au");
  if (frm > 40)
  scrnG.drawImage(dukeImage[frm-40],5,2,this);
  else scrnG.drawImage(dukeImage[1],5,2,this);
  
  frm++;
  if (frm > 50)
    {
    frm = 1;
    }
  g.drawImage(scrnBuf, 0 , 0 , this);
}

}
 This is where all the work is done on our buffer screen

Setup the screen background color
And set the color of the buffer screen to that color
Draw a filled rectangle to clear it of the last image

If we are at frame 42 in the animation start the sound.
Animate the hand wave during frames 40-50
Otherwise leave the original image on screen.

increment the frame counter
reset the counter if its greater than 50


and then put the new image on the output screen
using the drawImage method

 

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 "marque2.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="goodbye.class"
align="baseline" width="75"
height="75"></applet></p>


</body>

</html>



<This line places a label above the applet


The Applet is inserted here
with a window of 75 pixels in height and
width.

Save the HTML code in the same directory as the class file.

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

Notice that both the top and bottom applet run simultaneously each in its own thread. Just edit the code to animate any image with sound. There is an animation class in the Sun Java toolkit that can also be used to produce the same results. These change with the different versions so you will need to read the documentation that came with your individual package.
This concludes our section on graphics. You should be getting fairly familiar with Java programming at this point. We're ready to move on to the user interface and the Abstract Windowing Toolkit (awt) in the next section.

Go to the next topic: Event Driven Concepts

Back to the Table of Contents