© 1996, etsimo WWW team

Haga Click aquí para acceder a los sitios espejo


GIF Animation on the WWW
[Overview] [Gallery] [All About GIF89a] [Software Toolbox] [HTML Assist] [Critter Report]


Construyendo Animaciones, segunda parte

NOTA:: Debido a su excesivo tamaño, el tutorial está ahora dividido en tres partes.

Creando un Fichero de Animación GIF89a

Empieza con GIF Construction Set (para evitar un horrible destino).

Hay dos formas de empezar un fichero de Animación GIF

UNA FORMA DE EMPEZAR UN FICHERO GIF

  1. Selecciona FILE/OPEN desde el menú y selecciona tu primer GIF.
  2. Ahora selecciona FILE/SAVE AS y renombra el GIF para darle el que será el nombre de la animación final. Haz click en OK. NO PULSES [ENTER!!!] [ENTER] CANCELA!.

UNA SEGUNDA FORMA (yo prefiero esta) DE EMPEZAR UN FICHERO GIF

  1. Selecciona FILE/NEW desde el menú. Una lista de Bloques GIF en blanco aparecerán sólo con la CABECERA.
  2. Comienza insertando imágenes.
¿Por qué lo prefiero?. He aquí porqué:

La primera imagen que introduces, debería ser sobre la que se realiza la paleta global, aún cuando borres esta imagen después del fichero. ¿Por qué? Aquí está mi razonamiento (si esto no es correcto por favor dímelo). La paleta global debería contener la gama más grande de colores para todas las imágenes. Así yo pienso que si tienes un fotograma donde se abre un arcoiris de colores, inserta la imagen primero, para que así la gama de la paleta esté cubierta.

En un conjunto de imágenes particularmente problemático, encontré que el color se desplazaba a lo largo del proceso. Especialmente con blancos cambiando a gris, verdoso o amarillo. Lo resolví creando un bitmap compuesto de todas las imágenes principales en las animaciones. y haciendolo todo en un único bitmap enorme. Inserté y cree una tabla de colores globales. Después descarté la imagen y comencé insertando las verdaderas imágenes en orden. No se produjeron más cambios de color.

CABECERA DE GIF89A Y BLOQUE DE DESCRIPTOR DE PANTALLA LÓGICA

Cada GIF comienza con estos dos bloques. GIF Con une estos dos bloques en uno. El Bloque de Pantalla define los extremos del GIF mostrado. Un GIF en blanco tiene un tamaño por defecto de 640 por 480 pixels, anchura por altura. Este es el tamaño de una pantalla VGA estandar sobre un ordenador Compatible IBM. Esta pantalla lógica es la cantidad de espacio que Netscape dará a tu imagen cuando se muestre. Esta estrella utiliza una pantalla lógica de 90x90 para mostrar una imagen de una estrella de 60x60. Observa la derecha y bordes inferiores.
(NOTA: los atributos del comando IMG de Netscape: ALTURA Y ANCHURA pueden dejar una única imagen a cualquier tamaño. Sin embargo esto está basado en el tamaño de la pantalla lógica). Estas tres estrellas tienen el mismo fichero fuente (STAR.GIF 59x59) pero han sido escaladas para mostrarlas en diferentes tamaños. Otros browsers no prestan atención a la pantalla lógica o al los atributos de ALTURA Y ANCHURA de Netscape.

HEADER GIF89A Screen(640x480)

El tamaño debería ser reducido a las dimensiones de la imagen más grande insertada. Con esto quiero decir encontrar la anchura más grande de todos los ficheros y utilizar esa. Entonces encontrar la altura más grande de todas las imágenes y utilizarla. No des por supuesto que todas tus imágenes son del mismo tamaño. La mayoría de las veces no lo son. Insertando una imagen más grande que el tamaño de la pantalla causará un GPF en Netscape. Recuerda también que esta es como tu pantalla de cine. Mueve parte de una imagen fuera del borde y esta parte no se mostrará en Netscape. GIF Con te mostrará el área de pantalla utilizando una linea de puntos para definirla. Cualquier cosa que caiga fuera de la linea de puntos, cuando la veas en el GIFCon, no se mostrará

INSERTAR UNA IMAGEN

Pincha en INSERT. Pincha en IMAGE. Se abre una caja de dialogo. Busca tu fichero con la imagen o escribe su nombre. NO PULSES [ENTER]!, esto lo CANCELARÍA en la versión 1.0c!. Pincha en el botón de OK.

Si algunos de los colores en la imagen no están representados por la paleta global, se abrirá una caja de dialogo con seis elecciones como máximo. Debes escoger una de las elecciones activas (las elecciones inactivas están en un gris difuminado). Color exacto, imágenes de 24-bit, son interiormente convertidas a imágenes de 256 colores en el GIF Construction Set. GIF no soporta más de 256 colores.

