ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

MÓDULO PROFESIONAL N° 02

Desarrollo de software y gestión de base de datos.

COMPETENCIA DEL MÓDULO PROFESIONAL

Diseñar, desarrollar, administrar, gestionar e implementar productos
multimedia y aplicaciones para Internet, teniendo en cuenta los
requerimientos del cliente.

UNIDAD DIDÁCTICA

Animación de Gráficos

CAPACIDADES TERMINALES Y CRITERIOS DE EVALUACIÓN

CAPACIDAD TÉCNICA
Nº INDICADORES DE LOGRO DE LA CAPACIDAD
O ESPECÍFICA

1. Identifica las necesidades del cliente.

Desarrollar productos 2. Planifica el desarrollo de las aplicaciones animadas,

1.
gráficos animados de acuerdo a estándares establecidos.

3. Elabora aplicaciones gráficas animadas

 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

Fundamentos de la
Animación de Gráficos

N° 1

1. Introducción
La animación es un proceso utilizado para dar sensación de movimiento a imágenes o dibujos.
Para realizar animación existen numerosas técnicas que van más allá de los familiares dibujos
animados. Los cuadros se pueden generar dibujando, pintando o fotografiando los minúsculos
cambios hechos repetidamente a un modelo de la realidad o a un modelo tridimensional
virtual. También es posible animar objetos de la realidad y actores.

2. Historia
Sobre la historia de la animación grafica se puede comentar mucho, como cuando los
historiadores y los estudiosos convergen en opinar que este arte viene desarrollándose a la
par con el desarrollo artístico de los hombres.
Como punto de partida tenemos la era del Paleolítico, en donde el hombre realizaba diversos
trazos con los cuales expresaba las actividades realizadas a diario. En la cueva de Altamira
se han hallado la presencia de animales policromos tratados con estilo naturalista, entre los
que predominan los bisontes con actitudes diversas que, además, constituyen escenas que
connotan movimiento la mayoría de veces. Este es, el primer indicio de que el ser humano
tenía un gran anhelo por plasmar el movimiento. Otra muestra de este ello, es sin lugar a
duda, las grandes paredes de las tumbas decoradas, en la antigua cultura Egipcia.
Por otro lado, Miguel Ángel, el genial artista del Renacimiento, ya esbozaba en muchos de
sus dibujos diversos movimientos de labios al emitir sonidos. De este modo, y con la
posibilidad de citar varios ejemplos más, el concepto de movimiento está presente de manera
perenne en el subconsciente de los seres humanos.
A modo personal, me atrevo a decir que ha estado allí desde siempre, y creo que este gusto
por la animación está en nuestros genes. La esencia del ser humano está en crearse a sí
mismo, es nuestra naturaleza, darle movimiento a lo que pareciera estar muerto. Es una forma
de demostrar que estamos vivos y que tenemos la capacidad de trasmitirlo. Cabe resaltar,
que no podemos hablar de animación sin antes tener una referencia acerca de los aparatos
que ha desarrollado el hombre para poder lograr este cometido. A continuación daremos un
vistazo rápido a la evolución de este grandioso arte.
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

