animación en internet -...

Animaciónen Internet

Animaciónen Internet

PUOC Módulo 3: Animación en Internet 3

Índice

Etapa 1: Animación en Internet ......................................................................... 7Presentación .......................................................................................................... 7

Introducción a la animación en Internet .......................................................... 7

Elegir el medio adecuado .................................................................................... 8

Elegir un tema ........................................................................................................... 8

Ser imaginativo ......................................................................................................... 8

Planificar ................................................................................................................... 8

Vigilar el tamaño de descarga y la velocidad de visualización .................................... 9

Conocer al público objetivo ...................................................................................... 9

Elegir el medio adecuado para el mensaje ................................................................. 10

Formatos de animación en Internet .................................................................. 10

Gif animado .............................................................................................................. 10

QuickTime ................................................................................................................ 11

Shockwave ................................................................................................................ 11

Flash ......................................................................................................................... 11

DHTML (HTML Dinámico) ........................................................................................ 12

Etapa 2: Gif animado ............................................................................................ 13Introducción .......................................................................................................... 13

Menos es más ........................................................................................................ 13

Recursos ruidosos para animaciones silenciosas ............................................. 14

Tipografía ................................................................................................................. 14

Líneas dinámicas ....................................................................................................... 14

Bocadillos de texto .................................................................................................... 15

Aprovechar los inconvenientes ........................................................................... 15

Optimización ......................................................................................................... 16

Optimizar los frames ................................................................................................. 16

Imágenes transparentes ............................................................................................ 16

¿Problemas? .......................................................................................................... 16

Diferencias en la velocidad de reproducción .............................................................. 17

Problemas con las paletas .......................................................................................... 17

Etapa 3: DHTML o HTML Dinámico .................................................................... 18Introducción .......................................................................................................... 18

Pros y contras del DHTML ................................................................................... 18

Herramientas y tecnología .................................................................................. 18

Editores WYSIWYG .................................................................................................... 19

Aplicaciones de diseño bitmap ................................................................................... 19

Medios tradicionales ................................................................................................. 19

Adaptarse al medio .............................................................................................. 19

Interactividad ........................................................................................................ 20


Índice

Etapa 1: Animación en Internet ......................................................................... 7Presentación .......................................................................................................... 7

Introducción a la animación en Internet .......................................................... 7

Elegir el medio adecuado .................................................................................... 8

Elegir un tema ........................................................................................................... 8

Ser imaginativo ......................................................................................................... 8

Planificar ................................................................................................................... 8

Vigilar el tamaño de descarga y la velocidad de visualización .................................... 9

Conocer al público objetivo ...................................................................................... 9

Elegir el medio adecuado para el mensaje ................................................................. 10

Formatos de animación en Internet .................................................................. 10

Gif animado .............................................................................................................. 10

QuickTime ................................................................................................................ 11

Shockwave ................................................................................................................ 11

Flash ......................................................................................................................... 11

DHTML (HTML Dinámico) ........................................................................................ 12

Etapa 2: Gif animado ............................................................................................ 13Introducción .......................................................................................................... 13

Menos es más ........................................................................................................ 13

Recursos ruidosos para animaciones silenciosas ............................................. 14

Tipografía ................................................................................................................. 14

Líneas dinámicas ....................................................................................................... 14

Bocadillos de texto .................................................................................................... 15

Aprovechar los inconvenientes ........................................................................... 15

Optimización ......................................................................................................... 16

Optimizar los frames ................................................................................................. 16

Imágenes transparentes ............................................................................................ 16

¿Problemas? .......................................................................................................... 16

Diferencias en la velocidad de reproducción .............................................................. 17

Problemas con las paletas .......................................................................................... 17

Etapa 3: DHTML o HTML Dinámico .................................................................... 18Introducción .......................................................................................................... 18

Pros y contras del DHTML ................................................................................... 18


Editores WYSIWYG .................................................................................................... 19

Aplicaciones de diseño bitmap ................................................................................... 19

Medios tradicionales ................................................................................................. 19

Adaptarse al medio .............................................................................................. 19

Interactividad ........................................................................................................ 20

FUOC FUOC


Etapa 4: Flash ........................................................................................................ 21Introducción .......................................................................................................... 21

Pros y contras de Flash .............................................................................................. 21

Herramientas complementarias ......................................................................... 22

Para animar hay que dibujar .............................................................................. 23

Moviendo las cosas. Cut-out ................................................................................ 23

Interpolación y otras opciones de animación .................................................. 24

Optimización ......................................................................................................... 25

Puntos de vector ....................................................................................................... 25

Tipografías ................................................................................................................ 25

Imágenes bitmap ....................................................................................................... 26

Símbolos ................................................................................................................... 26

Concentrar la acción ................................................................................................. 26

Actividades ............................................................................................................ 27

Actividad 1: Animación por interpolación de forma ................................................... 27

Actividad 2: Animación por interpolación de movimiento ......................................... 39

Actividad 3: Animación fotograma a fotograma ........................................................ 52

Etapa 5: El sonido en la animación .................................................................... 66Introducción .......................................................................................................... 66

Efectos de sonido .................................................................................................. 66

Problemas con el ancho de banda ..................................................................... 67


Etapa 6: Animación y diseño ............................................................................... 69Introducción .......................................................................................................... 69

Puntos, líneas, vectores y formas ....................................................................... 69

Punto y línea ............................................................................................................. 69

Vectores .................................................................................................................... 70

Forma ....................................................................................................................... 70

Masa, espacio y luz ............................................................................................... 71

Masa ......................................................................................................................... 71

Espacio ..................................................................................................................... 71

Luz ............................................................................................................................ 71

Color, textura, movimiento y tiempo ............................................................... 72

Color ........................................................................................................................ 72

Textura ..................................................................................................................... 72

Movimiento .............................................................................................................. 73

Tiempo ..................................................................................................................... 73

Etapa 7: Los estilos de animación ¿tradicionales? .......................................... 74Introducción .......................................................................................................... 74

Cut-out .................................................................................................................... 74

Stop-motion ............................................................................................................ 75

Dibujo y pintura .................................................................................................... 75


Etapa 4: Flash ........................................................................................................ 21Introducción .......................................................................................................... 21

Pros y contras de Flash .............................................................................................. 21

Herramientas complementarias ......................................................................... 22

Para animar hay que dibujar .............................................................................. 23

Moviendo las cosas. Cut-out ................................................................................ 23

Interpolación y otras opciones de animación .................................................. 24

Optimización ......................................................................................................... 25

Puntos de vector ....................................................................................................... 25

Tipografías ................................................................................................................ 25

Imágenes bitmap ....................................................................................................... 26

Símbolos ................................................................................................................... 26

Concentrar la acción ................................................................................................. 26

Actividades ............................................................................................................ 27

Actividad 1: Animación por interpolación de forma ................................................... 27

Actividad 2: Animación por interpolación de movimiento ......................................... 39

Actividad 3: Animación fotograma a fotograma ........................................................ 52

Etapa 5: El sonido en la animación .................................................................... 66Introducción .......................................................................................................... 66

Efectos de sonido .................................................................................................. 66

Problemas con el ancho de banda ..................................................................... 67


Etapa 6: Animación y diseño ............................................................................... 69Introducción .......................................................................................................... 69

Puntos, líneas, vectores y formas ....................................................................... 69

Punto y línea ............................................................................................................. 69

Vectores .................................................................................................................... 70

Forma ....................................................................................................................... 70

Masa, espacio y luz ............................................................................................... 71

Masa ......................................................................................................................... 71

Espacio ..................................................................................................................... 71

Luz ............................................................................................................................ 71

Color, textura, movimiento y tiempo ............................................................... 72

Color ........................................................................................................................ 72

Textura ..................................................................................................................... 72

Movimiento .............................................................................................................. 73

Tiempo ..................................................................................................................... 73

Etapa 7: Los estilos de animación ¿tradicionales? .......................................... 74Introducción .......................................................................................................... 74

Cut-out .................................................................................................................... 74

Stop-motion ............................................................................................................ 75

Dibujo y pintura .................................................................................................... 75

FUOC FUOC


Recapitulación ....................................................................................................... 77

Utilizar las herramientas adecuadas ........................................................................... 77

Los avisos son importantes ........................................................................................ 77

Animaciones cíclicas .................................................................................................. 77

Pequeños formatos, ideas grandes ............................................................................ 77

Escalado de documentos ........................................................................................... 77

Ser alternativo ........................................................................................................... 78

La inspiración proviene de tener los ojos abiertos ...................................................... 78


Recapitulación ....................................................................................................... 77

Utilizar las herramientas adecuadas ........................................................................... 77

Los avisos son importantes ........................................................................................ 77

Animaciones cíclicas .................................................................................................. 77

Pequeños formatos, ideas grandes ............................................................................ 77

Escalado de documentos ........................................................................................... 77

Ser alternativo ........................................................................................................... 78

La inspiración proviene de tener los ojos abiertos ...................................................... 78

FUOC FUOC


Presentación

Hoy en día, los animadores para Internet no tienen por qué perder horas y horas di-

bujando a mano cada uno de los fotogramas de una animación. No obstante, hay

factores como el ancho de banda, las diferentes plataformas y ediciones de los nave-

gadores que pueden hacer de la animación para Internet un infierno. En las próxi-

mas páginas intentaremos convertir este infierno en algo si no fácil, sí algo más fácil.

Comenzaremos por un medio limitado pero muy accesible, como el gif animado.

Echaremos también un vistazo al DHTML, rápido e interactivo. Y seguiremos con

Flash, la tecnología basada en vectores que se está implantando como un estándar

de animación en Internet.

Dejando a un lado las diferentes tecnologías, también repasaremos otros factores que

contribuyen a la animación, como el sonido, y una buena base de diseño. Finalmen-

te, repasaremos cómo pueden aplicarse las viejas técnicas de animación para su uso

en Internet.

Introduccióna la animación en Internet

Cuando hablamos de animación estamos abarcando un mundo muy amplio: desde

las grandes producciones de Disney, pasando por los efectos especiales de las pelícu-

las de Hollywood, las series de televisión para adultos como Los Simpson o South Park;

también los clásicos de animación de la Warner como Bugs Bunny, e incluso anima-

ciones experimentales.

Cada uno de estos tipos de animación tienen características y problemas propios,

tanto desde el punto de vista presupuestario como desde el tecnológico. La anima-

ción para Internet tiene los suyos propios. A lo largo de su historia se ha ido enfren-

tando a problemas como la lucha con el tamaño de los documentos, las diferencias

e incompatibilidades entre las diferentes plataformas informáticas, las versiones de

navegadores incompatibles. A lo largo y ancho de este módulo podremos avanzar en-

tre estos problemas, y ver cómo pueden aprovecharse las limitaciones que nos impo-

ne este medio.

Etapa 1: Animación en Internet


Presentación

Hoy en día, los animadores para Internet no tienen por qué perder horas y horas di-

bujando a mano cada uno de los fotogramas de una animación. No obstante, hay

factores como el ancho de banda, las diferentes plataformas y ediciones de los nave-

gadores que pueden hacer de la animación para Internet un infierno. En las próxi-

mas páginas intentaremos convertir este infierno en algo si no fácil, sí algo más fácil.

Comenzaremos por un medio limitado pero muy accesible, como el gif animado.

Echaremos también un vistazo al DHTML, rápido e interactivo. Y seguiremos con

Flash, la tecnología basada en vectores que se está implantando como un estándar

de animación en Internet.

Dejando a un lado las diferentes tecnologías, también repasaremos otros factores que

contribuyen a la animación, como el sonido, y una buena base de diseño. Finalmen-

te, repasaremos cómo pueden aplicarse las viejas técnicas de animación para su uso

en Internet.

Introduccióna la animación en Internet

Cuando hablamos de animación estamos abarcando un mundo muy amplio: desde

las grandes producciones de Disney, pasando por los efectos especiales de las pelícu-

las de Hollywood, las series de televisión para adultos como Los Simpson o South Park;

también los clásicos de animación de la Warner como Bugs Bunny, e incluso anima-

ciones experimentales.

Cada uno de estos tipos de animación tienen características y problemas propios,

tanto desde el punto de vista presupuestario como desde el tecnológico. La anima-

ción para Internet tiene los suyos propios. A lo largo de su historia se ha ido enfren-

tando a problemas como la lucha con el tamaño de los documentos, las diferencias

e incompatibilidades entre las diferentes plataformas informáticas, las versiones de

navegadores incompatibles. A lo largo y ancho de este módulo podremos avanzar en-

tre estos problemas, y ver cómo pueden aprovecharse las limitaciones que nos impo-

ne este medio.

Etapa 1: Animación en Internet

FUOC FUOC


Elegir el medio adecuado

En los siguientes apartados vamos a repasar las tecnologías más extendidas en ani-

mación para Internet. En este punto, repasaremos algunas pautas generales para in-

troducirse en el medio y decidir qué clase de animación es la mejor para cada

proyecto.

Elegir un tema

Ya sea la contemplación de colores en movimiento o la narración de un cuento de

hadas, es importante tener una meta en la historia, que tengamos presente el tema

en todo el proceso de la animación. Esta actitud puede significar una gran diferencia

en la calidad final del proyecto.

Ser imaginativo

Todo, o casi todo, es posible en animación mientras mantengamos la mente abierta

y exploremos nuevas maneras de expresar nuestras ideas. En este módulo encontra-

remos trucos de los cuales podremos aprender, pero también hay que buscar otras

maneras de animar en las distintas páginas que encontremos en la Red.

Planificar

No importa el tipo de animación que estemos realizando, la utilización de un storyboard

es siempre útil. Los storyboards no tienen por qué ser obras de arte, siempre que sean

suficientemente claros como para que cualquier persona implicada en el proyecto

pueda trabajar sin problemas. Es el momento de experimentar con diferentes solu-

ciones, probar estilos y enfocar los problemas desde distintos puntos de vista. El tra-

bajo previo realizado será de una gran ayuda, y contribuirá a ahorrar tiempo y trabajo

en las fases posteriores.

Se puede trabajar el storyboard con el ordenador, pero es aconsejable utilizar

el viejo método del lápiz y el papel, rápido y fluido. El ordenador puede

tentarnos a acabar demasiado los bocetos, y quedarnos con las primeras

pruebas realizadas.

Si el proyecto está muy centrado en los personajes, deberíamos bosquejar este perso-

naje en modelos de personaje que lo muestren en diferentes posiciones y puntos de

vista, explorando las distintas emociones que el personaje debe expresar o en sus ca-

racterísticas diferenciales. Estos bosquejos serán especialmente útiles en proyectos

que involucren un equipo, o incluso en la presentación del proyecto al cliente.


Elegir el medio adecuado

En los siguientes apartados vamos a repasar las tecnologías más extendidas en ani-

mación para Internet. En este punto, repasaremos algunas pautas generales para in-

troducirse en el medio y decidir qué clase de animación es la mejor para cada

proyecto.

Elegir un tema

Ya sea la contemplación de colores en movimiento o la narración de un cuento de

hadas, es importante tener una meta en la historia, que tengamos presente el tema

en todo el proceso de la animación. Esta actitud puede significar una gran diferencia

en la calidad final del proyecto.

Ser imaginativo

Todo, o casi todo, es posible en animación mientras mantengamos la mente abierta

y exploremos nuevas maneras de expresar nuestras ideas. En este módulo encontra-

remos trucos de los cuales podremos aprender, pero también hay que buscar otras

maneras de animar en las distintas páginas que encontremos en la Red.

Planificar

No importa el tipo de animación que estemos realizando, la utilización de un storyboard

es siempre útil. Los storyboards no tienen por qué ser obras de arte, siempre que sean

suficientemente claros como para que cualquier persona implicada en el proyecto

pueda trabajar sin problemas. Es el momento de experimentar con diferentes solu-

ciones, probar estilos y enfocar los problemas desde distintos puntos de vista. El tra-

bajo previo realizado será de una gran ayuda, y contribuirá a ahorrar tiempo y trabajo

en las fases posteriores.

Se puede trabajar el storyboard con el ordenador, pero es aconsejable utilizar

el viejo método del lápiz y el papel, rápido y fluido. El ordenador puede

tentarnos a acabar demasiado los bocetos, y quedarnos con las primeras

pruebas realizadas.

Si el proyecto está muy centrado en los personajes, deberíamos bosquejar este perso-

naje en modelos de personaje que lo muestren en diferentes posiciones y puntos de

vista, explorando las distintas emociones que el personaje debe expresar o en sus ca-

racterísticas diferenciales. Estos bosquejos serán especialmente útiles en proyectos

que involucren un equipo, o incluso en la presentación del proyecto al cliente.

FUOC FUOC


Para consultar algunos ejemplos de storyboards y de modelos de personaje, podemos

acudir a la web de Cartoon Network y consultar los minisites de Las supernenas o

Johnny Bravo.

Vigilar el tamaño de descarga y la velocidad de visualización

Todo el mundo odia tener que esperar en Internet. Para evitar que el usuario se frus-

tre durante la descarga de la animación hay que determinar un tamaño máximo del

documento y tratar de ceñirse a él. Si esto nos limita continuamente, quizá debería-

mos replantearnos el tipo de animación que estamos creando. Quizá sea demasiado

grande para el medio que hemos elegido. Es posible que debiéramos intentarlo con

otro estilo de animación. Es necesario contemplar que los diferentes formatos de ani-

mación en Internet tienen diferentes capacidades. Un documento de animación de

2 Mb es comprensible para un formato Quicktime, pero un gif animado de 2Mb es

de locos.

En ocasiones el problema no es el tamaño de documento, sino la lentitud en la ve-

locidad con que el ordenador redibuja la pantalla. Éste es un problema muy recurren-

te en animaciones Flash y DHTML.

Conocer al público objetivo

Una vez determinado el público objetivo y sus características, estamos en camino de

poder determinar el mejor formato para la animación. ¿A quién se dirige el proyecto,

qué plataformas o browsers utilizan? Este tipo de factores son muy importantes y se

deben tener en cuenta a la hora de definir el estilo visual y la tecnología que se elige

para un proyecto determinado.

Storyboard de un capítulo de Johnny Bravo.


Para consultar algunos ejemplos de storyboards y de modelos de personaje, podemos

acudir a la web de Cartoon Network y consultar los minisites de Las supernenas o

Johnny Bravo.

Vigilar el tamaño de descarga y la velocidad de visualización

Todo el mundo odia tener que esperar en Internet. Para evitar que el usuario se frus-

tre durante la descarga de la animación hay que determinar un tamaño máximo del

documento y tratar de ceñirse a él. Si esto nos limita continuamente, quizá debería-

mos replantearnos el tipo de animación que estamos creando. Quizá sea demasiado

grande para el medio que hemos elegido. Es posible que debiéramos intentarlo con

otro estilo de animación. Es necesario contemplar que los diferentes formatos de ani-

mación en Internet tienen diferentes capacidades. Un documento de animación de

2 Mb es comprensible para un formato Quicktime, pero un gif animado de 2Mb es

de locos.

En ocasiones el problema no es el tamaño de documento, sino la lentitud en la ve-

locidad con que el ordenador redibuja la pantalla. Éste es un problema muy recurren-

te en animaciones Flash y DHTML.

Conocer al público objetivo

Una vez determinado el público objetivo y sus características, estamos en camino de

poder determinar el mejor formato para la animación. ¿A quién se dirige el proyecto,

qué plataformas o browsers utilizan? Este tipo de factores son muy importantes y se

deben tener en cuenta a la hora de definir el estilo visual y la tecnología que se elige

para un proyecto determinado.

Storyboard de un capítulo de Johnny Bravo.

FUOC FUOC


Elegir el medio adecuado para el mensaje

El tamaño del documento final, la velocidad de reproducción y los contenidos del

proyectos son factores que hay que considerar para decidir el medio que utilizaremos

para alcanzar a nuestro público objetivo.

Hay pocas reglas que seguir para elegir el medio adecuado a nuestro proyecto. Si tra-

bajamos un proyecto de animación en 3D, probablemente QuickTime sea el medio

adecuado para distribuirla en Internet. Si el proyecto se basa en ilustración animada,

Flash sería la opción adecuada. No funciona muy bien con bitmaps y contenido 3D,

pero en ilustración es rápido, escalable y produce documentos de pequeño tamaño.

Los gifs animados se pueden visualizar desde cualquier plataforma y cualquier ver-

sión de navegador, pero sólo son aconsejables como complemento de otro medio

menos universal.

Formatos de animación en Internet

Para ayudar en la elección del medio adecuado, daremos un repaso a diferentes for-

matos utilizados en la difusión de animaciones en Internet.

Gif animado

Es un formato soportado por los navegadores habituales (Internet Explorer y Netscape

Navigator). Existen varias aplicaciones capaces de generar gifs animados, entre ellas

Adobe Photoshop y Adobe ImageReady.

Ventajas: es simple y fácil de crear e integrar sin necesidad de plug-in alguno. Las

aplicaciones para crearlos son baratas, e incluso gratuitas, como GifBuilder. Es una

alternativa a los formatos que necesitan plug-in, y soporta animaciones con transpa-

rencia.

Inconvenientes: está muy limitada por razones de tamaño de documento y de tipo

de contenidos. Carece de sonido.

Ejemplo de gif animado.


Elegir el medio adecuado para el mensaje

El tamaño del documento final, la velocidad de reproducción y los contenidos del

proyectos son factores que hay que considerar para decidir el medio que utilizaremos

para alcanzar a nuestro público objetivo.

Hay pocas reglas que seguir para elegir el medio adecuado a nuestro proyecto. Si tra-

bajamos un proyecto de animación en 3D, probablemente QuickTime sea el medio

adecuado para distribuirla en Internet. Si el proyecto se basa en ilustración animada,

Flash sería la opción adecuada. No funciona muy bien con bitmaps y contenido 3D,

pero en ilustración es rápido, escalable y produce documentos de pequeño tamaño.

Los gifs animados se pueden visualizar desde cualquier plataforma y cualquier ver-

sión de navegador, pero sólo son aconsejables como complemento de otro medio

menos universal.

Formatos de animación en Internet

Para ayudar en la elección del medio adecuado, daremos un repaso a diferentes for-

matos utilizados en la difusión de animaciones en Internet.

Gif animado

Es un formato soportado por los navegadores habituales (Internet Explorer y Netscape

Navigator). Existen varias aplicaciones capaces de generar gifs animados, entre ellas

Adobe Photoshop y Adobe ImageReady.

Ventajas: es simple y fácil de crear e integrar sin necesidad de plug-in alguno. Las

aplicaciones para crearlos son baratas, e incluso gratuitas, como GifBuilder. Es una

alternativa a los formatos que necesitan plug-in, y soporta animaciones con transpa-

rencia.

Inconvenientes: está muy limitada por razones de tamaño de documento y de tipo

de contenidos. Carece de sonido.

Ejemplo de gif animado.

FUOC FUOC


QuickTime

Para producir este formato son necesarias una variedad de herramientas de edición

de vídeo, entre las que se cuentan Adobe Premiere y Adobe AfterEffects.

Ventajas: Una alta tasa de transferencia por la conversión directa de vídeo, lo que

produce una reproducción fluida con cualquier velocidad de conexión. Hay diferen-

tes opciones de compresión adecuadas a los diferentes estilos de imagen. La tecnolo-

gía Streaming (descarga progresiva) permite utilizar documentos con tamaño de

archivo grandes. Incorpora sonido.

Inconvenientes: Necesita un tiempo previo de descarga. Está limitado a las ventanas

QuickTime. En navegadores que no sean de última generación puede obligar a abrir

una nueva ventana para permitir su visualización, y los navegadores más viejos ne-

cesitan un plug-in. No soporta animaciones con transparencia.

Shockwave

Es un formato propio creado por la compañía Macromedia, soportado en los nave-

gadores habituales gracias a un plug-in de descarga gratuita. Para crear documentos

en este formato se utiliza la aplicación Macromedia Director.

Ventajas: Soporta tecnología streaming, y puede integrar contenidos en 3D, flash, so-

nido e interactividad.

Inconvenientes: Se requiere un plug-in de descarga gratuita que no existe para la pla-

taforma UNIX. No es una tecnología pensada para Internet: tiene su origen en el me-

dio CD-ROM. Está limitado a la ventana de Shockwave. No soporta transparencia.

Flash

Es un formato vectorial creado por la compañía Macromedia, soportado en los nave-


en este formato se utiliza la aplicación Macromedia Flash, y pueden ser necesarias

aplicaciones de ilustración como Macromedia FreeHand y Adobe Illustrator.

The Lycette Bros. Illustrated Alphabetof Unfortunated Chance.hotwired.lycos.com/animation


QuickTime

Para producir este formato son necesarias una variedad de herramientas de edición

de vídeo, entre las que se cuentan Adobe Premiere y Adobe AfterEffects.

Ventajas: Una alta tasa de transferencia por la conversión directa de vídeo, lo que

produce una reproducción fluida con cualquier velocidad de conexión. Hay diferen-

tes opciones de compresión adecuadas a los diferentes estilos de imagen. La tecnolo-

gía Streaming (descarga progresiva) permite utilizar documentos con tamaño de

archivo grandes. Incorpora sonido.

Inconvenientes: Necesita un tiempo previo de descarga. Está limitado a las ventanas

QuickTime. En navegadores que no sean de última generación puede obligar a abrir

