Skip to main content

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

Posted by kirillcool on November 27, 2006 at 10:21 PM PST

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).

Related Topics >>