FrontPage Resources AccessFP Services AccessFP Mall Web Resources
Index About Advanced Search Home

A Guided Tour of Microsoft GIF Animator

A Guided Tour of Microsoft GIF Animator
Getting Started
Customise sprites
Drag-and-drop directly into Microsoft GIF Animator
Preview
Summary

A Guided Tour of Microsoft GIF Animator:

Refresh the page to see the sunflower animation spin round again.Note: To see the animation again just refresh the page.

Microsoft® GIF Animator is the fast and easy way to create and Customise animations for your Web sites. This guided tour shows you how easy it is to create an animation from scratch. You will see how you can work in tandem with Microsoft® Image Composer to get the animation you want.

Getting Started:

  1. Install and open Microsoft Image Composer and Microsoft GIF Animator. 
  2. Download an image.

I used the sunflwr4.mic file from the Image Composer CD, you can find this image in the e:\Imgcomp\Common\Mmfiles\Photos\Photodisc\Plants directory.

Note:    If you want to use the catalog that comes with IC, you can find the sprite files in a folder named e:\Imgcomp\Common\Mmfiles\ on your CD (where e:\ is the name of your CD ROM). When you install IC you have the option to install the sprite catalog or to work from the CD if you don't have enough disc space.

Customise sprites:

  1. Insert the image — called a sprite — "sunflwr4.mic" into Microsoft Image Composer.
  2. Size it to approximately the size of a frame in Microsoft GIF Animator.
  3. Duplicate the sprite three times by selecting Duplicate from the edit tab on the main Microsoft Image Composer menu bar.  
  4. Place the four sprites below each other. You will now rotate each sprite separately and slightly differently to create the illusion of movement. Click the Arrange tool from the toolbox.
  5. Select the 2nd sprite and Click Rotate once to rotate the sprite 90 degrees.
  6. Select the 3rd sprite and click Rotate twice to rotate the sprite 180 degrees.
  7. Select the 4th sprite and click Rotate three times to rotate the sprite 270 degrees.
  8. Now you will add an art effect to each sprite as well. Click the Effects tool on the toolbox.
  9. Click Paint on the pull-down menu item.
  10. Click the Spatter effect.
  11. Make sure that the Spray Radius is set to 19.
  12. Click the 2nd sprite and apply the Spatter effect with the Opacity set to 25.
  13. Click the 3rd sprite and apply the Spatter effect with the Opacity set to 60.
  14. Click the 4th sprite and apply the Spatter effect with the Opacity set to 100.

Drag-and-drop directly into Microsoft GIF Animator:

You can drag-and-drop sprites directly back and forth between the two programs to get the look you want.

  1. Select the 1st sprite. Drag it over to the 1st frame in Microsoft GIF Animator.
  2. Repeat this process for the other three sprites.

Customise your animations
Microsoft GIF Animator's three property sheets allow you to control how your animations will look and play.

  1. Select all the sprites by clicking the Select All button on the main Microsoft GIF Animator menu bar (the 10th button across). gtfig1.jpg (24x23 -- 1021 bytes) When you select all, a blue border will appear around your sprites.
  2. Click the Animation property sheet.
  3. Click the Looping option to make your animation loop.
  4. Click the Images property sheet in order to begin setting options.
  5. Click the Transparency option to make the backgrounds of your sprites transparent.
  6. Click the Undraw Method option and select Restore Background from the menu. This makes your animation more fluid by restoring the background between frames.
  7. Increase the Duration selection to 12 (the units are in milliseconds).

Preview:

You can easily preview your animation in-line so see what it will look like on a Web browser. Simply click the Preview arrow on the far right of the main Microsoft GIF Animator menu bar. gtfig3.jpg (25x23 -- 941 bytes) Now that you are done, you can save your animation as a .gif file and use it on a Web site. You can also drag your sprites back into Microsoft Image Composer and continue to customize them there.

To save click Save As gtfig4.jpg (23x21 -- 1011 bytes) 

Summary:

Congratulations! You have successfully completed the guided tour of Microsoft GIF Animator. In the tour, you have seen how easy it is to create and customize animations for your Web sites. And you have seen how Microsoft GIF Animator and Microsoft Image Composer work together to allow you to make your Web site come alive with motion!