Dos de los pioneros en el desarrollo de maquinaria, que después sería usada para animación,
son Plateau y Ritter, quienes construyeron el fenaquistoscopio tras la presentación, siete años
después, del trabajo de Peter Roget (1824) The persistence of vision with regard to moving
objects (La persistencia de la visión respecto a los objetos en movimiento) en la British Royal
Society; este invento daba una ilusión de movimiento mediante dos discos giratorios. El
siguiente paso fue en 1834 con el invento de Plateau, el zootropo, desarrollado luego por
Horner. Cincuenta y tres años más tarde, Thomas Edison comenzó su investigación sobre las
películas animadas, producto de ello, dos años después, hizo el anuncio sobre el nuevo
aparato capaz de proyectar 50 pies de film en aproximadamente 13 segundos: el kinetoscopio.
Ese mismo año, George Eastman comenzaría la manufactura de rollos de película fotográfica
usando una base de nitro-celulosa.
Consecutivamente en 1895 los hermanos Lumiere, Louis y Augustine, registraron su patente
del cinematógrafo, aparato capaz de proyectar imágenes en movimiento. Uno de los inventos
que sería de gran importancia para el desarrollo del arte de la animación sería creado por
Thomas Armat, quien con la máquina que inventó, logró proyectar las películas de Edison,
este artefacto se llamó el vitascopio.
Luego de haber visto de manera rápida y sencilla el proceso creativo de quienes, con sus
teorías y artefactos, ayudaron a la creación de la animación como hoy la conocemos;
inmediatamente viene a mí el cuestionamiento de saber quién fue la primera persona en
realizar una animación, por más simple que esta haya podido ser. La respuesta vino a mí al
sumergirme en mis libros y apuntes.
J. Stuart Blackton hizo la primera película animada llamada Fases humorísticas de caras
chistosas, esta fue realizada en 1906. Dos años más tarde, Emile Cohl produjo una película
mostrando figuras blancas en un fondo negro. Ese mismo año, Winsor McCay produjo una
secuencia animada usando su personaje de las tiras cómicas Little Nemo. Este es, sin lugar
a dudas, uno de las mejores animaciones del siglo. La sencillez del trazo en cada dibujo y la
historia son simplemente, espectaculares y profundas. La historia estuvo inspirada en su
propio comic Little Nemo in Slumberlan.
Sin embargo, el genio de McCay lució su más brillante creación un año más tarde, tras
presentar Gertie the Dinosaur (historia de un dinosaurio). Esta animación dejó a todos
atónitos, ya que la soltura del trazo y la inclusión de un final tan bien logrado y original, hizo
que fuera considerada como una de las piezas maestras para la animación hoy en día. Hay
además, dos hechos que hacen de esta película algo realmente único.
El primer factor es que Gertie es el primer dibujo pensado para ser proyectado sobre una
pantalla, el otro, es que logra tener interacción con su autor. Windsor McCay realizaba una
performance en el escenario donde era proyectada de película de animación; él le daba
órdenes al dinosaurio y hasta le daba de comer una manzana. Para la gente que presenciaba
aquel espectáculo, la película era, sin lugar a dudas, algo para recordar.
Como dato anecdótico, se dice que el origen de Gertie surgió de una apuesta entre McCay y
George McManus, un colega suyo. Un día ambos se dirigieron al Museo de Ciencias Naturales
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

de Londres tras ver un esqueleto de dinosaurio en una de las salas, McCay le aseguró a su
acompañante que él podría devolverle la vida y decidieron apostar una cena en ello.
Muchas personas han contribuido a que se pueda apreciar, en el écran de un televisor, una
computadora o en el cine, el arte de la animación. Luego del gran Windsor McCay, se
desarrollaron una serie de animaciones como las de Pat Salivan con El gato Félix, a mi parecer
una de las más relevantes. Es, en el año 1915, que Earl Hurd desarrolla la animación de
celdas, avance que permitiría la evolución de la animación hasta ese entonces conocida.
La animación por celdas les daba a los animadores la posibilidad de poder reducir el tiempo
que invertían en redibujar los objetos perennes en un cuadro, y así dibujarlos solo una vez.
Es decir, si en un encuadre se necesita la imagen de un pato dentro de un estanque, el
animador procedía a dibujar el paisaje del estanque en una celda y al pato en otra.
Posteriormente, el animador simplemente, dibujaba los movimientos del pato para ser
animados luego.
Ya a partir de 1920, las técnicas de animación empezaron a cambiar, y, evolucionaron para
buscar mejoras en el desarrollo y el realismo de cada una de ellas. Un ejemplo perfecto de
estas búsquedas son los intentos y avances logrados por los hermanos Fleischer, David y
Max, quienes desarrollaron muchas de las técnicas que, luego retomaría Walt Disney para
alcanzar el éxito que goza hasta nuestros días. Sobre estos hermanos, hablaremos más
adelante, ya que su aporte ha sido descomunal en cuanto a color y sonido, y lastimosamente,
nunca han gozado del reconocimiento que se merecen.
Es casi imposible hablar de animación sin mencionar a Walt Disney, pero, como sé que existe
una cantidad bibliografía acerca de él y sus películas, simplemente me limitaré a nombrarlo y
a citarlo como una de los hombres que con sus películas contribuyeron al reconocimiento de
la animación como un arte maravilloso y tan completo como cualquier otro.
A partir de allí, la búsqueda por el realismo, la sonoridad, y sobre todo, el contenido de las
películas de animación ha ido variando. Cada autor, cada animador, ha ido contribuyendo con
el desarrollo de este arte, hasta el desarrollo de tecnología informática que permitiera la
animación en computadora. Muchos han sido los pioneros, acerca de estos hablaremos más
adelante, así como de las películas que han ido apareciendo, el software que han empleado,
el equipo técnico que involucra su creación, las técnicas que existen en la animación y, en
general, de las inquietudes que puedan surgir en el camino.
Finalmente, me despido esperando que este pequeño recorrido por el campo de la animación
desde sus inicios, te hayan podido brindar la oportunidad de ampliar tus horizontes y haya
incrementado tu interés por conocer más acerca de este arte tan hermoso y poco conocido
en profundidad. Recuerda que, un animador, no sólo debe saber maniobrar su técnica, sino
también, conocer a los que la desarrollaron y la crearon para ti.
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

