Using HotMedia - Animation

Back to: Index      

The goal is to walk through the construction of a slide show. The steps will be illustrated with the images of five famous mathematicians. Modification of the process to produce other types of animations and object movies will be given at the end. Here is a quick list of the steps for producing an animation applet:
  1. Prepare images
  2. Load images into the workspace
  3. Set animation options
  4. Set transitions
  5. Set HotMedia options
  6. Preview and modify steps 3-5 until it's what you want
  7. Publish the applet

Prepare images
Collect the images into a single folder. It is best that they all have the same size. If the sizes are different only a "cut" transition is available for use.

Loading images
HotMedia media choices After opening HotMedia the first step is to select the type of media you want to work with. (See the menu at right.) The final project can include many types of media but we can only work on one at a time. Click the Animation checkbox. There is now an "Animation" tab. Select Add. In the browse dialog box that appears navigate to the folder where the images were placed and select the desired images as in the window below.

Images selected in Open dialog box

Clicking the Open button loads the images into the HotMedia workspace. See below. If the images are not in the desired order, click an image and drag to the correct position.

Images loaded into workspace

Animation Options
Animation Options Click the Options button on the Animation tab. This brings up three tabs (Transition Type, Zoom, and Global Triggers) where properties of the animation can be set.

On the Transition Type tab three things are specified. First the number of "Tracks" (that is, rows) into which the images are to be arranged. A slide show just uses one row so we leave the default. Secondly here is where we set the timing. Set the view time to 5000 ms (5 sec) and change the transition time to 2000 ms (or 2 sec). Finally, here is where we set the flip behavior of the animation. Just leave as loop.

You should look at the Zoom and Global Triggers tabs to see what is there, but we won't use them. The Zoom tab is where the amount of zoom is set. The Global Triggers tab is where one sets the activation of a sound or javascript to be executed upon the completion of an action (media loaded) or mouseover.

Transition Dialog box

To set "transitions" from one slide to the next, click the transition icon Transition icon located between a pair of images. This brings up a dialog box. If all of the images are not the same size, the only transition choice is a cut (jump to next slide). Since ours are all the same size, we have other choices. Select Slide. Then, new choices appear for the "kinf of slide". I selected the center choice on the far left. The checkbox at the bottom will apply the transition choice to all slides. Of course each slide could have a different transition as a way of confusing the viewer! Look at the Timing tab. Instead of using the default transition time (set in the Animation Options menu) the timing of each transition can be set separately. Click OK after choices have been made.

HotMedia Options
Option information Option HTML
To set the options for presenting the HotMedia applet select Options from the File menu. This brings up the first of six tabs: Information, HTML, User Interface, Tracking, Connection, and Publish. (Click on the thumbnail images for the full view.)

On the Information tab enter the appropriate information. The only item that is really essential is the File title. On the HTML tab note the applet size is exactly the size of the images used. The applet can be resized to fit the intended location. When resizing be sure that Constrain proportions is checked. You might also uncheck the Generate comments in HTML box. It doesn't hurt, but most people just copy the applet code generated to their web pages.

Interface options Tracking options

The User Interface tab is where you specify how much control the viewer will have. The button choices are no buttons, a single button, or the complete set of button. Uncheck the Show visual buttons box since this is a simple slide show. If you want to prevent the viewer from manually moving through the slides with the mouse, check the Disable mouse drag box.

We don't plan any tracking so check the Disable all tracking box on the Tracking tab. Specify files for publishing applet

The Connections tab (not shown) is where you specify the anticipated connection speed of a viewer. HotMedia will optimize its .mvr file for this speed. If the file is to be viewed over the web it's wise to leave the setting as 56K modem. If the file will only be viewed locally over an intranet or from a hard drive, choose a higher connection speed like > 400K.

Finally look at the Publish tab. The defaults are for HotMedia to only produce the Java class files needed. Also, for these files to be placed in the same directory where the media applet (.mvr) file is placed. For a single applet these are good choices. If you plan a lot of .mvr files, then all the auxiliary files can be placed in one place.

Preview applet
Now let's see what we've done. Click the icon Preview icon to preview your work in a browser. Close the browser when finished.

Dialog box to save media file "Publish" means that HotMedia will create a single file (with extension .mvr) that contains all the animations, audio, video, etc specified in the project. It places this file in a directory along with the auxiliary Java class files and a suitable HTML file so that the project can be displayed on any machine. To "Publish" the project select Publish from the File menu. This opens a dialog box (at right). Navigate to the location where the files are to be saved, enter a file name, and select Save. A similar dialog box for saving the HTML file now appears. The name given to the HTML file has been automatically set to that given to the .mvr file. Just click Save.

List of files created

That's it. You can close HotMedia and go to the directory where the files were saved. You should see a list of files like those given at the right. There is the media file (.mvr), a HTML file (.htm) and the Java class files (.class) needed to display the media file in a browser.

The <applet> code can be copied to any HTML file on which the applet is to be displayed. Just remember to put all the .class files and the .mvr file in the same directory with the HTML file.

Other Types of Animation
We have seen how to build an animated slide show. For other types of animations, for example the bird object movie, it is just a matter of changing the transitions and timing. The object movie uses a cut transition with a timing of 100 ms between frames. Of course, more images are required to have small differences between consecutive frames.