The principle behind {most of} these animations is to make a pair of static images appear to move by generating a series of in-between images blended from two primary frames. This process, known generally as "tweening", is painfully tedious to do by hand, even with a best- of- breed image editor. There are now several programs that can automate the process. The one that is apparently most widely available to the BEA's artists happens to be among the more capable tools around, but it rarely gets mentioned in any context. Because many morphers are already using part of this toolset, the discussion herein will be centered around using this product. The rest of you will have to find similar applications. Look around; they're out there!  

     For those who use PhotoShop 5.5 to morph, making animations is only slightly harder than doing morphs. Adobe ships ImageReady on the same CD-ROM; PS5.5 can jump an open file over to ImageReady via a File menu command. If you didn't install them both together-- go ahead, I'll wait.

     Open the file in ImageReady; it should display in a view window with animation controls below that. If the controls aren't visible, Window/Show Animation turns on their display. The same controls can do slicing of images for a sophisticated table layout, and set up mouse rollover behaviors to change the display as a user moves the mouse over objects; play with the bell and the whistle on your own time, please. We're making animations, remember?

     Start the first frame with just the source image showing. Click the triangle below the frame's thumbnail, and set the delay {using Other...} to .01 seconds. Don't use zero; it causes odd glitches in the sequence within some browsers. Duplicate this frame twice, and select the middle frame by clicking the thumbnail. Use the Layers control to turn on the morph layer; you click on the eye to the left of the layer name, just as in P
 

Notice that the other frames don't change; the Layers control stores settings independently for each frame in the sequence. Other than adding or deleting a layer, the changes you make in the Layers box will only affect the currently selected frame.

     Hold down Shift or Ctrl and add the first frame to the active selection. Click the rightward triangle in the top right of the controls box, and choose Tween. Specify All Layers, check on Opacity, and tween with Selection. I normally add 4 frames, but try various quanta yourself. Click OK and watch the frames fill in. Select the two rightmost frames, and tween them in the same way as the first two.

     The first tween in and the last tween out are usually so low in opacity that they're discardable. Remove them if you can, and you'll knock off some filesize. Take off the final frame as well; it isn't needed unless you want to keep the image quite large, which will also mean making a file so big that one more frame doesn't matter much. In this instance, bigger is not better.

     Now adjust the timing. I set the first frame to 1.5 seconds {remember Other?} and the full-morph frame to .5 seconds. Again, experiment until you like what you see. Bear in mind that the display in ImageReady is often far slower than what an Internet browser will show, because the program is rendering each frame instead of showing a stored image. There are several factors involved in the playback speed; image size and frame intervals are only part of the equation.

    In particular, if you have more frames than fit in the controls window the playback bogs way down when it has to start moving the thumbs leftward. You can get a better idea of the sequence timing with a simple trick: click the Play triangle in the animation control, then switch to the Slice or Rollover tab. Switch back to Animation to stop the playback. Also click the same top-right triangle in the controls that you used to tween, and check the Palette Options. Using the smallest thumbnail size fits more frames into the display, and you can see the frames much more clearly in the view window anyway.

     Unless you're running a Silicon Graphics workstation, you'll want to reduce the file's display size. Now is the time to do that. I push the larger side of the image down to 100 pixels, because that size is what the BEA Users and Members Galleries use for the thumbs they generate. The advantage of waiting until the frames are done is that you can easily undo one or two steps and try a different size.

     "But wait," you say, "what other step is there?" A GIF file can use up to 256 colors, which is fine for a big fractal but wasteful for a 100-pixel AniMorph. After resizing the file, decrease the color depth. Maybe 128 colors is enough, maybe a less-detailed image can get away with just 64 colors. Using the dropdown choices is easier than clicking the up/down arrows or entering values

by hand; the fine controls are only useful when your file needs to be a certain size, such as under 100Kb for the BEA Users' Gallery. Instead of trying to guess what values to enter to get there, let the program do the work. The rightward triangle in the Optimize controls includes a command {Optimize to File Size...} that can be set for a Desired File Size to stay under. When you set it to use current settings, it pushes the color depth down just enough to fit. This is binary math at its best!

      You can get a look at the results by activating the tabs in the view window; I like the two-up setting for comparing output against original. Clicking any of these tabs generates a color table, and calculates the optimized filesize using current settings. The best way to see if you got what you wanted is to save the file and load it into a browser, so choose File / Save Optimized As and give the file a name and a home. Load it into your browser of choice and have a look. If it isn't right, go back to ImageReady and try again.

     When you're satisfied with the AniMorph, undo back past any size reduction you performed. Close the file in IR, and let the app save the amended PSD file. It will store the frame info, which doesn't add much to the filesize and won't affect editing the file in PhotoShop. You will have to redo at least some of the frame setup if you alter any of the layers used.