Click here to Skip to main content
Click here to Skip to main content

Changing button images on the fly

, 13 Apr 2006
Rate this:
Please Sign up or sign in to vote.
Create a Flash-like button in Java.

Figure 1.1 My simple window

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.

Figure 2.1 The State

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

lodieus

Malaysia Malaysia
I love Java and will always do

Comments and Discussions

 
Generalthanks Pinmemberkite21-Apr-08 8:24 
GeneralRe: thanks PinmemberHoanh Cao29-Jan-10 14:19 
GeneralThanks for your article Pinmembertrungkang1-Nov-06 6:24 
JokeGood tutorial PinmemberHilario Perez18-Apr-06 21:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 14 Apr 2006
Article Copyright 2006 by lodieus
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid