Display 2 images - one on top of the other

Question

I am currently overriding paint and using createImage to pull images from files, and Graphics.drawImage to display the 2 images in a panel, with one completely on top of the other, obscuring it. There is a significant "flash" because it looks like 1) paint is being called twice; and 2) the "foreground" image is being drawn first and then the "background" image is being drawn. Most of the time, that is. The order seems to be determined by something beyond me. In paint I am calling Graphics.drawImage(background params..) and then Graphics.drawImage(foreground params...)
Here is my question: How can I get this to look good? I cannot use a LayeredPane; the program is supposed to be light weight, J2SE. Can I somehow combine the images before displaying them? Like, write on on top of the other, and then display the result? I don't need to save the result.
OR, is there a way to draw the background image once, and then up date the foreground image when necessary? My background image is constant and the foregrounds change...
I'm not very up on Java 2D. Should I be using Graphics2D and BufferedImage? What other classes should I use or look at?
Thanks for any help! Feel free to provide code samples!

Answer 1

Flashing sounds like you are doing something basically wrong, like using the AWT instead of Swing.
Learn about Java2D, you're going to need it sooner or later, and don't fear BufferedImages, they're easier to
work with than java.awt.Image:
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
public class TwoImageExample extends JPanel {
    private BufferedImage backImage, foreImage, foreImage1, foreImage2;
    private Timer timer = new Timer(1000, new ActionListener(){
            public void actionPerformed(ActionEvent evt) {
                foreImage = (foreImage==foreImage1)? foreImage2 : foreImage1;
                repaint();
    public TwoImageExample(BufferedImage backImage, BufferedImage foreImage1, BufferedImage foreImage2) {
        this.backImage = backImage;
        this.foreImage1 = foreImage1;
        this.foreImage2 = foreImage2;
        //alternates:
        this.foreImage = foreImage1;
        timer.start();
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Insets insets = getInsets();
        int w = getWidth() - insets.left - insets.right;
        int h = getHeight()- insets.top - insets.bottom;
        Graphics2D g2 = (Graphics2D) g.create(insets.left, insets.top, w, h);
        AffineTransform xform = AffineTransform.getTranslateInstance((w-backImage.getWidth())/2, (h-backImage.getHeight())/2);
        g2.drawRenderedImage(backImage, xform);
        xform = AffineTransform.getTranslateInstance((w-foreImage.getWidth())/2, (h-foreImage.getHeight())/2);
        g2.drawRenderedImage(foreImage, xform);
    public static void main(String[] args) throws IOException {
        URL url1 = new URL("http://today.java.net/jag/Image24-large.jpeg");
        URL url2 = new URL("http://java.sun.com/j2se/1.5.0/docs/guide/deployment/images/javalogo52x88.gif");
        URL url3 = new URL("http://java.sun.com/j2se/1.5.0/docs/guide/deployment/deployment-guide/images/javalogo52x88-gray-bg-3.gif");
        JComponent app = new TwoImageExample(ImageIO.read(url1), ImageIO.read(url2), ImageIO.read(url3));
        JFrame f = new JFrame("TwoImageExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(app);
        f.setSize(800,600);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
}