Animacin de Grficos

Semana 1

1.

INTRODUCCIN
La animacin es un proceso utilizado para dar sensacin de movimiento a
imgenes o dibujos. Para realizar animacin existen numerosas tcnicas que van
ms all de los familiares dibujos animados. Los cuadros se pueden generar
dibujando, pintando o fotografiando los minsculos cambios hechos
repetidamente a un modelo de la realidad o a un modelo tridimensional virtual.
Tambin es posible animar objetos de la realidad y actores.
Los principales tipos de animacin que existen son:
a.

Dibujos animados.

b.

Stop-motion.- Consiste en aparentar el movimiento de objetos estticos

capturando fotografas.

c.

Pixelacin.- Variante del stop-motion, en la que los objetos animados son

autnticos objetos comunes (ni modelos ni maquetas), e incluso personas.

d.

Rotoscopa.- Se basa en dibujar directamente sobre la referencia, que

pueden ser los cuadros de la animacin de una persona real.

En los ltimos tiempos se ha introducido la informtica en la animacin grfica.

Esta acta tanto de herramienta de creacin como de medio de representacin.
2.

FORMATOS
Hay diversos formatos de archivo que permiten representar animaciones
en un ordenador o a travs de Internet. Actualmente hay tres formatos punteros:
GIF, Shockwave Flash y SVG. SVG es tratado en profundidad ms adelante, por lo
que a continuacin detallaremos brevemente los otros dos, adems de
mencionar algn otro.
2.1.

GIF (Graphic Interchange Format)

Creado por la empresa Compuserve en junio de 1987 con objeto de poder
transferir imgenes de hasta 256 colores (8 bits) a travs de lneas de datos de
modo eficaz. Actualmente existen dos versiones: GIF87a y GIF89a, creadas en
1987 y 1989 respectivamente. Este formato, en sus dos versiones, implementa una
compresin sin perdidas basada en la reduccin del nmero de colores y el uso
del algoritmo LZW (Lempel Ziv Welch), modificado, consistente en detectar las
repeticiones de ciertas secuencias de colores. Antes este algoritmo estaba
patentado por la empresa Unisys, por lo que no era libre. Sin embargo, el 20 de
junio de 2003 expir en Estados Unidos dicha patente. Muchos llamaron a este
da el Da de la liberacin del GIF.
La limitacin principal que tiene el GIF es que tan solo puede manejar 256
colores. Por tanto una imagen con ms colores debe reelaborarse con una trama
de los colores disponibles, pudiendo perder calidad.
La variante GIF89a permite la creacin de imgenes transparentes, de
1 Responsable del curso: Ing. Juan Carlos TORRES LOZANO

Animacin de Grficos

Semana 1

animaciones y de imgenes con entrelazado.

El GIF transparente se consigue gracias a que uno de los colores de la paleta
puede ajustarse a transparencia total, usando un canal alfa de 1 bit. De manera
que ese color no se ver en la pantalla, sino que se ver el fondo sobre el que
pintemos el color.
El GIF animado consiste en una serie de imgenes en formato GIF89a colocadas
secuencialmente, cada una de las cuales, conocida como frame, se muestra en
pantalla durante un intervalo de tiempo determinado. Una secuencia GIF
animada puede mostrase una sola vez, repetirse un cierto nmero de veces
(loop) o repetirse indefinidamente (loop infnito). Los GIFs animados son
soportados por todos los navegadores web, por lo que son muy indicados para
este medio, teniendo siempre en cuenta que al tratarse de un formato de mapa
de bits, si la animacin es muy grande, larga o compleja, el tamao del fichero
resultante puede ser excesivo para que sea practico. Uno de los usos ms
corrientes de las animaciones GIF en las pginas web es la creacin de los tpicos
banners publicitarios.
2.2.

SWF (Shockwave Flash)

SWF es un formato de archivo de grficos vectoriales creado por la
empresa Macromedia (actualmente Adobe Systems). Los archivos SWF pueden
ser creados por el programa Adobe Flash, aunque hay otras aplicaciones que
tambin lo permiten. Bsicamente es un formato vectorial, pero tambin admite
bitmaps. Necesita para ser ejecutado el plug-in Flash, el cual permite mostrar las
animaciones vectoriales que contienen los ficheros.
Los archivos SWF son compilados y comprimidos a partir de los archivos editables
(en formato FLA) con los que el usuario trabaja en Adobe Flash. Las versiones ms
modernas incorporan, adems de imgenes, audio y video mediano (formato
Flash Video, FLV) y multitud de formas diferentes de interaccin con el usuario. Su
posibilidad de uso en las pginas web y su compatibilidad con los navegadores
ms comunes (previa instalacin del plugin necesario), ha revolucionado el
mundo de la web, ya que es posible ofrecer a los usuarios unos graficos
vectoriales de calidad, que pueden ser escalados sin perdidas de calidad y que
permiten al usuario interactuar con ellos, as como complejas animaciones
basadas en fotogramas. Adems, los ficheros SWF pueden ser visualizados
independientemente de la web, en una ventana propia, permitiendo la
construccin de verdaderas aplicaciones multimedia interactivas, como juegos,
presentaciones, etc.
El formato SWF produce ficheros de un tamao verdaderamente reducido, sobre
todo si las imgenes que contiene son de naturaleza vectorial. Dentro de un
archivo SWF se pueden incluir elementos vectoriales y de mapa de bits, textos en
fuentes escalables, sonidos y videos, pudiendo programarse acciones de
respuesta a eventos y animaciones mediante cdigo de script. Su principal
2 Responsable del curso: Ing. Juan Carlos TORRES LOZANO

