CREATING ANIMATED GIFS ON A MAC

Here is a sample of gif animations prepared by the ICS3U class of 2011 of their Selection Sort simulations...

Our graphic investigations of classic Searching and Sorting algorithms enables us to 'teach' our viewers how these algorithms achieve their results through dynamic animation. All that is required to present your work is to mount the applet classes on a web page. This is often easier said than done as you've found out in your experience in working with FC Web Publishing.

Fortunately, there's a 'light' version of the dynamic presentation that's less prone to server idiosyncrasies: Animated Gifs. Animated gifs are simply a sequence of graphic images packed into one file that are looped either a finite number of times, or forever.

To create an animated gif, you need,

  1. A sequence of images. Here's a zip file consisting of sequence of images to get you started. Download them to your desktop or some other folder.
  2. Graphic software that will load all the images at once and either Save As, or Export to, the animated gif format. You can use Photoshop if it's installed on your computer (overkill) or you can download simple freeware. A little research for the Mac turned up GIFfun. Download it, drag the images to it's desktop, set the options and save the file. This YouTube video explains the use of the software in more detail.

Clearly you'd like to create animated gifs using your own sequence of images. Here's how it can been done. Close inspection of Content's run() method reveals a call to repaint(). This call eventually triggers a call to Content's paintComponent() method below,

    public void paintComponent(Graphics g) {
      super.paintComponent(g);
      Graphics2D g2D = (Graphics2D) g;
      g2D.drawImage(getImage(), 0, 0, this);
    }
The getImage() accessor method simply returns the BufferedImage object you created in each pass through the draw() method of each Drawable class. Conveniently, the same BufferedImage object can be easily saved to a disk file in either the gif, jpg, or bmp file formats. Here's a method that will do just that, 
  
  private void saveImage(BufferedImage bi) {
    try {
      File file = new File("SelectionSort_" + +(index + 1) + ".gif");
      javax.imageio.ImageIO.write(bi, "gif", file);
    } catch (Exception e) {
        System.out.println("Exception found: " + e);
      }
    }
  }
A strategically-placed call to this method from within SelectionSort's draw() method will result in a sequence of gif files being written to Framework's /bin folder with the names, SelectionSort_1.gif, SelectionSort_2.gif, and so on. Open the animated gif with a browser to behold its wonder! Try it and feel free to post any animated gifs you create to the ICS3U folder.