3. Formatos de Archivos de Imagen

Los formatos de archivo de imagen están estandarizados para organizar y almacenar
imágenes digitales. Un formato de archivo de imagen puede almacenar datos en un formato
sin comprimir, en un formato comprimido (con pérdida o sin pérdida) o en formato de
vector. Los archivos de imagen están compuestas de datos digitales en uno de estos formatos
de tal manera que los datos puedan ser escalados para su uso en una pantalla de
computadora o en una impresora.
La escalarización convierte los datos de la imagen en píxeles. Cada píxel tiene un número de
bits para designar su color (y en algunos formatos, su transparencia). Escalar un archivo de
imagen para un dispositivo específico toma en cuenta el número de bits por píxel (la
profundidad de color) que el dispositivo está diseñado para manejar.
Hay diversos formatos de archivo que permiten representar animaciones en un ordenador o a
través de Internet. Actualmente hay tres formatos punteros: GIF, Shockwave Flash y SVG.
SVG es tratado en profundidad más adelante, por lo que a continuación detallaremos
brevemente los otros dos, además de mencionar algún otro.

Figura: Formatos de Imagen

3.1. El BMP (Windows bitmap)

Maneja archivos gráficos dentro del Windows de Microsoft OS. Típicamente, BMP los archivos
son uncompressed, y por tanto grandes y lossless; su ventaja es su estructura sencilla y
aceptación ancha en muchos programas.

3.2. JPEG (Joint Photographic Experts Group)

Es un método de compresión disipado; Las imágenes comprimidas en JPG son normalmente

almacenadas en el formato de archivo JFIF(JPEG File Interchange Format ).
La extensión de los nombres de archivo de los JPG/JFIF es JPG o JPEG. Casi todas las cámaras
digitales toman imágenes en formato JPG/TFIF, el cual soporta imágenes de 8 bits en escala de
grises e imágenes de color de 24 bits (ocho bits para cada tono RGB(Rojo, Verde y Azul)). El
formato JPEG aplica compresión con pérdida a imágenes, los cuales pueden resultar en una
reducción significativa del tamaño del archivo. Las aplicaciones pueden determinar el grado de
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

compresión para aplicar, y la cantidad de compresión afecta la calidad visual del resultado. Cuando
no es demasiado grande, la compresión no afecta drásticamente la calidad de la imagen, pero los
archivos JPEG padecen degradación generacional cuando son repetidamente editados y
guardados. (JPEG también proporciona imágenes de compresión sin pérdida, pero esta versión
no recibe soporte)

3.3. GIF (Graphic Interchange Format)

