Lesson3Outline2

Tutorial Three: Animation on the Web

Part One: Creating an on-line "Movie" from scanned images

Example: The eruption of Mt. Pelee from Salisbury’s Physiography

Procedure:

Step 1: Scan images. Save them as RGB formatted files.

Step 2: The next step is to pre-process the frames in Photoshop so that they are the same size and overlap precisely. This will involve three parts: a) put all scanned images into one PSD file with each image corresponding to a separate layer, b) adjust the placement of each layer so that it overlaps the previous image, c) create a neutral background layer, d) save the file in the PSD format, e) create each individual frame by opening the PSD file, making only the layers for the frame active, convert to indexed color, and save as a GIF. Note: It is very important to save a PSD formatted version before converting to index color because hidden layers will be discarded. This step is complicated, so I have prepared six images that are already pre-processed for you to use in this exercise. If you would like more information about the pre-processing steps, let me know.

Step 3: Once all of the images have been pre-processed in Photoshop, you are ready to use the GIF Construction Set to create your movie. Open the Construction Set from the Program folder in the Start menu. Once the application is open, select Animation Wizard from the File menu. The Wizard will walk you through a series of steps to "film" your movie. For this exercise, select the following options: a) "…for use with Web page", b) "Loop indefinitely", c) "Photorealistic", d) "100 hundredths", e) Select files Eruption1, Eruption2, …Eruption6, Eruption7. When you are done, an index will appear showing the sequence of frames in your movie. Between each image is a CONTROL tag that establish how the long each frame will last. By double-clicking on the tag you can modify the duration of each image. To preview your movie, click on the VIEW button.

Step 4: When you are happy with the sequence and timing of each frame, you are ready to save your movie. From the File menu, select the Save option. When you save your movie, the GIF Construction Set will generate a two new files: one GIF and one THN. The GIF file contains the image information, the THN file contains the animation information. Both files are needed to make your image move.

Step 5: The final step is to link the image to you webpage and move it to the server. You can link the animated GIF image to your webpage the same way you would a regular GIF or JPEG image. In Composer, you can use the Insert Image icon and open the movie.gif file. Note: It is important to ftp both the GIF and THN file to the server in order for your movie to work.

Additional Notes:

One of the important parts of this exercise is to pre-process your scanned images so they are the same size, registered, and converted to GIF’s. The Construction Set will not work for JPEG images. This may be important if your images don’t look nice as GIF’s. For example, a set of high resolution, color photographs may result in a grainy movie using this approach.
The Construction Set does a pretty good job of compression frames into small sized files. Several tips if your movie file is too big: 1) try fewer frames, 2) use Photoshop to do additional processing to shrink file sizes, 3) try the Supercompress tool under the File menu (Don’t expect too much from this feature, for this exercise, the file was only reduced by 7KB).
To obtain information about downloading a shareware copy of the Construction Set click icon.

Part Two: Creating a Time-series of Maps using ArcView

back to index

Example: Sequence of County Naming

Procedure:

Step 1: Export maps from ArcView. To do this go to the File menu within the View screen. Select the Export option and change "List by File Type" to "Windows Bitmap". Repeat this for each map frame you want to create. Note: Be sure when you modify which features of the map you want to show for each frame that you do not change the position or size of the map. If you do the frames will not overlap when you bring them together in the movie.

Step 2: When all of your map frames have been exported, the next step is to convert them to GIF files. This is most easily done in Photoshop. Open each file you exported from ArcView and save it with in GIF format. To do this, go to the File menu and select Save As. You can leave the file name the same, but be sure to change the "Save As" pulldown menu to GIF.

Step 3: Once all of the maps have been exported from ArcView and converted to GIF’s in Photoshop, you are ready to use the GIF Construction Set to create your animated map. Open the Construction Set from the Program folder in the Start menu. Once the application is open, select Animation Wizard from the File menu. The Wizard will walk you through a series of steps to "film" your movie. For this exercise, select the following options: a) "…for use with Web page", b) "Loop indefinitely", c) "Photorealistic", d) "100 hundredths", e) Select files Map1, Map2, Map3, Map4, Map5, Map6, Map7. When you are done, an index will appear showing the sequence of frames in your movie. Between each image is a CONTROL tag that establish how the long each frame will last. By double-clicking on the tag you can modify the duration of each image. To preview your movie, click on the VIEW button.

Step 4: When you are happy with the sequence and timing of each frame, you are ready to save your movie. From the File menu, select the Save option. When you save your movie, the GIF Construction Set will generate a two new files: a GIF file and a THN file. The GIF file contains the image information, the THN file contains the animation information. Both files are needed to make your animate your maps.

Step 5: The final step is to link the movie to your webpage and ftp it to the server. You can link the animated GIF to your webpage in the same way you would link a regular GIF or JPEG image. In Composer, you can use the Insert Image icon. Note: It is important to ftp both the GIF and THN file to the server in order for your movie to work.

Additional Notes:

Keep the color scheme simple. Use enough contrast to show the differentiate regions.
The CONTROL features in GIF Construction Set can be used to changed to scale to duration of each frame to the duration of time of the phenomena being represented. For example, in a map of migration patterns, periods of rapid diffusion can consist of a series of quick frames whereas a period of relative stasis would consist of a single slow frame.
As with the erupting volcano example, it is important to pre-prepare each frame carefully. For this example, most of the preparation is done in ArcView. However, Photoshop can also be used to add additional features like a time-scale or legend.
To obtain information about downloading a shareware copy of the Construction Set click icon.

Part Three: Drawing and Animating Diagrams in Flash

back to index

Example: Normal and Reverse Faults Diagrams

Procedure:

Step 1: Open Flash 3 by going to the "Start" menu and selecting "Macromedia Flash 3" from the Programs folder. An intial screen will pop-up aand ask if you want to "Buy It" or "Try First". Choose the "Try First" option. Once the application is open, go to the File menu and open a new document. The first screen you will have is a "Scene One" of your movie.

Step 2 : Use the drawing tool on the left to draw the first frame of your movie. The following tools are provided:

Pencil, Brush, Eraser, Zoom, Inkwell, Paint Bucket, Dropper, Lasso

Step 3: After the first frame is complete, select all of the objects and copy them. Then insert another scene and paste the contents from frame one. You may now modify this frame to create the first animated step. When frame two is completed, copy it and paste it into a new scene. Repeat until you are happy with all of the frames. You can select "Play" from the Control pull down menu to see your movie.

Step 4: One of the challenges is getting your images to overlay on top of each other properly. The rulers can be used as guide to line them up. Additionally the speed of animation can be changed from the Control/Movie menu option.

Step 5: When you like your movie, you can either save or export your movie. If you do save, your new movie will be saved as a vector animation that required addional java code to display. By exporting, you can create an animated GIF that does not require additional scripts.

Step 6: For the quick and dirty approach, I would recommend exporting your movie. The new animated GIF can now be linked to your page just link any other image.

Additional Notes:

Check out these examples of vector animated sites:

For information about ordering your own copy of Flash click icon.

back to index

Created 5/28/98, Last Modified 5/28/98, djs, dscott@mail.utexas.edu