una nueva ventana para permitir su visualización, y los navegadores más viejos ne-

cesitan un plug-in. No soporta animaciones con transparencia.

Shockwave

Es un formato propio creado por la compañía Macromedia, soportado en los nave-


en este formato se utiliza la aplicación Macromedia Director.

Ventajas: Soporta tecnología streaming, y puede integrar contenidos en 3D, flash, so-

nido e interactividad.

Inconvenientes: Se requiere un plug-in de descarga gratuita que no existe para la pla-

taforma UNIX. No es una tecnología pensada para Internet: tiene su origen en el me-

dio CD-ROM. Está limitado a la ventana de Shockwave. No soporta transparencia.

Flash

Es un formato vectorial creado por la compañía Macromedia, soportado en los nave-


en este formato se utiliza la aplicación Macromedia Flash, y pueden ser necesarias

aplicaciones de ilustración como Macromedia FreeHand y Adobe Illustrator.

The Lycette Bros. Illustrated Alphabetof Unfortunated Chance.hotwired.lycos.com/animation

FUOC FUOC


Ventajas: Utiliza tecnología streaming, lo que acorta el tiempo de espera para la eje-

cución del documento. Es escalable e incluye la posibilidad de realizar zooms. Tiene

una alta tasa de transferencia. No está limitado a una ventana propia, y soporta ani-

maciones transparentes. Incorpora sonido e interactividad.

Inconvenientes: Se requiere un plug-in de descarga gratuita, pero está tan extendido

que la mayoría de la gente lo tiene instalado. El estilo de animación queda limitado

por el uso de imágenes basadas en vectores. Las versiones más viejas no soportaban

transparencia.

DHTML (HTML Dinámico)

Lenguaje de programación soportado por los navegadores de última generación. Pue-

den crearse contenidos en este lenguaje a partir de aplicaciones como Macromedia

Dreamweaver, o con cualquier simple editor de HTML.