Creado por la empresa Compuserve en junio de 1987 con objeto de poder transferir imágenes
de hasta 256 colores (8 bits) a través de líneas 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 compresión sin pérdidas basada en la reducción del
número 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
expiro´ en Estados Unidos dicha patente. Muchos llamaron a este día el Día de la liberación
del GIF.
La limitación principal que tiene el GIF es que tan solo puede manejar 256 colores. Por tanto
una imagen con más colores debe reelaborarse con una trama de los colores disponibles,
pudiendo perder calidad.
La variante GIF89a permite la creación de imágenes transparentes, de animaciones y de
imágenes 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 imágenes 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 número de veces (loop) o repetirse indefinidamente (loop
infinito). 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 animación es muy grande, larga o compleja, el tamaño del fichero resultante
puede ser excesivo para que sea práctico. Uno de los usos más corrientes de las animaciones
GIF en las páginas web es la creación de los típicos banners publicitarios.

3.4. SWF (Shockwave Flash)

SWF es un formato de archivo de gráficos vectoriales creado por la empresa Macromedia

(actualmente Adobe Systems). Los archivos SWF pueden ser creados por el Adobe Animate,
(antes Adobe Flash) aunque hay otras aplicaciones que también lo permiten. Básicamente es
un formato vectorial, pero también admite bitmaps con posibilidades de animación. Necesita
para ser ejecutado el plugin llamado Adobe Flash Player, el cual permite mostrar las
animaciones vectoriales que contienen los ficheros. Los archivos SWF son compilados y
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

comprimidos a partir de los archivos editables (en formato FLA) con los que el usuario trabaja
en Adobe Animate. Las versiones más modernas incorporan, además de imágenes, audio y
vídeo mediano (formato Flash Video, FLV) y multitud de formas diferentes de interacción con
el usuario. Su posibilidad de uso en las páginas web y su compatibilidad con los navegadores
más comunes (previa instalación del plugin necesario), ha revolucionado el mundo de la web,
ya que es posible ofrecer a los usuarios unos gráficos 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. Además, los ficheros SWF pueden ser
visualizados independientemente de la web, en una ventana propia, permitiendo la
construcción de verdaderas aplicaciones multimedia interactivas, como juegos,
presentaciones, etc. Ya que admite también programación mediante el lenguaje ActioScript o
Canvas.
El formato SWF produce ficheros de un tamaño verdaderamente reducido, sobre todo si las
imágenes 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 vídeos,
pudiendo programarse acciones de respuesta a eventos y animaciones mediante código de
script. Su principal desventaja es que obliga al usuario a tener que instalar un software
adicional, aunque este sea gratuito.
Los archivos SWF suelen ser suficientemente pequeños para ser publicados en la World Wide
Web en forma de animaciones o applets con diversas funciones y grados de interactividad.

3.5. El PNG (Gráfico de Red Portátil)

Formato de archivo estuvo creado como libre, alternativa de fuente abierta a GIF (es ahora
patente libre). El PNG formato de archivo apoya ocho-mordió paletted imágenes (con
transparencia opcional para todos colores de paleta) y 24-mordió truecolor (16 millones de
colores) o 48-mordió truecolor con y sin canal de alfa - mientras GIF soporta sólo 256 colores
y un color transparente.
PNG puede almacenar gamma y chromaticity dato para el color mejorado que empareja en
plataformas heterogéneas.
PNG Está diseñado para trabajar bien en a aplicaciones de visionado on-line les gustan
navegadores de web y puede ser plenamente streamed con una opción de exhibición
progresiva. PNG Es robusto, proporcionando ambas integridad de archivo llena que
comprueba y detección sencilla de errores de transmisión común.
Los formatos animados derivaron de PNG es MNG y APNG. El último se mantiene con Mozilla
Firefox y Ópera y es atrás compatible con PNG.

3.6. 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 gestión de la animación, porque se empleaba
poco esta capacidad del formato GIF en ese tiempo. Sin embargo, se desarrolló´ rápidamente
un formato que soportaba la animación, el formato MNG. La estructura de los ficheros de
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

formato MNG es básicamente idéntica a la de los ficheros PNG, difiriendo solamente en la

firma y en la utilización de unidades de información discretas que proporcionan una gran
variedad de dispositivos de animación. Las imágenes utilizadas en la animación se almacenan
en el fichero MNG como una encapsulación de imágenes con formato PNG. MNG no logró
gran penetración, quizás entre otras cosas por encontrarse con la competencia difícil de
superar de un producto que ganara auge progresivo como lo es el formato SWF Flash.

