LESSON FIFTEEN


You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Introducing animation | | Getting started | | Our first animated GIF image | | Creating the animation using GIF Construction Set | | Our second animated GIF image | | How the PJCVS MATH animated GIF was created | | Creating LED signs, banners, and special-effect images |

It isn't uncommon to minor in web design or even become self taught and learn skills like animation. Once you master the ideas below, feel free to reward yourself- animate some online flowers and deliver them by email to yourself or a friend. Even roses and daisies designed on the web are beautiful.


INTRODUCING ANIMATION

An animated gif is a multiple-image GIF file. An animated gif is a series of GIF images placed one after the other in an infinite loop giving the appearance of fluid motion. This is somewhat similar to a flip book of pictures in which flipping the pages quickly makes the little pictures appear to move. What you really have is a bunch of still pictures moving by quickly and your eyes see it as movement. You can set the speed of movement of your animated gif image, however, the speed at which the image actually moves can vary from browser to browser.

There are many websites on the WWW where you can find animated gifs. Just go to your favorite search engine and do a search for sites offering animated gifs. Visit these sites to either download some animated gifs (check if you need permission) or to gather ideas on making your own. We will make two animated gifs so that you will have a good understanding of the process involved.


top | | bottom |

GETTING STARTED

To make your own animated gif, you need two things:
  1. A paint program to make your series of images such as Corel Paint Shop Pro Photo or Adobe Photoshop, and
  2. A program such as GIF Construction Set Professional from Alchemy Mindworks to put all the images into animation (to create the actual animation). Paint Shop Pro used to include Animation Shop to create animations but as of Paint Shop Pro X (Paint Shop Pro 10), Animation Shop is no longer part of Paint Shop Pro.
In this lesson we will use Corel Paint Shop Pro Photo X4 (version 14) to make these GIF images but any paint program can be used to create them. We will then use GIF Construction Set Professional to put all the individual images into animation and have them saved in one animated gif file. It states on the Alchemy Mindworks website that GIF Construction Set Professional allows you to "Create web page animations and transparent graphics with breathtaking ease. GIF Construction Set Professional includes Animation Wizard, Supercompressor and all the tools that have made GIF Construction Set the most popular GIF animator on the web."

So, if you do not have these programs, now is the time to get them. In this lesson, you will need Corel Paint Shop Pro Photo X4 and GIF Construction Set Professional. Each can be downloaded as a fully functional copy to try out free for 30 days, after which a decision to purchase must be made. The current version of Paint Shop Pro is named Corel Paint Shop Pro Photo X4 (version 14) which is the version used in these lessons. In these lessons, we will simply refer to Corel Paint Shop Pro Photo X4 as Paint Shop Pro.

To download, click on the appropriate link:

Paint Shop Pro

Photoshop

GIF Construction Set


top | | bottom |

OUR FIRST ANIMATED GIF

For our first example, we will construct the animation of the word ANIMATION that you see at the beginning of this lesson. Note that this animation begins with the word ANIMATION, and then one letter at a time is removed. Once all the letters have been removed, they begin to appear again, one letter at a time, until the word ANIMATION is complete again. Each change represents a new image. This sequence of images is then repeated over and over until you click on the Stop button (clicking on the Stop button will stop all the animations in most browsers). Here is the way the images appear - one after the other in this order:

ANIMATION
ANIMATIO
ANIMATI
ANIMAT
ANIMA
ANIM
ANI
AN
A

blank image goes here (no letters)
A
AN
ANI
ANIM
ANIMA
ANIMAT
ANIMATI
ANIMATIO
(go back to the beginning and repeat - we are in a "loop")

Problem 1: Seems like a lot of images. How many distinct images are there in this example?

Problem 2: How many images are actually displayed before looping takes place?

Click here to go to the answer section |

CREATING OUR IMAGES

