*Episode 18* HTML (Animation Image)

    

               Animation Image Bar

    One of the most attractive feature of pages found on the internet is the animation of images and text. There are several ways of creating animation for a page. The most sophisticated can be found in the form of Java applets or activeX objects. Using a CGI program is another solution; however, this is complex.

      The simplest and most practical way to create animation is through the use of images recorded in the GIF format with animation. GIF images have two standard, 87a and 89a.

      The 89a format allows creation of an animation through the display of the several GIF images stored in a single GIF file. These images are arranged in layers and each one of them can be configured in the way it is displayed, the duration of the display, and the place it is displayed.

       The most complex part of the process of creating and animated image is the creation of the individual frames or images which will be grouped for display. To do this, use any drawing program which allows creation of individual images. Simple programs, like paint aur paintshop Pro, can be used for creation of flat figure, in 2-D. Programs like Corel draw allow creation of images in three dimensions, which can, for example, create the logotype of a company composed of letters turning on its axis.

      This part of the process demands much more from the artistic side then from the technical side of the developer.

Types of Animation

 1) Slide show :- In this type of animation, the whole image or figure is replaced by another. For example, one image has a photograph; another, text; the next a photograph and text; and so forth.

 2) Static animation :- In this type of animation, several images of an object are created, each one with a slight change in position. The images are displayed in sequence, giving the impression that the object is moving. Physically, the object is not displayed on the screen. An example is a CD disc spinning or a lamp turning on and off.

 3) Animation with image displacement :-  In this type of animation, the object moves and displaces itself on the screen, such as the dog in the following images.

Programs for Creating Animated Images

      The most popular program for creating animated images is the GIF construction set. This program is very popular share where. 1 copy is found on the CD accompanying the book. Microsoft has made available on its site the GIF animator, which is also included on the CD. It is a program allowing creation of animated GIF in a very much like the GIF construction set, but it is much simpler to operate. We will create our animation with the GIF animator.

     In this tutorial, we will create 3 animations--- the images used for the creation are in the gofanim directory.

Creating a Slide Show Type Animation

    In this example, we will create an animation composed of 3 images, each of which will simply be displayed and then completely replaced by the next image.

     Load the GIF animator and press the open button.

     Choose the last image of the sequence. In this example, it is the potira.gif image. The image is positioned in frame #1:

        Next, you should insert the other images, always from last to first, using the insert button. Note that frame #1 has a thicker frame, indicating that it is selected.

     When an image is inserted, it takes the place of the image that is selected. Insert the poti02.gif and poti01.gif images. If everything went right, the GIF animator should resemble the figure on the next page.

Changing the Frame Positions :-

     If you decide to change the position of a frame, just select the frame to be moved and press the move up or move down buttons.

Adjusting and Testing the Animation :-

      Each animation frame or image can be configured to remain displayed for a certain time and in a certain position. To configure the parameters of an image, click on the image tab after selecting the image you wish to adjust.

      In the next figure, notice that the second frame is selected:

      The image tab shows the width and height of the image in pixels, the position of the image within the area, and the duration of the image display in hundredths of a second. To specify one second, enter the value 100; half a second is 50. We want frame #2 to be displayed for 2 seconds. Frame #1 and #3 suit have their values adjusted to 100.

      Later, we will discuss the other items on this time.

Viewing the Animation :-

     You can see what the animation will be like by previewing it.

     Press the preview button, which is the next to last on the button bar, and a dialog box will appear showing the animation.

       In the bottom part of the window, VCR-type controls appear with which you can stop the animation by pressing the second button (square), or display the animation frame by frame, pressing the forward (>>) or rewind (<<) buttons. To return to the GIF animator window, press the close button.

Creating a Loop :-

     Upon testing the animation, you noticed that it was executed only once. GIF animator allows you to control the number of times the animation is displayed. To do this, click on the animation tab, as shown in the following figure: 

      The first step is to mark the looping box. After you click on it, the repeat count box becomes available for you to specify how many times the animation should be executed.

      If you want the information to be continuous, mark the repeat forever box. Limiting the number of times the animation is executed is appropriate when you want to call attention to a region of the screen, but do not wish the user to be distracted by an animation that never stops.

Saving an Animation :-

    Our animation was started by loading an existing image. In this case, use the save as button, shown next, to give a name to the animation:

     If you use the save button (with the diskette figure), the animation will be recorded over the original image. In this example, we used the name potimove.gif. if you execute this procedure, use another name, as this file is already recorded on the disk.

Creating an Animation Without Displacement

      The next stage consists of creating an animation showing two eyes moving. For this, we will use, initially, 3 frames using the files eyebright.gif (frame1), eye center.gif (frame1), and eyeleft.gif (frame3).

      Below is the figure:

 

      Click on the animation tab, mark the looping box, and enter 5 as the number of executions. For each image, enter a display time of 50 (half a second). Click on the save as button and enter a different name for the animation.

      Use the other eye figure to create animation in which the eyes turn only up and down, Turn to all sides, and remain blinking in the centre. The test2.htm file shows all animation using the eyes.

Creating an Animation with Displacement

       Our third example will use a technique to displace the figure in an area. In this type of animation, the animation area has to be large enough to contain the displaced figure. Our example will show the figure of a hand displacing itself horizontally on the screen.

       The first step is to load the pointer.gif figure. Next, change the width of the animation area so as to contain the movement of the images.

     In this example, we will change the width to 54, as we will create an animation with five frames, where is 1 will be displaced 5 pixels to the right.

      Repeat the process of image insertion and insert 4 more copies of the pointer.gif image. Next, select frame #2, click on the image tab, and enter the displacement of the image in the left box.

      See the following figure:

     Repeat this operation using the values shown in the following table:

Image	Display time	Left Position
Frame 1	10	0
Frame 2	10	5
Frame 3	10	10
Frame 4	10	15
Frame 5	100	20

Testing the Animation :-

       After adjusting each image, click on the animation tab and mark the boxes to create a continuous loop. Next test the animation:

     Oops! It didn't turn out very well! Although the animation is working, the displacement of the image leaves a trial caused by the the display of the image is another position. In the previous animation, as the area occupied was the same, this problem did not exist.

     The solution to this problem in simple. Just specify in the image tab of each frame the undraw method of the image. As standard, it is undefined.

    See the figure:

    Restore background clear the area, restoring the image background. That is, the prior image is arranged for the new to be drawn. Leave maintain the last image while the new one is displayed. In practice, it causes the the same effect as undefined.

    Change all the images to restore background.

Adjusting the Image Transparency :-

     Last adjustment that can be made to the animation is the use of transparent colour. Independently of the origin of the image, you should, for each frame, adjust the transparency colour. To do this, select the image tab of each frame, mark the transparency box, and then click on the transparent colour box.

      A colour palette appears in which you should click on the colour that should be transformed into transparent. In this case, the background colour is white. Press the ok button to end the process. Repeat this procedure for all the frames.

     There! Now just save your image and insert it in your documents.

     The gifanim\Demos directory contains 84 more animated images. Note that Internet Explorer 4.0 does not display these images properly.

👈Episode 17

Share This Post

PRINT THIS POST