Archivo en formato de Gif se muestran como imágenes con estática. De todos modos, es posible construir archivos animados de GIF. Estos contienen un juego de imágenes que la mayoría de los navegadores (ej., Netscaps 2.0 y sobrepasado, o Internet Explorer 3.0) y aún más, pueden mostrar en secuencia, por ende produciendo animación.

Las imágenes mostradas a la derecha e izquierda son ejemplos de animaciones simples de GIFs. Si no están en movimiento, intenta recargar el marco. Si aún no se mueven, tu Navegador posiblemente no apoyan GIFs animados; busca uno que sí!

Archivos animados de GIF tienen una ventaja sobre animaciones de JAVA y escritos CGI en que no requieren servidor ni software cliente mas sofisticados que un servidor y navegador de la Web básico. Así, ellos son la manera más simple de implementar animación. Por supuesto, ellos solamente pueden producir animación; si uno desea ir más allá de esto (por ejemplo, añadirle sonido a la animado o permitirle al usuario inter - actuar con la imagen) es necesario buscar métodos mas sofisticados como escritos de CGI o JAVA.

Los dos ejemplos arriba mostrados ilustran el uso de animación para el deleite y para llamar la atención del lector. Pero animación puede servir un propósito educativo más directo también. Por ejemplo, he aquí tres ejemplos tomados de una clase de introducción a la astronomía:

Nota particularmente los primeros dos de éstos ejemplos ilustra en términos simples conceptos que podrían ser mucho mas difíciles de comunicar solamente usando palabras o hasta fotos estáticas.

Vamos a ilustrar la construcción de GIFs animadas ensamblando los primeros 4 marcos del ejemplo, los "Singer Hornets" dados anteriormente en una película simple usando Animagic para Windows (el cual es software compartida). En este tutor, asumiremos que el problema creando marcos individuales es uno por separado del que ya tienes resuelto (mas sobre esto). Típicamente los marcos que se usarán pueden ser coleccionados de otro lugar o producidos con un programa de dibujo o pintura y guardado en (o convertido a) archivos de color 256 en los formatos reconocidos por Animagic: GIF, PCX o BMP.

El primer paso usando Animagics coleccionar las imágenes que compondrán la animación. He aquí cuatro imágenes que serán usadas en el ejemplo:

Haz un subdirectorio en tu expediente principal llamado "amimages". Ahora, empieza con la imagen localizada en la parte mas izquierda y procediendo hacia la derecha y hacia abajo por filas, copia cada una de estas imágenes en éste expediente poniendo el cursor del ratón sobre la imagen, manteniendo oprimido el botón de la derecha y selecciona "Save Image As" y colócalo en el directorio de "amimages" con el nombre de archivo por omisión (debe ser fig1.gif,fig2.gif, fig3.gif, fig4.gif). Como lo indica el nombre, éstos son archivos de GIF.

Esconde la ventana del navegador y abre Animagic. Debes tener una lista con el nombre de "Frame List", como en la siguiente figura:

Ahora, oprime "Open" y los nombres de los archivos aparecerán en la ventana de Frame List. Si observas cuidadosamente, también verás los cuatro marcos expuestos en secuencia (ej., fig1.gif después fig2.gif, etc.) en la ventana principal de Animagic. Finalmente, esta ventana mostrará la fig2,gif una vez mas, y su nombre estará iluminado en la ventana de la Lista de Marco. Ahora, la ventana de la Frame List se debe de ver como la siguiente:

Esta es la lista de marcos en la secuencia en que serán ensamblados dentro de la información.

Ahora, selecciona "Frame rate" del menú de "Animation" para preparar la velocidad a la que la animación correrá. Esta selección del menú abre para mostrar algo parecido a lo siguiente:

La selección de "All Frames" te permite ser específico con los números de mili segundos en que cada marco en la gif animada será corrida. (Si deseas que los marcos se muestren en longitudes de tiempo diferentes, puedes usar la sección de "Selection Frame" de la pantalla para preparar el tiempo de desplazar cada marco individual). La figura muestra que cada marco se desplazará por 500 mili segundos o se verán a dos marcos por segundo.

Puedes correr tu animación o seleccionando "Play" del menú de "Animation" u oprimiendo sobre el botón con el triángulo en la barra de herramientas. Si deseas acelerar o disminuir la animación, simplemente usa la muestra de marcos (Frame) nuevamente.

La secuencia de los marcos en la ventana de Animagic puede ser reorganizada de la siguiente manera:

1. Oprimiendo sobre el nombre del archivo que deseas mover en la lista
2. Escogiendo "Cut" del menú desplegable de "Edit"
3. Oprimiendo en el lugar adonde deseas mover el marco y
4. Oprimiendo "Paste" del menú desplegable de "Edit" .

Alternativamente, puedes eliminar el contenido de la ventana de la Lista de Marcos escogiendo "New" del menú de "File" y después usar "File/Open" solamente para el archivo que será tu primer marco. Después usa "File/Append frames" para cargar cada marco subsiguiente, uno a la vez, en cualquiera que sea el orden que tu desees que estén.

Antes de hacer Una animación,Vamos a preparar Una variedad de opciones que controlan Cómo correrá la animación.

