line
Creating an animated GIF
line

An animated GIF is a combination of multiple images. Viewed on your Web browser, it appears to move. You can insert an animated GIF image into your Web page, just as you do with other GIF images.

This section contains the following topics:


Starting Web Animator

To start Web Animator, an accessory for creating animated GIFs, type the following command and press Enter:

$ hpbuilder -a

The following is the Web Animator main window, with the Startup dialog box:

Main window and Startup dialog box



Using the animation wizard

If you already have several images to combine into an animation, using the animation wizard is the easiest way to create an animated GIF.

  1. Start Web Animator, and click the Animation Wizard icon button in the Startup dialog box to start the animation wizard.

    Startup dialog box

    Tip Tip To start the animation wizard, you can also click the Wizard icon on main window icon on the toolbar of the main window.


    Tip Tip The Startup dialog box also contains the following buttons.

    • New, a button for creating animation from scratch. Clicking this button is the same as selecting New from the File menu.

    • Open file, a button for opening an image file you have.

    • Open sample file, a button for opening an image file from among the sample materials.

  2. To add an image to the list, click the Add Image File button on the File dialog box, select an image file in the displayed dialog box, and click the Open button. Repeat this operation to add several images to the list. (Note that in the animation to be created, images are displayed in order from the top.)

    wizard 1

  3. Click the Next button to display the dialog box for positioning frames. (Here, a frame means a single image in the collection that makes up the animation.)

    wizard 2

  4. Change the position, if necessary, and click the Next button to display the next dialog box:

    wizard 3

  5. You can specify the number of repetitions and the delay time for each frame. If necessary, change them and click the Next button.

  6. To see a preview of the animation, click the Replay icon icon.

    wizard 4

  7. Click the Finish button to finish the wizard.

    All the frames that make up the animation are displayed on the main window.

    Thumbnail display of frames

  8. Select Save As from the File menu.

  9. On the displayed dialog box, select a folder, specify a file name for the animated GIF (*.gif), and click the Save button to save the animated GIF image in a file.

Tip Tip You can open image files in such formats as GIF, JPEG, BMP, TIFF, FlashPix, and Photo CD. [Ref.] "Image file formats"



Applying an animation effect

You can create animation from a single image, by applying an animation effect to the image.

Tip Tip The following types of animation effects are available.
  • Wipe
  • Mosaic wipe
  • Scroll
  • Blend
  • Blur
  • Vortex
  • Tile
  • Mosaic
  • Noise
  • Scatter
  • Pinch
  • Center focus
  • Zoom
  • Gray scale
  • Bilevel
  • Sepia
  • Half tone
  • Motion Blur
  • Wind
  • Rotate


  1. Start Web Animator and click the Open file icon icon on the Startup dialog box to display the Open dialog box.

    Open dialog box

  2. Select an image file, and click the Open button.

    The following example shows how the image is opened:

    An image is opened

  3. Click 1: Image using the right mouse button, and select Add Animation Effect from the pop-up menu. The following dialog box is displayed:

    dialog box

  4. Select one of the effects from a box under Effect Settings and, if necessary, change the values for Time or Number of Frames. Click the Replay icon icon to preview the effect.

  5. Click the OK button to add frames, the number of which is the same as you specified in Number of Frames. (Until you click the OK button, you can reselect an effect any number of times.) If the added frames are too many to check all, drag the scroll bar at the bottom of the window.

    Thumbnail display of frames

  6. Select Save As from the File menu.

  7. Select a folder, specify a file name for the animated GIF file, and click the Save button to save the animation you created in a GIF file (*.gif). You can insert the file into the editor of Homepage Builder, just as you do with other GIF image files.