HTML Goodies

Handsome guy, huh?

Goodies Tutorials

Cursos, Tips, ...

tabs

¿Así Que, Quieres Un gif Animado, Eh?

por Joe Burns, Dr. en Filosofía

traducción Lewis Skolnik,
MicroTac Spanish Assistant
for Windows 1.0c

Usa estos para brincar alrededor o leerlo todo...
[El Recopilador del gif] [Los gifs]
[Confeccionando las Imágenes] [Confeccionando el gif Animado]
[Colocándolo en una Página] [¡No Está Funcionando!]

     Ah, el gif animado. O como yo lo llamo, el anti-java. La cosa de encima es un gif animado. Debe estar moviéndose, por lo menos. Tan lejano come sé, gifs animados correrá en todo nivel de hojeadores. La razón es la manera se crea la animación. Éste no es algo creado por un CGI o un JavaScript. Lo qué realmente está aconteciendo es que el hojeador (como Netscape) coloca simplemente un gif después de otro en el mismo espacio. Tu ojo sólo lo percibe como un movimiento fluido, tipo de como una película.

     Si tiene interés en crear un estandarte animado, ve aquí.

El Recopilador del gif

     Antes de que vayamos cualquier más allá, debes primero ir y obtener un programa. Requerirás el Juego de la Construcción del gif para Windows y W95 por Alchemy Mindworks Inc. Esto es (al momento, por lo menos) un programa-compartido. Eso significa que es gratis, pero si a ti te gusta, se te ruega enviar unos billetes. Requieres este para completar esta guía didáctica. Así que ve obténlo e instálalo en tu computadora. Aquí están unos eslabones que sé que ofrecen el Juego de la Construcción:

[W3.x 16-Bit Versión: gcs16n.zip] [W95 32-Bit Versión: gifcon32.exe]

Si tienes problema usando estos eslabones prueba a Alchemy Mind Works.
     Los eslabones de encima te envían a la página principal ofreciendo sitios de la descarga y sitios-espejo de la descarga...

     MAC usuarios deben probar aquí Juegos de gif Animados.


Los gifs

     ¿Fuiste y obtuviste el Juego de la Construcción del gif ya? ¿Lo instalaste en tu computadora? Bien, bueno. Ahora, sobre la parte dura. No, no la creación de la animación, sino los cuadros que animarás.

     Sé que haz visto un libro del capirotazo. Este es uno de los libros que tienen un cuadro pequeño arriba en la esquina derecha de cada página y si arrojas las páginas lo bastante rápidamente aparece como si los cuadros pequeños están moviéndose. Es el mismo principio para una película o cinta de video. Un manojo de rollo de las imágenes fijas pasado bastante aprisa (24 por segundo para película, 30 por segundo para cinta del video) y tu ojo lo ve como movimiento.

¿Dónde obtengo las imágenes?
     ¡Las haces! (deseo que no haya dicho eso, Joe). Pues, podrías salir en el mundo de ciberespacio y hallarlos. Gente ahora ofrecen imágenes y gifs animados. ¿Pero qué divertido podría eso ser?

¡No tengo un programa que hace gifs!
     ¿Por qué no? Es gratis. Ve a
shareware.com. Lo dije previamente; y obtén un programa llamado PaintShop Pro. Es muy fácil usar y hace pinturas muy buenas de nada. Es también un programa bueno para correr un digitalizador desde y manipular las imágenes que crea. El mejor aval que podría dar, es que este lo uso para correr mi digitalizador Logitech. Así que ve y obténlo.


Confeccionando las Imágenes

     ¿No va a enviarme lejos de nuevo, verdad Joe? No. Tienes todo lo que ahora requieres. Más haz llenado probablemente unos buenos 12 Megabytes de espacio en tu unidad de disco duro. (estás seguro que quieres estos gifs animados, ¿no lo estás?)

     Cuando creas los gifs necesitas seguir unas pautas. Éstas no son mis pautas, tampoco. Éstas son las especificaciones que el programa de la Construcción del gif requiere:

    • Debes preservar las imágenes en formato gif (Compuserve).
    • Debes preservar la imagen al nivel 256 colores.
    • Todas las imágenes que uses deben ser el mismo tamaño.