3.7. APNG (Animated PNG Format)

Es un nuevo formato para animaciones gráficas que esta en pleno desarrollo. Como su
nombre indica está basado en el formato PNG. Las imágenes 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 código. Al ser un formato relativamente
nuevo, aún no está aceptado del todo por los estándares 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 compresión, y sin pérdida de calidad al igual que GIF.
Además de soporta una profundidad de color de hasta 16,7 millones de colores (frente a los
256 colores como máximo de GIF), y permite la definición de 256 niveles de transparencia.

4. Fundamentos básicos de animación gráfica

4.1. FUNCIONALIDAD DE LOS BITs

Cantidad de
Estado/
# de bits posibles Ejemplos
Representación
alternativas
0
1 21=2
1
00
01
2 22=4
10
11
000
001
010
011
3 23=8
100
101
110
111
4 … 24=16
5 … 25=32
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

8 … 8 bit de colores=
28=256
256 colores

16 … 216=1024

4.2. COLORES

Los colores se representan en codificación de los colores primarios ROJO, VERDE Y AZUL,
que en ingles son RGB(Red – Green – Blue), también podemos encontrar en códigos
HEXADECIMALES, a continuación una tabla resumen.
1. Señale 5 colores en los siguientes parámetros Name(ingles), RGB() y HexadecimalCode

COLOR NAME HEXADECIMALCODE RGB

WHITE #FFFFFF RGB(255, 255, 255)

BLACK #000000 RGB(0, 0, 0)

RED #FF0000 RGB(255, 0, 0)

YELLOW #FFFF00 RGB(255, 255, 0)

GREEN #008000 RGB(0, 128, 0)

BLUE #0000FF RGB(0, 0, 255)

PURPLE #800080 RGB(128, 0, 128))

AQUA RGB(0,255,255)
FUCHSIA RGB(255,0,255)
SILVER RGB(192,192,192)

Hexadecimal Code
000000
FF0000
00FF00
0000FF

FFFFFF
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

4.2. Tamaños de archivos de imagen

El tamaño de los archivos de imagen ráster es directamente proporcional con el número de

píxeles en la imagen y la profundidad de color (bits por píxel). Sin embargo, las imágenes
pueden ser comprimidas de muchas maneras. Un algoritmo de compresión puede almacenar
una representación exacta o una aproximación de la imagen original en un menor número
de bytes que pueden volver a ser expandidos de nuevo a su forma sin comprimir con un
correspondiente algoritmo de descompresión. Imágenes con el mismo número de píxeles y
profundidad de color pueden tener tamaños de archivo comprimidos muy diferentes.
Por ejemplo:
Una imagen de 640 × 480 píxeles con profundidad de 24 bits ocuparía casi un mega byte de
espacio:
640 × 480 × 24 = 7,372,800 bits = 921,600 bytes = 900 KB

4.2. Compresión de archivo de la imagen

Hay dos tipos de algoritmos de compresión de imagen: sin pérdida (lossless) y con pérdida.
Los algoritmos de compresión sin pérdida reducen el tamaño de archivo mientras preservan
una copia perfecta del original (imagen sin comprimir). La compresión sin pérdida
generalmente, pero no siempre, genera archivos más grandes que la compresión con pérdida.
La compresión sin pérdida tendría que soler evitar acumulando etapas de re-compresión
cuándo editando imágenes.
Los algoritmos de compresión con pérdida preservan una representación de la imagen
original sin comprimir que puede parecer copia perfecta, sin embargo, no lo es. A menudo la
compresión disipada es capaz de conseguir medidas de archivo más pequeñas que la
compresión sin pérdidas. La mayoría de algoritmos de compresión disipados dejan para
compresión variable que calidad de imagen de los comercios para medida de archivo.
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

Figura: Representación gráfica del pixel

4.3. Gráficos Vectoriales

Los gráficos vectoriales son gráficos definidos mediante las ecuaciones matemáticas de
diversas figuras geométricas (elipses, círculos, polilíneas,...).

