Important Considerations

For your first, very basic, training animation, you should construct about 8 pictures from the beginning to the end of the reaction. This will insure a smaller file size for the end animation, and 8 frames are enough to simulate movement (also, it's much less work to create 8 frames than 25).

But in the end, the number of frames is up to you - more frames will be smoother looking, but fewer frames will be easier for Netscape to load and for you to produce.

Step One: Drawing the Reaction Panels

Open ChemDraw and make a new file called "frame1". This will be a compilation of the first four frames. The very first frame will be a drawing of the starting materials in a position just before beginning the reaction. Make sure everything is at the right size and that you have enough room to draw arrows and attacks, since you will make all the subsequent frames the same size as this original.

Now, the trick here is to place a dot (use an electron) in the upper left and lower right corner of the space you want to use - if you leave these dots here in each frame, you'll have a referance point for clipping the picture once you convert it in Step Two. So put these dots in and leave them exactly in the same place in every panel.

You can insure that the dots and molecules are consistent if you always use the copy and paste commands to create the new steps. Just select the entire first frame, "Copy" it and "Paste" this copy into the next file. You'll modify this frame slightly so that it looks like the next step in the reaction. Proceed with this next frame, making sure to pace the drawings such that the transition state or intermediate will be drawing 4 or 5. Continue to build the pictures by copy/paste/modify until you have constructed all eight, with the last panel showing the final products of the reaction. Feel free to get creative with arrows and dashed lines to simulate the theoretical intermediates and whatnot.

Step Two: Converting Your Images to GIFs
In this step you will take each image and make sure that it is in its final form before the layering process. This means converting the pictures to GIF (Graphic Interchange Format) files, and pruning the window size to something small enough to imbed in your web page. Personally, I like to use Adobe Photoshop to convert and edit the files. If you know a better way to convert them to GIFs, go for it, but Photoshop has all the bells and whistles.

So, open your frame sets in ChemDraw and open the Adobe Photoshop program. In Photoshop, make a "New" file (it will ask for a name, a window size - experiment until you find a good working size, and background - choose white). In Adobe, change the mode to GreyScale (for ChemDraw only, use RGB color if you're making a CAChe animation).

Now, go to the ChemDraw window, select the "Entire Area" and then "Copy" this. Now click on the Adobe window and "Paste" the picture into the Adobe window. Now you will be glad you put those reference dots in the corner. Using these dots, clip each frame out using the square marquee tool in the upper right of the toolbar. Highlight the area just inside the referance dots, "Copy" it, and choose "New" (when it asks you about the size of the new window, just press "Enter" - it will set the default size to the size of the selected area, which is exactly what you want). Then "Paste" panel one into the new window.

Now, either:
a) If you're in RGB color, go to the 'Mode' menu and select "Indexed Color". Choose "8 bits per Pixel" and press "Enter". Unless you convert to indexed color (from RGB) the file will can not be saved as a GIF.
- or -
b) If you have a black and white image, make sure the 'Mode' is set to Greyscale.

Now you can "Save As" a GIF file (choose "Save As" and then under the 'Format:' menu highlight the option "Compuserve GIF") - call it "panel1".

Repeat Step Two with all of your panels (now you see why making only 8 was a good idea). Save all your files in a folder called "Animation" or something and put this on the desktop.

Some short cuts:

• To make sure that all your pictures are the same size, select "Fixed Size" under "Marquee Options", and set the size of your box to whatever size you want.
• To be sure that you're cutting the same area each time, you can have Photoshop superimpose a grid on top of the picture. To do this, select "Show Grid" under the "View" options.
• If you're using Photoshop 4.0 or higher, you can use the "Actions" tool to automate the conversion to GIFs. To do this, choose the "Record New Action" option in the Actions box.

Step Three - Building the GIF89 Animation
For this step you will need the GifBuilder program. This program is in the chemh215 file space under Public/html/AnimTools - open the chemh215 file server and go to this directory. Copy over the file folder there called GifBuilder. Note: GifBuilder is for Macs only, not PCs.

Open this program, choose "Add Frame", and then find your first frame (in the folder Animation on the desktop) and double click on it. Keep adding all your files in order until you've added them all. (You can also drag your .gif files from the desktop into the "frames" window of GifBuilder.)

Now you can choose any options you want, including looping or frame speed (maximum is 10/100ms, which is likely what you want - otherwise it will go too quickly to see). Then choose the "Build" command and give your animation a name like "molec1.gif". Once it's done building, you can open this file with Netscape and watch your animation!