Manual de HTML - GIFS animados

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:

Las animaciones basadas en el formato GIF 89a eliminan todos estos problemas, pues:

Programas para crear animaciones

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:

GIF Construction Set, Gif Animator de Microsoft, Animation Shop...

Ejemplo de animación

Se va a mostrar el proceso de creación del icono animado workanim.gif

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

Necesitamos, por tanto, crear tres nuevas imágenes para los pasos 1-3.

Con un programa gráfico (en este caso se ha utilizado el Paint Shop Pro), 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.
    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

Ejemplo práctico

Si disponemos de alguno de los programas ensambladores de animaciones indicados, para practicar, podemos capturar las cuatro imágenes que componen la animación, y seguir los pasos indicados para crearla. Si no es así, podemos capturar directamente el GIF animado workanim.gif

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.


WebMaestro: http://wmaestro.com/webmaestro - © Francisco Arocena