12. GIFs animados

Ya se ha hecho mención anteriormente en este manual de los dos formatos GIF (ver en el capítulo 9), en relación a las imágenes con fondo transparente. Allí vimos que el formato GIF 87a no era el adecuado para ello, sino que lo era el formato GIF 89a.

Estos números de los formatos hacen referencia a los años en los que se publicaron sus respectivas especificaciones (1987 y 1989).

En 1989 se estableció la posibilidad de la existencia de colores transparentes, así como que un fichero GIF pudiera contener internamente múltiples imágenes, visibles durante un tiempo determinado, con lo que se podía obtener una imagen animada. Pero esta interesante característica permaneció prácticamente en el olvido hasta finales de 1995, cuando Netscape la implementó en su navegador, adquiriendo muy pronto una gran popularidad.

Hay otros tipos de animaciones, como las obtenidas con:

• Quicktimes, FLIC, AVI, etc., que tienen el gran inconveniente de que requieren, para poder ser contempladas, de programas auxiliares previamente instalados.
• Java, que requiere un nivel de conocimientos de este lenguaje de programción que no está al alcance de cualquiera.
• Las animaciones basadas en los servidores, que tienen el inconveniente de que consumen el ancho de banda e incrementan el tráfico de datos, debido a que deben estar alimentando continuanemte la animación desde el servidor.

• No requieren de ningún programa auxiliar, siempre que se utilice el navegador adecuado para poder contemplarlas.
• Son tan fáciles de utilizar en una página del Web como cualquier imagen GIF fija.
• No incrementan el tráfico de datos, pues el usuario la carga de una sola vez y se ejecutan luego desde el caché del navegador.

Para crear una animación, en primer lugar, hay que crear una a una las distintas imágenes que van a constituir la animación. Cualquier programa gráfico que sea capaz de guardar las imágenes en formato GIF es válido para este propósito.

En segundo lugar, es necesario un programa que ensamble estas imágenes individuales de una manera apropiada para crear la animación. Los programas más utilizados para ello son:

• Windows:
  GIF Construction Set (Win3.1x y Win95)
  Gif Animator de Microsoft (Win95)
• Mac:
  GifBuilder
• Unix:
  WhirlGIF

Partimos del icono:

trabaj-0.gif

Vamos a hacer una animación en la que:

1. el trabajador levanta la pala
2. la baja a la posición intermedia (pero sin caída de cascotes)
3. la baja más hasta el nivel del suelo (con la desaparición del montón de cascotes)
4. la vuelve a subir hasta la posición inicial

Con un programa gráfico (en este caso se ha utilizado el Paint Shop Pro 3.12), se ha manipulado la imagen original para obtener las siguientes imágenes:

trabaj-1.gif
trabaj-2.gif
trabaj-3.gif

Para ensamblar las imágenes en una animación se va utilizar el programa para Windows GIF Construction Set.

1. Seleccionamos File/New para crear una nueva animación. Vemos que aparece Header GIF 89a Screen (640x480). Esto es la cabecera de la pantalla (screen), en la que se va a desarrollar la animación, que por defecto tiene las dimensiones indicadas. Podemos considerarla como la pantalla de una película. Si la animación va a consistir, por ejemplo, en un objeto que se desplaza, damos a la pantalla las dimensiones adecuadas, y vamos situando el objeto en las distintas posiciones que queramos (Véase un ejemplo de animación de este tipo, en la que un objeto de 13x13 se desplaza por una pantalla de 365x13).

   No es el caso que nos ocupa, en el que vamos es sustituir unas imágenes por otras, todas de las mismas dimensiones (40x40) y en el mismo sitio. Por tanto, le damos a la pantalla esas mismas dimensiones, pulsando 'Edit' y modificando 'Screen width=40' y 'Screen depth=40'.

2. Una vez definida la pantalla, vamos a colocar la primera imagen de la animación (trabaj-0.gif). Para ello pulsamos INSERT y luego IMAGE y buscamos dicha imagen. Como la paleta de 16 colores de esta imagen que insertamos no se corresponde con la paleta de 256 colores que tiene por defecto la pantalla, nos presentan en un cuadro de diálogo diversas opciones. Escogemos 'Use this image as the global palette', con lo que la pantalla y las demás imágenes que insertemos tendrán la paleta de esta imagen, y no habrá problemas de incompatibildad de colores.