¿Por qué?

     La respuesta fácil es que el programa de la Construcción del gif lo requiere. Realmente, la razón es que estás creando literalmente una película pequeña cuadro por cuadro. Todo los cuadros deben ser del mismo tamaño, deben todos estar en el mismo formato, y todos preservados al mismo nivel de color.

Aquí están unos consejos...
     1. Crea una plantilla para tus imágenes.

     ¿Recuerdas la animación del reloj que hice arriba? Creé un cuadrado blanco usando PaintShop Pro. Entonces dibujé un círculo en el medio del cuadrado y lo preservé, a nivel 256 colores, como "reloj.gif". Estaba entonces capaz para traer esa plantilla hacia arriba, dibujar una línea a la una, y preservala bajo otro nombre. Repetí para las dos, las tres, las cuatro, etc., etc., hasta que fui el rumbo entero alrededor del círculo. De esa manera estaba seguro el círculo quedaría estable para la animación completa. ¿Conmigo todavía?

     2. Haz cada una de las animaciones en tu propio disco. (Me agradecerás por esto más tarde).

     3. Haz tus gifs tan pequeños como puedas.

     4. Haz tus gifs con el menor número de bits posible.

     El razonamiento para #3 y #4 están obvio. Recuerda que el hojeador cargará un gif después de otro dando la impresión de movimiento. Si los gifs son grandes, es lento. Si los gifs son pequeños y hechos de menos bits, cargarán más rápido y verán mejor.


Confeccionando el gif Animado

     Por cierto, tú querrías imprimir esta página ahora. Lo hará tanto más fácil para animar el gif si tienes las instrucciones delante de ti.

     Primero vas a requerir unos gifs para animar. Te daré cuatro de mi colección para tu uso. Éstas son cuatro flechas, todas del mismo tamaño, todas preservadas al nivel 256 colores. Lo que haceremos es una animación del cuatro-tablero de una flecha hilando a la derecha, girando y girando. Torpe sí, pero bueno para tus primer disparo al proceso. Descarga las cuatro y colócalas todas en un directorio. No cambies los nombres de las imágenes. También, no te inquiete que los números aparecen estar fuera de orden. Arreglaré eso cuando hagamos la animación. Mi sugerencia es ponerlos todos en un directorio vacío como TEMP. Esto sólo lo hace más fácil.