Animacin de Grficos

Semana 1

desventaja es que obliga al usuario a tener que instalar un software adicional,

aunque este sea gratuito.
2.3.

Otros formatos

2.3.1. MNG (Multiple-image Network Graphics)

Es la variante animada del formato PNG (Portable Network Graphic);
cuando comenz el desarrollo de PNG se decidi no incorporar la gestin de la
animacin, porque se empleaba poco esta capacidad del formato GIF en ese
tiempo. Sin embargo, se desarroll rpidamente un formato que soportaba la
animacin, el formato MNG. La estructura de los ficheros de formato MNG es
bsicamente idntica a la de los ficheros PNG, difiriendo solamente en la firma y
en la utilizacin de unidades de informacin discretas que proporcionan una
gran variedad de dispositivos de animacin.
Las imgenes utilizadas en la animacin se almacenan en el fichero MNG como
una encapsulacin de imgenes con formato PNG. MNG no logr gran
penetracin, quizs entre otras cosas por encontrarse con la competencia difcil
de superar de un producto que ganara auge progresivo como lo es el formato
SWF Flash.
2.3.2. APNG (Animated PNG Format)
Es un nuevo formato para animaciones graficas que est en pleno
desarrollo. Como su nombre indica est basado en el formato PNG. Las imgenes
animadas funcionan de un modo similar a las admitidas por el formato GIF. La
ventaja de APNG sobre MNG es ser menos ambicioso y permitir que sea
implementado con menos cdigo. Al ser un formato relativamente nuevo, an no
est aceptado del todo por los estndares web y es por ello que solo unos pocos
navegadores lo aceptan, por ejemplo Firefox 3.x y Opera 9.5.
Tanto MNG como APNG se aprovechan de las ventajas que tiene el formato PNG
frente al GIF. PNG permite un mayor nivel de compresin, y sin prdida de
calidad al igual que GIF. Adems de soporta una profundidad de color de hasta
16,7 millones de colores (frente a los 256 colores como mximo de GIF), y permite
la definicin de 256 niveles de transparencia.
3.

GRFICOS VECTORIALES
A continuacin se va a realizar una pequea explicacin sobre los grficos
vectoriales dado que en adelante se har un anlisis ms exhaustivo del formato
SVG.
Los grficos vectoriales son grficos definidos mediante las ecuaciones
matemticas de diversas figuras geomtricas (elipses, crculos, poli-lneas, etc.).
Este tipo de grficos presentan una serie de ventajas frente a las imgenes
rasterizadas o mapas de bits:
En general necesitan un menor espacio para su almacenamiento en
3 Responsable del curso: Ing. Juan Carlos TORRES LOZANO

Animacin de Grficos

Semana 1

disco. Dado que no se necesita guardar toda la informacin de cada

pixel, sino nicamente datos sobre los parmetros que definen la ecuacin
matemtica, color, grosor y dems caractersticas de las lneas se precisa
generalmente un menor nmero de bits. Como consecuencia de la forma
de generar los grficos vectoriales, dos grficos con la misma informacin
vectorial ocuparn el mismo espacio en disco aunque poseyesen
diferentes dimensiones de la imagen.
Pueden ser escaladas sin perder calidad en su representacin. Se podrn
aumentar o disminuir indefinidamente sin apreciarse una prdida de
calidad.
Esta caracterstica no se cumple para los mapas de bits donde se llega a
apreciar como los grficos no son escalados con exactitud respecto al original.
Como contrapartida se tienen las siguientes desventajas:
No se pueden utilizar para la representacin de imgenes tomadas en la
naturaleza mediante fotografas o video, dado que todos los dispositivos
de toma de imgenes o video trabajan con imgenes rasterizadas.
Para su visualizacin o impresin final se debe realizar una conversin al
formato rasterizado. Este es debido a que tanto la mayora de monitores
como impresoras necesitan trabajar con imgenes representadas
mediante mapa de bits.
Dadas estas ventajas y desventajas del formato de imagen vectorial frente a las
imgenes rasterizadas, algunos formatos son capaces de usar ambos formatos
conjuntamente.
4.

SVG (Scalable Vector Graphics)

SVG es un lenguaje para describir grficos bidimensionales, tanto estticos
como dinmicos, en formato XML.
SVG es el formato recomendado por la organizacin W3C (Word Wide
Web Consortium) como formato grfico. Adems es destacable el gran nmero
de empresas que colaboran en el desarrollo de SVG: Adobe, Agfa, Apple,
Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp y Sun
Microsystems.
Las aplicaciones del lenguaje son muy diversas:
Mviles: para su implementacin en tecnologa mvil se ha desarrollado el
estndar SVG Tiny. Este estndar ha sido adoptado por los mviles de
tercera generacin y es usado en los MMS (Multimedia Messaging System).
Impresin: posee una especificacin, SVG Print Specification, para la
impresin y que se ha sido autorizado por empresas como HP, Canon,
4 Responsable del curso: Ing. Juan Carlos TORRES LOZANO

