• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Creating Web Images > Creating Animated GIFs

Creating Animated GIFs

The GIF89a format can contain several images at once which are displayed one after another. You can use this feature to create slide shows or approximate moving images. The most popular shareware tool for creating animated GIFs on Windows machines is GIF Construction Set by Alchemy Mindworks. On the Mac, try GIFBuilder, a freeware program developed by Yves Piguet.

To create an animated GIF with GIF Construction Set for Windows:

1.
Create the series of images that will form the animated GIF. The images can be in GIF, JPEG, or even BMP format.

2.
Open GIF Construction Set.

3.
Choose File > Animation Wizard (Figure 4.50). A series of dialog boxes appear.

Figure 4.50. Choose File > Animation Wizard to create a simple animated GIF from a series of files with GIF Construction Set.


4.
Mark the appropriate options in each of the Wizard's panels. You'll have a chance to select the GIF files from step 1 that you want to use for the animated GIF (Figure 4.51).

Figure 4.51. The Animation Wizard will ask you a series of questions, including which files it should create the animated GIF from, as shown here.


5.
When the Animation Wizard has finished, it'll display the complete set of files. Click the eyeglasses in the toolbar to see a preview of your animation (Figure 4.52).

Figure 4.52. When the Animation Wizard has finished compiling the animated GIF it displays the file. You can make additional changes or go ahead and save it. (You can view this pseudo-BurmaShave animated GIF in action on my Web site:http://www.cookwood.com/html4_4e/examples.)


Tip

GIF Construction Set can do much more than just assemble pre-fabricated GIF files, as I've shown you here.


Tip

Download GIF Construction Set from http://www.mindworkshop.com/alchemy/gifcon.html. It's shareware and costs $20.


Tip

You insert an animated GIF on your page just like any other image (see page 82).


To create an animated GIF with GIFBuilder for Macintosh:

1.
Create the series of images that will form the animated GIF (Figure 4.53). The images can be in Photoshop, PICT, or GIF format, among others.

Figure 4.53. Create the individual files in Photoshop, PICT, or GIF format. If you number them sequentially, they'll appear in order automatically in GIFBuilder.


2.
Open GIFBuilder.

3.
Select all the images and drag them to the appropriate window. The images will appear in alphabetical order, by default (Figure 4.54). You can reorder them as necessary.

Figure 4.54. Once you drag the files to the GIF-Builder Frames window, they'll appear in alphabetical order. Reorder them as needed.


4.
If desired, choose Animation > Start to see a preview of your animated GIF (Figure 4.55).

Figure 4.55. Choose Animation > Start to test the animated GIF. The image appears in the Animation window. It's kind of hard to show in a book...(but you can see it athttp://www.cookwood.com/html4_4e/examples/).


5.
If desired, choose Loop in the Options menu to determine if the animation should play once, more than once, or continuously (Forever).

6.
Add new images by choosing File > Add Frame.

7.
Once you are satisfied with your animated GIF, choose File > Save.

8.
In the Save dialog box, give the animated GIF a name, ending with the .gif extension, and click Save (Figure 4.56). The new conglomerated file looks just like a regular GIF (Figure 4.57).

Figure 4.56. When you're satisfied with the animated GIF, choose Save in the File menu and then, in the Save dialog box, give the file a name, with the .gif extension. Click Save.


Figure 4.57. The resulting GIF image looks normal in the Finder, but it dances on any browser that recognizes the GIF89a format.


Tip

You can find GIFBuilder's home page at http://iawww.epfl. ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html (that hyphen is part of the address), but he suggests you download the program (if you're in the United States) from http://www.download.com.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint