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.