Animacin de Grficos

Semana 1

Adobe y Core.
Aplicaciones web: SVG puede ser usado para la creacin de animaciones
grficas y de interfaz con el usuario.
Mapas y sistemas de informacin geogrficos
Sistemas con recursos limitados
Permite la creacin de animaciones en escala de tiempo. W3C
recomienda hacer uso del estndar SMIL (Synchronized Multimedia
Integration Language) pero se pueden realizar animaciones con el
formato ECMAScript, CSS Animation y elementos de animacin interna ya
integrados en el formato SVG.

Comparacin entre un grfico creado en formato vectorial frente a una foto real
Destaca adems el gran nmero de ventajas de SVG dado su desarrollo sobre el
estndar XML, permitiendo su adaptacin a formatos propietarios y gran
integrabilidad en mltiples aplicaciones.
SVG permite el uso de tres tipos de objetos:
Formas grficas vectoriales.
Imgenes de mapas de bits.
Texto: permite textos editables y fuentes TrueType y Type1.
SVG trabaja con 24 bits de profundidad del color, soportando mltiples
estndares: RGB, CMYK, etc.
SVG necesita de un plug-in para ser ejecutado en el navegador Internet Explorer,
aunque ya est implementado en otros navegadores como Firefox, Opera y
Safari. Hay varios plug-in desarrollados para la visualizacin de grficos SVG, entre
los que destaca el plug-in desarrollado por Adobe Systems.

5 Responsable del curso: Ing. Juan Carlos TORRES LOZANO

Animacin de Grficos

Semana 1

Grfico esttico en formato SVG

5.

Comparacin entre SVG y SWF

Llegados a este punto se hace interesante comparar entre s los formatos
basados en grficos vectoriales ms usados actualmente en la animacin
grfica. Para ello hemos tenido en cuenta los aspectos siguientes: caractersticas
generales, prestaciones grficas, comportamiento dinmico e integracin de
recursos multimedia.
La diferencia fundamental entre los dos formatos radica en el procedimiento de
creacin y edicin. Mientras que SWF es generado a travs de Macromedia
Flash, una potente herramienta de autor, SVG carece de entornos de desarrollo
con prestaciones similares, aunque la situacin est cambiando en los ltimos
meses gracias a la aparicin de herramientas como Inkscape o Sketsa. Sin
embargo, el formato tipo texto de SVG favorece su edicin con un sencillo
procesador de textos, independizando su creacin de sistemas operativos y
plataformas.
En ambos casos, la visualizacin se lleva a cabo a travs de un plug-in del
navegador, pero mientras Macromedia Flash Player est instalado por defecto
en los browsers ms difundidos, como Microsoft Internet Explorer, los plug-ins de
SVG estn parcialmente implementados, no se distribuyen de forma conjunta
con el navegador, y su difusin es por tanto mucho menor.
Es significativo sealar que muchos de los parmetros de SVG se definen
mediante expresiones heredadas de la especificacin CSS (Cascading Style
Sheets), utilizada junto con HTML para la creacin de pginas Web con hojas de
6 Responsable del curso: Ing. Juan Carlos TORRES LOZANO

Animacin de Grficos

Semana 1

estilo.
CONCEPTO

SWF

SVG

Tipo de especificacin

Formato propietario

Especificacin libre

Tipo de formato

Binario

Texto ASCII

Formatos

FLA, SWF

SVG

Compacidad

Elevada

Muy elevada

Herramienta de autor

Macromedia Flash

Varios (no es
imprescindible)

Modo de visualizacin

Plug-in

Plug-in

Streaming

Si

No

Estructuracin del
grfico

Capas

Z-index segn SVGDOM

Codificacin de colores

24 bit RGB + 8 bit Alpha

sRGB (sintaxis CSS2)

Transparencia

8-bit

Propiedad fil-opacity

Arquitectura para la
animacin

Lnea de tiempo

Objetos de animacin
(basados en SMIL)

Tipos de animacin
Gestin de la animacin
Integracin de recursos
multimedia

Fotograma a fotograma
o interpolada
Automtica o controlada
por eventos

Automtica o controlada
por eventos

Si

No

Fotograma a fotograma

Una de las grandes ventajas de SVG es la cuidada atencin que presta a

procedimientos ms propios de la manipulacin de imgenes bitmap, como las
mscaras, los filtros o la transparencia, en lo que puede considerarse como un
intento promovido por el consorcio W3C de crear una especificacin que rena
lo mejor de ambas tecnologas. En el caso de la transparencia, se observa como
mientras en Flash la propiedad radica en el propio espacio de color, en SVG se
trata de un atributo ms, con lo que tanto la flexibilidad como el rango de
variacin alcanzados se incrementan notablemente.

7 Responsable del curso: Ing. Juan Carlos TORRES LOZANO