Changing button images on the fly

• Download source files - 6 KB

Introduction

I like Flash buttons because you can easily change the attributes of the buttons depending on the situation, such as mouse over or mouse click. You can do this easily in Java.

Many people load different graphics using these methods in JButton: setIcon(icon), setRolloverIcon(icon), and setPressedIcon(icon). To me, it works, but is not too efficient. I will show you how to process the image during runtime by using Java Graphics.

Java Swing is a technology for desktop. If used properly, it can hardware-accelerate the image you upload. I won’t cover hardware-accelerated images here, because I think you can Google about it.

As you can see, the initial state of the button is a little bit transparent. When you put your mouse over it, the image will become more visible. When clicked, the image will move by x=1px and y=1px.

Using the code

The class that is included with this article is named MouseOverButton.

The most important method in the MouseOverButton class is JButton createButton(String pathName, String toolTip) and BufferedImage createCompatibleImage(int w, int h, int transparancy).

The method createCompatibleImage(w,h, transparency) returns a BufferedImage that supports the specified transparency, and has a data layout and color model compatible with this GraphicsConfiguration.

/**
       Creates an image compatible with the current display.
    */
    public BufferedImage createCompatibleImage(int w, int h, int transparancy)
    {
        GraphicsConfiguration gc = getGraphicsConfiguration();
        return gc.createCompatibleImage(w, h, transparancy);
    }

We will make three images. The first image is the image that we load. This image is used when the mouse cursor is over the image.

The second image makes the translucent default image. This is the image in the initial state.

Image image = createCompatibleImage(w, h, Transparency.TRANSLUCENT);
Graphics2D g = (Graphics2D)image.getGraphics();
        Composite alpha = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, .5f);
g.setComposite(alpha);
//drawImage(image, x, y, image to be notified)

g.drawImage(imageRollover.getImage(), 0,0, null);
g.dispose();
ImageIcon iconDefault = new ImageIcon(image);

We set the alpha to be 0.5, that is 50% of the total image visibility (if alpha=1.0f, the image is fully visible). Then, set the composite for the image before drawing it on the screen.

The third image is fully visible. We will draw the image by setting x=1 and y=1 (offset the image by a few pixels) so that it will give the effect that the button has been pressed.

//make a pressed image

image = createCompatibleImage(w, h, Transparency.TRANSLUCENT);
g = (Graphics2D)image.getGraphics();
g.drawImage(imageRollover.getImage(),1,1, null);
g.dispose();
ImageIcon iconPressed = new ImageIcon(image);

Conclusion

I think that is all that I can tell you about my program. The rest is self-explanatory, or you can read about it in the Java documentation because it is all simple. If you have any enquiries or thinks that I need to elaborate more, don’t hesitate to contact me.

You can be more creative; you can use it to make your program more interactive and look cool.

Disclaimer

The image I used for this tutorial is downloaded from CodeProject itself.

Reference

Brackeen, D. (2004). Developing Games in Java. New Riders Publishing.