Imágenes animadas en HTML

Una capacidad muy interesante de las imágenes GIF es la de el formato GIF89a, tal y como mencioné en la sección de IMAGENES EN HTML, que permite realizar peque�as animaciones usando guiones.

Para crear una animación es necesario emplear un programa que permita realizar guiones. En nuestro caso, recomiendo el uso de Gif Construction Set de Alchemy Works.

Antes de empezar a crear un guión, debemos disponer de las distintas imágenes que formarán el guión. Crearemos la animación de un hombrecito trabajando, para indicar en nuestras páginas, cuándo nos encontramos de obras... :-)

Imagen 1	Imagen 2
Imagen 3	Imagen 4
Imagen 5	Imagen 6

• Ejecutamos la aplicación Gif Construction Set y una vez iniciado seleccionamos la opción NEW del menú FILE.
  
  
• Hacemos doble click sobre la línea HEADER GIF89a SCREEN.
  
  
• Introduce el tama�o de la imagen en SCREEN WIDTH y SCREEN DEPTH, tras lo cual pulsa el botón OK. (debemos de tener en cuenta que a la hora de la animación, todas las escenas tendrán más o menos el mismo ancho y alto, por lo que aquí en la cabecera del dibujo lo que hacemos es definir el formato que tendra nuestra animación, en tama�o).
  
  

  El siguiente paso consistirá en indicar la cantidad de veces que deberá repetirse la secuencia de la animación de nuestro hombrecillo.

• Pulsa en el botón INSERT y selecciona la opción LOOP.
  
  
• Haz doble CLICK con el ratón sobre la línea LOOP, del guión e introduce el número de veces que deseas que se repita el guión.
  
  
• Haz CLICK sobre el botón INSERT y elige la opción IMAGE.
  
  
• Selecciona la primera imágen de la secuencia y pulsa OK (en nuestro caso será gif89a1.gif).
  
  
• Elije la opción DITHER THIS IMAGE TO THE GLOBAL PALLETE, y pulsa el botón OK.
  
  

  De esta forma la tabla de colores empleada será la misma para todas las imágenes.

• Pulsa el botón INSERT y elige la opción CONTROL.
  
  
• Haz doble CLICK sobre la línea CONTROL, introduce la pausa, DELAY, entre imagen e imagen y pulsa el botón OK. A menor pausa, más rapidez de animación.
  
  
• Termina de insertar las imágenes restantes hasta completar la secuencia. Recuerda que entre imagen e imagen, deberás insertar un código de CONTROL, para poder especificar el retardo entre imágenes secuenciales que forman la animación.
  

  Una vez terminado el guión, debes guardarlo e incluirlo en una página WEB como si se tratara de una imágen GIF normal.

TRUCO: En el caso de que por cualquier motivo no se viera nuestra animación, debes comprobar el haber seguido los pasos de de uno en uno y en la secuencia lógica que indico. Si queremos que nuestra animación presente un fondo transparente, debemos de grabar cada una de las secuencas en GIF89a de modo que seleccionemos el color que queremos que se transparente en el navegador, directamente en el programa de creación de guiones. Para ello haces doble click en cada uno de los guiones CONTROL de la animación, y pinchas en el check box que indica TRANSPARENT COLOUR, podiendo seleccionas con una pera el color de fondo que deseas transparente sobre la misma imagen. Recuerda que debes hacerlo en cada uno de los guiones CONTROL de la animación.

NOTA: Hay que tener presente que no todos los navegadores soportan imágenes GIF89a o animaciones, por lo que sólo se verá la primera imagen de la animación que contenga el guion que hemos creado. Para poder ver una secuencia animada debemos emplear el Netscape 2.0 o versiones superiores del mismo o el Internet Explorer 2.0 o superior.