Animated Images
We are all familiar with seeing moving images on web pages. We might think we'd like to try our hand, but imagine it needs some quite advanced skills to produce an animation. In actual fact, with modern software it is easy for anyone to produce a simple animation. This page describes how the Christmas tree on this page was produced. I am no artist, and it is a very simple animation. See what you can do!

This animation was produced using PaintShopPro and AnimationShop. I could also have used Image Composer and Microsoft Gif Animator, or any other similar product.

Step 1

Open PaintShopPro, and select New from the Edit menu. The window shown on the right will appear. I used the settings shown to draw my Christmas tree. It is always possible to change the size of the finished product, and I find it better to have a reasonably sized 'canvas' to draw on.

 

Step 2

Draw a simple outline of a Christmas tree and colour it in green - obviously if you want to make a different animation, you can draw some other simple sketch to start with. My tree is shown here half-size. Save the image - I called my tree 'tree1.gif'

Step 3

You can probably remember making 'flip books' at school. The principle behind animated images is much the same. You produce a number of copies of the same basic image, each one of which has small changes from the original, and save each with a new name. For the Christmas tree, I made 12 images, first adding the lights colour by colour, and then adding the writing, a few letters at a time. So that I could remember the order the images came in, I named the files sequentially tree1.gif, tree2.gif, etc. Once I had finished making my images, I closed PaintShopPro.


Step 4

Open Animation Shop. The easiest way to use Animation Shop is to start by using the Animation wizard in the File menu. In the first window, I chose to make the dimensions of my animation 100 pixels x 100 pixels - I did not want to end up with a large image which would take ages to download. I then set the canvas as transparent and asked for each image to be centred in the frame - I knew they should all be in the same position as they were all copies of the same basic image. I left the settings at the default value for

continuous play and length of time each image would be on the screen (it is possible to adjust this setting later if you wish). On the next screen I pressed the 'Finish' button and within a couple of seconds a new screen opened showing each of my images as part of a continuous strip. By going to the 'View' menu, I was able to click on 'Animation' and view my handiwork.

All that remained to be done was to tweak the timings, save my animation and insert it on my web page.