Ventajas
Este tipo de gráficos presentan una serie de ventajas frente a las imágenes rasterizadas o
mapas de bits:
En general necesitan un menor espacio para su almacenamiento en disco. Dado que no se
necesita guardar toda la información de cada píxel, sino únicamente datos sobre los
parámetros que definen la ecuación matemática, color, grosor y demás características de las
líneas se precisa generalmente un menor número de bits. Como consecuencia de la forma de
generar los gráficos vectoriales, dos gráficos con la misma información vectorial ocuparían el
mismo espacio en disco aunque poseyesen diferentes dimensiones de la imagen.
Pueden ser escaladas sin perder calidad en su representación. Se podrían aumentar o
disminuir indefinidamente sin apreciarse una pérdida de calidad. Esta característica no se
cumple para los mapas de bits donde se llega a apreciar como los gráficos no son escalados
con exactitud respecto al original.

Desventajas
Como contrapartida se tienen las siguientes desventajas:
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

No se pueden utilizar para la representación de imágenes tomadas en la naturaleza mediante

fotografías o video, dado que todos los dispositivos de toma de imágenes o video trabajan con
imágenes rasterizadas.
Para su visualización o impresión final se debe realizar una conversión al formato rasterizado.
Este es debido a que tanto la mayoría de monitores como impresoras necesitan trabajar con
imágenes representadas mediante mapa de bits.
Dadas estas ventajas y desventajas del formato de imagen vectorial frente a las imágenes
rasterizadas, algunos formatos son capaces de usar ambos formatos conjuntamente.

4.4. SVG (Scalable Vector Graphics)

SVG es un lenguaje para describir gráficos bidimensionales, tanto estáticos como dinámicos,
en formato XML.
SVG es el formato recomendado por la organización W3C (Word Wide Web Consortium) como
formato gráfico. Además es destacable el gran número 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:

 Móviles: para su implementación en tecnología móvil se ha desarrollado el estándar

SVG Tiny. Este estándar ha sido adoptado por los móviles de tercera generación y es
usado en los MMS (Multimedia Messaging System).
 Impresión: posee una especificación, SVG Print Specification, para la impresión y que
se ha sido autorizado por empresas como HP, Canon, Adobe y Core.
 Aplicaciones web: SVG puede ser usado para la creación de animaciones gráficas y
de interfaz con el usuario.
 Mapas y sistemas de información geográficos
 Sistemas con recursos limitados
 Permite la creación de animaciones en escala de tiempo. W3C recomienda hacer uso
del estándar SMIL (Synchronized Multimedia Integration Language) pero se pueden
realizar animaciones con el formato ECMAScript, CSS Animation y elementos de
animación interna ya integrados en el formato SVG.
Destaca además el gran número de ventajas de SVG dado su desarrollo sobre el estándar
XML, permitiendo su adaptación a formatos propietarios y gran integrabilidad en múltiples
aplicaciones.
SVG permite el uso de tres tipos de objetos:

 Formas gráficas vectoriales

 Imágenes de mapas de bits
 Texto: permite textos editables y fuentes TrueType y Type1.
SVG trabaja con 24 bits de profundidad del color, soportando múltiples estándares: RGB,
CMYK,...
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

SVG necesita de un plugin 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 visualización de gráficos SVG, entre los que destaca el plug-in
desarrollado por Adobe Systems.

Comparación entre SVG y SWF

Llegados a este punto se hace interesante comparar entre sí los formatos basados en gráficos
vectoriales más usados actualmente en la animación gráfica. Para ello hemos tenido en
cuenta los aspectos siguientes: características generales, prestaciones gráficas,
comportamiento dinámico e integración de recursos multimedia. Dicha comparación queda
reflejada en la siguiente tabla:

CONCEPTO SWF SVG

Tipo de especificación Formato propietario Especificación libre

Tipo de formato Binario Texto ASCII

Formatos FLA, SWF SVG

Compacidad Elevada Muy elevada

Varios (no es
Herramienta de autor Macromedia Flash
imprescindible)
Modo de visualización Plug-in Plug-in

Streaming Si No

Estructuración del gráfico Capas Z index según SVGDOM

Codificación de colores 24 bit RGB + 8 bit Alpha sRGB (sintaxis CSS2)