Here are the steps to create the above animation using Paint Shop Pro:

  1. Open Paint Shop Pro.
  2. We will now create our first image. Choose File from the menu bar, and then choose New. This will display the New Image dialog window.
  3. You are now asked for some information about the new image such as the size of the image you want to create. Enter 200 for the Width and enter 50 for the Height. These numbers represent the width and height in pixels so make sure that the dimensions are in Pixels. This size is bigger than what we need which is okay as we will resize the image later. The resolution can be left at 78.740 pixels per cm which equals 200 pixels per inch. If you click into the Pixels/cm box and choose Pixels/inch you will see the 200.
  4. In the Image Characteristics section, ensure that the Color (meaning background color) box is White. Everything else can be left as is (Raster Background selected, Color depth RGB at 8 bits/channel, and Transparent not selected). Click on OK. You are now in the Image Editing window. Note: Computer graphics are of two types: raster and vector. As it states in the Paint Shop Pro User Guide, raster images (also called bitmap images) are composed of individual elements called pixels. Thus an object in a raster image is defined by its pixels and to edit the object you edit the pixels. Vector images use geometric characteristics to define its objects. Examples of geometric characteristics are lines and curves and their locations to define objects. Thus with vector images you edit objects or shapes rather than pixels.
  5. You should now have a new image named Image1 as stated in the image Title bar (Image1 @ 100% (Raster 1)). Just ignore the name for now. The 100% Raster 1 means that we have a full background color and not a partial or transparent background. A transparent background would be 0% Raster 1. Note that there is nothing in the image except for a white background.
  6. We will now discuss three items that are very important to the work we will be doing. They are the Tools toolbar, the Tool Options palette, and the Materials palette (called the Color Palette in previous versions of Paint Shop Pro). The Tools toolbar is used to crop, paint, draw, add text as well as a host of other image editing tasks. When a tool is selected from the Tools toolbar, there are often options associated with the selection. The Tool Options palette contains these tool options. Two examples of tool options are setting the size of the line width for the drawing tools and setting the brush size and shape for the painting tools. The Materials palette sets the colors and materials for painting, drawing, retouching, filling, etc.
  7. Note that the Tools toolbar has been placed down the left side of the editing window, the Tool Options palette has been placed horizontally just below the Standard toolbar, and the Materials palette appears to the right of the Image editing window. So these important items as discussed above are now in view. Note: if you click on any tool in the Toolbar, you will see the Tool Options palette change accordingly. Again, the Tool Options palette contains the options associated with the selected tool.
  8. If you should lose one or more of the Toolbar, the Tool Options palette and the Materials palette (no longer in view), here is how to bring them back into view:
     

  9. In the Help menu, in the Materials palette section, the following diagram is given with the Rainbow tab in view. The positioning of some of these items may be different in your Paint Shop Pro but they should all be there.

    In the above Materials palette, there is the big color panel showing the available colors and is called the Available Colors panel. Beside the Available Colors panel are two rectangular boxes. The top one is called the Foreground and Stroke Properties box and the one underneath it and a little to the right is called the Background and Fill Properties box. Now if you rest your mouse cursor over the Foreground and Stroke Properties box, the cursor turns into an eye dropper and the words Foreground and Stroke Properties will pop up in a text box along with the current color and texture information. Rest your cursor over the Background and Fill Properties box and the words Background and Fill Properties will pop up along with the current color and texture information. Thus the upper box affects the image's foreground and the lower box affects the image's background. These boxes are also called the Foreground and Background Material boxes.

    Below each of the Foreground and Background boxes are three small buttons called Style buttons. Thus the Foreground Material box has three style buttons and the Background Material box has three style buttons. If you rest the mouse pointer on any of these three buttons you will get their names. The first one is called Color and it is used to create a solid color, a gradient color or a pattern color. You can see these options by clicking on the button. The middle button is called the Texture button and it is used to turn the current texture on or off. The third button is called the Transparent button and it specifies whether the foreground or background is to be transparent. Transparent means that there is to be no style or texture.
     

  10. Under the Foreground Material box, click on the third button as we want the foreground material to be transparent. That is, we do not want any foreground style or texture.
     

  11. Now click on the Background Material box. This will display the Material color palette. In the cluster of little boxes, choose the color red. Red is the little box displaying R:255 G:0 B:0 when the cursor moves over the box. When you choose red, the Hexadecimal code for the color red (#ff0000) appears in the HTML box. Click on OK and this is what you should have so far:

  12. In the Tools toolbar, click on the Text tool (the one with the letter T on it).
  13. Move the cursor over the new image that you created and it will change into the Text tool cursor (a cross-hair with the letter T attached). Before we write our text (ANIMATION), we need to set up the text font, size, etc. Note that the Tool Options palette now displays the options for the Text tool. We will now set these options.


     

  14. You are now ready to enter the text. In the new image box, click somewhere on the lower left side where you would like the first letter A of ANIMATION to appear. As you will see, wherever you click, that is where the lower left corner of the first letter will appear. You might think that where you click in the box is where the center of the text will be placed. Not so. Where you click is where the lower left corner of the first letter of the text will be placed. Now type the word ANIMATION. The word ANIMATION should now be in the new image (or at least most of it should be visible).

  15. I am not sure why the next step works but it does. Move the mouse pointer over the ruler located right above the the word ANIMATION. You will see the cursor turn into a cross hair (a plus sign) when you do this. Now double-click on the ruler and an Apply Text window may pop up with the statement, "You must either apply or cancel the text tool operation at this time." Click on Apply and a Grid, Guide & Snap Properties window opens up. We do not need to change anything so click on Cancel. You will see that the word appears with dashed letters and with the dashes moving.

  16. We will now make our image smaller so that the word ANIMATION takes up the entire image with no empty space around it. To do this,
    1. Click on the Edit menu and choose Copy.
    2. Nothing appears to have changed. Now choose Paste As New Image from the Edit menu. That is, choose Edit --> Paste As New Image. Note that the new image (named Image2) is now reduced to the size of the text with a light colored checker board background.

      The checker board background will not be displayed in a browser. The checker board indicates the parts of the image that are transparent. We no longer need the original larger image so you can delete it by first clicking on the Image1 tab. You can then click in the Close box at the top right corner of the image (the one with the X in it) and then indicating that you do not want it saved. Image2 is now the only image left.

    3. We will now save this new smaller image. Choose File, then Save As.... This will display the Save As dialog window. Now:
      • Choose the folder you want to save these images in.
      • Then click into the Save as type box and choose GIF Graphics Interchange Format (*.gif).
      • Also type in the name animat1.gif (short for animation 1 - our first image in the animation).
      • Now click on the Options button. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected.
      • Click on OK.
      • Click on the Save button to save the image named animat1.gif. Since gif images have a maximum of 256 colors, you are now told this fact plus a statement about layering and asked if you want to continue. Click on Yes and the image is saved.

    Our first of 10 images has now been saved. Since we are making a little "movie", image by image, all the images must be:

    Since we have one image completed, we will use it as the template to create the rest of the images.

Let's now create the second image which is the word ANIMATION with the last letter "N" removed (ANIMATIO).

  1. Now in the Tools toolbar click on the Selection tool, . This is the one with the dashed rectangle on it. This will change the Tool Options - Text palette into the Tool Options - Selection palette.
  2. The little down arrow in the Selection tool means that the Selection tool has other options. If you click on the down arrow, you will see that they are Selection, Freehand Selection and Magic Wand. We want just the Selection option which is the default option.
  3. In the Tool Options - Selection palette, make sure that the Selection type reads Rectangle since we are going to draw rectangles around the individual letters in the word ANIMATION. That is, we will be doing our selecting with rectangles.
  4. Now carefully drag a box (a rectangle) around the last letter N so that the letter N is completely inside the box. A rotating dashed rectangle should now be around the letter N.
  5. Choose Edit, then Cut. The letter N should now be gone. The rotating dashed rectangle will still be there but you can ignore it and the dashes won't be saved when you save the image.
  6. Using the same procedure as above for saving animat1.gif, save this new image without the letter N (ANIMATIO) giving it the name animat2.gif. We now have two images - animat1.gif and animat2.gif.
  7. For the third image, cut the next letter (O) and save the resulting image (ANIMATI) as animat3.gif. If you continue this process, the last letter left over (A) will be saved as animat9.gif. Cut this last letter so that you have no letters left, and save this blank image as animat10.gif.

You now have all the images saved and are finished with Paint Shop Pro.


CREATING THE ANIMATION USING GIF CONSTRUCTION SET

In this section we will create the animation using GIF Construction Set. So first load GIF Construction Set Professional as this program will take all of our image files and place them into one animated GIF file. GIF Construction Set represents state of the art GIF animation software. GIF Construction Set includes:
 

Now that you have the various individual images created for the word ANIMATION, we need to assemble them into one animated GIF file using Gif Construction Set. To do this we first need to load all the images into GIF Construction Set. Let's use the Animation Wizard and let GIF Construction Set do it for you, here are the steps:
 
  1. Click on File and then choose Animation Wizard. Another way to activate the Animation Wizard is to simply click on the magic wand button, Magic Wand.
  2. You now need to make a few decisions on how you want your animation to work. At the top is a tool bar and the first item in the tool bar is Loop. If the checkbox for Loop is checked, then the animation will loop indefinitely. If this box is not checked, then the animation will loop only once. Since we want our animation to loop over and over, make sure that the check box beside Loop is selected (there must be a checkmark in the box). You can change this setting later after the animation has been created.
  3. Next is the Delay. This item will set the delay per image for your final animation. These delays are divided into hundredths of a second (1/100ths of a second). It should already display a delay of 10 one hundredths of a second meaning each image will only appear for 10 one hundredths of a second (or a tenth of a second). 10 is what we want so ensure that Delay is set to 10. You can experiment with other numbers later. The one you see on this web page was set to 10, but with all the other animated gifs on this web page, it could be running a little slower.
  4. Next you are asked how you want to handle the color palette for your GIF file. There are two choices and they are:

    For our example, leave the Match to superpalette selected. It is generally the best choice for GIF images.

    The rest of the tool bar contains buttons used in constructing the animation. This is what our choices look like:


     

  5. Below the tool bar are three vertical panels or frames. In the left frame, browse to the folder where all the GIF files are saved.
  6. All the GIF files located in the chosen folder are now displayed in the middle frame. Note that both the images and their corresponding file names are displayed. In this frame, we will select the images that make up the animation. The images we select will be placed in the right frame. We must load the GIF files in the order they are to appear in the animation. To do this,

    Note that you can move any image in the right panel by clicking on the image with the right mouse button and then from the pop-up menu, choose Move.

  7. It is now time to create the animation. To do this, simply click on the Build button. This building may take a few moments. When the building is completed, the Wizard terminates and we are back in the GIF Construction Set window.
  8. You are now in the GIF Construction Set window. We will study the various parts of this window later. You can now save the animation by choosing Save As from the File menu. You can accept the name that GIF Construction Set places in the File name box or you can replace it with a name of your choice. If you are using the evaluation (unregistered) copy, you may be told this fact along with some facts and options on how to register. You can ignore this for now.
  9. To view your animation, click on the pair of glasses, (the View animation button). When finished viewing, click on the X to close the View animation window. You can also load the animated gif into your browser to see the animation in your browser.

You can also load your images into GIF Construction Set without the wizard. To do this:

  1. Click on File and then choose New. A window opens up with the word HEADER in it. We will study the Header later.
  2. Now from the Edit menu, choose Insert block and then choose Image since we are inserting an image. That is, choose Edit --> Insert block --> Image. This will display the Open dialog window.
  3. Browse to your folder containing your images. Now hold down the Ctrl key and click on animat1, animat2 up to and including animat9. Click on Open. You may be told that the image you imported does not match the global palette for this file. Choose Remap this image to the global palette and click on OK. In a few moments, all the images appear in the GIF Construction Set window. If you can't see the complete words, you can drag a side to make the viewing area bigger.
  4. Now again choose Edit --> Insert block --> Image. This time click on animat10 and click on Open. We now have the images from animat1 to animat10.
  5. Now add the rest of the images, one at a time, beginning with animat9 down to animat2.
  6. You can now save what we have done so far, but keep in mind that we have not added any delay between the images or told GIF Construction Set how we want the animation looped. We will do this now.

MANAGING AND EDITING OUR ANIMATION

Whether you used the wizard or not to load the images, we will now learn to manage and edit our animation. GIF Construction Set manages animation through blocks. Each GIF file consists of a series of blocks that we can edit. We will therefore take a moment to understand these blocks.

Now that all the images have been loaded we will do some editing of the image blocks.
  1. First highlight all the images by clicking on the first Image Block (representing animat1) and then while holding down the Shift key, click on the very last Image Block in the list (representing animat2). All the Image Blocks should now be highlighted, that is, they should now be selected. Only the Header Block at the top and the Comment and Block Names blocks at the very bottom are not highlighted. Any change that we now make will be applied to all the images in the GIF file.
  2. From the Block menu, choose Manage. This will display the Block Management dialog window.
  3. Make sure that the radio button beside Set controls for the selected blocks is selected and click on Apply. This will display the Edit Control dialog window.
  4. Make sure that the delay is set to 10 meaning that each image appears for 10 one hundredths of a second. You can experiment with other numbers later. The one you see in this browser was set to 10 but with all the other animated gifs, it could be running a little slower.
  5. Note that when GIF Construction Set loads your images, it will not load any transparency information. If you want a transparent background, you should set it at this time. You can set any color to be transparent. Let's set the white background as the transparent color. Here is how to do it:
  6. Now click on the radio button beside Enable controls for the selected blocks and then click on Apply.
  7. Click on OK to return to the GIF Construction Set window.

Unless you changed the background color for viewing the animation in the Header Block from red to white, each image in the image file now appears on a red background. This red background indicates the transparent part of the GIF file.

You can also edit an individual Image Block. To do this, choose an Image Block and then double-click on it. This will display the Edit Image dialog box. Note that the width and height of the image are given in pixels and the current position is 0 pixels from the top and 0 pixels from the left side of the area set aside for the animation file. You can change these position values but not the size of the image as this is automatically calculated by GIF Construction Set when the GIF file was constructed. Note that the Control panel on the right side is similar to the one we used for all the images. Note also in this Control panel that the delay for this image is 10 one-hundredths of a second which we just finished setting for all the images. If you wish to experiment, you can change the time delay for this image to another delay time. We are not going to change anything here so click on Cancel.

We now need to insert a loop. Double-click on the Header Block. This will display the Edit Header dialog window. Now there should be a checkmark in the checkbox beside the word Loop. If not, click into the checkbox to place one there. We want to make sure that Loop is selected. Leave the Iterations count at 0. A count of zero means that the animation will loop indefinitely. Note that the color in the box beside the word Background is the background color that the animation in GIF Construction Set will be viewed in. Again, you can click into the Background box to change this color. That is all we need to change so click on OK. You can now view the complete animation by clicking on the Views the current animation button.

You can now save the animated gif by choosing File --> Save or File --> Save As. The type of files should say GIF files. Choose the folder you want to save the animated GIF file in and type in a suitable name for your GIF file. When ready, click on Save. You should also load the animated gif into your browser to view the animation in your browser as compared to viewing it in GIF Construction Set.

Problem 3: We used the following sequence for our animation:

ANIMATION
ANIMATIO
ANIMATI
ANIMAT
ANIMA
ANIM
        .
        .
        .

instead of using the sequence beginning with the letter "A" as in:

A
AN
ANI
ANIM
ANIMA
ANIMAT

        .
        .
        .

Why did we use the sequence in the way we did?

Click here to go to the answer section |


top | | bottom |

OUR SECOND ANIMATED GIF

For our second animation, we will make the bullet or ball that you see on each side of this section's heading (there is only one ball repeated twice). We will create the ball in Paint Shop Pro and then paint it in different colors with each color making up one image.
  1. Open Paint Shop Pro.
  2. Choose File and then New to display the New Image dialog window (or click on the New image button in the standard toolbar). Choose an image width of 50 pixels and a height of 50 pixels (bigger than required). Also make sure that the Background color is set to White and that the dimension units are in pixels. Click on OK.
  3. The Tools bar, the Tool Options palette and the Materials Palette should now be in view. At any time you lose one of these you can get it back with View --> Toolbars --> Tools if you need to place the Tools toolbar into view, View --> Palettes --> Tool Options for the Tool Options palette, and View --> Palettes --> Materials for the Materials palette.
  4. In the Tools toolbar, click on the Selection tool (the rectangle) and the Tool Options palette changes to the Tool Options - Selection Palette. Click in the Selection type box and select Circle. The Mode can remain at Replace, the Feather can remain at 0 and the Anti-alias box should be selected (there should be a checkmark in the checkbox).
  5. Move the cursor to the centre area of the image and drag out a small circle about the size of the one beside the heading of this section. It will appear as a rotating dashed circle.
  6. We will now copy this image and paste it as a completed image. So choose Copy from the Edit menu.
  7. Nothing appears to have changed. Now from the Edit menu, choose Paste As New Image. The new image has now been reduced to the size of the circle with a checker board background. It may not look like a circle but that is because of the checker board background. You can now delete the first image we created by clicking on its tab to bring it into view and then clicking on the Close box (the one with the X in it). We are now back to our second image that was reduced to the size of the circle.
  8. Now click on the Flood Fill tool, , in the Tools toolbar to select it. The Tool Options - Selection Palette has now been replaced with the Tool Options - Flood Fill Palette.
  9. Make sure that the Match mode box reads RGB Value and the Blend mode box reads Normal. The RGB Value will ensure that only the circle gets colored and not the area of the image outside the circle. The Tolerance can remain at 20 and the Opacity at 100 (percent). Tolerance is how closely the selected pixels must match the initial pixel we click. The range is 0 to 200. At lower settings, only pixels of very similar colors are filled while at higher settings, more pixels are filled. Keeping the Opacity at 100 ensures that all pixels that are not transparent will be filled.
  10. In the Materials Palette, click on the Foreground and Stroke Properties box. This will display the Material Properties dialog window. Choose the color red and click on OK.
  11. The Flood Fill tool should still be selected. Now click in the circle with your left mouse button, and the circle (the ball) should now be colored red. Note that when the cursor moves in the editing window, the cursor changes to the Flood Fill cursor. We have now completed our first ball in the animation and it looks like:


     

  12. Now save this ball by choosing Save As from the File menu. This will display the Save As dialog window. Now:
  13. Click on the Save button to save the image named ball1.gif.
  14. Since gif images have a maximum of 256 colors, you are now told this fact and asked if you want to continue. Click on Yes and the image is saved.

We will now create the remaining balls, giving each one its own color. Here are the steps:

  1. With the ball image still selected, choose Edit --> Copy and then choose Edit --> Paste As New Image. You now have two red balls.
  2. Again in the Materials palette, click on the Foreground color box. Now choose another color such as Yellow and click on OK. The Foreground color box is now yellow.
  3. The Flood Fill tool should still be selected so click on the pasted red ball with your left mouse button and it will become yellow.
  4. Now save the yellow ball in the same way you saved the red ball but use a name such as ball2.gif.
  5. Repeat steps 1, 2, 3, and 4 as many times as you like, each time choosing a different color and naming the images ball3.gif, ball4.gif, ball5.gif, etc. Be careful that you do not choose colors that are very close together in shades as some monitors may not be able to distinguish between them.
  6. When finished, use GIF Construction Set to turn these images into animation using the same procedures as with our first animation. When finished, save the animated gif using a suitable name such as balls.gif or bullets.gif.

top | | bottom |

HOW THE PJCVS MATH ANIMATED GIF WAS CREATED

Now that you know the procedures involved, use your imagination to create some great looking animated gifs.

For the PJCVS MATH animated gif, the part was done in a program using an option that gave this design. This image was then copied and pasted into Paint Shop Pro.

The Pi symbol, , was created in Paint Shop Pro (which can also be created in any Paint or Desktop program). It is nothing more than the lower case letter p for the Font named Symbol. For example, to get the Pi symbol in Paint Shop Pro, create a new image (choose File, New). Choose a size of around 75 pixels by 75 pixels if you want to duplicate what I have. Make sure the foreground color is blue or any suitable color, and then click on the Text tool. For the Font, choose Symbol and for the Font Size, choose a size such as 24. Move the cursor to the new image, click into the image and type the lowercase letter p which will produce the pi symbol I used (the uppercase letter P will give a slightly different shaped pi). Click on OK. Double-click on the ruler for editing mode and then choose Edit --> Copy followed by Edit --> Paste As New Image. You now have the identical pi I used.

I used the rectangular selection tool a lot to cut the pi from the image, resizing the width of pi (Resize is located in the Image menu), and then pasting the pi back into the PJCVS image. Note that as the pi spins around, it reverses itself. The reverse of an image was created using the Mirror option found in the Image menu. Once I resized the pi, Mirror would give me the reverse pi. If you save the Math Department's animated gif on your hard drive, and then load it into GIF Construction Set, you can see each individual image that made up this animation.


top | | bottom |

CREATING LED SIGNS, BANNERS, AND SPECIAL-EFFECT IMAGES (TRANSITIONS) USING GIF CONSTRUCTION SET

CREATING LED SIGNS

This LED sign was created simply and easily using GIF Construction Set. To create a LED sign, open GIF Construction Set, choose Edit --> Signs --> LED Signs. The LED Sign dialog window opens up giving you a number of options. You can set the color, adjust the playback speed and change the sign dimensions. Have fun and experiment.

Note: GIF Construction Set's Help support is excellent. With GIF Construction Set, you don't need a manual (and one does not come with the program). All you need to know is right there in the Help section. So the first thing you might want to do is to click on the Help button located below the Cancel button to receive complete explanations on all the options available to create LED signs.

CREATING BANNERS

Try making an animated banner such as:

Or, try creating a nice banner or header for a web page that is not animated. Here is one I created for a client.

These banners were simply created using GIF Construction Set. Banners are GIF files which contain text. A banner can be a simple one image GIF file with words printed on it or it can be an animated GIF file with text scrolling from right to left. The Banner option, like the LED option, is located in the Edit menu. Thus to create a banner, open GIF Construction Set, choose Edit and then Banner. This will display the Banner dialog window giving you a number of options and text effects. The Help page is also very good and I would suggest you check it out as a handy reference (the Help button is located at the bottom of the Banner dialog window beside the Test button).

CREATING SPECIAL-EFFECT IMAGES (TRANSITIONS)

A transition is a special effect that occurs when going from one image to the next image in an animation. The Transitions function in GIF Construction Set will create animated transitions between your images. There are about two dozen special effects to choose from in GIF Construction Set. Here are four of these special effects:

  1. Dissolve: The images will fade in the transition from one image to the next.
  2. Raster: The images will transition from one image to the next as a sequence of bars. You can choose either horizontal and vertical rasters.
  3. Tile: This transition will make your images appear in small squares, in random order.
  4. Wipe: Your images will transition from one image to the next by wiping. There are four wipe options, one from each direction.

Here are the steps to create a transition:

  1. Select Edit and then Transition. This will display the Transitions dialog window.
  2. You now need to load your images into the Transitions window. To do this click on the Add button. This will display the Open dialog window for you to select your images.
  3. You now select the images. You can do this one image at a time or hold down the Ctrl key to select multiple images. Click on Open. The images are now loaded and displayed in the Transitions window. Now have fun and experiment with the different special effects. There is also a very good transitions Help page that includes a description of all the various transitions. Just click on the Help button located below the Cancel button
  4. You can test the various transitions in your animation with the Test button. When you are finished testing and have chosen a transition, click on OK. GIF Construction Set will then create the animation and return to the GIF Construction Set window.
  5. You can then save the animated GIF file.

top | | bottom |

ANSWERS

  1. There are only 9 letters in the word ANIMATION but there are 10 distinct images, the tenth one being the blank or empty image.

  2. 18 images, including the blank image, are displayed before looping takes place, that is, before the whole process repeats itself. Here are the 18 images which are numbered this time:

    1      ANIMATION
    2      ANIMATIO
    3      ANIMATI
    4      ANIMAT
    5      ANIMA
    6      ANIM
    7      ANI
    8      AN
    9      A
    10    a blank image
    11    A
    12    AN
    13    ANI
    14    ANIM
    15    ANIMA
    16    ANIMAT
    17    ANIMATI
    18    ANIMATIO

  3. The complete word ANIMATION should appear first. This is for those browsers that do not support animation. In these browsers, only the first image in the animation will be displayed. Because these browsers can't show animation, it is important then, that they at least display the complete image - in our case, the complete word. Another reason for the given order is that when a web page containing an animated GIF is sent to the printer, often only the first image in the file gets printed. Since a printer cannot print out all the individual images that make up the GIF file, it will print the first image that the browser displays in the animation. This then is another reason for a good first image in a GIF file.


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Sixteen |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to email