Mira la página de la Image Palette para ejemplos fotográficos de las siguientes opciones:

UTILIZACIÓN DE UNA PALETA LOCAL
Esto incrementa el tamaño de los ficheros como mucho 779 bytes. Una nueva paleta de colores se genera solamente para esta imagen. El único problema que veo es que algunos displays de 256 colores pueden no manejar muy bien demasiados swaps de paletas. Puedes ver lo que parecen ser imágenes en negativo, o flashes en la pantalla.

UTILIZACIÓN DE UNA PALETA GRIS LOCAL
Esto inserta una paleta compuesta de 256 niveles de gris. El color #0 es negro, el color #1 es blanco, y #2 a #255 desde casi negro a casi blanco. Puedes utilizar esto para convertir una imagen de color a escala de grises, aunque debido a este tipo de paletas, este método de conversión dejará a menudo la imagen muy oscura.

REMAPEAR LA IMAGEN A LA PALETA GLOBAL
Similar a DIFUMINAR más abajo. GIFCon simplemente reemplaza colores ausentes en la paleta global por uno parecido. REMAPEAR no es una buena opción para imagenes fotográficas.

DIFUMINAR LA IMAGEN A LA PALETA GLOBAL
Esto significa que GIFCon repintará tu imagen con colores que no están en la paleta global. Esto se puede conseguir utilizando un punto rojo y un punto naranja próximos uno al otro para obtener un raro marrón anaranjado. Esto es conocido como dithering (difuminado). Esto es mejor para imágenes como fotos. Algunos detalles se pueden perder.

USARLA COMO LA PALETA GLOBAL
Sólo obtienes esta opción una vez. Una imagen puede tener su paleta copiada dentro de la paleta global. Una vez hecho no puedes escoger otra. Por esta razón sugiero escoger primero tu paleta global, antes que hacerlo después.

UTILIZARLO COMO ES (PUEDE CAUSAR CAMBIOS DE COLOR)
Esta opción produce un GPF en GIFCon cuando voy a salvarlo. Se muy cuidadoso si intentas utilizarlo. Esto significa que cada color #0 usa ese color. Ves GIFs que trabajan como un color establecido por un número. Si un pixel es el color #197, el decodificador va a la paleta de color, encuentra el #197 y pinta el pixel de ese color. UTILIZARLO COMO ES simplemente utilizará la paleta GLOBAL. Esta opción a menudo no funciona.

CUANTIZACIÓN DE QUINCE BITS
Esta opción producirá imágenes más atractivas si tu paleta requiere más precisión. Sin embargo esto es también más lento, sobre todo en máquinas más antiguas, pero produce gradientes más suaves, y representaciones más exactas de la imágenes de colores más subidos.

Si tienes problemas con las variaciones de color que causa GIF Con para realizar desplazamientos de color, aquí va una solución. Crea un bitmap que es un compuesto de todas las piezas de la animación, un bitmap grande. Inserta esta composición en GIF Con y construye una paleta que cubra todas las variaciones en las imágenes. Después borra la imagen, e inserta la secuencia de animación remapeando a los colores disponibles.

El BLOQUE DE IMAGEN aparecerá ahora en la Lista de Bloques. Mostrará como es la imagen de grande en pixels (anchura por altura) y cuantos colores tiene la imagen.

    HEADER GIF89A Screen (640x480)
    IMAGE 503 x 86, 256 colours

Si la imagen es más ancha o más alta que tu pantalla, ajusta la pantalla lógica para soportarla. En el ejemplo previo será ajustada para leer:

    HEADER GIF89A Screen (503x86)
    IMAGE 503 x 86, 256 colours

Vamos a editar el bloque de imagen y ver que opciones tenemos. Seleccionalo en la lista y pulsa EDIT.

Puedes especificar la posició de la X y la Y de la imagen, relativas al área de PANTALLA definida en la CABECERA del Bloque de Pantalla del GIF89A. Cero (0) izquierda y cero (0) arriba quiere decir que la imagen comienza en la esquina superior izquierda de donde está colocado el GIF en tu página web. 12 en la altura significa que la imagen comienza 12 pixels más abajo. 25 a la izquierda significa que la imagen se muestra 25 pixels a la derecha. Los valores negativos no son permitidos, así si tienes una imagen que se moverá a la izquierda, comienza con un número más alto que cero y decrece el número para mostrar movimiento hacia la izquierda. Lo mismo se puede aplicar para moverla hacia arriba, valores negativos hacia arriba no están permitidos. GIFCon tiene un error que malinterpreta estos valores. Con un cero arriba y un cero a la izquierda, las imágenes son insertadas un pixel abajo y un pixel a la derecha. Netscape no comete este error.

ENTRELAZADO DE IMÁGENES

