Animated Gifs are a common feature on many web pages. With a little imagination it is possible to create some very interesting animations. This tutorial will show you how to create these moving graphics.  It will be up to you to use your creativity  to create something outstanding.

        The first step in developing an animation is to produce a series of images representing the motion or effect you wish to create.  When completed the images are assembled with a Gif Animation utility which allows them to be played in sequence. The whole animation can be saved as a single GIF file.  When included in a web page the animation loads and plays automatically.
 
 

        For this tutorial we will use Microsoft Paint, a graphics program that comes with all  operating systems and a Freeware GIF Animation utility - Ulead GIF Animator Lite.

If you do not have Ulead Gif Animator on your computer, here are the instructions for downloading and installing it.

Before downloading, create a folder on your hard drive to receive the downloaded file, name this folder GIF Animator.

Ulead GIF Animator Lite is available at this site:  www.ulead.com., click on "Free Downloads" at the top of the page then click on Ulead Gif Animator 5.

The next page requires that you fill in a form with an e-mail address, name and Country. After completing this click "submit".

The next page states "Click Below To Download", you will see one or more links, click on one of them. A "Save As" box will pop up, select the folder you created (GIF Animator) and then click "Save".

When the download is completed, disconnect from the Internet then use Windows Explorer to find the downloaded file, it will have a name like Uga3t.exe. Double click on the file, then follow the instructions, this will install Ulead Gif Animator on your computer.

Following are the step by step directions to create a simple GIF animation of a circle changing colours.

1 - Create a new folder, name it "Animations" (Use Windows Explorer)

2 - Open Paint  (Start-Programs-Accessories-Paint)

3 - Create a circle (Ellipse Tool, hold "shift" while drawing)

4 - Save the circle in the "Animations" folder, name the file "c1" (Use "Save As", note the file extension is .BMP)

5 - Select the fill tool.

6 - Select a colour.

7 - Fill the circle with colour.

8 - Save the circle as "c2" (Use "Save As")

9 - Change the colour of the circle and save again as "c3" (Remember to use "Save As")

10 - Change the colour twice more, save files as "c4" and "c5"

We now have five images of a circle each one a different colour and each one with a different file name.
 
 

1 - Start Ulead Gif Animator .

2 - Click "OK" on the first screen, click "close" on the next screen.

3 - Click on "Add Images" button (10'th from left in tool bar).

4 - Find "Animations" folder then click on "c1.bmp", click "open".

5 - Repeat steps 3 and 4 for remaining images (c2.bmp to c5.bmp)

6 - Click on "Start Preview" the animation should play, click "Stop Preview" to stop it.

7 - To save this animation as a single file, click "file" then "save", enter a file name (circles1).

8 - Your completed animation hs been saved as "circles1.gif" (The .gif extension was added when file was saved.)

9 - This animated gif file can be inserted into a web page using any web page editor.
 
 

1 - Use the text tool in paint to create your name. Change size and colour. Then use the select tool to move the letters of your name one at time to different parts of the window.  Save the file (use "save as" and new name)  each time you move a letter. Then assemble the images into an animated gif starting with the last file first. When run, your name will be reassembled. Create a complex image then take it apart using the select tool, then reassemble it as an Animated Gif.

Hint: When saving in paint you can reduce the size of the file by selecting 16 Color Bitmap or 256 Color Bitmap under the "Save As Type" window when saving. 24 Bit Bitmap images are huge and use up a lot of disk space.

2 - Use a digital camera to image a sequence of events - blinking eye, wire form sculptures, flower opening etc., then assemble the images into an animation.

3 - Work with drawings and a scanner to animate hand drawn sequences.

4 - Sophisticated graphics packages such as Corel Photopaint and Adobe Paintshop provide powerful tools for manipulating images.  If you have access to one of these packages spend the time to learn how to use the filters and effects tools that come with it.

5 - The full version of Ulead Gif Animator comes with many powerful tools including an animation wizard and a transparent background capability. You may want to consider purchasing the full package from Ulead at: www.ulead.com

Most web sites use animated gifs for the dramatic effect they can provide. We have found very few sites using animated gifs for educational purposes such as demonstrating scientific principles. The lack of educational animated gifs provides us with an opportunity to start creating them. Following are a few ideas for some animations with a science theme.  Perhaps you are interested in music, history, sports or literature and can think of an animation to support that interest.

  Here is one site, www.cellsalive.com, that uses animated gifs to show cell division and other cellular activity.

Ideas for science related animated gifs:

1 - Our Solar System in motion.

2 - Phases of the moon.

3 - The moons of Jupiter orbiting the planet.

4 - A stick figure uses a lever.

5 - A frog's egg changes to tadpole then adult frog.

6 - Metamorphosis of an insect (egg-caterpillar-crysalis-butterfly).

7 - The pollination of a flower.

8 - The flight of a model rocket (ignition - thrust - coast - chute ejection - recovery)

9 - Evolution

10 - The water cycle.

11 - Volcanoe

12 - A plant grows from a seed.

13 - A series of digital camera images showing pupil size changing with light levels.

14 - Generation of Hydro-Electric power.

15 - A pumping heart.

Other projects and tutorials can be found at http://hilaroad.com , follow the Projects link.
 

Return