anterior.gif (992 bytes)  siguiente.gif (1013 bytes)

HTMLGIF Animados

GIF Animados
(Animated GIFs)

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 algunos navegadores (ej., Netscaps 2.0 y sobrepasado, o Internet Explorer 3.0), pueden mostrar en secuencia, por ende produciendo animaci�n.

Algunos Ejemplos de GIFs Animados
(Some Examples of Animated GIFs)

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 apoya GIFs animados; busca uno que s�!

Ejemplo: Construyendo una GIF Animada
(Example: Constructing an Animated GIF)

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.

Coleccionando las Im�genes
(Collecting the Images)

El primer paso usando Animagices 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.

Ensamblando los Marcos
(Assembling the Frames)

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

La Lista de Frame List no debe de tener ninguna entrada. Si la tuviese, como vemos en la figura superior, selecciona "New" del men� desplegable de "File" para limpiarlo (ver figura a la izquierda). Despu�s, a�ade los archivos GIF que compondr�n archivos GIF que compondr�n la animaci�n GIF a los marcos mostrados en el orden en que deben aparecer. Para lograr esto, usa File/Open en Animagic; en la ventana que aparece navegando al expediente donde pusiste los cuatro archivos y selecci�nalos. (Solo necesitas oprimir sobre fig1.gif y despu�s oprimir la tecla de "Shift" y oprimir sobre fig4.gif; entonces se seleccionar�n los cuatro archivos. Aseg�rate de no oprimir la tecla de "Shift" hasta DESPUES de que hayas oprimido el nombre del primer archivo). Ahora, debes de ver los nombres de los cuatro archivos

enumerados, en cada cita, en el encasillado de "File name" de esta ventana Animagic tal como se ve 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 "Frame" nuevamente.

Reorganizando Marcos
(Rearranging Frames)

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� de "Edit"
  3. Oprimiendo en el lugar adonde deseas mover el marco y
  4. Oprimiendo "Paste" del men� 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 esten.

Preparando Opciones de Animaci�n
(Setting Animation Options)

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� 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 pocisiones 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� 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.).

Probando la Animaci�n
(Testing the Animation)

Como ya hemos notado, la animaci�n puede ser verificada directamente en Animagic escogiendo "Play" del men� de "Animation" (ver figura de la izquierda) o usando el bot�n en forma de flecha en la barra de herramientas. Debe aparecer una ventana, como la siguiente que vemos (donde tambi�n ves el bot�n en forma de flecha), donde corre la animaci�n. Debe repetirse continuamente, ya que escogimos esa opci�n.

 

 

Tambi�n puedes mostrar la animaci�n paso a paso: puedes detenerla al seleccionar "Stop" del men� desplegable 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� desplegable 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� desplegable 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).

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 GIF, 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). Tambi�n desear�s consultar el tutor de animados GIF de 3 partes para mas informaci�n.

siguiente.gif (1013 bytes)