Kirill Grouchnikov's Blog

Spicing up your buttons with rollover (and pressed) effects, part II

The first part introduced the "ghosting image" effects (aka "spring" in Romain presentations). When you rollover the mouse over a button, its icon has an outward decaying "ghost" image painted (starts from 50% opacity and decays linearly to zero). I asked for your feedback, and this entry shows how some of your requests have been implemented.

• Jens and Aberrant asked for "pushing" the rollover effect outside the button bounds. Request granted :)
• Christian asked for for a clear feedback on pushing the button. Request granted :)
• Felipe asked for transparent frames. Sorry, but the best we can do for the next couple of years is "it's on our wish-list and the community is welcome to chip in, and in case you really want to know when it will be available, it's on our wish-list" :)

Here is the video (it's a little jaggy, so you're more than welcome to run the WebStart app below):

And here's the test application. Move the mouse over the buttons (best seen on "Cut" and "Paste") and click at will. Use the combo to set the animation speed.

A few notes about the current limitations:

• It works only on the immediate parent panel. That is, if you have a button in a SOUTH panel of your app, the effect will be painted only on that panel, not "spreading" to the CENTER panel. This is done to cut down on CPU and on the implementation complexity (which will be much more complex in general case).
• It works only when the parent is JPanel. While it's trivial to extend it to buttons in JToolBars, custom containers with UI delegates not in Substance will not have this effect (outside the button bounds).
• It works only on JButtons and not on JToggleButtons. It's trivial to extend it to the later, but not to custom components not in the core Swing.

As always, your feedback is more than welcome. While the ultimate goal is something as attractive but yet not distracting as this Beryl clip, it may take a while to get there. The next step would most probably involve extending this effect to tree expanding (thanks, Pramod).

Comments

• I like it...Looks great now. Thumbs up !

  Posted by: mac_systems on November 28, 2006 at 07:27 AM

• Fantastic! How about the combo box button? Table headers are not JButtons right? The push effect would be great when sorting a table. Good work and good luck with the tree expansion.

  Posted by: aberrant on November 29, 2006 at 05:37 AM

• Now why does the button explode if I click it? :-)

  Posted by: christian_schlichtherle on November 29, 2006 at 07:21 AM

This work is licensed under a Creative Commons License.