Animated ImageIcon as Button

animated-gif, imageicon, java, jbutton, swing

Solution

Seems to work just fine for me...

I used the following icons...(png and gif)...

import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.GridBagLayout;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class AnimatedButton {

    public static void main(String[] args) {
        new AnimatedButton();
    }

    public AnimatedButton() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException ex) {
                } catch (InstantiationException ex) {
                } catch (IllegalAccessException ex) {
                } catch (UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        private ImageIcon animatedGif;

        public TestPane() {
            setLayout(new GridBagLayout());
            JButton btn = new JButton(new ImageIcon("WildPony.png"));
            btn.setRolloverEnabled(true);
            animatedGif = new ImageIcon("ajax-loader.gif");
            btn.setRolloverIcon(animatedGif);
            add(btn);

            btn.addMouseListener(new MouseAdapter() {

                @Override
                public void mouseEntered(MouseEvent e) {
                    animatedGif.getImage().flush();
                }

            });
        }    
    }
}

I just realised that you are using a non-looping gif. This means you are going to nee to try and "reset" to start it playing again.

Try using something like `icon.getImage().flush();`, where `icon` is your `ImageIcon`. You're going to have to attach a `MouseListener` to the button to detect the `mouseEnter` event and reset the `ImageIcon`...

Problem

I have an imageIcon as Button, now i would to animate it when you rollover. I tried to use a animated gif (without loop) on setRolloverIcon(Icon). But when i hover again on the button the gif is not playing again. When i use a looped gif then it plays it from a random frame. I tried using paintComponent to draw a Shape or an image as Button, which works fine, but even when i use setPreferredSize() or setSize() or setMaximumSize() the Button uses its default size, as you can see in the picture (middle button). Im using GroupLayout, might this be the problem?

Original source