En el Bloque de Imagen puedes especificar un entrelazado de imagen. El entrelazado de imágenes en una animación puede no entrelazar parte de primer fotograma. Mi primera animación fue entrelazada para todos los fotogramas. Continuamente veía que el entrelazado ocurría en la primera imagen pero no en las siguientes. Un GIF debe ser establecido para ser SALVADO como entrelazado, para ser mostrado como entrelazado.

BLOQUE DE EXTENSIÓN DE CONTROL DE GRÁFICO

Los Bloques de Control pueden ser insertados dentro del fichero GIF. Solamente uno deberá ser insertado antes de cada imagen. Sería colocado inmediatamente antes de la imagen a controlar. Vamos a insertar un BLOQUE DE CONTROL antes de la imagen que vamos a insertar. Pincha en el bloque SOBRE la imagen (probablemente un bloque de cabecera si estás siguiendo el tutorial). Siempre que insertes, el nuevo bloque siempre aparecerá justo debajo del que está sobreiluminado en la lista actual de bloques . Pincha INSERT, escoge CONTROL.

    
    HEADER GIF89A Screen (503x86)
    CONTROL
    IMAGE 503 x 86, 256 colores

Transparencia
Ahora puedes especificar un color para volverlo transparente. Pincha la opción de transparencia. El color de transparencia por defecto es cero (normalmente negro). Pinchando sobre un color puedes ver la paleta actual asociada con esta imagen. Selecciona el color que será transparente. Si ves múltiples instancias del color que quieres (esto sucede a menudo con el blanco) escoge su primer instancia en el mapa (leyendo de izquierda a derecha y hacia abajo). En la versión 1.0F y posteriores proporciona una herramienta de cuentagotas. Con esto puedes señalar el color que quieres para hacerlo transparente. Esto es mucho más fácil. Deberías usar el botón VIEW para verificar que la transparencia ha tenido el efecto deseado. Solamente un color puede ser transparente por imagen.

Debes insertar un bloque de control con transparencia antes de cada imagen para obtener una animación con un fondo transparente. Los bloques de control sólo afectan a la primera imagen que le sigue. Si tienes un fondo HTML definido, debes tener un bloque de control antes de la PRIMERA imagen con transparencia. Incluso si no lo necesitas pónselo y asignale algún color. Si la PRIMERA imagen está precedida por un Bloque de Control CON transparencia ACTIVADA, el Navigator reconocerá el fondo definido del HTML. De otra forma utilizará el fondo establecido en los menús del Navigator. Normalmente es el gris.

Por último, para trabajar con animaciones transparentes DEBES utilizar remove by background para cada fotograma a menos que quieras una estela de imágenes previas a la izquierda de la pantalla. Si se implementa remove by previous, será una opción alternativa. Hasta entonces utiliza "background".

Hay un error en la Transparencia con fotogramas. Mi página Link Cruiser a menudo muestra el fondo blanco del logo, en vez de mostrar de forma transparente la imagen JPeG del fondo. Esto solamente sucede en ejemplo. Es un problema de la beta6.

Espera por la Entrada de Usuario
Esto normalmente causará una parada que esperará por una entrada de usuario (o un tiempo de espera) antes de proceder. Netscape ignora esto.

Espera (Delay)
Esta espera está medida erroneamente en segundos por GIFCon antes de la versión 1.0G. Debería ser 1/100 centésimas. Esto hace imposible comprobar esperas en las primeras versiones de GIFCon. Consigue 1.0G de la página Alchemy Mindworks. Netscape maneja la sincronización de esta manera, muestra la IMAGEN, espera el tiempo deseado y procede a la eliminación. El siguiente bloque de control o de imagen tiene lugar. Esto es de acuerdo a las especificaciones GIF. La estrella girará sobre 12 segundos. La imagen posterior ocurre debido a que la eliminación es realizada a nada. (ver más abajo).

GIF Construction Set resolvió el problema de sincronización pero introdujo un serio problema para soportar el looping. Cuando ves una animación en el GIFCon no puedes interrumpir el renderizado de un fotograma. Esto es, cuando dibuja un fotograma ignora cualquier entrada. Durante la espera puedes pulsar ESCape para parar una animación. Si implementas una animación SIN esperas, NO LO EJECUTES EN EL GIF Con 1.0G. Si tienes un loop en él, nunca podrás pararlo. Tendrás que pulsar Control-Alt-Supr y rebotar el ordenador.

Netscape 2.0 tiene algunos problemas con esto. Beta3 esperará cualquier tiempo de espera en un GIF. Beta4 hasta la última versión para Windows contiene un error que impide que el GIF sea mostrado más rápido de 34/100 centésimas entre imágenes. También si tienes una espera larga, como dos segundos, el botón de STOP se difuminará y Netscape dejará de tomar tiempo de procesador para mostrar el GIF. Cuando el período de espera es elevado, el botón de STOP está disponible otra vez, y Netscape comienza a ejecutar el resto del GIF. Aunque esto no es un error, te impide parar la ejecución de la animación mientras está parada.