Ventajas: No requiere plug-in, ni ninguna aplicación especial para generarlo (sirve

cualquier editor de textos. Al ser un lenguaje nativo de Internet tiene altas tasas de

transferencia. Incorpora sonido e interactividad.

Inconvenientes: Padece con el redimensionado de la ventana, y la compatibilidad

entre diferentes plataformas es complicada. No es un medio tan robusto para la ani-

mación como Flash o Quicktime.

Podéis consultar ejemplos de estas tecnologías aplicadas a la animación en el sitio

web Animation Express (www.hotwired.com/animation), y también en www.shoc-

kwave.com.

Banzai es una típica animación Flash.www.shockwave.com


Ventajas: Utiliza tecnología streaming, lo que acorta el tiempo de espera para la eje-

cución del documento. Es escalable e incluye la posibilidad de realizar zooms. Tiene

una alta tasa de transferencia. No está limitado a una ventana propia, y soporta ani-

maciones transparentes. Incorpora sonido e interactividad.

Inconvenientes: Se requiere un plug-in de descarga gratuita, pero está tan extendido

que la mayoría de la gente lo tiene instalado. El estilo de animación queda limitado

por el uso de imágenes basadas en vectores. Las versiones más viejas no soportaban

transparencia.

DHTML (HTML Dinámico)

Lenguaje de programación soportado por los navegadores de última generación. Pue-

den crearse contenidos en este lenguaje a partir de aplicaciones como Macromedia

Dreamweaver, o con cualquier simple editor de HTML.

Ventajas: No requiere plug-in, ni ninguna aplicación especial para generarlo (sirve

cualquier editor de textos. Al ser un lenguaje nativo de Internet tiene altas tasas de

transferencia. Incorpora sonido e interactividad.

Inconvenientes: Padece con el redimensionado de la ventana, y la compatibilidad

entre diferentes plataformas es complicada. No es un medio tan robusto para la ani-

mación como Flash o Quicktime.

Podéis consultar ejemplos de estas tecnologías aplicadas a la animación en el sitio

web Animation Express (www.hotwired.com/animation), y también en www.shoc-

kwave.com.

Banzai es una típica animación Flash.www.shockwave.com

FUOC FUOC


Introducción

El representante de Compuserve que escribió las especificaciones del formato GIF

(Graphic Interchange Format) hacia 1987 explicó que no estaba pensado como plata-

forma para la animación, aunque podía ser utilizado a este efecto de un modo limi-

tado. Y aunque las cosas han cambiado mucho en Internet desde entonces, esta

afirmación sigue siendo correcta.

Los inconvenientes de este formato son importantes: tiende a crear documentos de

gran tamaño y no comprime excesivamente bien. Además, no soporta sonido. Por

otro lado, los gifs animados son visibles casi con cualquier navegador existente. En

lo referente a animaciones pequeñas, como logotipos o iconos animados, este forma-

to funciona muy bien, especialmente en combinación con otras tecnologías, como

Flash y DHTML.

Esta especialización en animaciones de pequeño formato hizo que el gif animado se

convirtiera en un formato universalmente utilizado en recursos para la web, como

los banners publicitarios y las cabeceras de página principal de sitios web.

Buscad en las páginas web que más visitéis algún elemento animado y

comprobad que muchos de ellos serán gifs, como por ejemplo en la homepage

del GMMD.

Menos es más

El formato GIF se basa en un algoritmo de compresión que trabaja mejor con gráficos

de color plano, en los que el número de colores y de gradaciones de color se han re-

ducido al mínimo. Por ello, es preferible trabajar con imágenes basadas en ilustración

más que con fotografías, las cuales requieren una gran cantidad de colores diferentes

(incluso las fotografías en blanco y negro).

Debemos intentar utilizar una única paleta para todos los frames de la animación rea-

lizada en gif, especialmente si nos vemos forzados a utilizar fotografías. Aplicaciones

como Photoshop, Image Ready o Fireworks pueden ayudarnos a aplicar la misma pa-

leta a todas las imágenes de nuestro proyecto, lo que reducirá el tamaño y optimizará

la apariencia final del fichero gif animado.

Etapa 2: Gif animado


Introducción

El representante de Compuserve que escribió las especificaciones del formato GIF

(Graphic Interchange Format) hacia 1987 explicó que no estaba pensado como plata-

forma para la animación, aunque podía ser utilizado a este efecto de un modo limi-

tado. Y aunque las cosas han cambiado mucho en Internet desde entonces, esta

afirmación sigue siendo correcta.

Los inconvenientes de este formato son importantes: tiende a crear documentos de

gran tamaño y no comprime excesivamente bien. Además, no soporta sonido. Por

otro lado, los gifs animados son visibles casi con cualquier navegador existente. En

lo referente a animaciones pequeñas, como logotipos o iconos animados, este forma-

to funciona muy bien, especialmente en combinación con otras tecnologías, como

Flash y DHTML.

Esta especialización en animaciones de pequeño formato hizo que el gif animado se

convirtiera en un formato universalmente utilizado en recursos para la web, como

los banners publicitarios y las cabeceras de página principal de sitios web.

Buscad en las páginas web que más visitéis algún elemento animado y

comprobad que muchos de ellos serán gifs, como por ejemplo en la homepage

del GMMD.

Menos es más

El formato GIF se basa en un algoritmo de compresión que trabaja mejor con gráficos

de color plano, en los que el número de colores y de gradaciones de color se han re-

ducido al mínimo. Por ello, es preferible trabajar con imágenes basadas en ilustración

más que con fotografías, las cuales requieren una gran cantidad de colores diferentes

(incluso las fotografías en blanco y negro).

Debemos intentar utilizar una única paleta para todos los frames de la animación rea-

lizada en gif, especialmente si nos vemos forzados a utilizar fotografías. Aplicaciones

como Photoshop, Image Ready o Fireworks pueden ayudarnos a aplicar la misma pa-

leta a todas las imágenes de nuestro proyecto, lo que reducirá el tamaño y optimizará

la apariencia final del fichero gif animado.

Etapa 2: Gif animado

FUOC FUOC


Recursos ruidosospara animaciones silenciosas

No es posible añadir audio a las animaciones realizadas en formato gif. Pero si re-

flexionamos sobre los medios visuales que no disponen de audio, como las historie-

tas, podremos descubrir una serie de recursos que pueden en algún caso suplir la

función enfática del sonido en la animación.

Tipografía

El uso de la tipografía y la experimentación con el lenguaje tipográfico pueden mos-

trarnos que las palabras a veces no necesitan ser dichas para ser escuchadas. El uso

de mayúsculas puede interpretarse como un aumento de volumen en el discurso es-

crito, y un juego inteligente con los tamaños y grosores de los tipos puede ayudarnos

a enfatizar las partes deseadas del discurso.

Líneas dinámicas

No existe un término oficial para las líneas que expresan sonido, olor y movimiento

en los cómics. No obstante, son un modo efectivo de comunicar movimiento o estí-

mulo sensorial (como el aroma que surge de un café y se introduce en la nariz del per-

sonaje) que no pueden ser expresadas de otro modo en un medio estrictamente visual.

Un dibujo sencillo y texto son suficientespara armar una animación.

Las líneas de vapor en esta imagen nos indican que el café está caliente.


Recursos ruidosospara animaciones silenciosas

No es posible añadir audio a las animaciones realizadas en formato gif. Pero si re-

flexionamos sobre los medios visuales que no disponen de audio, como las historie-

tas, podremos descubrir una serie de recursos que pueden en algún caso suplir la

función enfática del sonido en la animación.

Tipografía

El uso de la tipografía y la experimentación con el lenguaje tipográfico pueden mos-

trarnos que las palabras a veces no necesitan ser dichas para ser escuchadas. El uso

de mayúsculas puede interpretarse como un aumento de volumen en el discurso es-

crito, y un juego inteligente con los tamaños y grosores de los tipos puede ayudarnos

a enfatizar las partes deseadas del discurso.

Líneas dinámicas

No existe un término oficial para las líneas que expresan sonido, olor y movimiento

en los cómics. No obstante, son un modo efectivo de comunicar movimiento o estí-

mulo sensorial (como el aroma que surge de un café y se introduce en la nariz del per-

sonaje) que no pueden ser expresadas de otro modo en un medio estrictamente visual.

Un dibujo sencillo y texto son suficientespara armar una animación.

Las líneas de vapor en esta imagen nos indican que el café está caliente.

FUOC FUOC


Bocadillos de texto

Los bocadillos de texto son un estupendo medio para hacer hablar a un personaje.

Observando algunos cómics podemos hacernos una idea de cómo utilizarlos y cómo

sacar el máximo provecho de este clásico recurso para expresar una variada gama de

emociones y sonidos.

Aprovechar los inconvenientes

Uno de los inconvenientes del formato gif animado es el gran tamaño de los docu-

mentos, debido a las dificultades en la capacidad de compresión del formato. Esto

obliga al animador a utilizar el menor número de frames posible en la animación, lo

que comporta una falta de fluidez en el movimiento. ¿Cómo sortear este problema?

Si no puedes con tu enemigo, únete a él: podemos hacer que este inconveniente tra-

baje a nuestro favor si lo hacemos formar parte del estilo de nuestra animación. Sólo

tenemos que recordar los trabajos de Terry Gilliam para las animaciones de Monty

Python o la serie de dibujos animados South Park para apreciar que la técnica del

cut-out se ajusta a las limitaciones del formato gif a la hora de animar.

Es preferible trabajar con las limitaciones del medio en mente que adaptar un

trabajo que no las ha tenido presente.

En este ejemplo el bocadillo de texto identificael estado anímico del personaje.

Terry Gilliam utilizó la técnica del cut-outen gran número de animaciones.


Bocadillos de texto

Los bocadillos de texto son un estupendo medio para hacer hablar a un personaje.

Observando algunos cómics podemos hacernos una idea de cómo utilizarlos y cómo

sacar el máximo provecho de este clásico recurso para expresar una variada gama de

emociones y sonidos.

Aprovechar los inconvenientes

Uno de los inconvenientes del formato gif animado es el gran tamaño de los docu-

mentos, debido a las dificultades en la capacidad de compresión del formato. Esto

obliga al animador a utilizar el menor número de frames posible en la animación, lo

que comporta una falta de fluidez en el movimiento. ¿Cómo sortear este problema?

Si no puedes con tu enemigo, únete a él: podemos hacer que este inconveniente tra-

baje a nuestro favor si lo hacemos formar parte del estilo de nuestra animación. Sólo

tenemos que recordar los trabajos de Terry Gilliam para las animaciones de Monty

Python o la serie de dibujos animados South Park para apreciar que la técnica del

cut-out se ajusta a las limitaciones del formato gif a la hora de animar.

Es preferible trabajar con las limitaciones del medio en mente que adaptar un

trabajo que no las ha tenido presente.

En este ejemplo el bocadillo de texto identificael estado anímico del personaje.

Terry Gilliam utilizó la técnica del cut-outen gran número de animaciones.

FUOC FUOC


Normalmente tres frames pueden ser suficientes para dar la impresión de movimien-

to. Si usamos sólo dos, la impresión es de intermitencia. Ahora bien, si lo que desea-

mos es suavizar los saltos entre frames debidos a la reducción de imágenes por

segundo, podemos añadir un efecto de suavizado de movimiento o motion blur. Ado-

be AfterEffects es un programa de animación en 2D que calcula automáticamente

este efecto. Este efecto no es solamente un truco para mejorar la fluidez del movi-

miento, puede ayudarnos a añadir realismo en el movimiento incluso en animaciones

elaboradas.

Optimización

A continuación veremos algunos modos de optimizar las animaciones en formato gif

para su difusión en Internet.

Optimizar los frames

Es necesario pensar la acción representada para intentar optimizar los frames. Si man-

tenemos la acción cerrada, la diferencia entre un frame y el siguiente se reduce, y por

consiguiente se reduce el tamaño del documento gif.

Los programas que se utilizan para crear gifs animados suelen presentar una opción

de optimización de frames que realiza este trabajo. Es decir, recorta las áreas no mo-

dificadas. Pero es posible que el programa que utilicemos no disponga de esta op-

ción, y tengamos que realizarlo a mano con algún programa de edición de imágenes

(como Photoshop, Fireworks o ImageReady). Habría que recortar la zona cambiante

(donde se desarrolla la acción) y situarla sobre la zona que no cambia en el programa

de creación de gifs animados. Suena complicado, pero si se prueba unas pocas veces,

se comprueba que no es tan difícil. Y al reducir de este modo el número de píxeles

por frame, y en consecuencia también el número de colores en cada frame, reducimos

el tamaño final de la animación.

Imágenes transparentes

Para utilizar la técnica de transparencia, utilizaremos una imagen de fondo como pri-

mer frame de la animación, y posteriormente colocaremos frames transparentes sobre

este fondo. Cada uno de estos frames transparentes contiene acción o datos de ima-

gen en una o más áreas del frame, pero el resto es un color sólido, que el programa

de creación de gifs animados puede designar como transparente.

¿Problemas?

Normalmente uno descubre los trucos de un programa a base de solucionar errores

o problemas planteados por él mismo. Vamos a conocer alguno de los problemas que

se pueden presentar cuando realizamos una animación en formato gif.


Normalmente tres frames pueden ser suficientes para dar la impresión de movimien-

to. Si usamos sólo dos, la impresión es de intermitencia. Ahora bien, si lo que desea-

mos es suavizar los saltos entre frames debidos a la reducción de imágenes por

segundo, podemos añadir un efecto de suavizado de movimiento o motion blur. Ado-

be AfterEffects es un programa de animación en 2D que calcula automáticamente

este efecto. Este efecto no es solamente un truco para mejorar la fluidez del movi-

miento, puede ayudarnos a añadir realismo en el movimiento incluso en animaciones

elaboradas.

Optimización

A continuación veremos algunos modos de optimizar las animaciones en formato gif

para su difusión en Internet.

Optimizar los frames

Es necesario pensar la acción representada para intentar optimizar los frames. Si man-

tenemos la acción cerrada, la diferencia entre un frame y el siguiente se reduce, y por

consiguiente se reduce el tamaño del documento gif.

Los programas que se utilizan para crear gifs animados suelen presentar una opción

de optimización de frames que realiza este trabajo. Es decir, recorta las áreas no mo-

dificadas. Pero es posible que el programa que utilicemos no disponga de esta op-

ción, y tengamos que realizarlo a mano con algún programa de edición de imágenes

(como Photoshop, Fireworks o ImageReady). Habría que recortar la zona cambiante

(donde se desarrolla la acción) y situarla sobre la zona que no cambia en el programa

de creación de gifs animados. Suena complicado, pero si se prueba unas pocas veces,

se comprueba que no es tan difícil. Y al reducir de este modo el número de píxeles

por frame, y en consecuencia también el número de colores en cada frame, reducimos

el tamaño final de la animación.

Imágenes transparentes

Para utilizar la técnica de transparencia, utilizaremos una imagen de fondo como pri-

mer frame de la animación, y posteriormente colocaremos frames transparentes sobre

este fondo. Cada uno de estos frames transparentes contiene acción o datos de ima-

gen en una o más áreas del frame, pero el resto es un color sólido, que el programa

de creación de gifs animados puede designar como transparente.

¿Problemas?

Normalmente uno descubre los trucos de un programa a base de solucionar errores

o problemas planteados por él mismo. Vamos a conocer alguno de los problemas que

se pueden presentar cuando realizamos una animación en formato gif.

FUOC FUOC


Diferencias en la velocidad de reproducción

En realidad hay muchos factores que pueden afectar a la reproducción de los ficheros

en Internet, desde la velocidad del procesador del ordenador, la velocidad de la co-

nexión a Internet, el sistema operativo del ordenador. Algunas versiones de Internet

Explorer tienen tendencia a reproducir los ficheros gif a una velocidad muy superior

a la que lo hace Netscape. Esto nos obliga a comprobar el resultado final en ambos

navegadores para asegurarnos de que este problema no impide la comprensión de

nuestro trabajo.

Es muy conveniente comprobar nuestras animaciones desde todos los navegadores,

sistemas operativos, velocidades de conexión a Internet y procesadores posibles.

Problemas con las paletas

Los diferentes sistemas operativos utilizan distintas paletas de color. Una animación

realizada en un PC se verá mucho más oscura en un Mac, y viceversa. En general, es

aconsejable evitar los colores muy oscuros, los azules y los grises, dado que son los

que tienen mayor tendencia a ocasionar problemas.


Diferencias en la velocidad de reproducción

En realidad hay muchos factores que pueden afectar a la reproducción de los ficheros

en Internet, desde la velocidad del procesador del ordenador, la velocidad de la co-

nexión a Internet, el sistema operativo del ordenador. Algunas versiones de Internet

Explorer tienen tendencia a reproducir los ficheros gif a una velocidad muy superior

a la que lo hace Netscape. Esto nos obliga a comprobar el resultado final en ambos

navegadores para asegurarnos de que este problema no impide la comprensión de

nuestro trabajo.

Es muy conveniente comprobar nuestras animaciones desde todos los navegadores,

sistemas operativos, velocidades de conexión a Internet y procesadores posibles.

Problemas con las paletas

Los diferentes sistemas operativos utilizan distintas paletas de color. Una animación

realizada en un PC se verá mucho más oscura en un Mac, y viceversa. En general, es

aconsejable evitar los colores muy oscuros, los azules y los grises, dado que son los

que tienen mayor tendencia a ocasionar problemas.

FUOC FUOC


Introducción

El DHTML o HTML dinámico nació a partir del HTML, con adición de algo de JavaScript

y hojas de estilo, en respuesta a las demandas de movimiento en la web. Los desarro-

lladores apreciaron el acceso al código fuente y los navegantes no necesitaban des-

cargar ningún plug-in para acceder a contenidos dinámicos en la red. Pero la

disparidad entre plataformas y navegadores provocó que la creación de proyectos en

DHTML fuese un auténtico reto para los desarrolladores.

Tras el desarrollo de la tecnología Shockwave y la compra y desarrollo de Flash, la

compañía Macromedia desarrolló Dreamweaver, una aplicación destinada a facilitar

la producción de proyectos en DHTML.

Pros y contras del DHTML

DHTML es un buen medio para añadir interactividad y multimedia a las páginas

web, y Dreamweaver es una buena herramienta para desarrollar páginas DHTML en

formato HTML. Los navegantes no necesitan preocuparse de tener el plug-in adecua-

do, dado que los navegadores interpretan HTML sin problemas. El tiempo de descar-

ga también es reducido, y el hecho de que Dreamweaver sea un programa WYSIWYG

(What You See Is What You Get: ‘lo que ves es lo que consigues’) y que esté tan co-

dificado contribuye a que la realización de presentaciones dinámicas sea realmente

fácil.

No obstante, sigue habiendo problemas que dependen de la configuración del orde-

nador, e incompatibilidades en el cambio de plataformas PC-Mac. Tenemos que con-

siderar que la tecnología en la que se basa, el HTML, nunca fue pensada para realizar

animaciones. Probablemente Dreamweaver y el DHTML nunca podrán competir en

este campo con otros productos o tecnologías como Flash, Director o QuickTime,

pero es posible realizar un buen trabajo con ellos.

Herramientas y tecnología

Para trabajar en DHTML es necesario tener unos conocimientos básicos de HTML,

CSS (Cascade Style Sheets: ‘hojas de estilo en cascada’) y quizás algo de JavaScript. Y,

desde luego, el conocimiento de alguna aplicación para edición DHTML.

Etapa 3: DHTML o HTML Dinámico


Introducción

El DHTML o HTML dinámico nació a partir del HTML, con adición de algo de JavaScript

y hojas de estilo, en respuesta a las demandas de movimiento en la web. Los desarro-

lladores apreciaron el acceso al código fuente y los navegantes no necesitaban des-

cargar ningún plug-in para acceder a contenidos dinámicos en la red. Pero la

disparidad entre plataformas y navegadores provocó que la creación de proyectos en

DHTML fuese un auténtico reto para los desarrolladores.

Tras el desarrollo de la tecnología Shockwave y la compra y desarrollo de Flash, la

compañía Macromedia desarrolló Dreamweaver, una aplicación destinada a facilitar

la producción de proyectos en DHTML.

Pros y contras del DHTML

DHTML es un buen medio para añadir interactividad y multimedia a las páginas

web, y Dreamweaver es una buena herramienta para desarrollar páginas DHTML en

formato HTML. Los navegantes no necesitan preocuparse de tener el plug-in adecua-

do, dado que los navegadores interpretan HTML sin problemas. El tiempo de descar-

ga también es reducido, y el hecho de que Dreamweaver sea un programa WYSIWYG

(What You See Is What You Get: ‘lo que ves es lo que consigues’) y que esté tan co-

dificado contribuye a que la realización de presentaciones dinámicas sea realmente

fácil.

No obstante, sigue habiendo problemas que dependen de la configuración del orde-

nador, e incompatibilidades en el cambio de plataformas PC-Mac. Tenemos que con-

siderar que la tecnología en la que se basa, el HTML, nunca fue pensada para realizar

animaciones. Probablemente Dreamweaver y el DHTML nunca podrán competir en

este campo con otros productos o tecnologías como Flash, Director o QuickTime,

pero es posible realizar un buen trabajo con ellos.


Para trabajar en DHTML es necesario tener unos conocimientos básicos de HTML,

CSS (Cascade Style Sheets: ‘hojas de estilo en cascada’) y quizás algo de JavaScript. Y,

desde luego, el conocimiento de alguna aplicación para edición DHTML.

Etapa 3: DHTML o HTML Dinámico

FUOC FUOC


Editores WYSIWYG

A menos que seamos unos expertos en código DHTML y JavaScript, necesitaremos

un editor WYSIWYG. Uno de los más extendidos es Macromedia Dreamweaver, pero

no es el único. Adobe GoLive tiene también bastantes usuarios.

La mayoría de los editores WYSIWYG permiten al desarrollador trabajar con un in-

terfaz gráfico (GUI, Graphical User Interface) o editar el código a mano. En las em-

presas dedicadas al desarrollo del proyectos Internet esta doble accesibilidad al

código permite que los diseñadores intervengan en el proyecto de modo formal,

mientras que los desarrolladores pueden optimizar el código subyacente con el editor

de texto incorporado al programa.

Aplicaciones de diseño bitmap

Una animación será tan dinámica como lo sea su contenido. Por ello es conveniente

disponer de una aplicación para edición de gráficos bitmap, como Photoshop o Ima-

geReady para perfeccionar los gráficos en formato GIF, JPEG y/o PNG que utilicemos

en el proyecto.

Medios tradicionales

No debemos olvidar los medios tradicionales de dibujo: el lápiz, los pinceles, una

mesa de luz. En muchas ocasiones la personalidad de grandes proyectos generados

por ordenador reside en el trabajo de abocetado manual previo.

Trabajar los bocetos a mano, digitalizarlos y retocarlos por ordenador es un

proceso que enriquecerá el proyecto final.

Adaptarse al medio

Tenemos que trabajar intentando alcanzar los límites del medio elegido, pero sin so-

brepasarlos. Por ahora, hay ciertos estilos y técnicas de animación que están fuera de

nuestro alcance. Una animación compleja y fluida al estilo Disney comporta tanta

información que nos conduciría a encontrarnos con problemas de ancho de banda

y de velocidad de procesador. Por ello, hemos de ajustar nuestro proyecto al medio,

antes que intentar que el medio se adapte a nuestro proyecto.

La clave está en trabajar los inconvenientes del medio a nuestro favor. La técnica del

cut-out es una de las que mejor se adaptan a los problemas de reproducción derivados


Editores WYSIWYG

A menos que seamos unos expertos en código DHTML y JavaScript, necesitaremos

un editor WYSIWYG. Uno de los más extendidos es Macromedia Dreamweaver, pero

no es el único. Adobe GoLive tiene también bastantes usuarios.

La mayoría de los editores WYSIWYG permiten al desarrollador trabajar con un in-

terfaz gráfico (GUI, Graphical User Interface) o editar el código a mano. En las em-

presas dedicadas al desarrollo del proyectos Internet esta doble accesibilidad al

código permite que los diseñadores intervengan en el proyecto de modo formal,

mientras que los desarrolladores pueden optimizar el código subyacente con el editor

de texto incorporado al programa.

Aplicaciones de diseño bitmap

Una animación será tan dinámica como lo sea su contenido. Por ello es conveniente

disponer de una aplicación para edición de gráficos bitmap, como Photoshop o Ima-

geReady para perfeccionar los gráficos en formato GIF, JPEG y/o PNG que utilicemos

en el proyecto.

Medios tradicionales

No debemos olvidar los medios tradicionales de dibujo: el lápiz, los pinceles, una

mesa de luz. En muchas ocasiones la personalidad de grandes proyectos generados

por ordenador reside en el trabajo de abocetado manual previo.

Trabajar los bocetos a mano, digitalizarlos y retocarlos por ordenador es un

proceso que enriquecerá el proyecto final.

Adaptarse al medio

Tenemos que trabajar intentando alcanzar los límites del medio elegido, pero sin so-

brepasarlos. Por ahora, hay ciertos estilos y técnicas de animación que están fuera de

nuestro alcance. Una animación compleja y fluida al estilo Disney comporta tanta

información que nos conduciría a encontrarnos con problemas de ancho de banda

y de velocidad de procesador. Por ello, hemos de ajustar nuestro proyecto al medio,

antes que intentar que el medio se adapte a nuestro proyecto.

La clave está en trabajar los inconvenientes del medio a nuestro favor. La técnica del

cut-out es una de las que mejor se adaptan a los problemas de reproducción derivados

FUOC FUOC


de Internet, y funciona muy bien para los tipos de movimiento tan limitados en las

animaciones DHTML. Combinando esta técnica con el desplazamiento de elementos

en pantalla, se consiguen buenos resultados. Este tipo de animación de elementos es

el modo más fácil de mover un gráfico desde un punto de la pantalla a otro, por lo

que está muy extendida en los proyectos elaborados en DHTML. Un ejemplo: crea-

mos una animación cíclica en formato GIF, como por ejemplo un hombre caminan-

do, sin que el personaje se desplace. Con DHTML podemos deslizar esta animación

por la pantalla, produciendo así la sensación de desplazamiento del personaje.

Interactividad

Una de las mayores ventajas que ofrece Internet frente a otros medios de difusión es

la interactividad, el hecho de que las acciones del espectador modifique el curso de

la acción. De todos modos, es mejor no utilizar la interactividad que utilizarla gratui-

tamente.

La forma más común de interactividad es producir un efecto por medio de un clic

con el ratón. Pero no es la única. Podemos experimentar otras formas de interacción,

como introducir datos del usuario mediante formularios para modificar ciertas carac-

terísticas del discurso (por ejemplo, para dirigirnos al usuario por su nombre), o uti-

lizar elementos que el usuario pueda desplazar y resituar en la pantalla, adjudicándole

así un papel mucho más activo en el proyecto.


de Internet, y funciona muy bien para los tipos de movimiento tan limitados en las

animaciones DHTML. Combinando esta técnica con el desplazamiento de elementos

en pantalla, se consiguen buenos resultados. Este tipo de animación de elementos es

el modo más fácil de mover un gráfico desde un punto de la pantalla a otro, por lo

que está muy extendida en los proyectos elaborados en DHTML. Un ejemplo: crea-

mos una animación cíclica en formato GIF, como por ejemplo un hombre caminan-

do, sin que el personaje se desplace. Con DHTML podemos deslizar esta animación

por la pantalla, produciendo así la sensación de desplazamiento del personaje.

Interactividad

Una de las mayores ventajas que ofrece Internet frente a otros medios de difusión es

la interactividad, el hecho de que las acciones del espectador modifique el curso de

la acción. De todos modos, es mejor no utilizar la interactividad que utilizarla gratui-

tamente.

La forma más común de interactividad es producir un efecto por medio de un clic

con el ratón. Pero no es la única. Podemos experimentar otras formas de interacción,

como introducir datos del usuario mediante formularios para modificar ciertas carac-

terísticas del discurso (por ejemplo, para dirigirnos al usuario por su nombre), o uti-

lizar elementos que el usuario pueda desplazar y resituar en la pantalla, adjudicándole

así un papel mucho más activo en el proyecto.

FUOC FUOC


Introducción

Macromedia Flash se está convirtiendo en un estándar en la animación en Internet.

Su aprendizaje es mucho más sencillo que el de otras tecnologías de animación (léase

DHTML), y está lleno de características interesantes en animación, como la interpo-

lación entre keyframes, morphing y la opción papel cebolla. Es tan interactivo que

puede utilizarse para programar juegos por Internet. Además, exporta los proyectos

en multitud de formatos, desde el gif animado al QuickTime, y varios formatos grá-

ficos, como JPEG, PNG, PICT...

La mayor de sus desventajas, la necesidad de instalar un plug-in para visualizarlo,

pierde peso día tras día: Macromedia ha publicado un estudio que indica que el 96%

de los usuarios de Internet tienen el plug-in de Flash instalado.

Pros y contras de Flash

La tecnología de descarga progresiva o streaming y el uso de gráficos vectoriales hacen

que Flash se enfrente con garantías a uno de los mayores problemas de la animación

en Internet: el tiempo de descarga de ficheros. La tecnología streaming permite ver el

inicio de una animación mientras el resto del documento se descarga, pero esto no

es una característica exclusiva de Flash. Quicktime, por ejemplo, también funciona

con tecnología streaming. La mayor ventaja de Flash y lo que lo diferencia de los de-

más formatos es el uso de gráficos vectoriales.

Los gráficos vectoriales producen documentos de un tamaño mucho menor que el

de los documentos basados en gráficos bitmap, y además son escalables sin una pér-

dida de calidad destacable. Esta característica posibilita que el usuario realice zooms

en los documentos Flash, lo cual resulta muy útil en el proceso de creación del do-

cumento, y es una característica interesante también para el usuario final.

En esta ilustración podemos apreciar que el zoom de Flash no implicauna pérdida de calidad en la imagen.

Etapa 4: Flash


Introducción

Macromedia Flash se está convirtiendo en un estándar en la animación en Internet.

Su aprendizaje es mucho más sencillo que el de otras tecnologías de animación (léase

DHTML), y está lleno de características interesantes en animación, como la interpo-

lación entre keyframes, morphing y la opción papel cebolla. Es tan interactivo que

puede utilizarse para programar juegos por Internet. Además, exporta los proyectos

en multitud de formatos, desde el gif animado al QuickTime, y varios formatos grá-

ficos, como JPEG, PNG, PICT...

La mayor de sus desventajas, la necesidad de instalar un plug-in para visualizarlo,

pierde peso día tras día: Macromedia ha publicado un estudio que indica que el 96%

de los usuarios de Internet tienen el plug-in de Flash instalado.

Pros y contras de Flash

La tecnología de descarga progresiva o streaming y el uso de gráficos vectoriales hacen

que Flash se enfrente con garantías a uno de los mayores problemas de la animación

en Internet: el tiempo de descarga de ficheros. La tecnología streaming permite ver el

inicio de una animación mientras el resto del documento se descarga, pero esto no

es una característica exclusiva de Flash. Quicktime, por ejemplo, también funciona

con tecnología streaming. La mayor ventaja de Flash y lo que lo diferencia de los de-

más formatos es el uso de gráficos vectoriales.

Los gráficos vectoriales producen documentos de un tamaño mucho menor que el

de los documentos basados en gráficos bitmap, y además son escalables sin una pér-

dida de calidad destacable. Esta característica posibilita que el usuario realice zooms

en los documentos Flash, lo cual resulta muy útil en el proceso de creación del do-

cumento, y es una característica interesante también para el usuario final.

En esta ilustración podemos apreciar que el zoom de Flash no implicauna pérdida de calidad en la imagen.

Etapa 4: Flash

FUOC FUOC


Por otro lado, Flash incorpora sonido a la animación a través de la línea de tiempo

del programa, por lo que posibilita el control del momento en que el sonido aparez-

ca, permitiendo una coordinación entre imagen y sonido que otros formatos de ani-

mación no consiguen. La línea de tiempo permite también especificar una velocidad

de reproducción variable. Cuanto mayor sea la velocidad de reproducción, más flui-

do y suave será el movimiento, pero esto demanda más potencia al procesador del

ordenador para que redibuje la pantalla. Aquí nos encontramos con una disyuntiva:

encontrar la velocidad de reproducción justa para nuestro proyecto, un equilibrio

entre fluidez y redibujado de pantalla.

La técnica de animación por keyframes o fotogramas clave facilita la tarea del anima-

dor, al posibilitar que el proceso de intercalado sea realizado por el mismo programa

y no a mano por el propio animador, con la consiguiente reducción de tiempos de

trabajo. Naturalmente, esto no implica que la animación frame a frame no siga siendo

necesaria en algunas ocasiones, y Flash, con el uso de la técnica de papel cebolla,

también facilita esta tarea.

Flash también ofrece la posibilidad de utilizar alpha channel, lo que permite crear

imágenes con efectos de transparencia que van desde la opacidad absoluta a una to-

tal transparencia.

Herramientas complementarias

Macromedia Flash ofrece las herramientas necesarias para desarrollar un proyecto de

animación por sí solo. No obstante, no debemos olvidar que el uso de otras herra-

mientas puede ayudarnos a optimizar y mejorar nuestro proyecto.

Una aplicación de ilustración como Macromedia Freehand o Adobe Illustrator per-

miten exportar documentos que podemos posteriormente incorporar a nuestro pro-

yecto Flash. Éstas son aplicaciones con mayores capacidades para la ilustración que

Flash, pero son también más complicadas de utilizar que las herramientas de dibujo

de Flash.

Las aplicaciones de diseño bitmap como Photoshop o ImageReady pueden ser tam-

bién útiles en la creación de gráficos, o en la limpieza de dibujos escaneados que pos-

teriormente se vectorialicen en Flash.

Los medios tradicionales de dibujo tienen una cualidad difícil de reproducir en el or-

denador. No debemos abandonar por ello el uso de lápices, tintas, papeles, e incluso,

por qué no, una mesa de luz. La creación de gráficos manual y su posterior digitali-

zación es una técnica que combina la riqueza y calidez del trazo manual con la faci-

lidad de trabajo del ordenador.


Por otro lado, Flash incorpora sonido a la animación a través de la línea de tiempo

del programa, por lo que posibilita el control del momento en que el sonido aparez-

ca, permitiendo una coordinación entre imagen y sonido que otros formatos de ani-

mación no consiguen. La línea de tiempo permite también especificar una velocidad

de reproducción variable. Cuanto mayor sea la velocidad de reproducción, más flui-

do y suave será el movimiento, pero esto demanda más potencia al procesador del

ordenador para que redibuje la pantalla. Aquí nos encontramos con una disyuntiva:

encontrar la velocidad de reproducción justa para nuestro proyecto, un equilibrio

entre fluidez y redibujado de pantalla.

La técnica de animación por keyframes o fotogramas clave facilita la tarea del anima-

dor, al posibilitar que el proceso de intercalado sea realizado por el mismo programa

y no a mano por el propio animador, con la consiguiente reducción de tiempos de

trabajo. Naturalmente, esto no implica que la animación frame a frame no siga siendo

necesaria en algunas ocasiones, y Flash, con el uso de la técnica de papel cebolla,

también facilita esta tarea.

Flash también ofrece la posibilidad de utilizar alpha channel, lo que permite crear

imágenes con efectos de transparencia que van desde la opacidad absoluta a una to-

tal transparencia.

Herramientas complementarias

Macromedia Flash ofrece las herramientas necesarias para desarrollar un proyecto de

animación por sí solo. No obstante, no debemos olvidar que el uso de otras herra-

mientas puede ayudarnos a optimizar y mejorar nuestro proyecto.

Una aplicación de ilustración como Macromedia Freehand o Adobe Illustrator per-

miten exportar documentos que podemos posteriormente incorporar a nuestro pro-

yecto Flash. Éstas son aplicaciones con mayores capacidades para la ilustración que

Flash, pero son también más complicadas de utilizar que las herramientas de dibujo

de Flash.

Las aplicaciones de diseño bitmap como Photoshop o ImageReady pueden ser tam-

bién útiles en la creación de gráficos, o en la limpieza de dibujos escaneados que pos-

teriormente se vectorialicen en Flash.

Los medios tradicionales de dibujo tienen una cualidad difícil de reproducir en el or-

denador. No debemos abandonar por ello el uso de lápices, tintas, papeles, e incluso,

por qué no, una mesa de luz. La creación de gráficos manual y su posterior digitali-

zación es una técnica que combina la riqueza y calidez del trazo manual con la faci-

lidad de trabajo del ordenador.

FUOC FUOC


Para animar hay que dibujar

Esto es inevitable. ¿O no? Flash utiliza una técnica de trazado de imágenes que per-

mite que personas con un bajo nivel de dibujo puedan realizar proyectos de anima-

ción muy interesantes.

El trazado de imágenes puede realizarse sobre imágenes con calidad fotográfica o so-

bre dibujos a línea. El proceso implica la elección y preparación de la imagen en un

programa de edición de gráficos bitmap. Desde estos programas podemos escanear

un gráfico y retocarlo para simplificarlo o limpiar las partes no deseadas.

Cuanto más simple sea el gráfico, menor será el peso final del gráfico

vectorializado.

Flash dispone de toda una serie de opciones de trazado, como umbral de color o ajuste

de las curvas, mediante las cuales podemos determinar la cantidad de colores de la ima-

gen vectorializada o la fidelidad de los trazos vectoriales con respecto a los trazos bitmap.

La clave está en simplificar el gráfico lo máximo posible, eliminar toda la informa-

ción no deseada. Tenemos que pensar que Flash convertirá las zonas de color simila-

res en zonas homogéneas. Cuanto más “plana” sea nuestra imagen, cuanto más se

acerque a la ilustración y menos a la fotografía, mejores resultados obtendremos.

Moviendo las cosas. Cut-out

La técnica de animación cut-out se caracteriza por un tipo de movimiento brusco y

no demasiado fluido, y es una elección estilística que funciona muy bien con imáge-

En esta animación Flash realizada por David Lynch podemos apreciar el encanto del dibujo realizado a mano.www.shockwave.com


Para animar hay que dibujar

Esto es inevitable. ¿O no? Flash utiliza una técnica de trazado de imágenes que per-

mite que personas con un bajo nivel de dibujo puedan realizar proyectos de anima-

ción muy interesantes.

El trazado de imágenes puede realizarse sobre imágenes con calidad fotográfica o so-

bre dibujos a línea. El proceso implica la elección y preparación de la imagen en un

programa de edición de gráficos bitmap. Desde estos programas podemos escanear

un gráfico y retocarlo para simplificarlo o limpiar las partes no deseadas.

Cuanto más simple sea el gráfico, menor será el peso final del gráfico

vectorializado.

Flash dispone de toda una serie de opciones de trazado, como umbral de color o ajuste

de las curvas, mediante las cuales podemos determinar la cantidad de colores de la ima-

gen vectorializada o la fidelidad de los trazos vectoriales con respecto a los trazos bitmap.

La clave está en simplificar el gráfico lo máximo posible, eliminar toda la informa-

ción no deseada. Tenemos que pensar que Flash convertirá las zonas de color simila-

res en zonas homogéneas. Cuanto más “plana” sea nuestra imagen, cuanto más se

acerque a la ilustración y menos a la fotografía, mejores resultados obtendremos.

Moviendo las cosas. Cut-out

La técnica de animación cut-out se caracteriza por un tipo de movimiento brusco y

no demasiado fluido, y es una elección estilística que funciona muy bien con imáge-

En esta animación Flash realizada por David Lynch podemos apreciar el encanto del dibujo realizado a mano.www.shockwave.com

FUOC FUOC


nes trazadas o escaneadas. Esta técnica evolucionó antes de la existencia de los orde-

nadores como un estilo espontáneo, más centrado en la historia que en el virtuosismo

técnico. Su utilización en la animación en Internet responde más bien a una cuestión

de ahorro en el peso de los documentos (a menos dibujos, menor peso del documen-

to final), pero mantiene el encanto de las viejas animaciones.

Cuando preparemos los gráficos para animación cut-out debemos pensar en qué par-

tes de la imagen queremos animar, separando los elementos móviles. Debemos pen-

sar en nuestros personajes como en marionetas recortables, desmembrar el personaje

original y articular las diferentes partes de un modo lógico.

No olvidemos que Flash puede ser muy divertido. Probar las diferentes opciones ju-

gando con los valores de las opciones de trazado es un método de experimentar con

diferentes estilos que enriquecerá nuestro proyecto. Y hay que estar atento. Atento a

la televisión, a los videoclips, a los anuncios y los títulos de crédito de las películas.

Uno siempre aprende de lo que hacen los demás.

Interpolación y otras opcionesde animación

La interpolación es una técnica de animación que consiste en la realización de foto-

gramas intercalados entre dos fotogramas clave o keyframes en la línea de tiempo de

Flash. Pueden realizarse así cambios de escala, posición, color, rotación e incluso for-

ma. Con esta técnica podemos utilizar opciones como las guías de movimiento, con

las que, mediante una línea, indicamos al objeto la trayectoria que debe seguir entre

los dos keyframes que definen su movimiento.

La interpolación es una técnica rápida y fácil que produce documentos de tamaño

pequeño, pero no es la única técnica, y no siempre es la adecuada.

Podemos ver en el modelo desmontadolas partes que componen la figura original.

En las animaciones por interpolación, la aplicación calcula los fotogramasque faltan entre dos fotogramas clave.


nes trazadas o escaneadas. Esta técnica evolucionó antes de la existencia de los orde-

nadores como un estilo espontáneo, más centrado en la historia que en el virtuosismo

técnico. Su utilización en la animación en Internet responde más bien a una cuestión

de ahorro en el peso de los documentos (a menos dibujos, menor peso del documen-

to final), pero mantiene el encanto de las viejas animaciones.

Cuando preparemos los gráficos para animación cut-out debemos pensar en qué par-

tes de la imagen queremos animar, separando los elementos móviles. Debemos pen-

sar en nuestros personajes como en marionetas recortables, desmembrar el personaje

original y articular las diferentes partes de un modo lógico.

No olvidemos que Flash puede ser muy divertido. Probar las diferentes opciones ju-

gando con los valores de las opciones de trazado es un método de experimentar con

diferentes estilos que enriquecerá nuestro proyecto. Y hay que estar atento. Atento a

la televisión, a los videoclips, a los anuncios y los títulos de crédito de las películas.

Uno siempre aprende de lo que hacen los demás.

Interpolación y otras opcionesde animación

La interpolación es una técnica de animación que consiste en la realización de foto-

gramas intercalados entre dos fotogramas clave o keyframes en la línea de tiempo de

Flash. Pueden realizarse así cambios de escala, posición, color, rotación e incluso for-

ma. Con esta técnica podemos utilizar opciones como las guías de movimiento, con

las que, mediante una línea, indicamos al objeto la trayectoria que debe seguir entre

los dos keyframes que definen su movimiento.

La interpolación es una técnica rápida y fácil que produce documentos de tamaño

pequeño, pero no es la única técnica, y no siempre es la adecuada.

Podemos ver en el modelo desmontadolas partes que componen la figura original.

En las animaciones por interpolación, la aplicación calcula los fotogramasque faltan entre dos fotogramas clave.

FUOC FUOC


La animación fotograma a fotograma es una técnica en la cual cada fotograma es mo-

dificado a mano, facilitando la animación de objetos que evolucionan junto al mo-

vimiento, que es el caso de los objetos de tipo orgánico. Para facilitar esta tarea, Flash

incorpora una técnica denominada Papel cebolla, que permite visualizar como refe-

rencia los fotogramas anteriores y posteriores al fotograma actual, de modo que po-

damos ajustar la posición de los objetos.

La animación fotograma a fotograma ofrece una fluidez en el movimiento y una

aproximación al movimiento natural de los objetos, pero los documentos tienden a

tener un gran tamaño, y el trabajo de realizar todo un proyecto con esta técnica es

enorme.

Lo ideal es utilizar una combinación de ambas técnicas para alcanzar un equilibrio que

permita que nuestro proyecto se enriquezca con la animación fotograma a fotograma,

y mantenga unos tiempos de realización y un tamaño de documento adecuados.

Optimización

Vamos a considerar algunos conceptos que nos ayudarán a mejorar la calidad final

de nuestro proyectos de animación en Flash.

Puntos de vector

Un gráfico vectorial con muchos puntos de vector tiene un peso mucho mayor que

uno con pocos puntos de vector, lo que ralentiza al mismo tiempo la reproducción

de la animación. Simplificar en lo posible los gráficos desde la preparación de los

mismos ayuda, pero Flash dispone también de opciones de optimización que elimi-

nan parte de los puntos de un gráfico sin alterar drásticamente su aspecto.

Tipografías

Un error de principiantes consiste en dejarse llevar por la posibilidad de incluir cuan-

tas tipografías queramos en nuestros documentos Flash, aumentando así el tamaño

del documento. Es mucho mejor experimentar con el color o el tamaño del texto.

En una animación fotograma a fotograma cada dibujo es realizado a manopor el animador.


La animación fotograma a fotograma es una técnica en la cual cada fotograma es mo-

dificado a mano, facilitando la animación de objetos que evolucionan junto al mo-

vimiento, que es el caso de los objetos de tipo orgánico. Para facilitar esta tarea, Flash

incorpora una técnica denominada Papel cebolla, que permite visualizar como refe-

rencia los fotogramas anteriores y posteriores al fotograma actual, de modo que po-

damos ajustar la posición de los objetos.

La animación fotograma a fotograma ofrece una fluidez en el movimiento y una

aproximación al movimiento natural de los objetos, pero los documentos tienden a

tener un gran tamaño, y el trabajo de realizar todo un proyecto con esta técnica es

enorme.

Lo ideal es utilizar una combinación de ambas técnicas para alcanzar un equilibrio que

permita que nuestro proyecto se enriquezca con la animación fotograma a fotograma,

y mantenga unos tiempos de realización y un tamaño de documento adecuados.

Optimización

Vamos a considerar algunos conceptos que nos ayudarán a mejorar la calidad final

de nuestro proyectos de animación en Flash.

Puntos de vector

Un gráfico vectorial con muchos puntos de vector tiene un peso mucho mayor que

uno con pocos puntos de vector, lo que ralentiza al mismo tiempo la reproducción

de la animación. Simplificar en lo posible los gráficos desde la preparación de los

mismos ayuda, pero Flash dispone también de opciones de optimización que elimi-

nan parte de los puntos de un gráfico sin alterar drásticamente su aspecto.

Tipografías

Un error de principiantes consiste en dejarse llevar por la posibilidad de incluir cuan-

tas tipografías queramos en nuestros documentos Flash, aumentando así el tamaño

del documento. Es mucho mejor experimentar con el color o el tamaño del texto.

En una animación fotograma a fotograma cada dibujo es realizado a manopor el animador.

FUOC FUOC


Imágenes bitmap

Debemos evitar en lo posible el uso de imágenes bitmap en nuestros proyectos de ani-

mación. Son mucho más detalladas que las imágenes vectoriales, pero van contra uno

de los principios de la animación en Internet: los documentos deben ser pequeños.

Símbolos

Es conveniente utilizar símbolos en cualquier lugar donde reutilicemos un gráfico o

una animación dentro de nuestro proyecto. Así evitaremos duplicar gráficos inútil-

mente, lo que redundará en una considerable reducción de tamaño del movimiento.

Encontraremos más información sobre los símbolos en la Guía del Usuario de Flash.

Concentrar la acción

Como comentábamos en el apartado dedicado al gif animado, si concentramos la ac-

ción en zonas determinadas de la pantalla, incidimos de manera positiva en el refres-

co de pantalla, dado que solo las diferencias entre el último frame y el actual

necesitarán ser redibujadas.


Imágenes bitmap

Debemos evitar en lo posible el uso de imágenes bitmap en nuestros proyectos de ani-

mación. Son mucho más detalladas que las imágenes vectoriales, pero van contra uno

de los principios de la animación en Internet: los documentos deben ser pequeños.

Símbolos

Es conveniente utilizar símbolos en cualquier lugar donde reutilicemos un gráfico o

una animación dentro de nuestro proyecto. Así evitaremos duplicar gráficos inútil-

mente, lo que redundará en una considerable reducción de tamaño del movimiento.

Encontraremos más información sobre los símbolos en la Guía del Usuario de Flash.

Concentrar la acción

Como comentábamos en el apartado dedicado al gif animado, si concentramos la ac-

ción en zonas determinadas de la pantalla, incidimos de manera positiva en el refres-

co de pantalla, dado que solo las diferencias entre el último frame y el actual

necesitarán ser redibujadas.

FUOC FUOC


Actividades

Actividad 1: Animación por interpolación de forma

En esta primera práctica realizaremos una animación destinada a un público infantil

en la que relacionaremos una forma geométrica simple (círculo) con diferentes obje-

tos. Crearemos los dibujos necesarios con las herramientas de pintura de Macrome-

dia Flash, y utilizaremos técnicas de interpolación de forma para animarlos. En el

montaje de las secuencias, modificaremos los atributos de algunas instancias y utili-

zaremos técnicas de interpolación de movimiento para los efectos de entrada y salida

del círculo en escena.

Esta práctica puede llevar unos 60 minutos y está diseñada para Macromedia Flash.

A medida que se trabaje en la práctica, el archivo inicial se verá modificado. Para evi-

tar pérdidas de trabajo si se produjeran errores, podemos ir guardando las distintas

fases del trabajo con nombres numerados (fase 1, fase 2...).

Crear símbolos

Abrimos el programa Flash 5 y creamos un documento nuevo. En primer lugar crea-

remos la forma básica a partir de la cual trabajaremos los diferentes dibujos que for-

marán la animación.

1. Para ello, creamos un nuevo símbolo eligiendo la opción “New Symbol” en el

menú “Insert”, o usando el comando de teclado “Ctrl+F8”.

Un símbolo es un gráfico, un botón o una película que creamos una vez y es posible

reutilizar en diferentes partes de la animación o incluso en otras animaciones. Cada

símbolo que creamos pasa automáticamente a formar parte de la librería. Cuando co-

locamos un símbolo en el escenario o lo utilizamos dentro de otro símbolo pasa a

denominarse instancia. Una instancia de un símbolo puede ser modificada de tama-

ño, color y función, sin afectar al símbolo original, mientras que cualquier modifi-

cación realizada en el símbolo actualiza todas sus instancias.

Usando símbolos en las películas reducimos mucho el tamaño del documento

Flash.


Actividades

Actividad 1: Animación por interpolación de forma

En esta primera práctica realizaremos una animación destinada a un público infantil

en la que relacionaremos una forma geométrica simple (círculo) con diferentes obje-

tos. Crearemos los dibujos necesarios con las herramientas de pintura de Macrome-

dia Flash, y utilizaremos técnicas de interpolación de forma para animarlos. En el

montaje de las secuencias, modificaremos los atributos de algunas instancias y utili-

zaremos técnicas de interpolación de movimiento para los efectos de entrada y salida

del círculo en escena.


A medida que se trabaje en la práctica, el archivo inicial se verá modificado. Para evi-

tar pérdidas de trabajo si se produjeran errores, podemos ir guardando las distintas

fases del trabajo con nombres numerados (fase 1, fase 2...).

Crear símbolos

Abrimos el programa Flash 5 y creamos un documento nuevo. En primer lugar crea-

remos la forma básica a partir de la cual trabajaremos los diferentes dibujos que for-

marán la animación.

1. Para ello, creamos un nuevo símbolo eligiendo la opción “New Symbol” en el

menú “Insert”, o usando el comando de teclado “Ctrl+F8”.

Un símbolo es un gráfico, un botón o una película que creamos una vez y es posible

reutilizar en diferentes partes de la animación o incluso en otras animaciones. Cada

símbolo que creamos pasa automáticamente a formar parte de la librería. Cuando co-

locamos un símbolo en el escenario o lo utilizamos dentro de otro símbolo pasa a

denominarse instancia. Una instancia de un símbolo puede ser modificada de tama-

ño, color y función, sin afectar al símbolo original, mientras que cualquier modifi-

cación realizada en el símbolo actualiza todas sus instancias.

Usando símbolos en las películas reducimos mucho el tamaño del documento

Flash.

FUOC FUOC


2. Luego, elegimos “Oval Tool” (‘herramienta oval’) en la barra de herramientas, y

en la ventana “Stroke” definimos el grosor de la línea y el estilo de la misma.

3. Creamos con la herramienta oval un círculo con el relleno blanco. Este primer di-

bujo servirá de base para la creación del resto de las imágenes.

4. Vamos a comparar el círculo con un donut, con una pelota y con el Sol. Para ello,

crearemos los dibujos correspondientes a partir de duplicados de la forma base, que

crearemos desde la opción “Duplicate Symbol” que encontraremos en el menú des-

plegable de la paleta “Librería”.

Una vez creado el duplicado del símbolo, lo editaremos y modificaremos el dibujo.

Interpolaciones de forma

Vamos a crear las primeras secuencias animadas de nuestra película.

1. Renombramos el primer duplicado en la paleta “Librería” y lo llamamos donut.

Editamos el símbolo donut y nos situamos en el fotograma 20 de la línea temporal.

Seleccionamos “Insert>Keyframe”.


2. Luego, elegimos “Oval Tool” (‘herramienta oval’) en la barra de herramientas, y

en la ventana “Stroke” definimos el grosor de la línea y el estilo de la misma.

3. Creamos con la herramienta oval un círculo con el relleno blanco. Este primer di-

bujo servirá de base para la creación del resto de las imágenes.

4. Vamos a comparar el círculo con un donut, con una pelota y con el Sol. Para ello,

crearemos los dibujos correspondientes a partir de duplicados de la forma base, que

crearemos desde la opción “Duplicate Symbol” que encontraremos en el menú des-

plegable de la paleta “Librería”.

Una vez creado el duplicado del símbolo, lo editaremos y modificaremos el dibujo.

Interpolaciones de forma

Vamos a crear las primeras secuencias animadas de nuestra película.

1. Renombramos el primer duplicado en la paleta “Librería” y lo llamamos donut.

Editamos el símbolo donut y nos situamos en el fotograma 20 de la línea temporal.

Seleccionamos “Insert>Keyframe”.

FUOC FUOC


Modificamos el dibujo en el fotograma 20 del siguiente modo.

2. Seleccionamos el keyframe del fotograma 1 y en la paleta “Frame” seleccionamos

la opción “Tweening: Shape”.

Interpolando formas con la opción “Tweening>Shape” creamos un efecto similar al

morphing, haciendo que una forma parezca cambiar a otra a lo largo del tiempo. Flash

puede también interpolar no sólo la forma, sino la posición, el tamaño y el color de

las formas.

Interpolando una forma cada vez es como se obtienen mejores resultados. Si inter-

polamos múltiples formas de una vez, todas las formas deben estar en la misma capa.

Flash no puede interpolar la forma de grupos, símbolos, bloques de texto, o de

imágenes bitmap.

Podemos comprobar la animación en la línea temporal pulsando la tecla Intro.

3. Creamos otro keyframe en el fotograma 40, y otro en el fotograma 60. En el foto-

grama 60 eliminamos el dibujo del donut y lo sustituimos por el dibujo del primer


Modificamos el dibujo en el fotograma 20 del siguiente modo.

2. Seleccionamos el keyframe del fotograma 1 y en la paleta “Frame” seleccionamos

la opción “Tweening: Shape”.

Interpolando formas con la opción “Tweening>Shape” creamos un efecto similar al

morphing, haciendo que una forma parezca cambiar a otra a lo largo del tiempo. Flash

puede también interpolar no sólo la forma, sino la posición, el tamaño y el color de

las formas.

Interpolando una forma cada vez es como se obtienen mejores resultados. Si inter-

polamos múltiples formas de una vez, todas las formas deben estar en la misma capa.

Flash no puede interpolar la forma de grupos, símbolos, bloques de texto, o de

imágenes bitmap.


3. Creamos otro keyframe en el fotograma 40, y otro en el fotograma 60. En el foto-

grama 60 eliminamos el dibujo del donut y lo sustituimos por el dibujo del primer

FUOC FUOC


fotograma. Para ello, seleccionamos el dibujo del primer fotograma haciendo clic so-

bre el keyframe, y elegimos Edit>Copy.

Nos trasladamos al fotograma 60 y elegimos la opción Edit>Paste in place, de manera

que el dibujo del fotograma 1 se copie en el fotograma 60 en la misma posición ori-

ginal, y alargamos la instancia hacia la derecha para dejar una cola de unos 5 frames,

para evitar vacíos si nos equivocamos en la extensión de las secuencias en el montaje

final.


4. Para crear el símbolo pelota procederemos de igual modo que con el donut. El di-

bujo modificado tendrá un aspecto similar a éste.

Trabajando con layers

1. Realizamos los mismos pasos para crear el símbolo Sol con el siguiente aspecto:

Pero a este símbolo vamos a añadirle algo más. En primer lugar, crearemos una nueva

capa en la línea temporal haciendo clic sobre el botón “Insert Layer”. Creamos un

dibujo imitando los rayos del sol.


fotograma. Para ello, seleccionamos el dibujo del primer fotograma haciendo clic so-

bre el keyframe, y elegimos Edit>Copy.

Nos trasladamos al fotograma 60 y elegimos la opción Edit>Paste in place, de manera

que el dibujo del fotograma 1 se copie en el fotograma 60 en la misma posición ori-

ginal, y alargamos la instancia hacia la derecha para dejar una cola de unos 5 frames,

para evitar vacíos si nos equivocamos en la extensión de las secuencias en el montaje

final.


4. Para crear el símbolo pelota procederemos de igual modo que con el donut. El di-

bujo modificado tendrá un aspecto similar a éste.

Trabajando con layers

1. Realizamos los mismos pasos para crear el símbolo Sol con el siguiente aspecto:

Pero a este símbolo vamos a añadirle algo más. En primer lugar, crearemos una nueva

capa en la línea temporal haciendo clic sobre el botón “Insert Layer”. Creamos un

dibujo imitando los rayos del sol.

FUOC FUOC


2. Posteriormente insertamos un keyframe en los fotogramas 20, 30, 40 y 60 de la lí-

nea temporal.

Y modificamos los dibujos de cada fotograma de la siguiente forma: reducimos el ta-

maño del fotograma 1 y 60 para que los rayos del sol queden dentro del círculo.

3. El dibujo del fotograma 30 también lo reducimos, para animar los rayos, pero sin

que desaparezcan dentro del círculo.

4. Para que el dibujo se anime seleccionamos el keyframe del fotograma 1 y en la pa-

leta “Frame” seleccionamos la opción “Tweening: Shape”. Procederemos de igual

modo con el resto de los keyframes.


2. Posteriormente insertamos un keyframe en los fotogramas 20, 30, 40 y 60 de la lí-

nea temporal.

Y modificamos los dibujos de cada fotograma de la siguiente forma: reducimos el ta-

maño del fotograma 1 y 60 para que los rayos del sol queden dentro del círculo.

3. El dibujo del fotograma 30 también lo reducimos, para animar los rayos, pero sin

que desaparezcan dentro del círculo.

4. Para que el dibujo se anime seleccionamos el keyframe del fotograma 1 y en la pa-

leta “Frame” seleccionamos la opción “Tweening: Shape”. Procederemos de igual

modo con el resto de los keyframes.

FUOC FUOC


5. En este momento desplazamos la capa “Layer 2” bajo la capa “Layer 1”, y com-

probamos la secuencia haciendo clic sobre el botón “Intro”.

Trabajando con texto

En este momento vamos a crear los textos que acompañarán nuestra animación.

1. Creamos un nuevo símbolo gráfico, haciendo clic sobre el botón “New symbol”

de la paleta “Library”.

2. Elegimos la herramienta “Text”, y modificamos las características del texto que

queremos introducir en la paleta “Character”. Podemos probar con diferentes tipo-

grafías hasta encontrar la que mejor se adapte al estilo que queramos imprimir a

nuestra animación.

3. Accederemos a la paleta “Paragraph” haciendo clic sobre la pestaña correspon-

diente en la ventana flotante que la contiene, para indicar que queremos que el texto

se muestre con alineación central.


5. En este momento desplazamos la capa “Layer 2” bajo la capa “Layer 1”, y com-

probamos la secuencia haciendo clic sobre el botón “Intro”.

Trabajando con texto

En este momento vamos a crear los textos que acompañarán nuestra animación.

1. Creamos un nuevo símbolo gráfico, haciendo clic sobre el botón “New symbol”

de la paleta “Library”.

2. Elegimos la herramienta “Text”, y modificamos las características del texto que

queremos introducir en la paleta “Character”. Podemos probar con diferentes tipo-

grafías hasta encontrar la que mejor se adapte al estilo que queramos imprimir a

nuestra animación.

3. Accederemos a la paleta “Paragraph” haciendo clic sobre la pestaña correspon-

diente en la ventana flotante que la contiene, para indicar que queremos que el texto

se muestre con alineación central.

FUOC FUOC


Hacemos clic sobre la zona de trabajo con la herramienta “Text” seleccionada y es-

cribimos el siguiente texto: “¿A qué se parece un círculo?”.

4. Ya tenemos el primer texto de la animación. Procedemos de igual modo para

crear los símbolos correspondientes al resto de los textos:

• “Puede ser un donut”

• “o una pelota”

• “o también el Sol”

• “Vaya, se ha marchado”

Montando las secuencias (1)

Ahora que tenemos las distintas secuencias y los diferentes elementos de la anima-

ción, procederemos a montarlas en el escenario.

1. Una vez seleccionado el escenario, modificamos el tamaño del mismo y el color

de fondo con el comando “Modify>Movie” de la barra de menús. De este modo ajus-

tamos el tamaño de la animación, y el dibujo del círculo destacará más sobre el fondo.

2. Vamos a montar las distintas secuencias. Hacemos doble clic sobre la capa exis-

tente en la línea temporal y la denominamos Dibujos.

Primero vamos a hacer aparecer el círculo. Seleccionamos el símbolo “Círculo” en la

paleta “Librería” y lo arrastramos sobre el escenario, creando una instancia del mismo.

3. Seleccionamos el fotograma 20 de la línea temporal y presionamos la tecla F6 para

insertar un nuevo keyframe.


Hacemos clic sobre la zona de trabajo con la herramienta “Text” seleccionada y es-

cribimos el siguiente texto: “¿A qué se parece un círculo?”.

4. Ya tenemos el primer texto de la animación. Procedemos de igual modo para

crear los símbolos correspondientes al resto de los textos:

• “Puede ser un donut”

• “o una pelota”

• “o también el Sol”

• “Vaya, se ha marchado”


Ahora que tenemos las distintas secuencias y los diferentes elementos de la anima-

ción, procederemos a montarlas en el escenario.

1. Una vez seleccionado el escenario, modificamos el tamaño del mismo y el color

de fondo con el comando “Modify>Movie” de la barra de menús. De este modo ajus-

tamos el tamaño de la animación, y el dibujo del círculo destacará más sobre el fondo.

2. Vamos a montar las distintas secuencias. Hacemos doble clic sobre la capa exis-

tente en la línea temporal y la denominamos Dibujos.

Primero vamos a hacer aparecer el círculo. Seleccionamos el símbolo “Círculo” en la

paleta “Librería” y lo arrastramos sobre el escenario, creando una instancia del mismo.

3. Seleccionamos el fotograma 20 de la línea temporal y presionamos la tecla F6 para

insertar un nuevo keyframe.

FUOC FUOC


4. Seleccionamos el keyframe del fotograma 1 y reducimos bastante el tamaño del

círculo. Para ello seleccionamos el círculo haciendo clic sobre él, y reducimos los va-

lores de escala en la paleta “Transform”.

El círculo quedará como sigue:

5. Vamos a utilizar ahora la interpolación de movimiento para que se produzca la

animación de cambio de escala del círculo. Seleccionamos el keyframe del fotograma

1, y seleccionamos “Motion” en el desplegable “Tweening” de la paleta “Frame”.

Para interpolar los cambios en las propiedades de instancias, grupos y tipografía, se

utiliza el modo de interpolación de movimiento (“Motion Tweening”). Flash puede

interpolar posición, tamaño, rotación e inclinación de instancias, grupos y tipografía.

Si cambiamos el número de fotogramas entre keyframes, o modificamos las

propiedades del grupo o símbolo en cualquiera de los keyframes, Flash vuelve

a interpolar los fotogramas de nuevo.


4. Seleccionamos el keyframe del fotograma 1 y reducimos bastante el tamaño del

círculo. Para ello seleccionamos el círculo haciendo clic sobre él, y reducimos los va-

lores de escala en la paleta “Transform”.

El círculo quedará como sigue:

5. Vamos a utilizar ahora la interpolación de movimiento para que se produzca la

animación de cambio de escala del círculo. Seleccionamos el keyframe del fotograma

1, y seleccionamos “Motion” en el desplegable “Tweening” de la paleta “Frame”.

Para interpolar los cambios en las propiedades de instancias, grupos y tipografía, se

utiliza el modo de interpolación de movimiento (“Motion Tweening”). Flash puede

interpolar posición, tamaño, rotación e inclinación de instancias, grupos y tipografía.

Si cambiamos el número de fotogramas entre keyframes, o modificamos las

propiedades del grupo o símbolo en cualquiera de los keyframes, Flash vuelve

a interpolar los fotogramas de nuevo.

FUOC FUOC


Podemos comprobar el efecto haciendo clic sobre la tecla “Intro”.

Propiedades de una instancia

Vamos a realizar un cambio de propiedades sobre la instancia círculo, para simular

la aparición del mismo en escena. Cada instancia tiene sus propias propiedades se-

paradas de las del símbolo. Podemos cambiar la tinta, la transparencia y el brillo de

una instancia.

1. Seleccionamos el keyframe del fotograma 1 y seleccionamos “Alpha” en el desple-

gable de la paleta “Effect”. Le otorgaremos un valor 0.



Vamos a seguir con la animación.

1. Creamos una nueva capa en la línea de tiempos y la denominamos “Texto”. Se-

leccionamos el fotograma 15 y elegimos “Insert>Blank Keyframe” en la barra de me-

“Brightness” (brillo) ajusta la luminosidad uoscuridad de una imagen, midiéndola enuna escala que va del blanco (100%) al ne-gro (−100%).

“Tint” (tinta) colorea la instancia con el mis-mo color, con un porcentaje de aplicaciónque va del transparente (1% de color aplica-

do) a la saturación completa (100% de coloraplicado).

“Alpha” (transparencia) ajusta la transparen-cia de la instancia.

“Advanced” ajusta por separado los valoresde rojo, verde y azul, y los valores de transpa-rencia de una instancia.



Propiedades de una instancia

Vamos a realizar un cambio de propiedades sobre la instancia círculo, para simular

la aparición del mismo en escena. Cada instancia tiene sus propias propiedades se-

paradas de las del símbolo. Podemos cambiar la tinta, la transparencia y el brillo de

una instancia.

1. Seleccionamos el keyframe del fotograma 1 y seleccionamos “Alpha” en el desple-

gable de la paleta “Effect”. Le otorgaremos un valor 0.



Vamos a seguir con la animación.

1. Creamos una nueva capa en la línea de tiempos y la denominamos “Texto”. Se-

leccionamos el fotograma 15 y elegimos “Insert>Blank Keyframe” en la barra de me-

“Brightness” (brillo) ajusta la luminosidad uoscuridad de una imagen, midiéndola enuna escala que va del blanco (100%) al ne-gro (−100%).

“Tint” (tinta) colorea la instancia con el mis-mo color, con un porcentaje de aplicaciónque va del transparente (1% de color aplica-

do) a la saturación completa (100% de coloraplicado).

“Alpha” (transparencia) ajusta la transparen-cia de la instancia.

“Advanced” ajusta por separado los valoresde rojo, verde y azul, y los valores de transpa-rencia de una instancia.

FUOC FUOC


nús para insertar un keyframe vacío. Con el fotograma 15 seleccionado arrastramos

el símbolo “Texto1” al escenario y lo situamos sobre el círculo.

2. Alargamos la instancia del texto haciendo clic sobre el extremo derecho y arras-

trando hacia la derecha hasta el fotograma 35. Procederemos igual con la instancia

del círculo hasta el fotograma 40.

3. Vamos a añadir la secuencia del donut. Para ello insertamos un nuevo keyframe en

el fotograma 40 de la capa “Dibujos”, y seleccionando el keyframe hacemos clic so-

bre el botón “Swap Symbol” de la paleta “Instance”.

Asignando un símbolo distinto a una instancia, Flash muestra una instancia diferen-

te en el escenario, manteniendo intactas todas las propiedades de la instancia origi-

nal, como efectos de color.

En el cuadro de diálogo seleccionamos “donut”. De este modo podemos cambiar el

símbolo de la instancia.

4. Alargamos la Instancia “donut” hasta el fotograma 100.

5. En la capa “texto” seleccionamos la barra de fotogramas del “Texto 1” y elegimos

“Edit>Copy Frames” en la barra de menús. Insertamos un keyframe vacío justo donde

acaba el primer texto, y otro en el fotograma 55 de la misma capa. Seleccionamos el

keyframe del fotograma 55 y elegimos “Edit>Paste Frames”. Observaremos que se nos

copia el mismo texto que teníamos. Pero lo intercambiaremos con el símbolo texto

2 del mismo modo que hemos hecho con el donut, por medio de la paleta “Instance”,

y alargaremos la barra hasta el fotograma 85.


nús para insertar un keyframe vacío. Con el fotograma 15 seleccionado arrastramos

el símbolo “Texto1” al escenario y lo situamos sobre el círculo.

2. Alargamos la instancia del texto haciendo clic sobre el extremo derecho y arras-

trando hacia la derecha hasta el fotograma 35. Procederemos igual con la instancia

del círculo hasta el fotograma 40.

3. Vamos a añadir la secuencia del donut. Para ello insertamos un nuevo keyframe en

el fotograma 40 de la capa “Dibujos”, y seleccionando el keyframe hacemos clic so-

bre el botón “Swap Symbol” de la paleta “Instance”.

Asignando un símbolo distinto a una instancia, Flash muestra una instancia diferen-

te en el escenario, manteniendo intactas todas las propiedades de la instancia origi-

nal, como efectos de color.

En el cuadro de diálogo seleccionamos “donut”. De este modo podemos cambiar el

símbolo de la instancia.

4. Alargamos la Instancia “donut” hasta el fotograma 100.

5. En la capa “texto” seleccionamos la barra de fotogramas del “Texto 1” y elegimos

“Edit>Copy Frames” en la barra de menús. Insertamos un keyframe vacío justo donde

acaba el primer texto, y otro en el fotograma 55 de la misma capa. Seleccionamos el

keyframe del fotograma 55 y elegimos “Edit>Paste Frames”. Observaremos que se nos

copia el mismo texto que teníamos. Pero lo intercambiaremos con el símbolo texto

2 del mismo modo que hemos hecho con el donut, por medio de la paleta “Instance”,

y alargaremos la barra hasta el fotograma 85.

FUOC FUOC



6. Procederemos de igual modo con el resto de las secuencias. El símbolo “pelota”

se corresponde con el texto 3, y el símbolo “Sol” con el texto 4. Si nos fijamos en la

primera secuencia, vemos que el texto se sitúa en el centro de la secuencia.

Finalizando la animación

Una vez situadas el resto de las secuencias, vamos a montar la animación inversa a

aquella con la que introdujimos el círculo en escena. Veamos el estado de la línea

temporal.

Si lo hemos hecho bien, la barra final de la capa “dibujos” se corresponde con la se-

cuencia del Sol, y la de la capa “Texto” con el texto 4.

1. Seleccionamos el fotograma adyacente a la barra de la secuencia del Sol y creamos

un keyframe nuevo pulsando la tecla F6. Intercambiamos el símbolo con el símbolo

Círculo mediante la opción “Swap Symbol” de la paleta “Instance”.

2. Insertamos dos keyframes más en los fotogramas 240 y 260.

3. Seleccionamos el círculo en el keyframe del fotograma 260 haciendo clic sobre él,

y reducimos los valores de escala en la paleta “Transform” como hicimos al principio

del montaje.



6. Procederemos de igual modo con el resto de las secuencias. El símbolo “pelota”

se corresponde con el texto 3, y el símbolo “Sol” con el texto 4. Si nos fijamos en la

primera secuencia, vemos que el texto se sitúa en el centro de la secuencia.

Finalizando la animación

Una vez situadas el resto de las secuencias, vamos a montar la animación inversa a

aquella con la que introdujimos el círculo en escena. Veamos el estado de la línea

temporal.

Si lo hemos hecho bien, la barra final de la capa “dibujos” se corresponde con la se-

cuencia del Sol, y la de la capa “Texto” con el texto 4.

1. Seleccionamos el fotograma adyacente a la barra de la secuencia del Sol y creamos

un keyframe nuevo pulsando la tecla F6. Intercambiamos el símbolo con el símbolo

Círculo mediante la opción “Swap Symbol” de la paleta “Instance”.

2. Insertamos dos keyframes más en los fotogramas 240 y 260.

3. Seleccionamos el círculo en el keyframe del fotograma 260 haciendo clic sobre él,

y reducimos los valores de escala en la paleta “Transform” como hicimos al principio

del montaje.

FUOC FUOC


También modificaremos los atributos de la instancia en la paleta “Effect” para asig-

narle un valor Alpha igual a 0.

4. Seleccionamos el keyframe del fotograma 240 y elegimos “Motion” en el desple-

gable “Tweening” de la paleta “Frame”.

La línea temporal queda como sigue.


5. Ahora vamos a colocar el último texto. Insertamos un keyframe vacío al final del

último texto de la capa “Texto”, y otro en el frame 250.

6. Seleccionamos la última barra de texto (correspondiente al texto 4) y elegimos

“Edit>Copy Frames” en la barra de menús. Seleccionamos el keyframe vacío del foto-


También modificaremos los atributos de la instancia en la paleta “Effect” para asig-

narle un valor Alpha igual a 0.

4. Seleccionamos el keyframe del fotograma 240 y elegimos “Motion” en el desple-

gable “Tweening” de la paleta “Frame”.

La línea temporal queda como sigue.


5. Ahora vamos a colocar el último texto. Insertamos un keyframe vacío al final del

último texto de la capa “Texto”, y otro en el frame 250.

6. Seleccionamos la última barra de texto (correspondiente al texto 4) y elegimos

“Edit>Copy Frames” en la barra de menús. Seleccionamos el keyframe vacío del foto-

FUOC FUOC


grama 250 y elegimos “Edit>Paste Frames” para pegar la barra del texto 4 a partir del

fotograma.

7. Intercambiamos el símbolo “Texto 4” con el símbolo “texto 5” mediante la op-

ción “Swap Symbol” de la paleta “Instance”.

8. Para acabar sobre un fondo liso, acortamos la extensión de la barra del Texto 5

insertando un keyframe en blanco en el fotograma 270.

Resultado final

Actividad 2: Animación por interpolación de movimiento

En esta práctica realizaremos una animación en la que sincronizaremos una figura

cantando una canción. Dispondremos de los dibujos necesarios y del tema, y utiliza-

remos técnicas de interpolación de movimiento para animarlos.


grama 250 y elegimos “Edit>Paste Frames” para pegar la barra del texto 4 a partir del

fotograma.

7. Intercambiamos el símbolo “Texto 4” con el símbolo “texto 5” mediante la op-

ción “Swap Symbol” de la paleta “Instance”.

8. Para acabar sobre un fondo liso, acortamos la extensión de la barra del Texto 5

insertando un keyframe en blanco en el fotograma 270.

Resultado final

Actividad 2: Animación por interpolación de movimiento

En esta práctica realizaremos una animación en la que sincronizaremos una figura

cantando una canción. Dispondremos de los dibujos necesarios y del tema, y utiliza-

remos técnicas de interpolación de movimiento para animarlos.

FUOC FUOC



A medida que se trabaje en la práctica, el archivo inicial se verá modificado. Antes de

comenzar, descargaremos la carpeta correspondiente a esta práctica en el disco duro.

A medida que se trabaje en la práctica, los archivos iniciales se verán modificados.

Para recuperarlos, pueden volver a descargarse del site.

Trabajar con sonido

Antes de comenzar la práctica, y a lo largo de ella, podemos consultar la animación

finalizada huesos.swf.

En primer lugar, abriremos el documento huesos.fla y observaremos las diferentes

piezas que forman la figura. Seleccionamos cada una de las piezas y podremos com-

probar que están situadas en distintos canales de la línea de tiempo.

En este momento, vamos a crear un canal de sonido para utilizarlo de referencia a la

hora de animar las piezas de la figura.

Debemos recordad que en toda animación son las imágenes las que se

adaptan al diálogo, y no a la inversa, de manera que nos basaremos en la

canción seleccionada como referente para la animación de nuestro personaje.

1. Creamos un nuevo canal en la línea de tiempo, haciendo clic sobre el botón

“Insert Layer” situado en la parte inferior derecha de la línea de tiempo de Flash.




comenzar, descargaremos la carpeta correspondiente a esta práctica en el disco duro.


Para recuperarlos, pueden volver a descargarse del site.

Trabajar con sonido

Antes de comenzar la práctica, y a lo largo de ella, podemos consultar la animación

finalizada huesos.swf.

En primer lugar, abriremos el documento huesos.fla y observaremos las diferentes

piezas que forman la figura. Seleccionamos cada una de las piezas y podremos com-

probar que están situadas en distintos canales de la línea de tiempo.

En este momento, vamos a crear un canal de sonido para utilizarlo de referencia a la

hora de animar las piezas de la figura.

Debemos recordad que en toda animación son las imágenes las que se

adaptan al diálogo, y no a la inversa, de manera que nos basaremos en la

canción seleccionada como referente para la animación de nuestro personaje.

1. Creamos un nuevo canal en la línea de tiempo, haciendo clic sobre el botón

“Insert Layer” situado en la parte inferior derecha de la línea de tiempo de Flash.

FUOC FUOC


Haciendo doble clic sobre el nombre de la capa podemos renombrarla. La llamare-

mos “sonido”.

Para ordenar las capas y colocar la capa de sonido en la zona inferior de la columna

de capas, seleccionamos la capa y, sin soltar el botón del ratón, arrastramos la capa

hacia abajo, y la situamos bajo la capa cuello.

2. En la ventana “Library” podemos observar el símbolo de sonido que necesitamos.

3. Seleccionamos el símbolo “turutu.aif” y lo arrastramos sobre la pantalla. Dado que

tenemos seleccionado el canal “sonido”, se situará en él. Otra manera de colocar un

sonido es seleccionar un keyframe vacío y seleccionar el sonido desde la paleta Sound.


Haciendo doble clic sobre el nombre de la capa podemos renombrarla. La llamare-

mos “sonido”.

Para ordenar las capas y colocar la capa de sonido en la zona inferior de la columna

de capas, seleccionamos la capa y, sin soltar el botón del ratón, arrastramos la capa

hacia abajo, y la situamos bajo la capa cuello.

2. En la ventana “Library” podemos observar el símbolo de sonido que necesitamos.

3. Seleccionamos el símbolo “turutu.aif” y lo arrastramos sobre la pantalla. Dado que

tenemos seleccionado el canal “sonido”, se situará en él. Otra manera de colocar un

sonido es seleccionar un keyframe vacío y seleccionar el sonido desde la paleta Sound.

FUOC FUOC


Hay dos tipos de sonidos en Flash: Event (‘evento’) y Stream (‘flujo’). Un sonido de

evento se descarga completamente antes de empezar a sonar, y continúa sonando

hasta que se lo detenga de manera explícita, independientemente de la línea de tiem-

po. Los sonidos de flujo comienzan a sonar tan pronto como se han descargado su-

ficientes datos para los primeros fotogramas. Además, los sonidos de flujo están

sincronizados con la línea de tiempo para su reproducción en un sitio web, de tal ma-

nera que si Flash no pudiera redibujar los fotogramas con suficiente velocidad para

seguir el sonido, se saltaría las imágenes necesarias para mantener la sincronización

con el sonido.

Para que el sonido sincronice perfectamente con la animación, deberemos elegir en-

tonces la opción de sincronización Stream.

3. Para saber hasta qué fotograma nos alcanzará la canción, podemos editar el sím-

bolo de sonido, haciendo clic sobre el botón “Edit...” de la paleta “Sound”. Nos apa-

recerá la ventana “Edit Envelope”.

Hacemos clic sobre el icono que representa un fotograma y nos presentará el sonido

medido en fotogramas. Si movemos la barra de desplazamiento hasta el final del so-

nido comprobaremos que dura 285 fotogramas.

Para que el sonido nos sirva de referencia para la animación, debemos estirar la ins-

tancia para que ocupe los 285 fotogramas de duración. Podemos estirar la instancia

arrastrando hacia la derecha desde el borde de la misma, o bien seleccionar el foto-

grama 285 y presionar la tecla F5.


Hay dos tipos de sonidos en Flash: Event (‘evento’) y Stream (‘flujo’). Un sonido de

evento se descarga completamente antes de empezar a sonar, y continúa sonando

hasta que se lo detenga de manera explícita, independientemente de la línea de tiem-

po. Los sonidos de flujo comienzan a sonar tan pronto como se han descargado su-

ficientes datos para los primeros fotogramas. Además, los sonidos de flujo están

sincronizados con la línea de tiempo para su reproducción en un sitio web, de tal ma-

nera que si Flash no pudiera redibujar los fotogramas con suficiente velocidad para

seguir el sonido, se saltaría las imágenes necesarias para mantener la sincronización

con el sonido.

Para que el sonido sincronice perfectamente con la animación, deberemos elegir en-

tonces la opción de sincronización Stream.

3. Para saber hasta qué fotograma nos alcanzará la canción, podemos editar el sím-

bolo de sonido, haciendo clic sobre el botón “Edit...” de la paleta “Sound”. Nos apa-

recerá la ventana “Edit Envelope”.

Hacemos clic sobre el icono que representa un fotograma y nos presentará el sonido

medido en fotogramas. Si movemos la barra de desplazamiento hasta el final del so-

nido comprobaremos que dura 285 fotogramas.

Para que el sonido nos sirva de referencia para la animación, debemos estirar la ins-

tancia para que ocupe los 285 fotogramas de duración. Podemos estirar la instancia

arrastrando hacia la derecha desde el borde de la misma, o bien seleccionar el foto-

grama 285 y presionar la tecla F5.

FUOC FUOC


Interpolación de movimiento (1)

1. El cuello es una parte no móvil de la animación, puesto que actuará de soporte

para las otras dos piezas. Para que se mantenga presente, debemos estirar esta instan-

cia también hasta el fotograma 285.

2. Volvemos al fotograma 1 y comenzamos la animación de las piezas. En primer lu-

gar, seleccionamos el fotograma 8 de los canales “cráneo” y “mandíbula” y pulsamos

F6 para crear un nuevo keyframe en ambos canales.

Como no podemos sincronizar las labiales (no se entiende bien lo que dice la can-

ción), las simularemos, abriendo y cerrando las mandíbulas a intervalos más o me-

nos regulares en los fotogramas en que haya sonido, y manteniéndola cerrada en los

fotogramas sin sonido. Para ello insertaremos nuevos keyframes para ambos canales

en los fotogramas 10, 14, 17, 19 y 22. Estos keyframes nos permitirán mover la man-

díbula y el cráneo para simular la articulación de sonido.

3. El keyframe de “mandíbula” del fotograma 8 nos sirve de inicio de apertura de la

boca. Seleccionamos el keyframe del fotograma 10 de “mandíbula” y lo desplazamos

hacia abajo. Para ello, presionamos la tecla de mayúsculas y la tecla de flecha para

abajo y la mandíbula se desplazará 8 píxeles en esa dirección.

Podemos comprobar el desplazamiento seleccionando alternativamentelos fotogramas 8 y 10.



1. El cuello es una parte no móvil de la animación, puesto que actuará de soporte

para las otras dos piezas. Para que se mantenga presente, debemos estirar esta instan-

cia también hasta el fotograma 285.

2. Volvemos al fotograma 1 y comenzamos la animación de las piezas. En primer lu-

gar, seleccionamos el fotograma 8 de los canales “cráneo” y “mandíbula” y pulsamos

F6 para crear un nuevo keyframe en ambos canales.

Como no podemos sincronizar las labiales (no se entiende bien lo que dice la can-

ción), las simularemos, abriendo y cerrando las mandíbulas a intervalos más o me-

nos regulares en los fotogramas en que haya sonido, y manteniéndola cerrada en los

fotogramas sin sonido. Para ello insertaremos nuevos keyframes para ambos canales

en los fotogramas 10, 14, 17, 19 y 22. Estos keyframes nos permitirán mover la man-

díbula y el cráneo para simular la articulación de sonido.

3. El keyframe de “mandíbula” del fotograma 8 nos sirve de inicio de apertura de la

boca. Seleccionamos el keyframe del fotograma 10 de “mandíbula” y lo desplazamos

hacia abajo. Para ello, presionamos la tecla de mayúsculas y la tecla de flecha para

abajo y la mandíbula se desplazará 8 píxeles en esa dirección.

Podemos comprobar el desplazamiento seleccionando alternativamentelos fotogramas 8 y 10.

FUOC FUOC


4. El keyframe del fotograma 14 lo desplazamos 2 píxeles hacia abajo, con ayuda de

la tecla flecha para abajo. El keyframe del fotograma 17 lo dejamos tal cual, para que la

mandíbula se cierre, y desplazamos el keyframe del fotograma 19 del mismo modo

como lo hicimos en el fotograma 10 (mandíbula muy abierta).

5. Para animar un poco más la cabeza, desplazaremos el cráneo dos píxeles hacia

arriba en los fotogramas 10 y 19 (los de mandíbula más abierta). Seleccionamos todas

las instancias de ambos canales para aplicarles el método de interpolación.

En la paleta “Frame” seleccionamos el modo de interpolación “Motion” en el desple-

gable “Tweening”.

Vemos cómo se aplica a todos los keyframes de la animación.

6. Ahora, para el silencio entre estrofas, seleccionamos el fotograma 32 de ambos ca-

nales y presionamos la tecla F6 para insertar dos nuevos keyframes. Podemos observar

que el espacio entre los últimos keyframes y los nuevos también tiene aplicada la in-

terpolación. Esto sucede porque, al aplicar la interpolación a todas las instancias a la

vez, nos las ha unido en la línea de tiempo. Para comprobarlo, haced clic con el cur-

sor sobre cualquiera de los fotogramas de color azul.


4. El keyframe del fotograma 14 lo desplazamos 2 píxeles hacia abajo, con ayuda de

la tecla flecha para abajo. El keyframe del fotograma 17 lo dejamos tal cual, para que la

mandíbula se cierre, y desplazamos el keyframe del fotograma 19 del mismo modo

como lo hicimos en el fotograma 10 (mandíbula muy abierta).

5. Para animar un poco más la cabeza, desplazaremos el cráneo dos píxeles hacia

arriba en los fotogramas 10 y 19 (los de mandíbula más abierta). Seleccionamos todas

las instancias de ambos canales para aplicarles el método de interpolación.

En la paleta “Frame” seleccionamos el modo de interpolación “Motion” en el desple-

gable “Tweening”.

Vemos cómo se aplica a todos los keyframes de la animación.

6. Ahora, para el silencio entre estrofas, seleccionamos el fotograma 32 de ambos ca-

nales y presionamos la tecla F6 para insertar dos nuevos keyframes. Podemos observar

que el espacio entre los últimos keyframes y los nuevos también tiene aplicada la in-

terpolación. Esto sucede porque, al aplicar la interpolación a todas las instancias a la

vez, nos las ha unido en la línea de tiempo. Para comprobarlo, haced clic con el cur-

sor sobre cualquiera de los fotogramas de color azul.

FUOC FUOC


7. Vamos a “cortar” estas instancias unidas. Para ello, seleccionamos los keyframes

del fotograma 22 y en la paleta “Frame” seleccionamos “None” en el desplegable

“Tweening”. Realizamos la misma operación con los keyframes del fotograma 32.

8. La siguiente estrofa es más larga. Crearemos keyframes en los fotogramas 34, 38,

40, 41, 43, 46, 48, 50, 53, 55, 56 y 60 de los canales “cráneo” y “mandíbula”. De este

modo intentaremos hacer coincidir las aperturas y cierres de mandíbula con las ex-

plosiones del gráfico de sonido.

9. Desplazaremos 8 píxeles hacia abajo los keyframes de “mandíbula” de los fotogra-

mas 34, 41, 48 y 56. Debemos recordar que para enfatizar la máxima abertura en es-

tos keyframes, desplazaremos también el cráneo dos píxeles hacia arriba.

En los keyframes de los fotogramas 38, 43 y 53 desplazaremos la mandíbula 4 frames

hacia abajo, para una abertura media.

10. Vamos a interpolar. En esta ocasión no interpolaremos todas las instancias a la

vez, porque vamos a introducir algunas aperturas de mandíbula bruscas. Selecciona-

remos las instancias entre el fotograma 32 y el 39.


7. Vamos a “cortar” estas instancias unidas. Para ello, seleccionamos los keyframes

del fotograma 22 y en la paleta “Frame” seleccionamos “None” en el desplegable

“Tweening”. Realizamos la misma operación con los keyframes del fotograma 32.

8. La siguiente estrofa es más larga. Crearemos keyframes en los fotogramas 34, 38,

40, 41, 43, 46, 48, 50, 53, 55, 56 y 60 de los canales “cráneo” y “mandíbula”. De este

modo intentaremos hacer coincidir las aperturas y cierres de mandíbula con las ex-

plosiones del gráfico de sonido.

9. Desplazaremos 8 píxeles hacia abajo los keyframes de “mandíbula” de los fotogra-

mas 34, 41, 48 y 56. Debemos recordar que para enfatizar la máxima abertura en es-

tos keyframes, desplazaremos también el cráneo dos píxeles hacia arriba.

En los keyframes de los fotogramas 38, 43 y 53 desplazaremos la mandíbula 4 frames

hacia abajo, para una abertura media.

10. Vamos a interpolar. En esta ocasión no interpolaremos todas las instancias a la

vez, porque vamos a introducir algunas aperturas de mandíbula bruscas. Selecciona-

remos las instancias entre el fotograma 32 y el 39.

FUOC FUOC


Aplicaremos la interpolación “Motion” desde el desplegable “Tweening” de la paleta

“Frame”.

Repetiremos la operación con los siguientes intervalos: del fotograma 41 al 45 y del

fotograma 48 al 54. Veamos cómo queda la línea de tiempo.

Seleccionaremos finalmente los keyframes del fotograma 56 para aplicarles la inter-

polación “Motion”.

Si hacemos clic con el cursor sobre las tiras azules de los canales (instancias interpo-

ladas), podremos apreciar que tenemos cuatro zonas de interpolación en esta estrofa.

Copiar y pegar instancias interpoladas

Para la siguiente estrofa, copiaremos las instancias que hemos interpolado para si-

tuarlas en estrofas semejantes a las primeras.

1. Retrocedemos en la línea de tiempo hacia el principio, y seleccionamos las ins-

tancias interpoladas en el canal “mandíbula” haciendo clic sobre las instancias colo-

readas en azul y elegimos el comando “Edit>Copy Frames” de la barra de menús.


Aplicaremos la interpolación “Motion” desde el desplegable “Tweening” de la paleta

“Frame”.

Repetiremos la operación con los siguientes intervalos: del fotograma 41 al 45 y del

fotograma 48 al 54. Veamos cómo queda la línea de tiempo.

Seleccionaremos finalmente los keyframes del fotograma 56 para aplicarles la inter-

polación “Motion”.

Si hacemos clic con el cursor sobre las tiras azules de los canales (instancias interpo-

ladas), podremos apreciar que tenemos cuatro zonas de interpolación en esta estrofa.

Copiar y pegar instancias interpoladas

Para la siguiente estrofa, copiaremos las instancias que hemos interpolado para si-

tuarlas en estrofas semejantes a las primeras.

1. Retrocedemos en la línea de tiempo hacia el principio, y seleccionamos las ins-

tancias interpoladas en el canal “mandíbula” haciendo clic sobre las instancias colo-

readas en azul y elegimos el comando “Edit>Copy Frames” de la barra de menús.

FUOC FUOC


Nos trasladamos hasta el fotograma 76, donde empieza la tercera estrofa, e inserta-

mos un keyframe en blanco presionando la tecla F7. Seguidamente, elegimos el co-

mando “Edit>Paste Frames” de la barra de menús.

2. Repetiremos la operación que acabamos de realizar en el canal “mandíbula” sobre

el otro canal.

3. Para copiar las instancias interpoladas de la segunda estrofa procederemos del

mismo modo: seleccionando las instancias interpoladas y copiando y pegando los

fotogramas en sendos keyframes vacíos que insertaremos en el fotograma 100.

Esta estrofa es ligeramente más corta que la estrofa dos. Vamos, pues, a modificar las

instancias para acortar su duración.

Modificar instancias

Como el sonido al final de esta estrofa es más suave, vamos a seleccionar las instan-

cias de apertura mayor de mandíbula que se encuentran casi al final de la secuencia

de instancias que acabamos de copiar y las eliminaremos.

1. Para ello hacemos clic sobre el fotograma 120 del canal “cráneo” manteniendo la

tecla Ctrl presionada para seleccionar solamente este fotograma. Presionamos la te-

cla Mayúsculas y Ctrl a la vez, y hacemos clic sobre el fotograma 116 del canal “man-

díbula” para seleccionar sólo parte de las instancias interpoladas.

Al insertar el keyframe vacío en el fotograma 76, la instancia que empieza en el fotograma 60 se alarga automáticamente hasta el fotograma 75.


Nos trasladamos hasta el fotograma 76, donde empieza la tercera estrofa, e inserta-

mos un keyframe en blanco presionando la tecla F7. Seguidamente, elegimos el co-

mando “Edit>Paste Frames” de la barra de menús.

2. Repetiremos la operación que acabamos de realizar en el canal “mandíbula” sobre

el otro canal.

3. Para copiar las instancias interpoladas de la segunda estrofa procederemos del

mismo modo: seleccionando las instancias interpoladas y copiando y pegando los

fotogramas en sendos keyframes vacíos que insertaremos en el fotograma 100.

Esta estrofa es ligeramente más corta que la estrofa dos. Vamos, pues, a modificar las

instancias para acortar su duración.

Modificar instancias

Como el sonido al final de esta estrofa es más suave, vamos a seleccionar las instan-

cias de apertura mayor de mandíbula que se encuentran casi al final de la secuencia

de instancias que acabamos de copiar y las eliminaremos.

1. Para ello hacemos clic sobre el fotograma 120 del canal “cráneo” manteniendo la

tecla Ctrl presionada para seleccionar solamente este fotograma. Presionamos la te-

cla Mayúsculas y Ctrl a la vez, y hacemos clic sobre el fotograma 116 del canal “man-

díbula” para seleccionar sólo parte de las instancias interpoladas.

Al insertar el keyframe vacío en el fotograma 76, la instancia que empieza en el fotograma 60 se alarga automáticamente hasta el fotograma 75.

FUOC FUOC


2. Para eliminar estas instancias, presionamos a la vez la tecla de mayúsculas y F5.

3. Vamos a acortar la última instancia de ambos canales (color gris) arrastrando desde

el borde derecho de las mismas hacia la izquierda hasta dejarlas en el fotograma 137.

Para la animación de la siguiente estrofa volvemos a copiar las instancias de la segunda

estrofa y a pegarlas a partir del fotograma 138, donde previamente insertaremos sen-

dos keyframes vacíos. Luego, modificaremos las instancias para ajustarlas al sonido.

4. Con las teclas Mayúscula y Ctrl presionadas, seleccionamos el fotograma 150 de

los canales “cráneo” y “mandíbula”, y presionamos Mayúsculas + F5 para eliminarlos.

Una vez hecho, seleccionamos el fotograma 152 de los canales “cráneo” y “mandí-

bula”, y presionamos Mayúsculas + F5 para eliminarlos. De ese modo conseguimos

que la apertura máxima coincida con uno de los picos del sonido.

5. Ahora vamos a alargar las dos instancias siguientes. Seleccionamos el fotograma

153 de ambos canales, y presionamos la tecla F5 una vez. Seleccionamos el fotogra-

ma 159 de ambos canales y presionamos de nuevo la tecla F5.

Para alargar la última instancia interpolada, seleccionamos el keyframe final de la in-

terpolación (en el fotograma 166) en uno de los canales y sin soltar el botón del ratón

lo desplazamos hasta el fotograma 169. Acortaremos la última instancia (color gris)

arrastrando desde el extremo derecho de la misma hasta el fotograma 177.

Repetiremos la misma operación para el otro canal.


2. Para eliminar estas instancias, presionamos a la vez la tecla de mayúsculas y F5.

3. Vamos a acortar la última instancia de ambos canales (color gris) arrastrando desde

el borde derecho de las mismas hacia la izquierda hasta dejarlas en el fotograma 137.

Para la animación de la siguiente estrofa volvemos a copiar las instancias de la segunda

estrofa y a pegarlas a partir del fotograma 138, donde previamente insertaremos sen-

dos keyframes vacíos. Luego, modificaremos las instancias para ajustarlas al sonido.

4. Con las teclas Mayúscula y Ctrl presionadas, seleccionamos el fotograma 150 de

los canales “cráneo” y “mandíbula”, y presionamos Mayúsculas + F5 para eliminarlos.

Una vez hecho, seleccionamos el fotograma 152 de los canales “cráneo” y “mandí-

bula”, y presionamos Mayúsculas + F5 para eliminarlos. De ese modo conseguimos

que la apertura máxima coincida con uno de los picos del sonido.

5. Ahora vamos a alargar las dos instancias siguientes. Seleccionamos el fotograma

153 de ambos canales, y presionamos la tecla F5 una vez. Seleccionamos el fotogra-

ma 159 de ambos canales y presionamos de nuevo la tecla F5.

Para alargar la última instancia interpolada, seleccionamos el keyframe final de la in-

terpolación (en el fotograma 166) en uno de los canales y sin soltar el botón del ratón

lo desplazamos hasta el fotograma 169. Acortaremos la última instancia (color gris)

arrastrando desde el extremo derecho de la misma hasta el fotograma 177.

Repetiremos la misma operación para el otro canal.

FUOC FUOC



Para la siguiente estrofa, que es tarareada, vamos a animar la mandíbula con un mo-

vimiento lateral, lo que hará que el movimiento de la figura no sea tan repetitivo.

1. Insertaremos nuevos keyframes en los fotogramas 178, 181, 184, 187 y 190 de am-

bos canales. Desplazaremos la mandíbula 2 píxeles a la izquierda en los keyframes 181

y 187, y dos píxeles a la derecha en los keyframes 184 y 190. Por el contrario, y con

objeto de reforzar el movimiento, desplazaremos el cráneo 1 píxel a la derecha en los

keyframes 181 y 187, y 1 píxel a la izquierda en los keyframes 184 y 190.

2. Seleccionamos las instancias recién creadas e interpolamos seleccionando la op-

ción “Motion” del desplegable “Tweening” de la paleta “Frame”.

3. En el fotograma 198 empieza el segundo tarareo. Insertamos dos keyframes vacíos,

copiamos las instancias recién interpoladas escogiendo “Edit>Copy Frames” en la ba-

rra de menús y las pegamos sobre los keyframes vacíos.

Vamos a alargarlas un poco para que coincidan con la duración del tarareo. Inserta-

mos un fotograma en cada una de las nuevas instancias, seleccionando un fotograma

en cada instancia y presionando la tecla F5 para insertar un nuevo fotograma. Tam-

bién acortaremos la instancia final (gris) arrastrando desde el borde derecho hacia la

izquierda hasta que sólo tengan un fotograma de duración.



Para la siguiente estrofa, que es tarareada, vamos a animar la mandíbula con un mo-

vimiento lateral, lo que hará que el movimiento de la figura no sea tan repetitivo.

1. Insertaremos nuevos keyframes en los fotogramas 178, 181, 184, 187 y 190 de am-

bos canales. Desplazaremos la mandíbula 2 píxeles a la izquierda en los keyframes 181

y 187, y dos píxeles a la derecha en los keyframes 184 y 190. Por el contrario, y con

objeto de reforzar el movimiento, desplazaremos el cráneo 1 píxel a la derecha en los

keyframes 181 y 187, y 1 píxel a la izquierda en los keyframes 184 y 190.

2. Seleccionamos las instancias recién creadas e interpolamos seleccionando la op-

ción “Motion” del desplegable “Tweening” de la paleta “Frame”.

3. En el fotograma 198 empieza el segundo tarareo. Insertamos dos keyframes vacíos,

copiamos las instancias recién interpoladas escogiendo “Edit>Copy Frames” en la ba-

rra de menús y las pegamos sobre los keyframes vacíos.

Vamos a alargarlas un poco para que coincidan con la duración del tarareo. Inserta-

mos un fotograma en cada una de las nuevas instancias, seleccionando un fotograma

en cada instancia y presionando la tecla F5 para insertar un nuevo fotograma. Tam-

bién acortaremos la instancia final (gris) arrastrando desde el borde derecho hacia la

izquierda hasta que sólo tengan un fotograma de duración.

FUOC FUOC


4. Copiamos de nuevo las instancias desde el fotograma 181 al 190 y las pegamos

sobre los keyframes del fotograma 214. Para seleccionarlas presionamos la tecla Ctrl

y hacemos clic sobre el keyframe del fotograma 181 de la capa mandíbula. Sin soltar

la tecla Ctrl presionamos a la vez la tecla Mayúsculas y hacemos clic sobre el keyframe

del fotograma 190 de la capa “cráneo”.

Escogemos “Copy Frames” en el menú “Edit”, seleccionamos los dos keyframes del foto-

grama 214 y pegamos las instancias con el comando “Paste Frames” del menú “Edit”.

5. Alargaremos la última instancia azul de cada canal un frame para que se ajuste me-

jor a la duración del tarareo. También, como este trozo final suena más fuerte, refor-

zaremos el movimiento horizontal de las mandíbulas exagerando la posición en cada

keyframe un píxel más hacia la derecha o izquierda, según corresponda.

Las modificaciones realizadas en un keyframe son aplicadas directamente

por Flash a la interpolación del mismo.

Interpolación de movimiento (y 3)

Vamos a la última parte. Recuperaremos el movimiento de abertura de mandíbulas,

puesto que el sonido vuelve a ser articulado.

1. Seleccionamos los keyframes del fotograma 1 de la animación, los copiamos y los

pegamos en sendos keyframes vacíos que previamente habremos insertado en el fo-

tograma 229.

Las instancias de los keyframes del fotograma 223 se alargan al insertar los keyframes vacíos.


4. Copiamos de nuevo las instancias desde el fotograma 181 al 190 y las pegamos

sobre los keyframes del fotograma 214. Para seleccionarlas presionamos la tecla Ctrl

y hacemos clic sobre el keyframe del fotograma 181 de la capa mandíbula. Sin soltar

la tecla Ctrl presionamos a la vez la tecla Mayúsculas y hacemos clic sobre el keyframe

del fotograma 190 de la capa “cráneo”.

Escogemos “Copy Frames” en el menú “Edit”, seleccionamos los dos keyframes del foto-

grama 214 y pegamos las instancias con el comando “Paste Frames” del menú “Edit”.

5. Alargaremos la última instancia azul de cada canal un frame para que se ajuste me-

jor a la duración del tarareo. También, como este trozo final suena más fuerte, refor-

zaremos el movimiento horizontal de las mandíbulas exagerando la posición en cada

keyframe un píxel más hacia la derecha o izquierda, según corresponda.

Las modificaciones realizadas en un keyframe son aplicadas directamente

por Flash a la interpolación del mismo.

Interpolación de movimiento (y 3)

Vamos a la última parte. Recuperaremos el movimiento de abertura de mandíbulas,

puesto que el sonido vuelve a ser articulado.

1. Seleccionamos los keyframes del fotograma 1 de la animación, los copiamos y los

pegamos en sendos keyframes vacíos que previamente habremos insertado en el fo-

tograma 229.

Las instancias de los keyframes del fotograma 223 se alargan al insertar los keyframes vacíos.

FUOC FUOC


2. Interpolamos los keyframes del fotograma 223 eligiendo “Motion” en el desplega-

ble “Tweening” de la paleta “Frame”, y cerramos así la secuencia de movimiento ho-

rizontal de mandíbulas.

3. La estrofa cantada del final es compleja, de modo que debemos prestar mucha

atención a las subidas y bajadas del sonido. Insertamos nuevos keyframes para ambos

canales en los fotogramas siguientes: 232, 236, 237, 240, 241, 246, 247, 248, 249,

253, 254, 258, 260, 262, 263, 265, 266, 272, 275, 281.

4. Vamos a desplazar las mandíbulas del siguiente modo: en los keyframes de mayor

subida de sonido desplazaremos la mandíbula hacia abajo 8 píxeles, y el cráneo hacia

arriba 1 píxel. Estos keyframes son: 232, 237, 241, 249, 254, 263 y 275.

Los keyframes de valor medio tendrán un desplazamiento de mandíbulas de 4 píxeles

hacia abajo, y son los siguientes: 240, 247, 253, 260 y 266.

5. No interpolaremos todos los keyframes a la vez, para respetar las pausas en el so-

nido, que se corresponden con el cierre de mandíbulas.

Primero interpolamos los keyframes del fotograma 232. Luego, los keyframes de los fo-

togramas 237, 240 y 241. Otro grupo son los keyframes de los fotogramas desde el 249

al 266. Y finalmente los keyframes del fotograma 275.

6. Para finalizar, alargamos los tres canales de imagen hasta el fotograma 300, para

añadir un silencio al final de la animación. Para ello, seleccionamos las celdas del fo-

tograma 300 de los tres canales de imagen y presionamos la tecla F5.


2. Interpolamos los keyframes del fotograma 223 eligiendo “Motion” en el desplega-

ble “Tweening” de la paleta “Frame”, y cerramos así la secuencia de movimiento ho-

rizontal de mandíbulas.

3. La estrofa cantada del final es compleja, de modo que debemos prestar mucha

atención a las subidas y bajadas del sonido. Insertamos nuevos keyframes para ambos

canales en los fotogramas siguientes: 232, 236, 237, 240, 241, 246, 247, 248, 249,

253, 254, 258, 260, 262, 263, 265, 266, 272, 275, 281.

4. Vamos a desplazar las mandíbulas del siguiente modo: en los keyframes de mayor

subida de sonido desplazaremos la mandíbula hacia abajo 8 píxeles, y el cráneo hacia

arriba 1 píxel. Estos keyframes son: 232, 237, 241, 249, 254, 263 y 275.

Los keyframes de valor medio tendrán un desplazamiento de mandíbulas de 4 píxeles

hacia abajo, y son los siguientes: 240, 247, 253, 260 y 266.

5. No interpolaremos todos los keyframes a la vez, para respetar las pausas en el so-

nido, que se corresponden con el cierre de mandíbulas.

Primero interpolamos los keyframes del fotograma 232. Luego, los keyframes de los fo-

togramas 237, 240 y 241. Otro grupo son los keyframes de los fotogramas desde el 249

al 266. Y finalmente los keyframes del fotograma 275.

6. Para finalizar, alargamos los tres canales de imagen hasta el fotograma 300, para

añadir un silencio al final de la animación. Para ello, seleccionamos las celdas del fo-

tograma 300 de los tres canales de imagen y presionamos la tecla F5.

FUOC FUOC


Ya podemos exportar la animación para ver el resultado.

Actividad 3: Animación fotograma a fotograma

En esta tercera práctica realizaremos una animación para una marca de agendas de

viaje llamada Walking Man. Dispondremos de los dibujos necesarios y del tema, y

utilizaremos técnicas de animación fotograma a fotograma e interpolación de movi-

miento para animarlos. También añadiremos efectos de sonido para enriquecer nues-

tro proyecto.



comenzar, descargaremos el archivo correspondiente a esta práctica en el disco duro.


Para recuperarlos, pueden volverse a descargar del site.

Animar fotograma a fotograma

1. En primer lugar vamos a abrir el documento inicial, “camina.fla”. En la librería

tenemos los dibujos y sonidos necesarios para realizar la animación.


Ya podemos exportar la animación para ver el resultado.

Actividad 3: Animación fotograma a fotograma

En esta tercera práctica realizaremos una animación para una marca de agendas de

viaje llamada Walking Man. Dispondremos de los dibujos necesarios y del tema, y

utilizaremos técnicas de animación fotograma a fotograma e interpolación de movi-

miento para animarlos. También añadiremos efectos de sonido para enriquecer nues-

tro proyecto.



comenzar, descargaremos el archivo correspondiente a esta práctica en el disco duro.


Para recuperarlos, pueden volverse a descargar del site.

Animar fotograma a fotograma

1. En primer lugar vamos a abrir el documento inicial, “camina.fla”. En la librería

tenemos los dibujos y sonidos necesarios para realizar la animación.

FUOC FUOC


En el montaje final utilizaremos varias veces, y con variaciones de tamaño, la misma

secuencia del hombre caminando. Por ello, crearemos un nuevo símbolo en el que

animaremos la figura y que llamaremos “paso”.

2. Colocamos el primer dibujo en el escenario del símbolo “paso”.

3. Para colocar el siguiente dibujo, insertamos un keyframe vacío (tecla F7) en el fo-

tograma siguiente. Seguidamente, activamos en la línea de tiempo la opción “Onion

Skin” (‘papel cebolla’).

4. Usando como referencia la imagen suavizada del fotograma anterior, colocamos

el segundo dibujo en el escenario.

El uso de símbolos gráficos se reserva para lasimágenes estáticas y también para crear se-cuencias animadas reutilizables que van liga-das a la línea de tiempo en la película final.Los símbolos gráficos funcionan en sincroníacon la línea de tiempo. Los controles interac-tivos y sonidos integrados en una secuenciade animación dentro de un símbolo gráficono funcionarán en la película final.

El uso de símbolos de película (Movie Clip) sedestina a la creación de animaciones reutili-zables. Estas películas disponen de su propialínea de tiempo que se reproduce indepen-dientemente de la línea de tiempo del pro-yecto final, y pueden contener controlesinteractivos, sonidos e incluso otras instan-cias de tipo Movie Clip. Es posible incluso in-cluir instancias Movie Clip en la línea detiempo de un símbolo de botón para crearbotones animados.

Normalmente, Flash muestra cada vez unsolo fotograma de la secuencia de animaciónen el escenario. Para ayudarnos a posicionary editar las imágenes de una animación foto-grama a fotograma, podemos ver dos o másfotogramas en el escenario de una sola vez,gracias a la opción “Onion Skin” (papel cebo-lla). El fotograma bajo el indicador de posi-

ción en la línea de tiempo aparece a todocolor, mientras que los fotogramas anterioresy posteriores se muestran suavizados, comosi cada fotograma estuviera dibujado en unahoja translúcida de papel cebolla y las hojasestuvieran colocadas una encima de otra. Losfotogramas suavizados no son editables.


En el montaje final utilizaremos varias veces, y con variaciones de tamaño, la misma

secuencia del hombre caminando. Por ello, crearemos un nuevo símbolo en el que

animaremos la figura y que llamaremos “paso”.

2. Colocamos el primer dibujo en el escenario del símbolo “paso”.

3. Para colocar el siguiente dibujo, insertamos un keyframe vacío (tecla F7) en el fo-

tograma siguiente. Seguidamente, activamos en la línea de tiempo la opción “Onion

Skin” (‘papel cebolla’).

4. Usando como referencia la imagen suavizada del fotograma anterior, colocamos

el segundo dibujo en el escenario.

El uso de símbolos gráficos se reserva para lasimágenes estáticas y también para crear se-cuencias animadas reutilizables que van liga-das a la línea de tiempo en la película final.Los símbolos gráficos funcionan en sincroníacon la línea de tiempo. Los controles interac-tivos y sonidos integrados en una secuenciade animación dentro de un símbolo gráficono funcionarán en la película final.

El uso de símbolos de película (Movie Clip) sedestina a la creación de animaciones reutili-zables. Estas películas disponen de su propialínea de tiempo que se reproduce indepen-dientemente de la línea de tiempo del pro-yecto final, y pueden contener controlesinteractivos, sonidos e incluso otras instan-cias de tipo Movie Clip. Es posible incluso in-cluir instancias Movie Clip en la línea detiempo de un símbolo de botón para crearbotones animados.

Normalmente, Flash muestra cada vez unsolo fotograma de la secuencia de animaciónen el escenario. Para ayudarnos a posicionary editar las imágenes de una animación foto-grama a fotograma, podemos ver dos o másfotogramas en el escenario de una sola vez,gracias a la opción “Onion Skin” (papel cebo-lla). El fotograma bajo el indicador de posi-

ción en la línea de tiempo aparece a todocolor, mientras que los fotogramas anterioresy posteriores se muestran suavizados, comosi cada fotograma estuviera dibujado en unahoja translúcida de papel cebolla y las hojasestuvieran colocadas una encima de otra. Losfotogramas suavizados no son editables.

FUOC FUOC


5. Insertamos un nuevo keyframe vacío en el fotograma 3 y colocamos el dibujo 3

tomando como referencia el dibujo anterior.

6. Aplicaremos el mismo proceso al resto de las imágenes hasta colocar las siete fases del

paso del hombre. Podemos comprobar el movimiento haciendo clic en la tecla “Intro”.

Para completar la secuencia, colocaremos de nuevo el dibujo 1 después del último

dibujo. Para ello, copiaremos el dibujo del fotograma 1, lo pegaremos con la opción

“Paste in place” en el nuevo fotograma 8 y desplazaremos el dibujo hacia la izquierda


Una vez colocadas todas las imágenes, podremos desactivar la opción “Onion skin”.

Montar en capas

No nos quedaremos en el montaje de esta secuencia. Vamos a introducir un efecto

de aparición-desaparición en cada uno de los dibujos. Para ello, separaremos por ca-

pas en primer lugar los dibujos que forman la secuencia.

1. Seleccionamos el keyframe del fotograma 2 y elegimos “Cut Frames” en el menú

“Edit”.


5. Insertamos un nuevo keyframe vacío en el fotograma 3 y colocamos el dibujo 3


6. Aplicaremos el mismo proceso al resto de las imágenes hasta colocar las siete fases del

paso del hombre. Podemos comprobar el movimiento haciendo clic en la tecla “Intro”.

Para completar la secuencia, colocaremos de nuevo el dibujo 1 después del último

dibujo. Para ello, copiaremos el dibujo del fotograma 1, lo pegaremos con la opción

“Paste in place” en el nuevo fotograma 8 y desplazaremos el dibujo hacia la izquierda


Una vez colocadas todas las imágenes, podremos desactivar la opción “Onion skin”.

Montar en capas

No nos quedaremos en el montaje de esta secuencia. Vamos a introducir un efecto

de aparición-desaparición en cada uno de los dibujos. Para ello, separaremos por ca-

pas en primer lugar los dibujos que forman la secuencia.

1. Seleccionamos el keyframe del fotograma 2 y elegimos “Cut Frames” en el menú

“Edit”.

FUOC FUOC


2. Creamos una nueva capa, insertamos un keyframe vacío sobre el keyframe corres-

pondiente al fotograma que hemos vaciado.

3. Elegimos “Paste Frames” en el menú “Edit” y reducimos la instancia creada arras-

trando desde el extremo derecho de la misma hasta reducirla a un fotograma de du-

ración.

4. Repetiremos el proceso detallado en los puntos 1, 2 y 3 para el resto de los dibujos

de la secuencia.

Usando interpolación de movimiento

Para crear el efecto aparición-desaparición de cada imagen, utilizaremos técnicas de

interpolación de movimiento.

1. Insertamos dos nuevos keyframes (tecla F6) en los fotogramas 5 y 9 del canal

“Layer 1”.

2. Seleccionamos los dos primeros keyframes del canal y elegimos la opción “Motion”

en el desplegable de la paleta Frame para interpolar los keyframes.


2. Creamos una nueva capa, insertamos un keyframe vacío sobre el keyframe corres-

pondiente al fotograma que hemos vaciado.

3. Elegimos “Paste Frames” en el menú “Edit” y reducimos la instancia creada arras-

trando desde el extremo derecho de la misma hasta reducirla a un fotograma de du-

ración.

4. Repetiremos el proceso detallado en los puntos 1, 2 y 3 para el resto de los dibujos

de la secuencia.

Usando interpolación de movimiento

Para crear el efecto aparición-desaparición de cada imagen, utilizaremos técnicas de

interpolación de movimiento.

1. Insertamos dos nuevos keyframes (tecla F6) en los fotogramas 5 y 9 del canal

“Layer 1”.

2. Seleccionamos los dos primeros keyframes del canal y elegimos la opción “Motion”

en el desplegable de la paleta Frame para interpolar los keyframes.

FUOC FUOC


3. Seleccionamos el primer keyframe del canal y le asignamos una opacidad del 10%

en la paleta “Effect”. Hacemos lo mismo con el último keyframe.

Podemos comprobar cómo la imagen aparece y desaparece reproduciendo la secuen-

cia. Para evitar que los otros canales nos confundan, desactivamos su visualización

en la línea de tiempo.

4. Repetimos la misma operación en el resto de los canales.

5. Para situar correctamente las secuencias de aparición-desaparición de cada fase

del paso, insertamos fotogramas (tecla F5) en las zonas vacías de cada canal, para que

el inicio de cada una de ellas coincida con el keyframe medio del canal inmediata-

mente inferior, como se muestra en el gráfico siguiente:


3. Seleccionamos el primer keyframe del canal y le asignamos una opacidad del 10%

en la paleta “Effect”. Hacemos lo mismo con el último keyframe.

Podemos comprobar cómo la imagen aparece y desaparece reproduciendo la secuen-

cia. Para evitar que los otros canales nos confundan, desactivamos su visualización

en la línea de tiempo.

4. Repetimos la misma operación en el resto de los canales.

5. Para situar correctamente las secuencias de aparición-desaparición de cada fase

del paso, insertamos fotogramas (tecla F5) en las zonas vacías de cada canal, para que

el inicio de cada una de ellas coincida con el keyframe medio del canal inmediata-

mente inferior, como se muestra en el gráfico siguiente:

FUOC FUOC


Una vez realizada la secuencia del paso, podemos pasar a montar la animación final

en el escenario del documento.

El montaje final

Procederemos ahora a realizar el montaje final de la animación.

1. Colocamos la película “paso” en el escenario. Como recordamos la duración final

de la película (37 frames), estiramos la instancia recién creada hasta el frame 37, se-

leccionando el fotograma 37 del canal y presionando la tecla F5.

Los símbolos tipo película no se reproducen al reproducir la línea de tiempo

en Flash. Debemos seleccionar “Test Scene” en el menú “Control” para

comprobar el montaje.

2. Vamos a reducir el símbolo de la instancia al 30% utilizando la paleta “Trans-

form”. Si seleccionamos la opción “Constrain”, la reducción se aplica automática-

mente a la altura y anchura de la imagen.

3. Resituamos la película como en el gráfico siguiente:


Una vez realizada la secuencia del paso, podemos pasar a montar la animación final

en el escenario del documento.

El montaje final

Procederemos ahora a realizar el montaje final de la animación.

1. Colocamos la película “paso” en el escenario. Como recordamos la duración final

de la película (37 frames), estiramos la instancia recién creada hasta el frame 37, se-

leccionando el fotograma 37 del canal y presionando la tecla F5.

Los símbolos tipo película no se reproducen al reproducir la línea de tiempo

en Flash. Debemos seleccionar “Test Scene” en el menú “Control” para

comprobar el montaje.

2. Vamos a reducir el símbolo de la instancia al 30% utilizando la paleta “Trans-

form”. Si seleccionamos la opción “Constrain”, la reducción se aplica automática-

mente a la altura y anchura de la imagen.

3. Resituamos la película como en el gráfico siguiente:

FUOC FUOC


4. Insertamos una nueva capa y creamos un keyframe vacío en el fotograma 30, un

poco antes de que acabe la primera película.

5. Seleccionamos la instancia del canal “Layer 1” y la copiamos mediante el coman-

do “Copy Frames” del menú “Edit”, para pegarla en el keyframe vacío del canal “Layer

2” mediante el comando “Paste Frames” del menú “Edit”.

6. Vamos a modificar el tamaño de esta instancia, para recuperar su tamaño real

(100%), desde la paleta “Transform”.

7. Para que el personaje entre por la izquierda en esta segunda pasada, vamos a elegir

“Transform>Flip Horizontal” en el menú “Modify”. Luego, desplazaremos el perso-

naje hacia la izquierda como en el gráfico siguiente:

8. Creamos un nuevo canal e insertamos un keyframe vacío en el fotograma 59 del

nuevo canal. Luego, seleccionamos la instancia del canal Layer 2 y la copiamos me-

diante el comando “Copy Frames” del menú “Edit”, para pegarla en el keyframe vacío

del canal “Layer 3” mediante el comando “Paste Frames” del menú “Edit”.


4. Insertamos una nueva capa y creamos un keyframe vacío en el fotograma 30, un

poco antes de que acabe la primera película.

5. Seleccionamos la instancia del canal “Layer 1” y la copiamos mediante el coman-

do “Copy Frames” del menú “Edit”, para pegarla en el keyframe vacío del canal “Layer

2” mediante el comando “Paste Frames” del menú “Edit”.

6. Vamos a modificar el tamaño de esta instancia, para recuperar su tamaño real

(100%), desde la paleta “Transform”.

7. Para que el personaje entre por la izquierda en esta segunda pasada, vamos a elegir

“Transform>Flip Horizontal” en el menú “Modify”. Luego, desplazaremos el perso-

naje hacia la izquierda como en el gráfico siguiente:

8. Creamos un nuevo canal e insertamos un keyframe vacío en el fotograma 59 del

nuevo canal. Luego, seleccionamos la instancia del canal Layer 2 y la copiamos me-

diante el comando “Copy Frames” del menú “Edit”, para pegarla en el keyframe vacío

del canal “Layer 3” mediante el comando “Paste Frames” del menú “Edit”.

FUOC FUOC


9. Modificamos el tamaño de esta instancia duplicando su tamaño real (200%) des-

de la paleta “Transform”, y volvemos a aplicar el comando “Transform>Flip Horizontal”

del menú “Modify” y desplazamos el personaje hacia la derecha como en el gráfico

siguiente:

En este momento podemos realizar un test de la escena. Para ello, elegimos el coman-

do “Test Scene” del menú “Control”.

10. Vamos a hacer aparecer el logo de la empresa. Creamos un nuevo canal y selec-

cionamos el fotograma 110 para insertar un keyframe vacío (tecla F7). Hemos dejado

un espacio en blanco entre las películas y el logo para separar ambos conceptos.

11. Colocamos el logo en el escenario y lo reducimos al 50% usando la paleta “Trans-

form”. Lo situaremos centrado en el escenario.

12. Creamos un nuevo keyframe (tecla F6) en el fotograma 115. Seleccionamos el

keyframe del fotograma 110 y le aplicamos un cambio de escala: 2% de anchura por

20% de altura.


9. Modificamos el tamaño de esta instancia duplicando su tamaño real (200%) des-

de la paleta “Transform”, y volvemos a aplicar el comando “Transform>Flip Horizontal”

del menú “Modify” y desplazamos el personaje hacia la derecha como en el gráfico

siguiente:

En este momento podemos realizar un test de la escena. Para ello, elegimos el coman-

do “Test Scene” del menú “Control”.

10. Vamos a hacer aparecer el logo de la empresa. Creamos un nuevo canal y selec-

cionamos el fotograma 110 para insertar un keyframe vacío (tecla F7). Hemos dejado

un espacio en blanco entre las películas y el logo para separar ambos conceptos.

11. Colocamos el logo en el escenario y lo reducimos al 50% usando la paleta “Trans-

form”. Lo situaremos centrado en el escenario.

12. Creamos un nuevo keyframe (tecla F6) en el fotograma 115. Seleccionamos el

keyframe del fotograma 110 y le aplicamos un cambio de escala: 2% de anchura por

20% de altura.

FUOC FUOC


Seleccionamos la paleta “Effect” y le asignamos un valor de opacidad (alpha) del

10%. Luego haremos clic sobre la pestaña de la paleta “Frame” para interpolar la ins-

tancia eligiendo “Motion” en el desplegable “Tweening”.

13. Finalmente, y para que el logo permanezca, estiraremos la instancia seleccionan-

do el fotograma 150 y presionando la tecla F5. Nuevamente podemos comprobar el

resultado aplicando el comando Test Scene del menú Control.

Modificando atributos

Vamos a modificar la apariencia de la animación cambiando los colores de fondo e

imagen.

1. En el menú “Modify” elegimos el comando “Movie”, para cambiar el color de

fondo por un verde oscuro.

2. Seleccionamos el primer keyframe del canal “Layer 1” y vamos a la paleta “Effect”,

donde elegiremos el efecto “Tint” (tinta) y el color de tinta blanco. Esto sumará el


Seleccionamos la paleta “Effect” y le asignamos un valor de opacidad (alpha) del

10%. Luego haremos clic sobre la pestaña de la paleta “Frame” para interpolar la ins-

tancia eligiendo “Motion” en el desplegable “Tweening”.

13. Finalmente, y para que el logo permanezca, estiraremos la instancia seleccionan-

do el fotograma 150 y presionando la tecla F5. Nuevamente podemos comprobar el

resultado aplicando el comando Test Scene del menú Control.

Modificando atributos

Vamos a modificar la apariencia de la animación cambiando los colores de fondo e

imagen.

1. En el menú “Modify” elegimos el comando “Movie”, para cambiar el color de

fondo por un verde oscuro.

2. Seleccionamos el primer keyframe del canal “Layer 1” y vamos a la paleta “Effect”,

donde elegiremos el efecto “Tint” (tinta) y el color de tinta blanco. Esto sumará el

FUOC FUOC


efecto de transparencia que aplicamos en el símbolo “paso” al efecto de tinta que

aplicamos ahora.

“Brightness” (brillo) ajusta la luminosidad u oscuridad de una imagen, midiéndola

en una escala que va del blanco (100%) al negro (−100%).

“Tint” (tinta) colorea la instancia con el mismo color, con un porcentaje de aplica-

ción que va del transparente (1% de color aplicado) a la saturación completa (100%

de color aplicado).

“Alpha” (transparencia) ajusta la transparencia de la instancia.

“Advanced” ajusta por separado los valores de rojo, verde y azul, y los valores de

transparencia de una instancia.

3. Antes de continuar, testearemos la escena para comprobar que aplicamos bien el

efecto. Luego, repetiremos la operación en todos los keyframes de todos los canales de

la línea de tiempo, excepto el keyframe del fotograma 110 del canal “Layer 5”, al que

aplicaremos el efecto avanzado (“Advanced”) con los valores del gráfico siguiente:

Incorporar el sonido

Vamos a añadir algunos efectos de sonido para reforzar nuestro proyecto.


efecto de transparencia que aplicamos en el símbolo “paso” al efecto de tinta que

aplicamos ahora.

“Brightness” (brillo) ajusta la luminosidad u oscuridad de una imagen, midiéndola

en una escala que va del blanco (100%) al negro (−100%).

“Tint” (tinta) colorea la instancia con el mismo color, con un porcentaje de aplica-

ción que va del transparente (1% de color aplicado) a la saturación completa (100%

de color aplicado).

“Alpha” (transparencia) ajusta la transparencia de la instancia.

“Advanced” ajusta por separado los valores de rojo, verde y azul, y los valores de

transparencia de una instancia.

3. Antes de continuar, testearemos la escena para comprobar que aplicamos bien el

efecto. Luego, repetiremos la operación en todos los keyframes de todos los canales de

la línea de tiempo, excepto el keyframe del fotograma 110 del canal “Layer 5”, al que

aplicaremos el efecto avanzado (“Advanced”) con los valores del gráfico siguiente:

Incorporar el sonido

Vamos a añadir algunos efectos de sonido para reforzar nuestro proyecto.

FUOC FUOC


1. Editamos el símbolo “paso” para incluir un efecto para la pisada del personaje.

Insertamos un nuevo canal encima del canal 8 que llamaremos “sonido”, e inserta-

mos unos keyframes vacíos (tecla F7) en los fotogramas 5, 17 y 29.

2. Abrimos la paleta “Sound” con los keyframes vacíos seleccionados y elegimos el

sonido “Smack”.

3. Vamos a bajar el volumen del primero y último de los sonidos. Seleccionamos el

primero de los keyframes de sonido y lo editamos haciendo clic sobre el botón “Edit”

de la paleta “Sound”.

En la ventana que se abre seleccionamos el manejador que nos permite controlar el

volumen del sonido y lo bajamos. Repetiremos el mismo proceso en el tercer keyframe

de sonido.

Volvemos a la escena principal y hacemos un test de escena para comprobar el efecto.

4. En la escena principal añadimos un canal a la línea de tiempo encima de todos

los canales que llamaremos también “sonido”. Desde la paleta “Sound” le asignamos


1. Editamos el símbolo “paso” para incluir un efecto para la pisada del personaje.

Insertamos un nuevo canal encima del canal 8 que llamaremos “sonido”, e inserta-

mos unos keyframes vacíos (tecla F7) en los fotogramas 5, 17 y 29.

2. Abrimos la paleta “Sound” con los keyframes vacíos seleccionados y elegimos el

sonido “Smack”.

3. Vamos a bajar el volumen del primero y último de los sonidos. Seleccionamos el

primero de los keyframes de sonido y lo editamos haciendo clic sobre el botón “Edit”

de la paleta “Sound”.

En la ventana que se abre seleccionamos el manejador que nos permite controlar el

volumen del sonido y lo bajamos. Repetiremos el mismo proceso en el tercer keyframe

de sonido.

Volvemos a la escena principal y hacemos un test de escena para comprobar el efecto.

4. En la escena principal añadimos un canal a la línea de tiempo encima de todos

los canales que llamaremos también “sonido”. Desde la paleta “Sound” le asignamos

FUOC FUOC


a este canal el sonido “fondo Loop”, que nos servirá como sonido de fondo para la

animación. Para ello, debemos asignarle un valor 15 al cuadro “Loop”.

Elegimos el modo de sincronización “Stream”, y editamos el sonido para controlar

cómo evolucionará el volumen a lo largo de la animación.

5. En la ventana “Edit Envelope” cambiamos la visualización del modo tiempo al

modo fotogramas haciendo clic sobre el botón correspondiente. Con la barra de des-

plazamiento vamos hacia la derecha hasta alcanzar el fotograma 30, y hacemos clic

sobre la línea “Envelope” para añadir un manejador.

Volvemos hacia la izquierda para bajar el manejador de inicio al fondo. De este modo,

el sonido empezará con volumen 0 e irá ganado volumen hasta llegar al fotograma 30.

Luego, vamos con la barra de desplazamiento hasta el fotograma 120 y añadimos

otro manejador, y otro más en el fotograma 145, y bajamos también este último has-

ta el fondo.


a este canal el sonido “fondo Loop”, que nos servirá como sonido de fondo para la

animación. Para ello, debemos asignarle un valor 15 al cuadro “Loop”.

Elegimos el modo de sincronización “Stream”, y editamos el sonido para controlar

cómo evolucionará el volumen a lo largo de la animación.

5. En la ventana “Edit Envelope” cambiamos la visualización del modo tiempo al

modo fotogramas haciendo clic sobre el botón correspondiente. Con la barra de des-

plazamiento vamos hacia la derecha hasta alcanzar el fotograma 30, y hacemos clic

sobre la línea “Envelope” para añadir un manejador.

Volvemos hacia la izquierda para bajar el manejador de inicio al fondo. De este modo,

el sonido empezará con volumen 0 e irá ganado volumen hasta llegar al fotograma 30.

Luego, vamos con la barra de desplazamiento hasta el fotograma 120 y añadimos

otro manejador, y otro más en el fotograma 145, y bajamos también este último has-

ta el fondo.

FUOC FUOC


Hacemos un test de la escena para ver la animación con los sonidos que hemos in-

corporado.

6. Vamos a incluir un último efecto para la aparición del logo. Creamos un nuevo

canal que llamaremos “sonido 2” e insertamos un keyframe vacío en el fotograma

108, anticipándonos un poco a la entrada del logo.

Con el keyframe vacío seleccionado, elegimos en la paleta “Sound” el sonido “entra

logo”, y lo editamos haciendo clic en el botón “Edit”.

7. En la ventana “Edit Envelope”, arrastramos el controlador de entrada hacia la iz-

quierda, para hacer coincidir el punto de entrada de sonido con el principio de la

onda del mismo.


Hacemos un test de la escena para ver la animación con los sonidos que hemos in-

corporado.

6. Vamos a incluir un último efecto para la aparición del logo. Creamos un nuevo

canal que llamaremos “sonido 2” e insertamos un keyframe vacío en el fotograma

108, anticipándonos un poco a la entrada del logo.

Con el keyframe vacío seleccionado, elegimos en la paleta “Sound” el sonido “entra

logo”, y lo editamos haciendo clic en el botón “Edit”.

7. En la ventana “Edit Envelope”, arrastramos el controlador de entrada hacia la iz-

quierda, para hacer coincidir el punto de entrada de sonido con el principio de la

onda del mismo.

FUOC FUOC


Cerramos la ventana, exportamos la película, y el proyecto está terminado.


Cerramos la ventana, exportamos la película, y el proyecto está terminado.

FUOC FUOC


Introducción

El trabajo de un ingeniero de sonido en el mercado audiovisual es hacer que las cosas se

vean mejor. Así, como suena. El sonido puede añadir realismo a una situación tanto

como estropear un cuidadísimo efecto visual. El sonido no se transmite en el vacío, pero

¿quién creería que una nave espacial estalla en el espacio si no la acompañamos con una

explosión realmente estruendosa?

Efectos de sonido

Hay tres tipos de uso de sonido en una animación: el sonido ambiente, las voces de

los personajes y los efectos de sonido. El sonido ambiente marca el tono de la anima-

ción. La música de un órgano en un filme de terror o el ulular del viento en un bos-

que en mitad de la noche son elementos que crean la atmósfera adecuada en la que

situar la acción de nuestro proyecto.

En los proyectos con personajes, la voz del personaje es tan importante como su as-

pecto y la manera en que se mueve. Bugs Bunny no sería el mismo si hablara como

Constantino Romero, y el monstruo más horripilante quedaría ridículo con la voz

de Chiquito de la Calzada. La voz es el personaje, y si cambiamos su voz, todo cambia

con ella.

Un consejo: es de gran ayuda grabar la voz antes de animar. Incluso grabar

en vídeo al actor cuando realiza las locuciones puede servir como modelo para

el proceso de animación en la confección de expresiones, enriqueciendo así al

personaje.

Los efectos de sonido aportan realismo a la animación, al hacerla más creíble. Esto

no significa que los sonidos tengan que ser realistas: todos sabemos que el sonido

más utilizado para crear el efecto de un caballo al trote es el que se realiza chocando

dos mitades de coco, o que una plancha de metal agitada es lo que se oculta detrás

de los truenos de más de una tormenta de película (claro que siempre podemos salir

al campo a perseguir caballos o esperar a que la tormenta del siglo nos proporcione

el trueno que necesitamos...).

Etapa 5: El sonido en la animación


Introducción

El trabajo de un ingeniero de sonido en el mercado audiovisual es hacer que las cosas se

vean mejor. Así, como suena. El sonido puede añadir realismo a una situación tanto

como estropear un cuidadísimo efecto visual. El sonido no se transmite en el vacío, pero

¿quién creería que una nave espacial estalla en el espacio si no la acompañamos con una

explosión realmente estruendosa?

Efectos de sonido

Hay tres tipos de uso de sonido en una animación: el sonido ambiente, las voces de

los personajes y los efectos de sonido. El sonido ambiente marca el tono de la anima-

ción. La música de un órgano en un filme de terror o el ulular del viento en un bos-

que en mitad de la noche son elementos que crean la atmósfera adecuada en la que

situar la acción de nuestro proyecto.

En los proyectos con personajes, la voz del personaje es tan importante como su as-

pecto y la manera en que se mueve. Bugs Bunny no sería el mismo si hablara como

Constantino Romero, y el monstruo más horripilante quedaría ridículo con la voz

de Chiquito de la Calzada. La voz es el personaje, y si cambiamos su voz, todo cambia

con ella.

Un consejo: es de gran ayuda grabar la voz antes de animar. Incluso grabar

en vídeo al actor cuando realiza las locuciones puede servir como modelo para

el proceso de animación en la confección de expresiones, enriqueciendo así al

personaje.

Los efectos de sonido aportan realismo a la animación, al hacerla más creíble. Esto

no significa que los sonidos tengan que ser realistas: todos sabemos que el sonido

más utilizado para crear el efecto de un caballo al trote es el que se realiza chocando

dos mitades de coco, o que una plancha de metal agitada es lo que se oculta detrás

de los truenos de más de una tormenta de película (claro que siempre podemos salir

al campo a perseguir caballos o esperar a que la tormenta del siglo nos proporcione

el trueno que necesitamos...).

Etapa 5: El sonido en la animación

FUOC FUOC


Problemas con el ancho de banda

El sonido es una carga muy pesada en Internet. El uso de sonido aumenta de tal

modo el tamaño de un documento que podemos perder a los usuarios con un ancho

de banda bajo. Un modo de reducir el tamaño del documento final es repitiendo o

reutilizando sonidos, del mismo modo que indicábamos en la utilización de símbo-

los en Flash.

También podemos usar algoritmos de compresión para comprimir los archivos de so-

nido que utilizaremos en nuestra animación, y que el ordenador del usuario final se

encargará de descodificar. Hay muchos algoritmos de compresión con tecnología

streaming que permiten comenzar a escuchar el sonido antes de terminar la descarga.

Flash utiliza el formato MP3 para comprimir el sonido. MP3 es un algoritmo de com-

presión realmente destacable, al permitir una fidelidad considerablemente buena al

sonido original minimizando el tamaño final del documento.

Usemos las limitaciones del medio en nuestro provecho: podemos comprimir

mucho el sonido deliberadamente y adoptar la utilización de un sonido

degradado como estilo propio, con el consiguiente ahorro en tamaño de

documento.

Por último, un consejo: debemos asegurarnos de que nuestra animación mantiene

su sentido sin el sonido. Hay que considerar que todavía hoy algunos ordenadores

no tienen tarjeta de sonido, de modo que el diálogo y los efectos se pierden por com-

pleto en ellos.


Podemos conseguir sonidos para nuestras animaciones de diferentes fuentes. Pode-

mos usar canciones y efectos de sonido que estén libres de copyright, o comprar libre-

rías de sonidos categorizadas. Es aconsejable personalizar estos sonidos, tanto por

diferenciarnos del resto de los animadores que adquieran los mismos, como por adap-

tarlos exactamente al efecto que deseamos.

También podemos crear los sonidos, grabando los ruidos que necesitemos (un papel

arrugado puede recordar el crepitar de las llamas de una chimenea, por ejemplo), o

imitando el sonido nosotros mismos con la boca. Es sencillo, barato y fácil, y es muy

posible que consigamos exactamente el sonido que buscábamos.

Las aplicaciones de edición de audio como Sound Forge de Sonic Foundry’s posibili-

tan que el animador trabaje los sonidos casi sin esfuerzo, y pueden sustituir en un


Problemas con el ancho de banda

El sonido es una carga muy pesada en Internet. El uso de sonido aumenta de tal

modo el tamaño de un documento que podemos perder a los usuarios con un ancho

de banda bajo. Un modo de reducir el tamaño del documento final es repitiendo o

reutilizando sonidos, del mismo modo que indicábamos en la utilización de símbo-

los en Flash.

También podemos usar algoritmos de compresión para comprimir los archivos de so-

nido que utilizaremos en nuestra animación, y que el ordenador del usuario final se

encargará de descodificar. Hay muchos algoritmos de compresión con tecnología

streaming que permiten comenzar a escuchar el sonido antes de terminar la descarga.

Flash utiliza el formato MP3 para comprimir el sonido. MP3 es un algoritmo de com-

presión realmente destacable, al permitir una fidelidad considerablemente buena al

sonido original minimizando el tamaño final del documento.

Usemos las limitaciones del medio en nuestro provecho: podemos comprimir

mucho el sonido deliberadamente y adoptar la utilización de un sonido

degradado como estilo propio, con el consiguiente ahorro en tamaño de

documento.

Por último, un consejo: debemos asegurarnos de que nuestra animación mantiene

su sentido sin el sonido. Hay que considerar que todavía hoy algunos ordenadores

no tienen tarjeta de sonido, de modo que el diálogo y los efectos se pierden por com-

pleto en ellos.


Podemos conseguir sonidos para nuestras animaciones de diferentes fuentes. Pode-

mos usar canciones y efectos de sonido que estén libres de copyright, o comprar libre-

rías de sonidos categorizadas. Es aconsejable personalizar estos sonidos, tanto por

diferenciarnos del resto de los animadores que adquieran los mismos, como por adap-

tarlos exactamente al efecto que deseamos.

También podemos crear los sonidos, grabando los ruidos que necesitemos (un papel

arrugado puede recordar el crepitar de las llamas de una chimenea, por ejemplo), o

imitando el sonido nosotros mismos con la boca. Es sencillo, barato y fácil, y es muy

posible que consigamos exactamente el sonido que buscábamos.

Las aplicaciones de edición de audio como Sound Forge de Sonic Foundry’s posibili-

tan que el animador trabaje los sonidos casi sin esfuerzo, y pueden sustituir en un

FUOC FUOC


momento dado la cantidad de herramientas tales como sintetizadores o samplers de

que dispone un ingeniero de sonido experimentado.

No es necesario disponer de un estudiode sonido para enriquecer nuestros proyectos.


momento dado la cantidad de herramientas tales como sintetizadores o samplers de

que dispone un ingeniero de sonido experimentado.

No es necesario disponer de un estudiode sonido para enriquecer nuestros proyectos.

FUOC FUOC


Introducción

La animación es un forma de arte que implica tiempo y espacio al mismo tiempo, lo

que implica que el animador debe ser un diseñador de imágenes a la vez que un teó-

rico del movimiento. A continuación repasaremos algunas teorías sobre los elemen-

tos básicos de animación y diseño.

Puntos, líneas, vectores y formas

Punto y línea

Consideremos el punto como el énfasis de la imagen, el centro del foco. Puede con-

centrarse en un objeto o estar implícito por indicadores de dirección como las líneas

de perspectiva, por ejemplo. Al componer los fotogramas de la animación, debemos

estar al tanto de la localización del punto. Si cuidamos el foco en los planos de nues-

tra animación, nos aseguramos de mantener a los usuarios enfocados en ella.

La línea es la continuación de un punto. Todas las líneas tienen una dirección: hori-

zontal, vertical o diagonal. Las líneas horizontales transmiten serenidad, mientras

que las verticales tienen un alto potencial para el movimiento. Las líneas diagonales

son las más dinámicas de las tres, puesto que implican una voluntad de llegar a la

verticalidad o a la horizontalidad, dependiendo del ángulo de inclinación.

Una composición realizada con líneas verticales y horizontales se percibe

como muy estable, dado que es lo más común en nuestro entorno cotidiano.

En esta imagen podemos observar queel aislamiento del pollito de la derecha le hace actuar como punto focal.

Etapa 6: Animación y diseño


Introducción

La animación es un forma de arte que implica tiempo y espacio al mismo tiempo, lo

que implica que el animador debe ser un diseñador de imágenes a la vez que un teó-

rico del movimiento. A continuación repasaremos algunas teorías sobre los elemen-

tos básicos de animación y diseño.

Puntos, líneas, vectores y formas

Punto y línea

Consideremos el punto como el énfasis de la imagen, el centro del foco. Puede con-

centrarse en un objeto o estar implícito por indicadores de dirección como las líneas

de perspectiva, por ejemplo. Al componer los fotogramas de la animación, debemos

estar al tanto de la localización del punto. Si cuidamos el foco en los planos de nues-

tra animación, nos aseguramos de mantener a los usuarios enfocados en ella.

La línea es la continuación de un punto. Todas las líneas tienen una dirección: hori-

zontal, vertical o diagonal. Las líneas horizontales transmiten serenidad, mientras

que las verticales tienen un alto potencial para el movimiento. Las líneas diagonales

son las más dinámicas de las tres, puesto que implican una voluntad de llegar a la

verticalidad o a la horizontalidad, dependiendo del ángulo de inclinación.

Una composición realizada con líneas verticales y horizontales se percibe

como muy estable, dado que es lo más común en nuestro entorno cotidiano.

En esta imagen podemos observar queel aislamiento del pollito de la derecha le hace actuar como punto focal.

Etapa 6: Animación y diseño

FUOC FUOC


Vectores

Los vectores son las fuerzas direccionales, tales como líneas o movimiento, que diri-

gen el ojo del espectador por o a través de la composición. Como animadores, hay

que prestar mucha atención a estos conductores del espectador, ver dónde empiezan

y terminan y qué se encuentra en su camino, de manera que podamos mantener al

público con el foco puesto donde nosotros deseemos.

Los vectores gráficos son aquéllos creados por objetos estáticos de la animación. Los

vectores de indicación son los producidos por algo que apunta en una dirección,

como flechas o una mano señalando. Los vectores de movimiento son, finalmente,

aquellos creados por el movimiento de un objeto en una dirección determinada.

Cada uno de estos tipos de vector pueden alterar la dirección o percepción de un su-

ceso. La mezcla de varios tipos de estos vectores produce incluso más efectos, como

efectos de continuidad cuando varios vectores de igual o diferente tipo indican la

misma dirección, o efectos de convergencia o divergencia cuando diferentes vectores

se dirigen o provienen del mismo punto.

Forma

Consideraremos forma a cualquier área cerrada articulada por línea, color, masa, etc.

Las formas pueden ser orgánicas, del tipo irregular que encontramos en la naturaleza,

o geométricas, mucho más rígidas y regulares.

Cuando trabajemos con formas tenemos que prestar igual atención a la contraforma

que se crea con el fondo, puesto que en la composición de la animación ambas son

igualmente importantes.

Las diferentes partes explosionadas crean vectores de divergencia que destacanel movimiento.

La contraforma de las algas en primer término permite enmarcar al personaje.


Vectores

Los vectores son las fuerzas direccionales, tales como líneas o movimiento, que diri-

gen el ojo del espectador por o a través de la composición. Como animadores, hay

que prestar mucha atención a estos conductores del espectador, ver dónde empiezan

y terminan y qué se encuentra en su camino, de manera que podamos mantener al

público con el foco puesto donde nosotros deseemos.

Los vectores gráficos son aquéllos creados por objetos estáticos de la animación. Los

vectores de indicación son los producidos por algo que apunta en una dirección,

como flechas o una mano señalando. Los vectores de movimiento son, finalmente,

aquellos creados por el movimiento de un objeto en una dirección determinada.

Cada uno de estos tipos de vector pueden alterar la dirección o percepción de un su-

ceso. La mezcla de varios tipos de estos vectores produce incluso más efectos, como

efectos de continuidad cuando varios vectores de igual o diferente tipo indican la

misma dirección, o efectos de convergencia o divergencia cuando diferentes vectores

se dirigen o provienen del mismo punto.

Forma

Consideraremos forma a cualquier área cerrada articulada por línea, color, masa, etc.

Las formas pueden ser orgánicas, del tipo irregular que encontramos en la naturaleza,

o geométricas, mucho más rígidas y regulares.

Cuando trabajemos con formas tenemos que prestar igual atención a la contraforma

que se crea con el fondo, puesto que en la composición de la animación ambas son

igualmente importantes.

Las diferentes partes explosionadas crean vectores de divergencia que destacanel movimiento.

La contraforma de las algas en primer término permite enmarcar al personaje.

FUOC FUOC


Masa, espacio y luz

Masa

La masa (o volumen) describe a los objetos tridimensionales. En un medio bidimen-

sional como la animación podemos implicar la masa mediante trucos realizados con

el sombreado y la perspectiva.

Podemos simular efectos de perspectiva mediante la superposición de figuras, los ta-

maños relativos de los objetos (los objetos lejanos son más pequeños), o mediante el

desvanecimiento simulado de colores y detalles de los objetos lejanos por efecto de

la atmósfera. También la posición de los objetos puede indicar cierta profundidad:

los objetos cercanos a la base de la pantalla se perciben como más cercanos que los

objetos situados en la parte superior de la pantalla.

Espacio

Debemos considerar que ciertas partes del plano llaman la atención del espectador

más que otras: la línea de horizonte, los lados y la parte derecha de la imagen.

Si modificamos la posición de la línea del horizonte crearemos un efecto dramático.

Los lados de la imagen son magnéticos, y los objetos que no estén situados en el cen-

tro de la composición se verán afectados por esta atracción. Por otra parte, la gente

tiende a prestar más atención al lado derecho de la imagen que al izquierdo. Pode-

mos aprovechar esto colocando el objeto que deseemos destacar en la derecha de la

imagen.

Luz

La iluminación contribuye a crear la atmósfera adecuada en una escena: la fuente de

luz y su dirección, color o intensidad toman parte en la percepción de esta atmósfera.

La luz proveniente de arriba o de un lado destacan el volumen y proporcionan la apa-

riencia de normalidad, dado que es la fuente normal de iluminación de nuestro en-

torno. La luz proveniente de abajo, en cambio, produce un efecto dramático en la

En esta composición simétrica podemos comprobar cómo el protagonismo tiende a centrarse en el personaje situado a la derecha de la imagen.


Masa, espacio y luz

Masa

La masa (o volumen) describe a los objetos tridimensionales. En un medio bidimen-

sional como la animación podemos implicar la masa mediante trucos realizados con

el sombreado y la perspectiva.

Podemos simular efectos de perspectiva mediante la superposición de figuras, los ta-

maños relativos de los objetos (los objetos lejanos son más pequeños), o mediante el

desvanecimiento simulado de colores y detalles de los objetos lejanos por efecto de

la atmósfera. También la posición de los objetos puede indicar cierta profundidad:

los objetos cercanos a la base de la pantalla se perciben como más cercanos que los

objetos situados en la parte superior de la pantalla.

Espacio

Debemos considerar que ciertas partes del plano llaman la atención del espectador

más que otras: la línea de horizonte, los lados y la parte derecha de la imagen.

Si modificamos la posición de la línea del horizonte crearemos un efecto dramático.

Los lados de la imagen son magnéticos, y los objetos que no estén situados en el cen-

tro de la composición se verán afectados por esta atracción. Por otra parte, la gente

tiende a prestar más atención al lado derecho de la imagen que al izquierdo. Pode-

mos aprovechar esto colocando el objeto que deseemos destacar en la derecha de la

imagen.

Luz

La iluminación contribuye a crear la atmósfera adecuada en una escena: la fuente de

luz y su dirección, color o intensidad toman parte en la percepción de esta atmósfera.

La luz proveniente de arriba o de un lado destacan el volumen y proporcionan la apa-

riencia de normalidad, dado que es la fuente normal de iluminación de nuestro en-

torno. La luz proveniente de abajo, en cambio, produce un efecto dramático en la

En esta composición simétrica podemos comprobar cómo el protagonismo tiende a centrarse en el personaje situado a la derecha de la imagen.

FUOC FUOC


imagen. Una iluminación contrastada también introduce un cierto dramatismo a la

imagen, así como el uso de sombras.

Del mismo modo que sucede con la música, un cambio drástico en la

iluminación puede avisar al espectador sobre un giro en la acción.

Color, textura,movimiento y tiempo

Color

El color tiene un efecto físico y psicológico en la gente. Puede usarse para crear la at-

mósfera adecuada a la animación: ¿quién podría imaginar una escena dramática lle-

na de luz y coloridos suaves?

Los azules tienden a calmar a la gente, por lo que verdes y azules son especialmente

usados en hospitales, por ejemplo. Los rojos y anaranjados brillantes, en cambio,

producen un efecto perturbador en las personas.

Textura

La textura en animación se refiere a la textura percibida en los objetos representados.

Algunas técnicas de animación implican en sí misma textura, como la animación

con arena, pintura o la animación de muñecos y objetos. Y no podemos olvidar la

animación 3D, en la que la aplicación de texturas a un objeto provoca un incremen-

to del realismo de los modelos y escenarios.

Un cambio en la iluminación puede modificar por completo el sentido dramático de la imagen.


imagen. Una iluminación contrastada también introduce un cierto dramatismo a la

imagen, así como el uso de sombras.

Del mismo modo que sucede con la música, un cambio drástico en la

iluminación puede avisar al espectador sobre un giro en la acción.

Color, textura,movimiento y tiempo

Color

El color tiene un efecto físico y psicológico en la gente. Puede usarse para crear la at-

mósfera adecuada a la animación: ¿quién podría imaginar una escena dramática lle-

na de luz y coloridos suaves?

Los azules tienden a calmar a la gente, por lo que verdes y azules son especialmente

usados en hospitales, por ejemplo. Los rojos y anaranjados brillantes, en cambio,

producen un efecto perturbador en las personas.

Textura

La textura en animación se refiere a la textura percibida en los objetos representados.

Algunas técnicas de animación implican en sí misma textura, como la animación

con arena, pintura o la animación de muñecos y objetos. Y no podemos olvidar la

animación 3D, en la que la aplicación de texturas a un objeto provoca un incremen-

to del realismo de los modelos y escenarios.

Un cambio en la iluminación puede modificar por completo el sentido dramático de la imagen.

FUOC FUOC


Movimiento

El movimiento es uno de los factores más esenciales de la animación, tanto que es

recomendable pensar en el movimiento antes de realizar incluso los dibujos.

Un buen animador estudia los objetos en movimiento siempre que puede. La obser-

vación es una de las principales armas con que contamos en este aspecto. Realizar

dibujos que describan el movimiento es un gran ejercicio al respecto. También es útil

grabar en vídeo los modelos necesarios para estudiar el movimiento de nuestros per-

sonajes.

Tenemos que recordar, no obstante, que la animación se basa en gran parte

en la exageración del movimiento natural.

Tiempo

Debemos asegurarnos de variar la velocidad a la que se mueve nuestra animación.

Un personaje que se mueva a la misma velocidad del principio al fin resulta aburrido

y poco realista. La aceleración y deceleración de los objetos en movimiento es el tipo

de efecto que debemos intentar capturar en nuestras animaciones.

La modificación de los tiempos de acción también influye en la narrativa de nuestra

animación: la ralentización de un árbol cayendo le otorga un dramatismo extra al

movimiento.

La aplicación de efectos de texturaen las imágenes pueden enriquecer la calidad final de la imagen.


Movimiento

El movimiento es uno de los factores más esenciales de la animación, tanto que es

recomendable pensar en el movimiento antes de realizar incluso los dibujos.

Un buen animador estudia los objetos en movimiento siempre que puede. La obser-

vación es una de las principales armas con que contamos en este aspecto. Realizar

dibujos que describan el movimiento es un gran ejercicio al respecto. También es útil

grabar en vídeo los modelos necesarios para estudiar el movimiento de nuestros per-

sonajes.

Tenemos que recordar, no obstante, que la animación se basa en gran parte

en la exageración del movimiento natural.

Tiempo

Debemos asegurarnos de variar la velocidad a la que se mueve nuestra animación.

Un personaje que se mueva a la misma velocidad del principio al fin resulta aburrido

y poco realista. La aceleración y deceleración de los objetos en movimiento es el tipo

de efecto que debemos intentar capturar en nuestras animaciones.

La modificación de los tiempos de acción también influye en la narrativa de nuestra

animación: la ralentización de un árbol cayendo le otorga un dramatismo extra al

movimiento.

La aplicación de efectos de texturaen las imágenes pueden enriquecer la calidad final de la imagen.

FUOC FUOC


Introducción

No siempre la última tecnología es la más conveniente para nuestro proyecto de ani-

mación. Es posible que acaben en formato digital, preparadas para ser distribuidas a

lo largo y ancho de la red, pero eso no significa que tengan que empezar obligatoria-

mente delante de la pantalla del ordenador. Las imperfecciones de los medios y he-

rramientas de animación tradicional tienen una calidez y una cualidad humana que

se pierde en los productos completamente digitales, que son a veces demasiado pre-

cisos y fríos. Por otro lado, hay ciertos estilos de animación que son prácticamente

imposibles de crear con las máquinas.

Vamos a repasar algunos de estos estilos de animación tradicionales y su adaptación

al medio digital.

Cut-out

El estilo de animación manual cut-out implicaba el uso de actores y escenarios hechos

con recortables de papel cuyos movimientos eran realizados manualmente y graba-

dos fotograma a fotograma. Con este duro medio de trabajo se han realizado anima-

ciones de gran calidad: las animaciones incluidas en la mayoría de producciones del

grupo de humoristas Monty Python realizadas por Terry Gilliam seguían este proce-

so, así como el primer corto de animación que dio origen a la serie South Park.

Cuando los creadores de South Park, Matt Stone y Trey Parker, acordaron la realiza-

ción de la serie con la productora Comedy Central, el proceso de realización cambió.

Se utilizaron estaciones de trabajo 3D de última generación para imitar el estilo de

animación manual, con lo que el proceso de realización se aceleró en gran medida.

En este clip de animación de South Park, creada especialmente para su difusión en Internet, podemos apreciar la discontinuidadde movimiento del estilo cut-out.

Etapa 7: Los estilos de animación ¿tradicionales?


Introducción

No siempre la última tecnología es la más conveniente para nuestro proyecto de ani-

mación. Es posible que acaben en formato digital, preparadas para ser distribuidas a

lo largo y ancho de la red, pero eso no significa que tengan que empezar obligatoria-

mente delante de la pantalla del ordenador. Las imperfecciones de los medios y he-

rramientas de animación tradicional tienen una calidez y una cualidad humana que

se pierde en los productos completamente digitales, que son a veces demasiado pre-

cisos y fríos. Por otro lado, hay ciertos estilos de animación que son prácticamente

imposibles de crear con las máquinas.

Vamos a repasar algunos de estos estilos de animación tradicionales y su adaptación

al medio digital.

Cut-out

El estilo de animación manual cut-out implicaba el uso de actores y escenarios hechos

con recortables de papel cuyos movimientos eran realizados manualmente y graba-

dos fotograma a fotograma. Con este duro medio de trabajo se han realizado anima-

ciones de gran calidad: las animaciones incluidas en la mayoría de producciones del

grupo de humoristas Monty Python realizadas por Terry Gilliam seguían este proce-

so, así como el primer corto de animación que dio origen a la serie South Park.

Cuando los creadores de South Park, Matt Stone y Trey Parker, acordaron la realiza-

ción de la serie con la productora Comedy Central, el proceso de realización cambió.

Se utilizaron estaciones de trabajo 3D de última generación para imitar el estilo de

animación manual, con lo que el proceso de realización se aceleró en gran medida.

En este clip de animación de South Park, creada especialmente para su difusión en Internet, podemos apreciar la discontinuidadde movimiento del estilo cut-out.

Etapa 7: Los estilos de animación ¿tradicionales?

FUOC FUOC


Este estilo de animación recuerda al collage en sus acabados y ofrece una calidad final

brusca por la falta de fluidez en el movimiento. Esta falta de fluidez en el movimiento

se adapta muy bien a los problemas de redibujado de pantalla que plantea la anima-

ción por Internet.

Stop-motion

El proceso de realización de este estilo de animaciones varía su complejidad de un

proyecto a otro, pero básicamente consiste en el uso de una cámara para capturar un

fotograma de la escena, modificar un poco la posición de los personajes y/o el esce-

nario, capturar otro fotograma, y así hasta el final del plano. De este modo es posible

animar personajes de plastilina, muñecos de látex articulados e incluso personas, en

cuyo caso el estilo se denomina pixilación.

Existen cámaras de vídeo no profesionales que utilizan un modo de grabación de un

solo fotograma. Incluso las cámaras de escritorio, tipo QuickCam, utilizándolas con

aplicaciones de edición de vídeo como Adobe Premiere, ofrecen la posibilidad de

captura de un solo fotograma. El margen de error en el proceso de grabación de una

animación stop-motion es muy alto, y no es un estilo de animación indicado para ani-

madores con unos niveles de paciencia bajos.

De todos modos, el efecto final es muy efectivo, y el proceso puede ser “falseado” di-

gitalmente, simplificando el proceso de realización. Cuando los personajes sean hu-

manos, es posible grabar la acción normalmente, y editar los fotogramas en el

ordenador para conseguir el efecto de pixilación o discontinuidad del movimiento

de los personajes.

Dibujo y pintura

Es el estilo de animación más difundido del siglo XX. Consiste en dibujar o pintar

imágenes a mano, para posteriormente capturar cada imagen en un fotograma. Es el

estilo de las grandes producciones clásicas de Disney, pero también el de los dibujos

Adam es un corto de animación de tipostop-motion realizado en los estudios Aardman.atomfilms.shockwave.com/af/content/atom_339


Este estilo de animación recuerda al collage en sus acabados y ofrece una calidad final

brusca por la falta de fluidez en el movimiento. Esta falta de fluidez en el movimiento

se adapta muy bien a los problemas de redibujado de pantalla que plantea la anima-

ción por Internet.

Stop-motion

El proceso de realización de este estilo de animaciones varía su complejidad de un

proyecto a otro, pero básicamente consiste en el uso de una cámara para capturar un

fotograma de la escena, modificar un poco la posición de los personajes y/o el esce-

nario, capturar otro fotograma, y así hasta el final del plano. De este modo es posible

animar personajes de plastilina, muñecos de látex articulados e incluso personas, en

cuyo caso el estilo se denomina pixilación.

Existen cámaras de vídeo no profesionales que utilizan un modo de grabación de un

solo fotograma. Incluso las cámaras de escritorio, tipo QuickCam, utilizándolas con

aplicaciones de edición de vídeo como Adobe Premiere, ofrecen la posibilidad de

captura de un solo fotograma. El margen de error en el proceso de grabación de una

animación stop-motion es muy alto, y no es un estilo de animación indicado para ani-

madores con unos niveles de paciencia bajos.

De todos modos, el efecto final es muy efectivo, y el proceso puede ser “falseado” di-

gitalmente, simplificando el proceso de realización. Cuando los personajes sean hu-

manos, es posible grabar la acción normalmente, y editar los fotogramas en el

ordenador para conseguir el efecto de pixilación o discontinuidad del movimiento

de los personajes.

Dibujo y pintura

Es el estilo de animación más difundido del siglo XX. Consiste en dibujar o pintar

imágenes a mano, para posteriormente capturar cada imagen en un fotograma. Es el

estilo de las grandes producciones clásicas de Disney, pero también el de los dibujos

Adam es un corto de animación de tipostop-motion realizado en los estudios Aardman.atomfilms.shockwave.com/af/content/atom_339

FUOC FUOC


animados de toda la vida, con productoras como la Warner, Hanna Barbera, etc., y

el de muchos animadores independientes.

Para adaptar este estilo a la web, se realizan los dibujos a mano y se digitalizan para

ser coloreados y ensamblados en el ordenador con alguna aplicación de animación,

como Macromedia Flash o Macromedia Director, o con aplicaciones de edición de

vídeo digital, como Adobe AfterEffects o Adobe Premiere. Incluso es posible realizar

los dibujos en el mismo ordenador, con aplicaciones de diseño vectorial como

Macromedia FreeHand o Adobe Illustrator o aplicaciones de diseño bitmap como

Adobe Photoshop o Adobe ImageReady.

Una técnica similar pero menos convencional consiste en pintar directamente sobre el

fotograma de celuloide. La película tiene una emulsión que puede ser rascada o elimi-

nada por completo y pintar o dibujar encima. Este método es impresionante cuando

se utilizan imágenes grandes, especialmente basadas en el color, incluso abstracciones,

dado que es una técnica que no permite un control preciso del movimiento.

Esta técnica tan curiosa puede ser reproducida digitalmente con un formato llamado

film strip. Ya sea hecho a mano y digitalizado o totalmente realizado en el ordenador,

es posible utilizar aplicaciones de edición de vídeo digital como AfterEffects o Premiere

para exportar las películas en formato film strip y procesar posteriormente uno a uno

los fotogramas en aplicaciones de diseño bitmap como Photoshop o Painter.

25 Ways to Quit Smoking.atomfilms.shockwave.com/af/content/atom_304

Este corto experimental, Firehouse, fue creado rascando y pintando directamente en la película.atomfilms.shockwave.com/af/content/atom_684


animados de toda la vida, con productoras como la Warner, Hanna Barbera, etc., y

el de muchos animadores independientes.

Para adaptar este estilo a la web, se realizan los dibujos a mano y se digitalizan para

ser coloreados y ensamblados en el ordenador con alguna aplicación de animación,

como Macromedia Flash o Macromedia Director, o con aplicaciones de edición de

vídeo digital, como Adobe AfterEffects o Adobe Premiere. Incluso es posible realizar

los dibujos en el mismo ordenador, con aplicaciones de diseño vectorial como

Macromedia FreeHand o Adobe Illustrator o aplicaciones de diseño bitmap como

Adobe Photoshop o Adobe ImageReady.

Una técnica similar pero menos convencional consiste en pintar directamente sobre el

fotograma de celuloide. La película tiene una emulsión que puede ser rascada o elimi-

nada por completo y pintar o dibujar encima. Este método es impresionante cuando

se utilizan imágenes grandes, especialmente basadas en el color, incluso abstracciones,

dado que es una técnica que no permite un control preciso del movimiento.

Esta técnica tan curiosa puede ser reproducida digitalmente con un formato llamado

film strip. Ya sea hecho a mano y digitalizado o totalmente realizado en el ordenador,

es posible utilizar aplicaciones de edición de vídeo digital como AfterEffects o Premiere

para exportar las películas en formato film strip y procesar posteriormente uno a uno

los fotogramas en aplicaciones de diseño bitmap como Photoshop o Painter.

25 Ways to Quit Smoking.atomfilms.shockwave.com/af/content/atom_304

Este corto experimental, Firehouse, fue creado rascando y pintando directamente en la película.atomfilms.shockwave.com/af/content/atom_684

FUOC FUOC


Recapitulación

Antes de acabar el módulo, vamos a ver algunos consejos o indicaciones para conse-

guir que nuestras animaciones funcionen con éxito en Internet.

Utilizar las herramientas adecuadas

Las facilidades que algunas aplicaciones ofrecen pueden convertirse en una carga

para un proyecto cuando el animador se deja llevar por el camino de la menor resis-

tencia. Después de un cierto tiempo las animaciones creadas con una aplicación de-

terminada tienen todas el mismo aspecto. Cuando nos planteemos un proyecto de

animación debemos evitar la sobreutilización de técnicas o herramientas de un mis-

mo modo. Las herramientas deben estar al servicio del proyecto, y no debemos per-

mitir que el proyecto se vea condicionado por una determinada herramienta.

Los avisos son importantes

Si la animación que hemos realizado requiere un tiempo de descarga inicial ligera-

mente largo, no basta con comunicar “descargando el fichero”. Una pequeña anima-

ción cíclica al principio, corta pero simpática es probablemente la mejor opción.

Animaciones cíclicas

Internet es un medio rápido e inmediato, y las pequeñas animaciones cíclicas fun-

cionan realmente bien en la red porque el tamaño del documento suele ser muy pe-

queño, y atraen al usuario el corto periodo de tiempo que los navegantes suelen

otorgar a una página concreta.

Pequeños formatos, ideas grandes

Esto va dirigido sobre todo a las animaciones que se presentan en formato QuickTi-

me. Este tipo de formato se suele escalar a tamaños pequeños, y en el proceso de es-

calado se pierden muchos detalles de la imagen. Es conveniente, por ello, tener

presente el tamaño final del documento cuando preparemos la animación, y evitar

el detallismo excesivo en la imagen.

Escalado de documentos

En Internet el tamaño sí cuenta. Las animaciones a toda pantalla son realmente im-

presionantes, y utilizando Flash esto no supone ningún problema, puesto que es un

formato escalable sin pérdida de calidad (siempre que no usemos gráficos bitmap). De

todos modos, hay un pequeño truco que nos permite jugar con el tamaño de las ani-

maciones. Si el formato final es gif animado o QuickTime, podemos crear las anima-


Recapitulación

Antes de acabar el módulo, vamos a ver algunos consejos o indicaciones para conse-

guir que nuestras animaciones funcionen con éxito en Internet.

Utilizar las herramientas adecuadas

Las facilidades que algunas aplicaciones ofrecen pueden convertirse en una carga

para un proyecto cuando el animador se deja llevar por el camino de la menor resis-

tencia. Después de un cierto tiempo las animaciones creadas con una aplicación de-

terminada tienen todas el mismo aspecto. Cuando nos planteemos un proyecto de

animación debemos evitar la sobreutilización de técnicas o herramientas de un mis-

mo modo. Las herramientas deben estar al servicio del proyecto, y no debemos per-

mitir que el proyecto se vea condicionado por una determinada herramienta.

Los avisos son importantes

Si la animación que hemos realizado requiere un tiempo de descarga inicial ligera-

mente largo, no basta con comunicar “descargando el fichero”. Una pequeña anima-

ción cíclica al principio, corta pero simpática es probablemente la mejor opción.

Animaciones cíclicas

Internet es un medio rápido e inmediato, y las pequeñas animaciones cíclicas fun-

cionan realmente bien en la red porque el tamaño del documento suele ser muy pe-

queño, y atraen al usuario el corto periodo de tiempo que los navegantes suelen

otorgar a una página concreta.

Pequeños formatos, ideas grandes

Esto va dirigido sobre todo a las animaciones que se presentan en formato QuickTi-

me. Este tipo de formato se suele escalar a tamaños pequeños, y en el proceso de es-

calado se pierden muchos detalles de la imagen. Es conveniente, por ello, tener

presente el tamaño final del documento cuando preparemos la animación, y evitar

el detallismo excesivo en la imagen.

Escalado de documentos

En Internet el tamaño sí cuenta. Las animaciones a toda pantalla son realmente im-

presionantes, y utilizando Flash esto no supone ningún problema, puesto que es un

formato escalable sin pérdida de calidad (siempre que no usemos gráficos bitmap). De

todos modos, hay un pequeño truco que nos permite jugar con el tamaño de las ani-

maciones. Si el formato final es gif animado o QuickTime, podemos crear las anima-

FUOC FUOC


ciones a un tamaño ligeramente inferior al tamaño de presentación en la página

web. El ligero escalado que apliquemos para agrandar el documento en pantalla su-

pondrá una pequeña pérdida de calidad de la imagen, pero ahorraremos bastante en

tamaño de documento.

Ser alternativo

Aunque muy extendidos, los plug-ins no se encuentran en todos los ordenadores. Si

realizáis webs con iconos o botones animados en formato Flash, por ejemplo, es con-

veniente ofrecer al usuario una alternativa en otro formato, normalmente gif animado.

La inspiración proviene de tener los ojos abiertos

Internet es relativamente reciente. Es un medio sin tradición ni excesivas convencio-

nes. Para realizar un trabajo verdaderamente creativo en cualquier medio se deben

tener los ojos abiertos no sólo hacia los trabajos realizados en él, sino también en el

resto de los medios: televisión, cine, pintura, escultura, teatro... Siempre puede

aprenderse algo, o descubrir ideas que podamos aplicar a nuestros proyectos actuales

o futuros.

A lo largo del presente módulo hemos repasado algunas teorías respecto a la anima-

ción en general y algunas concretamente centradas en la animación por Internet.

Hemos repasado diferentes estilos de animación aplicables a la animación por In-

ternet. Pero son solamente eso: teorías y estilos generales. No debemos pensar que

estamos obligados a seguir las teorías al pie de la letra o a adaptarnos a un estilo pre-

determinado. Las teorías son buenas porque plantean soluciones a problemas gené-

ricos con los que nos tendremos que enfrentar, y los estilos son fórmulas que han

funcionado para determinados autores en proyectos concretos. Nuestro trabajo a

partir de este momento es experimentar con las teorías, probar lo que funciona con

nuestros propósitos y crear nuestras propias teorías y nuestros propios estilos. Lo úni-

co que importa es que estemos contentos con nuestro trabajo.


ciones a un tamaño ligeramente inferior al tamaño de presentación en la página

web. El ligero escalado que apliquemos para agrandar el documento en pantalla su-

pondrá una pequeña pérdida de calidad de la imagen, pero ahorraremos bastante en

tamaño de documento.

Ser alternativo

Aunque muy extendidos, los plug-ins no se encuentran en todos los ordenadores. Si

realizáis webs con iconos o botones animados en formato Flash, por ejemplo, es con-

veniente ofrecer al usuario una alternativa en otro formato, normalmente gif animado.

La inspiración proviene de tener los ojos abiertos

Internet es relativamente reciente. Es un medio sin tradición ni excesivas convencio-

nes. Para realizar un trabajo verdaderamente creativo en cualquier medio se deben

tener los ojos abiertos no sólo hacia los trabajos realizados en él, sino también en el

resto de los medios: televisión, cine, pintura, escultura, teatro... Siempre puede

aprenderse algo, o descubrir ideas que podamos aplicar a nuestros proyectos actuales

o futuros.

A lo largo del presente módulo hemos repasado algunas teorías respecto a la anima-

ción en general y algunas concretamente centradas en la animación por Internet.

Hemos repasado diferentes estilos de animación aplicables a la animación por In-

ternet. Pero son solamente eso: teorías y estilos generales. No debemos pensar que

estamos obligados a seguir las teorías al pie de la letra o a adaptarnos a un estilo pre-

determinado. Las teorías son buenas porque plantean soluciones a problemas gené-

ricos con los que nos tendremos que enfrentar, y los estilos son fórmulas que han

funcionado para determinados autores en proyectos concretos. Nuestro trabajo a

partir de este momento es experimentar con las teorías, probar lo que funciona con

nuestros propósitos y crear nuestras propias teorías y nuestros propios estilos. Lo úni-

co que importa es que estemos contentos con nuestro trabajo.

FUOC FUOC

animación en internet -...

Documents