Friday, October 29, 2010

Friday Fun Component II

And it's friday again...so it's time for another little component that was fun to create.
Last week a friend of mine pointed me to a website and said "I'm sure you can't do this in Java...".

So it was about the following flash component called MagicButton, which looks like this...



As you could imagine this is not really hard to realize in Java right...
But if you move the mouse over the button it shows it's magic, which is a nice gradient that fades in slowly if you leave the mousepointer over the button and it flashes if you move the mousepointer over the button and directly move it away from it.



So thats the challenge here...
Dynamic fade in a gradient if the mouse moves over the button and fade it out again if the mouse exits the button again plus the different behavior if you leave the mouse over the button or move it over the button.



Well fortunately there's a guy named Kirill Grouchnikov that created this really nice library called trident animation library. With the help of this library it was not really a problem anymore to create some similar button in Java.


When i was playing around with the button and the effect i thought it would be a good idea to add another effect to it, in the original flash version i missed the clicked/pressed state of the button and therefor i decided to add it in my example...



The MButton component is as always a swing component that you could use in your ide and drag'n drop it to your layouts (but to be honest only one button in a different design doesn't make sense, so it's more a example on how to do it).


If you open the source (which is a NetBeans project) you will find two classes:

  • MButton
  • MButtonUI

where the MButtonUI class is the ui delegate for the MButton class. In the MButtonUI you will find the painting of all the images that are needed to create the button (backgroundImage, contextImage, foregroundImage).


The painting of the effect is realized in the MButton itself and it uses the trident animation library to realize the animation effects.


That means you need to add the trident.jar file to your project if you would like to use the button.


The component allows you to set the hover effect color and also the clicked/pressed effect color.
To get a better impression of the animation you might want to try a little java webstart demo...


So if you like it, please find the source and the binary here:


    Source: MButton_Source.zip


    Binary: MButton.jar



Enjoy coding and of course the upcoming weekend...



8 comments:

  1. Awesome work as ever Gerrit! However I noticed that once you click on a button the gradient disappears and there's no indication left on which button you just clicked. Is this by design?

    ReplyDelete
  2. You're right, i simply was not sure how to visualize a already clicked button...

    So i'm open for ideas...

    ReplyDelete
  3. Nice component! I'm starting to enjoy your friday fun stuff ;-)

    ReplyDelete
  4. Cool stuff, I like it :).

    ReplyDelete
  5. Hi, i like these buttons but i would like to change the background color for darker. Obviously the idisk account seem down (service unavailable) and thus i can't download the source, would you mind give a new link?
    Thank's for all these great components.
    Bests

    ReplyDelete
    Replies
    1. Hi Hoel,
      Updated the links, so you should be able to download the sources again. If you encounter other problems related to links, just let me know and I will update them as well.
      Cheers,
      Gerrit

      Delete
  6. Hi Han, can you update the link? Thanks

    ReplyDelete
    Replies
    1. Hi Nathan,
      I hope all links are working again (at least all I've tested seem to work). :)

      Delete