Transparencia 8-bit Propiedad fil-opacity

Arquitectura para la Objetos de animación
Línea de tiempo
animación (basados en SMIL)
Fotograma a fotograma o
Tipos de animación Fotograma a fotograma
interpolada
Automática o controlada por Automática o controlada por
Gestión de la animación
eventos eventos
Integración de recursos
Si No
multimedia
Cuadro 1: Comparación entre SWF y SVG
La diferencia fundamental entre los dos formatos radica en el procedimiento de creación y
edición. Mientras que SWF es generado a través de Macromedia Flash, una potente
herramienta de autor, SVG carece de entornos de desarrollo con prestaciones similares,
aunque la situación está cambiando en los últimos meses gracias a la aparición de
herramientas como Inkscape o Sketsa. Sin embargo, el formato tipo texto de SVG favorece
su edición con un sencillo procesador de textos, independizando su creación de sistemas
operativos y plataformas.
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

En ambos casos, la visualización se lleva a cabo a través de un plug-in del navegador, pero
mientras Macromedia Flash Player está instalado por defecto en los browsers más difundidos,
como Microsoft Internet Explorer, los plug-ins de SVG están parcialmente implementados, no
se distribuyen de forma conjunta con el navegador, y su difusión es por tanto mucho menor.
Es significativo señalar que muchos de los parámetros de SVG se definen mediante
expresiones heredadas de la especificación CSS (Cascading Style Sheets), utilizada junto con
HTML para la creación de páginas Web con hojas de estilo.
Una de las grandes ventajas de SVG es la cuidada atención que presta a procedimientos más
propios de la manipulación de imágenes bitmap, como las máscaras, los filtros o la
transparencia, en lo que puede considerarse como un intento promovido por el consorcio W3C
de crear una especificación que reúna lo mejor de ambas tecnologías. 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 más, con lo que tanto la flexibilidad como el rango de
variación alcanzados se incrementan notablemente.

5. Técnicas de animación

5.1. Animación en volumen

La animación en volumen o animación fotograma a fotograma (a veces

mencionada mediante su término en inglés: stop motion) es una técnica de animación
que consiste en aparentar el movimiento de objetos estáticos por medio de una serie
de imágenes fijas sucesivas. Stop motion es unanglicismo que empezó a penetrar
en el uso de la lengua española en tiempos relativamente recientes. Tradicionalmente,
en lengua española, se ha designado esta técnica con muchos términos diferentes,
como por ejemplo «animación en volumen», «parada de imagen», «paso de
manivela», «animación foto a foto», «animación fotograma por fotograma» o
«animación cuadro por cuadro».
En general son las que no entran ni en la categoría del dibujo animado ni en la de la animación
por ordenador; esto es, que no fueron dibujadas o pintadas ni a mano ni por ordenador, sino
que fueron creadas tomando imágenes de la realidad. Así pues, el fotograma a fotograma se
utiliza para producir movimientos animados de cualquier objeto, ya sea rígido o maleable,
como por ejemplo juguetes, bloques de construcción, muñecos articulados o personajes
creados con plastilina.
Podría también definirse esta técnica como animación artesanal, debido a que se
construye el movimiento manipulando un objeto, con las propias manos, fotograma a
fotograma. Se trabajan diversos materiales (plastilina, arena, recortes de papel, tizas
sobre suelos y muros, etc.) de manera progresiva, adelante, sin posibilidad alguna de
retroceso.
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

5.2. Dibujo animado

También conocido como caricatura o dibujito o con el anglicismo cartoon, es una categoría
dentro de las obras de animación que se refiere a aquellas secuencias visuales realizadas en
dos dimensiones. Se consiguen dibujando secuencialmente cada fotograma que componen a
las obras, generando una secuencia y representación de imágenes en movimiento. Es la
técnica de animación más antigua y conocida, denominada como animación 2D,animación
tradicional o animación clásica.
Los dibujos animados, encajados dentro de la animación clásica, recogerían la animación total
(cuadro a cuadro), por fases y por transparencias, aunque popularmente el término también
recoge técnicas de animación de stopmotion y similares.