Esto se puede hacer entrando por el menú desplegable de "Options" (ver figura de la derecha). Una cuenta mas detallada de las opciones y sus efectos (y por supuesto, de muchas otras características de Animagic) esta proveído en los documentos incluidos del programa Animagic). Por ejemplo, vamos a dejar los encasillados en posiciones por omisión, excepto Toggle "Optimizations/Crop to dirty rectangles" para que una marca aparezca a su lado, como podemos observar en la figura adyacente. Esto le dice a Animagic que solo deje las cosas que cambian en los marcos sucesivos cuando construya la animación, la cual puede ser reducida de tamaño substancialmente del archivo de la animación final.

Nota que por omisión, una animación correrá continuamente, repitiéndose y repitiéndose. Puedes detener la animación después de varias repeticiones usando el "Loop Count" del menú desplegable de " Animation". (Loop es seleccionado por omisión del menú de Options. Si simplemente deseas alternarlo y guardarlo, la animación solo correrá una sola vez en tu navegador.).

También puedes mostrar la animación paso a paso: puedes detenerla al seleccionar "Stop" de menú de "Animation" (u oprimiendo el botón cuadrado negro de la barra de herramientas), y entonces tomar un marco a la vez seleccionando "Next frame" del menú de "Animation".

Guardando la Animación como un Enlace
(Saving the Animation as a Link)

Cuando este satisfecho con la animación, guardarla como un archivo animado GIF: del menú de "File" selecciona "Save Anim as" Y guardarla en tu expediente bajo el nombre amtest.gif. Ahora, veamos si podemos mostrarla con el navegador de la Web.

Abre el archivo de tu página y utiliza el ratón para copiar y entrar el siguiente texto en un lugar conveniente del archivo:

   <h2> Animated GIF Examples </h2>  
   <center>  
   <a href="amtest.gif">Example 1</a>  
   <p>  
   </center>

Guarda el archivo y abre el Navegador de la Web (recarga si es necesario). Ahora debes de tener un enlace titulado "Example 1" en tu página que muestra la repetición permanente de la animación cuando oprimes sobre el. (Como precaución. La animación GIF que acabas de hacer debe parecerse a esto.)

Como Hacer los Marcos Originales
(How to Make the Original Frames)

Intencionalmente, hemos dejado abierta la pregunta de cómo son producidos los marcos originales, ya que eso tendrá una variación con tus preferencias y disponibilidad de software de dibujos y pinturas en las computadoras que normalmente usas. Los ejemplos mostrados aquí fueron dibujados con Freehand (el cual es un programa de dibujo de cualidad profesional pero relativamente costoso), simplemente porque era el que estaba disponible. Programas mucho mas económicos pueden funcionar tan bien como los mas caros ejemplos simples como este.

En adición, muchos programas de los que ya tienes, como Microsoft Works o Paint Shop Pro, incluyen programas rudimentarios de dibujo que a veces son adecuados para hacer marcos de animación simples. El criterio principal es que los programas deben producir una salida en formatos GIF, PCX, o BMP (o en un formato que pueda ser convertido en los ya mencionados por otras piezas de software).

Nota que en animaciones simples los marcos sucesivos son muy similares entre sí. Uno puede usar eso como una ventaja cuando hace marcos comenzando con una copia maestra y simplemente hacerles pequeñas modificaciones para obtener cada marco sucesivamente. Por ejemplo, una simple imagen girando puede ser construida usando un dibujo sencillo que está giranado en cada marco sucesivamente, y que el movimiento de un objeto puede ser simulado dibujando el objeto una sola vez, y después simplemente cambiar su posición en los marcos sucesivos. Otra opción para simular movimiento es hacer los marcos todos copias de la misma imagen, y después usar la capacidad debajo del menú de "Frames" para compensar cada uno de los marcos sucesivamente del anterior con una cantidad específica para simular movimiento. De todos modos, en este caso uno puede tener problemas dibujando el fondo.

Haciendo tu Propia Animación
(Making Your Own Animation)

El ejemplo anterior muestra cómo hacer tu propia animación GIF; ahora tienes toda la experiencia requerida para hacer tus propias animaciones GIFs, y ya sabes como enlazarlas. Así que, qué esperas!!

Empieza a pensar en la animación que verdaderamente te GUSTARIA poner en tu página y leer la documentación incluida en Animagic (o verificar la documentación en línea del programa) para ver todas las características adicionales e interesantes que nosotros no llegamos a discutir en este Tutor ( por ejemplo, cómo crear toda clase de efectos especiales tales como desvanecimientos y desintegraciones en una animación).

De todas maneras, antes de irnos a otro tema, vamos a tomar nota de que animación es mas efectiva cuando se usa con parcamente si su propósito primordial es atraer la atención del lector. No exageres, o tus lectores se distraerán del contenido por las animaciones, o aún peor, indignarse a tal grado que se irán y no regresarán. Usa el buen gusto y recuerda que no existe nada malo en hacer tu página atractiva e interesante, siempre y cuando el punto final es CONTENIDO.

Archivos Animados de GIF en la Web
(Animated GIF Archives on the Web)

Generalmente, es mucho mas divertido hacer lo de uno, uno mismo, pero también puedes bajar una variedad de GIFS animados de la Web (de direcciones que te autorizan a hacerlo). Aquí existe una galería de GIFS animados. Puedes encontrar muchos mas usando un motor de búsqueda. Los GIFS animados en estas direcciones también te pueden dar algunas ideas sobre hacer los tuyos propios.