Remove by
Esto determina lo que se hace con la IMAGEN después del tiempo de espera o de la entrada de usuario. Hay cuatro acciones:

Nada - No hace nada. Cuando sobrescribes el fotograma completo con el siguiente fotograma es la mejor y más rápida elección. "Nada se ha hecho con la imagen".

Dejarlo Como Es - Es lo mismo que Nada. Bajo otras circunstancias estas dos opciones pueden ser tratadas de forma diferente.

Imagen Previa - Se supone que se restaura la imagen a la forma que tenía antes de que la imagen fuera colocada. Netscape no soporta esto todavía (2.0beta5). Por ahora es lo mismo que Nada. Puedes emular esto restaurando el área borrada con pequeños "trozos" de la imagen original.

Background - Pinta el fondo del browser Netscape sobre el área de la imagen. Este es normalmente gris. Se establece en el Menú del Navigator bajo OPTIONS, GENERAL PREFERENCES, COLORS. Especificas tu fondo definido en HTML o COLOR DE FONDO que será usado. Bien, no es muy convencional, pero la primera imagen necesita estar precedida por un bloque de CONTROL con la transparencia activada (cualquier color, no importa). Entonces el HTML pone el color o imagen de fondo que será pintada sobre el área de la imagen en el proceso de eliminación. Utiliza esto con animaciones transparentes.

Creando Un Flujo de Imágenes

Ok, has insertado tu primera imagen, es hora de crear el "flujo de imágenes" que el GIF nos permite. Con el último BLOQUE DE IMAGEN en GIF Construction Set destacado puedes ahora insertar la segunda imagen en la serie, después la tercera, la cuarta, la quinta, etc. Como esto...

    HEADER GIF89A Screen (503x86)   <- Check width and height
    CONTROL
    IMAGE 503 x 86, 256 colours
    IMAGE 502 x 86, 256 colours
    IMAGE 499 x 86, 256 colours
    IMAGE 501 x 89, 256 colours     <- Note height (89)
    IMAGE 504 x 88, 256 colours     <- Note width (504)

Observa que las imágenes de ejemplo que he utilizado están cambiando ligeramente de forma. La imagen #4 es la imagen más alta con 89 pixels, y la imagen #5 es la más ancha con 504 pixels. Ambas dimensiones exceden nuestra pantalla (503x86) así que necesitamos incrementar la Pantalla Lógica en la cabecera de acuerdo con esto o arriesgarnos a un GPF en Netscape. Si necesitas posicionar cada imagen dentro de la pantalla lógica, necesitarás EDITAR cada imagen. Si, es aburrido, pero si lo necesitas, lo necesitas. Si estas imágenes tienen un color transparente, necesitarás insertar un bloque de Control antes de todas y cada una. Ahora, aquí tenemos un pequeño corte. A menos que necesites alterar la sincronización de las imágenes individuales, probablemente tendrás una serie de bloques de control idénticos: mismo color transparente, mismo tiempo de espera, y mismo removal by. Si estableces un Bloque de Control, puedes EDITARLO/COPIARLO en el clipboard. Después pincha sobre la primera imagen (así la siguiente se insertará en el punto correcto). Ahora con tus manos en el teclado... [ALT]+E, P, [flecha abajo]... y repítelo. Puedes poner esto en una macro si tienes una realmente larga con un montón de imágenes. Estos tres golpes de teclado, insertarán el bloque de Control copiado, después de insertado, el Bloque de Control será realzado. La flecha hacia abajo realzará la imagen siguiente. Este es un punto perfecto para insertar el siguiente bloque de Control. Una vez que obtienes el ritmo, puedes insertar veinte o treinta de estas en un instante. Borrarlas puede hacerse del mismo modo. Lo que tendrás al final será algo similar a esto...

    HEADER GIF89A Screen (504x89)
    LOOP                             <- 1.0b versions before 1.0G of GIFCon
    CONTROL                             APLICATION-DEFINED will show instead
    IMAGE 503 x 86, 256 colours         of LOOP.
    CONTROL
    IMAGE 502 x 86, 256 colours
    CONTROL
    IMAGE 499 x 86, 256 colours
    CONTROL
    IMAGE 501 x 89, 256 colours
    CONTROL
    IMAGE 504 x 88, 256 colours

Esto es como quedará un GIF animado cuando hayas terminado. Observa el LOOP, es lo que verás cuando el GIF esté construido para hacer el looping. Vamos con ello.


Cualquier idea, sugerencias, utilidades o ejemplos, por favor envíamelos para incluirlos en esta página.

Royal Frazier

Ir al MENÚ en la parte superior de la páginaPrevious Page Next Page