The Ani(mation)S applet

This page consists of a series of examples to demonstrate the use of the AniS applet for making animations and overlays. Subsequent pages deal with portals, and more complex combinations.

Each example illustrates one or more of the features of this applet, and are designed to provide an example of the HTML needed to obtain results.

The overall goal of this project was to give you, the web page author, a toolkit for using combinations of several different techniques that have been developed in support of projects using satellite images.

1a. The "almost" simplest form: animate a series of images. Just allow the users to stop and start the animation. (The "very simplist" form would have no controls...but I thought that was too boring!) The complete applet tag is:

1b. The "other" simplest form: fade between a series of images. Just allow the users to alter the fading among the 3 images. The Applet's parameters are the same as 1b, except the for the controls:

2. Now lets treat those same images as faded animations by adding a start/stop control. We'll add the zoom control, too. We just need to add a "zoom" to the controls parameter:

<PARAM name="controls" value="startstop,zoom"> and add a new parameter to indicate that the images should be faded: <PARAM name=fade value=true> Finally, we will set two aspects of the animation; first, the rate at 5 frames per second using: <PARAM name="rate" value="50"> and then the mode to rocking (rather than movie looping): <PARAM name="rocking" value="true">

3. Now we want to give them controls for speed and stepping the frames (we'll go back to the un-faded 3 frames for this example, though, by removing the PARAM for the "fade"). The new controls PARAM looks like:

4. Using overlays. In order to use overlays, you must provide four pieces of information:

The filename of the background image
The labels for the overlaid fields
The filename(s) for the overlay(s)
The value of the color to use as transparent

In our example, we will use the previously shown images as the overlays, and will put a satellite image up as the background. The HTML for the applet looks like this: <PARAM name="controls" value="overlay"> <PARAM name="overlay_labels" value="first,second,third"> <PARAM name="overlay_filenames" value="fsd_rad_0, fsd_rad_1, fsd_rad_2"> <PARAM name="filenames" value="wisgif0"> <PARAM name=transparency value="x00000000">

5. Now let's animate the background. You need only add more filenames>

<PARAM name="filenames" value="wisgif0,wisgif1, wisgif2"> In this case, we will also specify that the first overlay is an animation, but the second and third are not. This is done by using an ampersand between filenames that are to appear on each frame: <PARAM name="overlay_filenames" value="fsd_rad_0 & fsd_rad_1 & fsd_rad_2, fsd_rad_1, fsd_rad_2"> Of course, we also should add some controls for the animation (although this is not necessary): <PARAM name="controls" value="startstop, overlay">

6. You may also want to add on - off controls so that the user can remove frames if they want. This is done by adding the name onoff to the list of controls:

<PARAM name="controls" value="startstop, overlay, onoff"> Note that these on-off switches will always be put onto a separate row in the User Interface, so you may need to adjust the height of your applet to compensate. (Here, we added 30 to the value previously being used).

If you would like more information, or have questions or suggestions, please contact Tom Whittaker