5.3. Pixilación

Es una variante en la técnica de stop motion en la que no se usan muñecos o marionetas sino
seres humanos. Los actores son usados como sujetos fotograma a fotograma en una película
animada a través de mantener una pose mientras uno o más frames son tomados y cambiando
sutilmente la pose antes del siguiente frame o frames. El actor se transforma así en una marioneta
humana. Esta técnica es comúnmente usada al incluir actores y personajes animados en una
misma película, como sucede en The Secret Adventures of Tom Thumb de los hermanos Bolex.
El término se debe al animador Grant Munro, quien tituló con ese nombre a su película
experimental Pixilation, disponible en su colección de DVD "Cut Up – The Films of Grant Munro".

5.4. Animación por computadora

También llamada animación digital, es la técnica que consiste en crear imágenes en movimiento
mediante el uso de una computadora. Cada vez más los gráficos creados son en 3D, aunque los
gráficos en 2D todavía se siguen usando. Los diseños se elaboran con la ayuda de programas de
diseño, modelado y por último renderizado.
Para crear la ilusión del movimiento, una imagen se muestra en pantalla sustituyéndose
rápidamente por una nueva imagen en un fotograma diferente. Esta técnica es idéntica a la manera
en que se logra la ilusión de movimiento en las películas y en la televisión.
Para las animaciones 3D, los objetos se modelan en la computadora (modelado) y las figuras 3D
se unen con un esqueleto virtual (huesos). Para crear una cara en 3D se modela el cuerpo, ojos,
boca, etc. del personaje y posteriormente se animan con controladores de animación. Finalmente,
se renderiza la animación.
Las animaciones para transmitir vía Internet en anchos de banda limitados (ejem. 2D Flash, X3D)
utilizan programas en el ordenador del usuario para renderizar en tiempo real la animación como
una alternativa para la transmisión y para animaciones precargadas para enlaces de alta
velocidad.
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

Preguntas de repaso
1. ¿A quiénes pertenecen las primeras pinturas de la civilización y en que época
aproximadamente fueron elaboradas?
2. ¿Conoce de alguna pintura rupestre de su distrito? ¿Donde se ubica y de qué año data?
3. ¿Cuál es el dibujo animado más antiguo que le gustaba de niño? ¿Quién fue su productor?
¿Cuál era la técnica que se empleaba para realizarlo?
4. Elabore un resumen en un organizador para comparar los principales formatos de archivos
utilizados actualmente.
5. Se tiene una imagen de 300x200 px a 8 bit de profundidad de color. Calcular el tamaño
del archivo en MB.
6. Elabore un resumen de los gráficos vectoriales.
7. En una hoja cuadricula (donde cada cuadrito representa un pixel), en unos 50x30 px,
dibuje una figura de tu cartoon preferido con un mínimo de 8 colores.
8. Según la compresión de archivos de imagen a que tipo corresponde los archivos SVG,
explique.
9. Señale 5 colores en los siguientes parámetros Name(ingles), RGB() y HexadecimalCode
10. ¿Qué tipo de técnica de animación utiliza Adobe Animate CC?, explique

Conceptos básicos (Glosario)

Fotograma
Pixel
Bit
Renderizar
Bitmap
Grafico Vectorial
Streaming
 ANIMACIÓN DE GRÁFICOS

• Prof. Rousbel HUAMAN MARTINEZ

Evaluación

1. Se tiene una imagen de 400x200 px a 16 bit de profundidad de color. Calcular el

tamaño del archivo en MB.
2. ¿Cuántos colores se puede direccionar con 8 bits?
3. Una diferencia entre SWF y SVG es el tamaño del archivo
4. Un gráfico vectorial de 400 x 300 px a 24 bit de colores es más grande que un JPGE
de 400 x 300 px a 24 bit de colores.
5. Según la compresión de archivos de imagen a que tipo corresponde los archivos SVG,
explique.
6. Señale Name(ingles), RGB() y HexadecimalCode del color FUCSIA
7. ¿Qué tipo de archivo produce Adobe Animate CC?
8. Los archivo GIF son los que presentan movimientos simples animados
9. Existe archivos PNG con movimientoS