Keilly: Flippable Swing Components

Saturday, May 24, 2008

Flippable Swing Components

One of the nice things about Dashboard widgets is that their preferences are presented on the reverse of each widget. Doing this means that preferences don't take any extra screen real estate, they don't need a dedicated preferences dialog, and a nice flipping animation gives users a natural sense of their location.

Here's a basic implementation for Java Swing components. Webstart Demo





How it's done
A new ReversibleComponent takes a front and back component and does the following:
The front and back components are placed on top of each other in a JLayeredPane, the back one is initially hidden with setVisible(false).
Pressing the 'i' button starts the transition to the back. The transition animation technique is pretty much the same as my animated tree (why does JRoller delete hosted images after a while??). An image of each of the front and back components is captured, then temporary 'tween' images are composited and displayed in a layer above the real components during the animation.
The animation uses a perspective transform from JHLabs to gradually spin the front image away and the back image in. A semi transparent gradient is also drawn over the top to darken the end of the image spinning 'away' from the user giving a better sense of depth.
Once the animation is complete, the front component is hidden, the back one made visible and the 'tween' image overlay is removed. Voila! A spinning JComponent.

Source Code

7 comments:

Anonymous said...

Great job!
But it seems the source code for the demo is incomplete. :-s

Now to look for an app where I can use it...

Anonymous said...

nice job,
but try to adjust your jnlp to support java 6 too.
Just add a tiny + after 1.5 in your java version specification.

Neil Cochrane said...

I could only add a normal sized '+' after the '1.5' :-)

Thanks for spotting that.

Anonymous said...

Source code ZIP file does not have the source for the applet itself. The file called AppletFlip.java is actually a ZIP file that contains the source for the ComponentFlipper and ReversableComponent classes.

Neil Cochrane said...

Oh, you're right. I don't have the file anymore to correct it, but the zip still contains the useful files - just add them to a JFrame.

Anonymous said...

Great work! Thanks!

Anonymous said...

The source code link is dead. Can someone upload it again