3. Antes de cada imagen debe ir un bloque de control que, como vamos a ver, sirve para indicar sus características dentro de la secuencia de la animación.

   Para insertar este bloque, se señala el inmediato superior (en este caso el bloque HEADER), se pulsa INSERT y se escoge CONTROL. La secuencia de bloques, es de momento:

   HEADER GIF 89a Screen 40x40
   CONTROL
   IMAGE trabaj-0.gif 40x40 16 colours

   Para ajustar los valores del bloque CONTROL, se señala éste y se pulsa EDIT. En el cuadro de diálogo que aparece, marcamos:

   • 'Transparent Colour' y con el icono que representa un cuentagotas, señalamos el color gris que rodea a la imagen, y que no queremos que aparezca.

   • Para ajustar el tiempo de aparición de esta imagen en la animación se debe poner un número en la ventana 'Delay', que representa centésimas de segundo. De momento ponemos 50 (que es medio segundo).

   • Por último, en la ventana 'Remove by' escogemos 'Nothing'. Esto es para indicar qué debe sustituir a una imagen. En este caso, como se trata de imágenes que no se desplazan, escogemos la opción 'Nothing' (nada). Pero en el caso del ejemplo visto anteriormente, de una bola que se desplaza por la pantalla, habría que haber escogido 'Background' (fondo), para que el lugar ocupado por una imagen sea reemplazado por el fondo de la página.

4. Se repite este proceso con las otras tres imágenes. Los bloques de CONTROL deben ser todos iguales al que hemos visto. La secuencia de bloques queda, de momento así:

   HEADER GIF 89a Screen 40x40
   CONTROL
   IMAGE trabaj-0.gif 40x40 16 colours
   CONTROL
   IMAGE trabaj-1.gif 40x40 16 colours
   CONTROL
   IMAGE trabaj-2.gif 40x40 16 colours
   CONTROL
   IMAGE trabaj-3.gif 40x40 16 colours

5. Con lo visto anteriormente ya tenemos una secuencia completa. Pero si queremos que esta secuencia se repita más de una vez, hay que insertar un bloque llamado LOOP (lazo). Señalamos el bloque HEADER, pulsamos INSERT y escogemos LOOP. Lo podemos editar, y vemos que se puede determinar un número concreto de repeticiones (Iterations). Lo dejamos con el número por defecto 1000. Con esto queda la secuencia de bloques definitiva, como sigue:

   HEADER GIF 89a Screen 40x40
   LOOP
   CONTROL
   IMAGE trabaj-0.gif 40x40 16 colours
   CONTROL
   IMAGE trabaj-1.gif 40x40 16 colours
   CONTROL
   IMAGE trabaj-2.gif 40x40 16 colours
   CONTROL
   IMAGE trabaj-3.gif 40x40 16 colours

6. Ya se puede guardar la animación. Lo hacemos con el nombre workanim.gif. La cargamos en el navegador para ver el efecto. Vemos que no es conveniente que el tiempo sea el mismo para todas las imágenes. Después de una serie de pruebas, se varían los tiempos en los bloques de Control de la siguiente manera:

   trabaj-0.gif --> 10
   trabaj-1.gif --> 30
   trabaj-2.gif --> 120
   trabaj-3.gif --> 25

   y se guarda el fichero una vez más, de manera definitiva. Esta es la animación:

Consideraciones finales

• En los navegadores que no soportan animaciones se verá únicamete la primera imagen.

• Hay algunas versiones de Netscape en las que no funciona la limitación de secuencias que se indica en el bloque LOOP, funcionando la animación indefinidamente. En los casos en que sí funcione, hay que tener en cuenta que cuando se pare, lo hará en la última imagen.

• Como un GIF animado es un fichero de imagen como otro cualquiera, se pueden capturar con la misma facilidad que los demás.

• Cuando veamos un GIF animado que nos llame la atención, es muy conveniente capturarlo y cargarlo en el programa correspondiente, para estudiar la secuencia de las distintas imágenes y sus carcterísticas.

• Si se quiere saber más sobre animaciones, el sitio más indicado es: GIF Animation on the WWW de Royal Frazier, uno de sus principales impulsores.

  Este sitio está replicado y traducido al español por la E.T.S.I.M.O. de la Universidad de Oviedo.

Ejemplo práctico

Partiendo del ejemplo práctico de la lección anterior mipag11.html, añadimos entre las etiquetas <HR> y <BODY>, situadas al final, lo siguiente:

<P><HR>
<H2>¡Sitio del Web en obras!</H2>
<IMG SRC="workanim.gif">
<P><HR>

Guardamos este fichero como mipag12.html y lo cargamos en el navegador para verlo.
Resultado.