HTML
/ GIF 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:
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.