Animate

One can save an enormous amount of "image loading time" by collecting all the frames of an animation sequence into one file. We can then cycle through the frames by drawing the image at increasingly negative (or decreasing) coordinates. In other words, if I have a 4 frame image, each frame measuring 100x100 pixels, then I could display each frame by successively decreasing the x-coordinate. Drawing the image at (0,0) displays the first frame, (-100,0) the second, (-200,0) the third, and (-300,0) causes the final frame to appear. Each time we're drawing a 400x100 image, but our viewing area (the applet's size) is only 100x100, so that's the only amount of the image we see.

Necessary parameters in the HTML file:

filename - the name of the image file (either jpeg or gif). It better exist!!

Optional parameters [default]

repeat - how many milliseconds to wait before replaying animation [5000]
framedelay - how many milliseconds to pause between frames [100]
framewidth - the width of an individual frame in pixels [applet's width]
frameheight - the height of the image in pixels [applet's height]
backandforth - if "true" then animation plays forwards AND backwards [false]
startup - initial image to display while frames are loading
vcrbuttons - if "true" then VCR buttons are provided [false]

By synchronizing the paint method with the call to repaint() in the run method, we ensure that each frame of the animation is displayed. This forces a lower limit for "framedelay": the time it takes to paint the frame. If the applet's size is different than that of the image frames, the image will be scaled: this will likely cause the quality of the image to degrade.

The two examples below demonstrate some useful combinations of parameters. The first one uses a startup image to pacify the user while the frames are loading: in this case, the frames image is 250KB while the startup is only 4KB. The second animation sets the backandforth parameter to true so that, for very stupid animations, you can cut your download time in half. :-) It also sets the vcrbuttons parameter to true so that a window containing some simple buttons enables one to step through an animation manually.

Source code: Animate.java, VCRControls.java, and VCRFrame.java

If your browser recognized the applet tag, you would see an animation here. If your browser recognized the applet tag, you would see an animation here.

Back to... [ Jim's homely page ] [ Jim's work ]