 |
Haga click para publicitar en Alipso.com |
| Buscando Secundarios
| Universidades
| Carreras
| Test
Orientación Vocacional | Medios
| Profesores particulares
| Institutos
| Campus Material Monografias | Exámenes Secundarios | Exámenes Universitarios | Enlaces | Enviar material | Diversión Postales | Humor | Descargas | Juegos Comunidad Foros | Institucional Publicite | En su sitio | Contáctese Cursos en Buenos Aires Cursos de Informática | Cursos de apoyo al CBC | Carreras y Cursos de Diseño, Comunicación, Arte y Fotografía |
|
|
Imprimir apunte |
Recomendar a un amigo |
Recordarme el recurso |
 Descargar como PDF |
|
Más sobre este recurso: Catalogado en base de datos como: Construyendo Animaciones.: Algunas Consideraciones sobre Animaciones GIF en la Web. Haciendo una Secuencia de Animaciones. Creando un Fichero de Animación GIF89a. Agregado: 12 de SEPTIEMBRE de 2003 (Por Michel Mosse) | Palabras: 5349 | Votar! | Sin Votos | Sin comentarios | Agregar Comentario Categoría: Apuntes y Monografías > Computación > Varios > |
|
PRIMERA PARTE: Preparando Todas
las Piezas
SEGUNDA PARTE: Haciendo una
Animación Básica
TERCERA PARTE: Extensiones de
Netscape y una Guía de Problemas
NOTA: Debido
a su excesivo tamaño, el tutorial está dividido ahora en tres partes.
Algunas
Consideraciones sobre Animaciones GIF en la WebPrimera: Ten siempre presente el
ancho de banda. El ancho de banda se refiere a como los datos pasan a través de
la linea telefónica. La media de usuarios está todavía usando un modem 14.4. Tu
mejor promedio de rendimiento está sobre 1.7 kilobytes de datos ( 1.7k, 1.700
bytes) por segundo de ancho de banda. Esto asume que tienes una conexión límpia,
estás conectando al nivel de compresión óptima, no hay ruidos telefónicos, tu
PC y modem pueden ir al ritmo apropiado respecto a la proporción de datos
entrantes, tu suministrador de acceso (Netcom, UUNET, AOL, Compuserve, Prodigy)
permiten mantener la proporción de transferencia a este nivel, y la fuente de
los datos (en algún lugar en internet) igualmente podrá alimentar la salida de
datos. Si alguno de estos está ocupado tu promedio de transferencia comenzará a
caer. Algunas publicaciones sugieren que 1k por segundo es un buen indicador
para páginas Web. Esta es una medida modesta para la mayoría de los servidores
y modem que deberían poder superarla. Desafortunadamente he estado en numerosos
servicios, distintas veces, lo que mostró lo lentas que pueden ir las
conexiones. Una página Web con un total de 30k de texto y gráficos llevará 30
segundos en verse. 100k=1 minuto 40 segundos. Creo que es una buena medida para
el status de internet hoy. Muchos servidores y proveedores no mantienen un
rendimiento a niveles que igualen la capacidad de 28.8kbps de los modems (3.4k
por segundo). Este es el servicio más popular en este momento que usas, y en el
que las cosas pueden volverse más lentas. De esta manera, mi home page es
tremendamente larga. Lo admito. La animación del título principal es de 110k y
subiendo. En el mejor de los casos, mi página se carga en 35 segundos, por la
medida tratada aquí, casi dos minutos!. Con tiempo lo reduciré tanto como sea
posible.
Para conservar el ancho de
banda, haz lo que puedas para construir tu imagen de forma compacta y pequeña.
Un ejemplo reciente fue un test de animación de Arlene Gladney. La animación
mostraba un signo con un pintor trabajando en él. Las letras aparecían una a
una, deletreando el mensaje "ESTO ES FÁCIL". La animación ocupaba
58k. La salida era un gráfico al que se le añadía una letra. Una pequeña
sugerencia y un rápido cambio redujo el fichero a sólo 10k, ahorrando 48k (
también aceleró la animación sin producir paradas en esta). La sugerencia fue
simple. El primer fotograma sería el pintor y su signo. El segundo sería la
letra "T", el tercero la "H", el cuarto la "I",
etc. Editando cada bloque de imagen permite para la x y la y colocar las letras
en el lugar que les pertenece. No es muy difícil pero si efectivo para
conservar el ancho de banda. La animación resulta idéntica.
GIF permite cualquier número de
colores entre 2 y 256. El menor número de colores, el menor número de datos y
los más pequeños ficheros gráficos. No todo el software existente te permitirá
establecer los bits por pixel para los GIFs. Adobe Photoshop (Mac/Win), GIFConvertor (Mac), y
PhotoGIF (Mac), Picture Publisher (Win), Paint Shop Pro 3.0 (Win), LVewPro,
WebImage de Group42, Graphic Convertor (Mac), Fractal Painter, Painter 2.0, PhotoStudio
de ArcSoft, ImageMagick, ClarisPaintShop, PaintIt, ColorIt y ToolWorks 2.2 (SGI
Indy). DeBabelizer 1.6.5 lo hace pero solamente para imágenes
GIF87a.
Haciendo
una Secuencia de AnimacionesBien, la primera cosa que
necesitarás es una serie de imágenes que parezcan una secuencia de animación.
Como esta serie de estrellas que rotan en sentido contrario al de las agujas
del reloj:
Cada celda o fotograma de la
animación cambia un poco. Observa que cada estrella está en una
"caja" roja idéntica. Esto da un fotograma de referencia para la
animación, como el borde de una pantalla de cine. Si no estás trabajando con
una "caja" de tamaño fijo cada fotograma de tu animación disminuirá y
crecerá unos pocos pixels. Cuando lo insertes dentro de una secuencia de GIF,
el objeto se desplazará arriba, abajo, a la derecha y a la izquierda con cada
cambio de tamaño. Como esto...
(Pincha aquí para volver a verla)
Yo utilizo Corel Draw, pero tú
puedes usar el que te resulte más cómodo. Necesitarás salvar cada fotograma de
la secuencia animada en un GIF u otro formato bitmap. Si estás utilizando el
GIF Construction Set u otro programa de montaje de GIF, puedes salvar tus
animaciones en cualquier formato e importarlas cuando insertes las imágenes
dentro del último GIF. GIF
Construction Set maneja GIF, BMP, PCX, IMG, JPG, MAC, PICT y muchos más. Creo que
fuciona mejor remapeando colores que algunos de los mejores editores de
imágenes. GIFBuilder puede usar PICT y TIFF con un Applescript.
Respecto al color de fondo que
hayas elegido para establecer la "caja" en algunos browsers a pesar
de que han sido actualizados no soportan transparencias y el color transparente
será visible. Escoge un color que sea lo más parecido posible. Yo escogía a
menudo un color brillante para contrastar, lo que es más fácil de distinguir de
la paleta, solamente para ver mostrado el color llamativo en un browser más
viejo.
Además de la animación de la
estrella hay otra técnica que es un poco más difícil. La estrella funciona como
una animación basada en fotogramas dibujados en las páginas de un libro y donde
ves la animación moviendo las páginas de este. Constantemente se reemplaza toda
la "caja".Pero que ocurre si queremos mostrar una bola rebotando
dentro de una caja grande?. Si redibujamos la caja contra la que rebota estaríamos
desperdiciando un valioso ancho de banda en traerlo. No sería mejor que
dibujáramos la bola moviéndose alrededor de la caja? :->
"Pincha"
en las imágenes para volver a mostrarlas. Desafortunadamente
Netscape no soporta esto todavía. La imagen de la izquierda utiliza el Remove
By Previous Image. La de la derecha Remove By Background. Como puedes ver, la
imagen derecha de la pelota se reemplaza por el fondo de la p´gina HTML. Esto
le da el efecto de un borrador. La imagen de la izquierda debería haber tenido
el efecto de una pelota rebotando en una caja, pero Netscape no soporta Remove
By Previous Image. La imagen previa restauraría el fondo de la imagen a la
forma que tenía antes de que la pelota fuera pintada. Coloqué el último
fotograma de la pelota lejos del límite inferior de la caja. Esta pelota est´a
fuera del límite del GIF, de este modo, como ha sido colocado fuera de la
pantalla, no se muestra.
Pero no todo está perdido. Hay
un camino para hacer la animación superior, con un poco de ingenio.
La animación de la bola
rebotando tiene como primer GIF una caja. Después todos los restantes GIFs
son pelotas de 32x32 pixels.
El
mismo GIF de la pelota se reinserta una y otra vez. Yo edito cada bloque de
imagen y cambio la posición superior e izquierda de cada imagen de la pelota
para simular movimiento sobre la imagen de cada caja. Esto reducirá muchísimo
el tamaño, pero también es más trabajo. Sin embargo todavía tenemos el problema
de la estela de las pelotas negras.
Pude
reinsertar un trozo del fondo después de la aparición de cada pelota. Esto
pintaría el fondo de la caja sobre la pelota. Esto es lo que estarí haciendo la
Previous Image. Si, el parpadeo está molestando, pero puedes no tener que
pintar sobre CADA posición como hice con este ejemplo. Una forma sería tener la
imagen de la pelota incluyendo una "estela" de blanco que se pintaría
donde estaba la pelota. Una vez más, la planificación y el tiempo llegan a
hacer lo que el software todavía no puede. Esto saca también a relucir
un error en el GIF Construction Set para Windows. La
posición de las imágenes dentro del fichero están fuera por un pixel por la
parte de abajo y en otro por la derecha. Si estableces la posición en 0,0,
GIFCon lo posicionará en la 1,1. Netscape no tiene este error.
¿Cómo se vería en clientes que
no tienen Netscape?
La mayoría de los browsers que
no son Netscape solamente mostrarán el primer fotograma de la secuencia. Unos
pocos sólo mostrarán el último. Podrás construir una animación que se vea bien
en todos. Si el primer y último fotogramas son iguales se podrá ver bien en
cualquier sitio. Mi rolling star está creado de esta forma, puedes mirarlo
en la Galería. El primer y último fotograma contienen la estrella en una
posición vertical. En la animación continua, notarás que esto se muestra porque
el posicionamiento de la estrella en la posición superior derecha es una
fracción mas tarde que las otras. . Se aprecia este efecto pero la animación no
sufre demasiado. Mi animación "INTERcoNnEcTions" en la Home page, sin
embargo, parece terrible en todos excepto Netscape 2.0. La mayoría de los
browsers ven una caja negra. Otros ven las palabras "forming links.."
y nada más. Ninguna de las dos cosas es deseable. El problema del gráfico final
es fácil de solucionar. Hay que hacer un repintado total del último gráfico. El
primero sin embargo es problemático. Si incluyo la imagen completa arruinará el
efecto. Estoy esperando todavía una gran idea =-> La solución más sencilla
que conozco es una imagen en blanco, totalmente transparente como primer
fotograma. Esto dejará un espacio en blanco en vez que una monstruosidad.
Variedad
de trucos y consejosOk, no supe donde meter esto!
Si no estás haciendo el
looping a tus animaciones:
· recuerda que el
último fotograma será el final y el único que permanecerá en la pantalla.
· puedes borrar el
último fotograma completamente, haciendo que el grafico aparentemente se
desvanezca una vez que ha sido mostrado.
Si estás haciendo looping
tus animaciones:
· El primer
fotograma será el que se presente. La mayoría de los browsers mostrarán esto
como un GIF estático.
¿Quieres desvanecer una imagen?
Una manera fácil cargar la imagen en un editor de bitmap y con la herramienta
de spray, como la rudimentaria de Paintbrush. Escoge la opción fuerte, sin
transparencia. Si quieres pintar puntos de forma aleatoria de un color
específico escoge el color que quieres que sea transparente, pinta algunos
puntos aleatorios sobre la imagen. Sálvalo como fotograma. Pinta algunos más.
Sálvalo como fotograma. Continúa hasta que no quede nada de la imagen. Cuando
se crea la secuencia en el GIF parecerá que se está desintegrando o, de forma
inversa, materializándose. Yo utilicé esto en mi animación del EMAIL para la
materialización de la carta y la desmaterialización de la mano. Ambas son
vistosas y el proceso fue extremadamente rápido.
Intentándo idear algunas
animaciones? Steve muestra que estas animaciones que pueden ser más que
decorativas. Usa animaciones GIF para instruir a sus visitantes de la home page
como hacer juegos malabares. Hay algunas buenas aplicaciones ahí, así que se
creativo.
Me gusta crear un directorio
para cada animación y EXPORTAR y SALVAR cada fotograma de la animación dentro
de él. Si el nombre de la animación final se llama STAR.GIF nombra cada
animación STAR01, STAR02, STAR03. Yo la mayoría de las veces soy un poco vago y
las llamo S01.GIF, S02.GIF, S03.GIF.
Si buscas programas para
ayudarte a hacer animaciones, aquí hay algunas recomendaciones de otros
visitantes:
Hans Huter: Cuando estaba
creando animaciones gif en un Mac, encontré que nada podía romper la combinació
de Macromedia Director + Gifbuilder:
- simplemente anima tus sprites en el Director (conserva el escenario tanpequeño como sea posible, y el número de fotogramas por segundomuy bajo)- Después exporta los fotogramas como picts (en un nuevo directorio)- Abre Gifbuilder, arrastra la imagen dentro de la ventana de Gifbuilder- Establece las opciones y escoge construir desde el menú de archivo...- Voila!
Aunque puede no ser lo más
eficiente en cuanto a tamañ, puedes crear una animación en cuesti&oaucte;n
de minutos antes que animar cada fotograma en Photoshop, y las correcciones a
la animación pueden hacerse en pocos segundos si tienes ambos programas
abiertos...
Glenn
Steffler sugiere usar Gold Disk Animation Works Interactive, o mejor todavía,
Astound para Windows.
Fenil Patel sugiere Egor de
Sausage Software para crear la animación en la web. Está disponible para traer.
Lisa Carter sugiere lo
siguiente: Después de leer el tutorial, tengo noticias de una de las mayores
secciones de trucos y consejos para forzar a tus gifs a una única paleta de
colores -lo que puede ser un montón de trabajo, sobre todo si tus imágenes reducen
los colores de una forma no muy buena. Me gustaría recomendar enormemente una
gran utilidad, el "Dave's Targa Animator".
Contrariamente al nombre, DTA
trabaja con mucho más que Targas. Leerá y escribirá ficheros GIF, además de
TGA, BMP, TIF, FLC, FLI, PCX y otros formatos. DTA es una utilidad de linea de
comando de DOS que fue diseñada procesar un directorio lleno de imágenes
numeradas y convertirlas en una animació Autodesk -aunque las escribirá en otro
directorio y las numerará.
DTA será muy útil para
animaciones GIF porque puede leer un directorio lleno de ficheros GIF, calcular
una única y optimizada paleta de colores, y después sobreescribir el nuevo
fichero GIF con la nueva paleta optimizada- lo que será un gran ahorro de
tiempo.
DTA también puede cambiar el
tamaño de las imágenes (con anti-aliasing!), y puede hacer muchos buenos
difuminados y efectos de transición. DTA también interpola imágenes (por
ejemplo ponte en el caso de que tenís una animación con 30 fotogramas y
decidiste que era demasiado grande. DTA puede rebajarla a 15 imágenes). Tambié
hace rotaciones, y otras muchas características.
Puedes encontrar la última
versión de DTA en http://povray.org.
PRIMERA PARTE: Preparando Todas
las Piezas
SEGUNDA PARTE: Haciendo una
Animación Básica
TERCERA PARTE: Extensiones de
Netscape y una Guía de Netscape
NOTA:: Debido
a su excesivo tamaño, el tutorial está ahora dividido en tres partes.
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
UNA SEGUNDA FORMA (yo prefiero
esta) DE EMPEZAR UN FICHERO GIF
¿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
<P
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.
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.
| ||||
| X | ||||