Pulsa el botón para Descargar cada:
[
Flecha Izquierda] [Flecha Derecha] [Flecha Arriba] [Flecha Abajo]

     Ahora todos están descargados. Hagamos la animación. Sigue las instrucciones continuamente:

  1. Salte de tu hojeador y abre el programa de la Construcción del gif que descargaste.
  2. Una caja abrirá con unos botones a lo largo de la cima. Los botones dicen "VIEW, INSERT, EDIT, DELETE, etc., etc.". Se parece a éste:

    Si lo que tienes está cerca de este, estás listo para ir.

  3. Ve bajo el menú FILE y escoge NEW.
  4. Una línea destacada aparecerá que indica HEADER gif89a SCREEN 640x480. 640x480 trata del número de pixels que hacen la imagen. Recuerda, ésta es una imagen de la computadora. Se hace de puntos pequeños de color. Esos puntos pequeños se llamaban "pixels", corto para "picture elements" (elementos del cuadro).
  5. Éste no es el tamaño correcto. Las cuatro flechas que descargaste son sólo 30x30 pixels. Pulsa el botón dos veces en la línea destacada HEADER gif89a.
  6. Una caja debe hacer estallar arriba donde verás de nuevo los números 640 y 480. Se parece a éste:

    Cambia esos números a 30 y 30 y pulsa el botón OK.

  7. Estás de vuelta a la pantalla del original y la línea ahora debe leer 30x30. ¿Lo hace? Si no, prueba de nuevo cambiar los números. Estos números denotarán el tamaño de las imágenes que estás usando.
  8. Ahora debes decir al sistema lo que quiere pasar con respecto al movimiento de los gifs. Puedes hacer otras cosas, y puedes aprenderlos en tu propio, pero por ahora vamos a GAZAR la animación, significa que los cuadros continuarán iendo uno después del otro todas las veces. El gif de arriba está gazado.
  9. Pulsa el botón marcado INSERT. Una caja estallará hacia arriba. Se parece a éste:

    Escoje LOOP. ¡Puf! Ahora debe decir LOOP bajo la linea HEADER.

  10. Ahora es el momento de comenzar colocando imágenes. Recuerda esto: Todas las imágenes deben tener una orden CONTROL antes de ellas. Siempre... ninguna excepción.
  11. Pulsa el botón INSERT y escoge CONTROL. CONTROL ahora debe estar en la pantalla.
  12. Pulsa el botón en el destacado CONTROL. Otra caja debe aparecer. Debe parecerse a éste:

  13. ¿Ves en la caja donde dice 1/100th of a second (a 1/100 de un segundo)? Ése está el lapso del tiempo entre el gif presente y cuando el próximo cargará. Más de 100 lo hace más lento, menos lo hace más rápido. Por ahora, inserta "15"/100-esimas de un segundo. Escoje OK.
  14. Pulsa el botón de nuevo en INSERT y escoge IMAGE.
  15. Otra caja hará estallido arriba dándote la habilidad para encontrar y escoger las imágenes que descargaste de mí. Halla "arrow1.gif" y escógelo. Debe aparecer en la pantalla.
  16. Escoje INSERT de nuevo y selecciona CONTROL.
  17. Pulsa el botón dos veces en la línea y de nuevo cambia el 100-esimas de un segundo a 15. Pulsa el botón OK.
  18. Escoje INSERT de nuevo y escoge IMAGE.
  19. Cuando la caja haga estallido arriba, halla "arrow3.gif" y escógelo.
  20. Sigue el formato de arriba otra vez y coloca otro CONTROL, cambiándolo a 15/100-esimas de un segundo.
  21. De nuevo, escoge INSERT e IMAGEy coloca "arrow2.gif".
  22. Coloca otro CONTROL, cambiando 100-esimas de un segundo a 15 de nuevo.
  23. Coloca la última imagen "arrow4.gif".
    (Ves, estás haciendo la misma cosa de nuevo y de nuevo... control, image, control, image, control, image, etc., etc.)
  24. Ésto es lo que debe estar escrito delante de ti:

    HEADER gif89a SCREEN 40x40
    LOOP
    CONTROL
    IMAGE ARROW1.gif 30X30,256
    CONTROL
    IMAGE ARROW3.gif 30X30,256
    CONTROL
    IMAGE ARROW2.gif 30X30,256
    CONTROL
    IMAGE ARROW4.gif 30X30,256

  25. ¿Quieres verlo? Pulsa en el botón VIEW. La pantalla irá negro y la flecha girará alrededor.
  26. Para volver, golpea la tecla ESC.
  27. Preserva la animación de la imagen escogiendo SAVE AS bajo el menú FILE.
  28. Si tienes cualesquier problemas, ahora obtendrás una advertencia y que arreglar. Si no, buen trabajo. Presérvalo bajo un nombre que puedas recordar.
  29. El programa sufrirá una lista larga de movimientos para tu distracción mientras compila tu animación. Entonces está hecho... nada para él.

Colocándolo en una Página

Coloca la animación (el último nombre que le diste) lo mismo que harías con cualquier imagen. Emplea el formato de la Orden de la Imagen:

<IMG SRC="animation.gif">

No intentes cambiar el tamaño o cualquier otra cosa. Permite que sea lo mismo que tú preservaste.

¡No Está Funcionando!

     ¿Extraño, eh? ¿Pero trabajaba cuando pulsaste el botón en VIEW? Sí, he encontrado eso, también. Prueba subir la animación por FTP y todas las imágenes pequeñas que usaste para hacerlo hacia tu servidor y entonces ve y míralo. Te apostaré que trabaja.

     Estas cosas son muy susceptibles. Le he encontrado a mi 486 Netscape 1.1 que sólo los correrá cuando son cargados en el servidor. 2.02b lo correrá apartado de la unidad de disco duro. Mi W95 computadora lo correrá todo directamente. ¿Raro, eh?

     Espero que esto ayude. Verdaderamente es más fácil de lo que parecería al principio. Buena Suerte.

[El Recopilador del gif] [Los gifs]
[Confeccionando las Imágenes] [Confeccionando el gif Animado]
[Colocándolo en una Página] [¡No Está Funcionando!]


[Volver a la Página Hogar de HTML Goodies]