Diseño Digital

DISEÑO DIGITAL

1

Lectura No. 9

Nombre: Animación e interactividad

Contextualización

¿Qué es la animación?

El término de animación nace del griego “Anemos”, el cual más adelante se

transformó a “Animus” que en latín quiere decir "dar aliento, dar vida". Partiendo

los antecedentes de esta palabra, podemos definir la etapa de animación como

la generación, almacenamiento y representación de imágenes que transcurren a

una gran velocidad y provocan una sensación de movimiento. Esta definición se

relaciona directamente con la tecnología de visualización que se emplea y está

fundamentada en el descubrimiento de Peter Mark Roget en 1824 del fenómeno

de la Persistencia de la Visión en el sistema visual del ser humano.

Hace algunos años cuando se empezaron a hacer las primeras películas, se

utilizaba para su elaboración la técnica de Stop Motion, que como vimos con

anterioridad consiste en el ágil y veloz movimiento de una serie de imágenes

secuenciales para simular la realización de una acción. Y fue en el año de 1906

que John Stuart Blackton realizó la primer película animada.

Es desde entonces que la creación de empresas como Disney, Warner Brothers

o Pixar han explotado esta mina comercial que nos ha dado una gran cantidad

de obras de calidad.

A pesar de que la animación tiene una existencia algo remota, sigue siendo

utilizada para la creación de comerciales y hasta de películas, claro que como

todo lo demás con el paso del tiempo ha ido evolucionando.

DISEÑO DIGITAL

2

Introducción al Tema

La gente se ha creado paradigmas en estos días en los que creen que las

personas estamos limitadas a hacer únicamente ciertas cosas, es decir no

estamos dispuestos a intentar o aprender algo nuevo porque subestimamos

nuestra capacidad para hacerlo. De tal manera que dejamos que las tares de

cálculos físico-matemáticos se los dejamos a los ingenieros, las leyes no las

leemos porque son cosas de abogados y las cuestiones creativas se las

dejamos a los diseñadores y entre muchísimas cosas más. Pero ¿por qué no

aprenderlo por nosotros mismos? ¿Por qué no intentar hacerlo?

Como bien dije, estamos errados en estos paradigmas y como estamos

enfocados a estudiar una sola carrera, les restamos importancia a las demás,

creyendo que nunca nos hará falta entender otras disciplinas. Muchas veces nos

decimos: ¿para qué aprendo a usar PhotoShop? Si para eso contrato a un

diseñador y me ahorro la molestia de hacerlo por mí mismo. Pero en la

actualidad las empresas buscan personal que sea capaz de realizar múltiples

tareas para evitarse un gasto mayor en contratar más personal. Por lo que en

esta sesión verás lo fácil y sencillo que es usar un programa de animación para

que puedas implementar animaciones atractivas a los sitios web y atraer la

atención de más clientes.

Para que sea posible el fácil uso y manejo de estos programas para crear

animaciones, tenemos interfaces creadas por expertos que hacen que la

comunicación entre usuario y computadora sea relativamente más simple y

comprensible, y así ha sido. Hoy en día es muy sencillo aprender usar un

programa de éstos, el problema radica en la falta de interés de las personas (que

no se dedican a una materia a fin a este tipo de trabajo), la poca dedicación y la

falta de práctica. Pero realmente no es tan difícil, la cuestión está en romper

esos paradigmas que te limitan a conocer únicamente la esencia de tu carrera y

empezar a adentrarte a otros temas relacionados a ella que pueden auxiliarte en

diversas situaciones.

DISEÑO DIGITAL

3

Tomado de: http://www.carlospes.com/minidiccionario/programa.php para fines educativos

Explicación

Programa integrador de medios Interfaz del programa de animación

Como bien ya se vio previamente en la sesión 6, una interfaz es una serie de

pasos que tiene que realizar el usuario al momento en que se está relacionado

con un programa; a su vez una interfaz tiene el deber de explicar detalladamente

a través de métodos (no definidos) la funcionalidad de un programa, es decir que

ésta tiene que ser el papel de intermediario que facilite la comunicación entre

usuario y programa.

Ahora, antes de adentrarnos por completo en nuestro tema veamos lo que es un

programa. Un programa simple y sencillamente es un grupo de instrucciones que

señalan al ordenador, pero ¿cuáles son las operaciones que tiene que hacer con

los datos preliminares que el usuario le proporciona? En sí el funcionamiento

que tiene un programa es el de señalar al ordenador, pero ¿cómo conseguir los

datos de salida a partir de los datos de entrada?

Ejemplo del funcionamiento de un programa de un ordenador:

Teniendo esto en claro ahora definiremos lo que es una interfaz del programa de

animación, que no se trata de nada más que de la facilidad que le permite

comprender y manejar al usuario un programa de animación, así es, la interfaz

aquí juega el papel de conector entre usuario y programa para que a través de

un mismo lenguaje pueda lograrse una comunicación simple y sencilla entre

Computadora

Programa

DISEÑO DIGITAL

4

ambos, que sirve para guiar al usuario a través del programa facilitándole su

manejo.

Interfaz de Flash

Flash CS5 cuenta con una interfaz de trabajo muy manejable; además de que es

casi idéntica a la de otros programas de Adobe, haciendo más fácil aprender

Flash y más rápido su manejo y dominio. Esto es lo que encontramos al abrir

Flash:

Primero encontraremos la barra de menús, la cual nos facilitará el acceso a las

distintas utilidades del programa.

La Línea de tiempo representa una forma de ver los fotogramas de modo

simplificado. Consta de 2 partes.

DISEÑO DIGITAL

5

1. Los fotogramas (frames).

2. Los números de fotograma.

La Barra de Herramientas comprende aquellas herramientas necesarias para el

dibujo. Algunas herramientas llevan vinculados reformadores de herramientas,

admitiendo cambiar algunas propiedades de la herramienta.

El panel de color:

Para hacer uso de esta herramienta y hacer la selección de un color en

específico, es necesario hacer clic en las pestañas que se encuentren junto a los

íconos de las herramientas de lápiz y de botes de pintura

DISEÑO DIGITAL

6

Insertar texto:

En las herramientas encontramos también lo que es de la Texto, que es la que

nos permitirá escribir textos en nuestros proyectos.

En flash se pueden usar dos tipos de contenedores:

1. Texto de puntos: el tamaño del texto interpuesto, ascendiendo y

descendiendo con él.

2. Texto de área: con éste se puede modificar el tamaño, independiente del

texto que contenga.

DISEÑO DIGITAL

7

Frames

La palabra frame se traduce al español como fotograma y como se vio

previamente, un fotograma es una serie de imágenes secuenciales que simulan

estar en kovimiento por la velocidad en la que se transmiten. Es importante

recalcar que los frames no representan ningún contenido nuevo y sólo siguen la

secuencia de los fotogramas normales.

Ahora bien, esta secuencia de fotogramas que aparentan estar en movimiento

forma lo que es una animación.

Y ya para entrar de lleno a nuestro tema sólo nos queda definir lo que es un

keyframe (fotograma clave): éstos son aquellos fotogramas que marcan una

diferencia a partir de los frames anteriores, es decir al introducir un keyframe se

produce un cambio en el objeto animado, ya sea el color, el movimiento o algún

otro detalle del fotograma. Es decir, crean un cambio en la animación.

En este caso, para hacer una animación fotograma a fotograma te diré lo fácil y

sencillo que es hacerlo en el programa de Adobe Flash.

1. Para empezar deberás pulsar en la opción de ActionScript 2.0 para que el

programa abra un lienzo nuevo.

2. Para agregar la imagen será animada, ve a la pestaña de Archivo >

Importar > Importar a biblioteca y seleccionas tu imagen. Al lado derecho

de la pantalla verás un apartado que dice Biblioteca y ahí deberá aparecer

tu imagen, le darás clic a esta imagen y no la soltarás hasta que la hayas

arrastrado a tu lienzo. Para ajustar y mover la imagen a tu gusto y

preferencia, da clic derecho sobre ella y busca la opción de: Herramienta

de libre transformación/Free Transformation Tool.

3. Ahora bien, para hacer tu animación en Flash basta con que insertes tu

imagen inicial (al cual se le denomina keyframe o fotograma clave) en la

capa que aparece en el lienzo, con la posición que quieres que tenga tu

DISEÑO DIGITAL

8

fotograma al comienzo de la animación. Debes de fijarte de que esta

primera imagen se encuentre en el primer punto de tu línea del tiempo.

4. Das clic sobre la imagen y te vas a la pestaña de Modificar > Convertir a

símbolo > Movie clip (imagen en movimiento/película).

5. Después de esto integrarás frames a los siguientes puntos en adelante,

los cuales irán cambiando de posición para ir generando el movimiento de

la animación.

Ya que tienes el primer punto con tu imagen establecida en primera

posición, apretarás F6 para crear el primer frame, o en su defecto, puedes

ir a la barra de herramientas superior, buscar la pestaña de Modificar >

Línea del tiempo > Convertir a fotograma/frame.

6. Al hacer esto verás que la línea roja pasa el siguiente punto y volverás a

realizar el mismo paso anterior, hasta que llegas al segundo en donde

quieras que termine tu animación. Es decir, si quieres que tu animación

dure 25 segundos agregas frames, hasta el número 24 y el último frame

que será el punto de destino final de la animación agregarás un keyframe.

7. Ya que terminaste de crearlos te regresas al segundo puntito que es el

primer frame que creaste y mueves tu imagen como si estuviera

desplazando de su punto original a otro punto de destino (el cual marcará

en este paso).

8. Repites lo mismo con todos los otros puntos desplazando tu imagen de un

lugar a otro para que así simules el movimiento de tu imagen (que en

Tomado de http://www.aulaclic.es/flash/b_13_1_1.htm para fines educativos

Tomado de http://www.aulaclic.es/flash/b_13_1_1.htm para fines educativos

DISEÑO DIGITAL

9

Tomado de: http://www.itcsolutions.eu/2009/12/29/adobe-flash-cs3-and-cs4-interface-basic-commands-and-

concepts/ para fines educativos

realidad está estática pero tú estás produciendo esta ilusión óptica de

movimiento con la animación).

9. Para ver el trabajo que realizaste, pulsa Ctrl + Enter y verás el resultado

de tus fotogramas.

Timeline

El timeline es simple y sencillamente la línea de tiempo que nos irá marcando el

tiempo de duración que llevas creado de tu animación y te sirve para ir

marcando las diferentes secuencias de movimientos por segundo.

Ejemplo de una ventana Timeline:

DISEÑO DIGITAL

10

Conclusión

Hay dos conceptos fundamentales que son importantes de entender en el

proceso de animación: fotogramas y fotogramas clave.

Como se ha visto previamente, una animación se basa en una superposición

rápida de fotogramas. Cada uno de los fotogramas que se suceden en una

película sería un fotograma.

Entendiendo el concepto de fotograma, nos será bastante sencillo entender el

concepto de fotograma clave: un fotograma clave se refiere a aquel fotograma

en el que el componente o componentes del fotograma tienen alguna

modificación con respecto al fotograma que lo antecede. Dicho de otra forma, si

tomamos como referencia una animación cualquiera, un personaje de caricatura,

cada pequeño cambio en el personaje, ya sea en su posición, color, tamaño,

etc..., vendría dado por un nuevo fotograma clave.

Por tanto, una animación sencilla se compondrá de una serie de fotogramas, en

los que el elemento animado no cambia con respecto al anterior fotograma y una

serie de fotogramas clave, en los que el elemento animado sufre una variación

con respecto al fotograma anterior.

El término de timeline es uno que hace referencia a una línea de tiempo que

mide la duración de un video. El timeline es como el corazón de la animación

porque en ella se insertan los distintos elementos que componen el video o

película en el momento que quiera. Por lo que el timeline nos ayudará a definir

qué elementos queremos que desaparezcan y en qué momento. La timeline se

reproduce a una velocidad determinada por las propiedades que hayan sido

ajustadas durante el proceso de elaboración del video.

DISEÑO DIGITAL

11

Para aprender más

¿Cómo hacer un video animado de interfaces?

• s/a (2012). Adición y animación de interfaces en un video con photoshop.

Video de You Tube.

http://brd.unid.edu.mx/adicion-y-animacion-de-interfaces...

¿Cómo hacer un frame en After Effects?

• Noguera, Luis (2012) Tutorial: Efecto Secuencia de fotos en movimiento.

Video de You Tube. http://brd.unid.edu.mx/tutorial-efecto-secuencia-de-fotos-en-movimiento/

¿Cómo controlar el contenido de frames con formularios? ¿Quieres tener una tabla original, creativa y dinámica?

• s/a (2013) Guía para escribir documentos HTML.

http://brd.unid.edu.mx/guia-para-escribir-documentos-html/

DISEÑO DIGITAL

12

DISEÑO DIGITAL

13

Actividad de aprendizaje

Instrucciones

Para que pongas en práctica la teoría de esta sesión, realiza una animación en

donde se puedan apreciar diferentes frames y keyframes, creando un efecto

animado, ya sea con figuras o imágenes; con una duración mínima de 30

segundos (se recomienda ampliamente la utilización de software de Adobe

Flash).

Para finalizar sube tu actividad en zip a la plataforma en el lugar indicado para

que tu tutor la pueda revisar.

DISEÑO DIGITAL

14

Referencias

• García Franco, A. (2000) Interfaces. Obtenido

de: http://www.sc.ehu.es/sbweb/fisica/cursoJava/fundamentos/herencia/int

erfaces.htm

• González Morcillo, C. (s/f) Introducción a la animación 3D. Obtenido

de: http://www.esi.uclm.es/www/cglez/fundamentos3D/04.01.Introduccion.

html

• Pes, C. (s/f) Diccionario de informática. Obtenido

de: http://www.carlospes.com/minidiccionario/programa.php

• s/a (2011) Animaciones y simulaciones interactivas. Obtenido

de: http://redpex.0.portafolioseducativos.com/simulacionesinteractivas/

• s/a (2013) Animación Obtenido

de: http://creaciodigital.upf.edu/~smiguel/b12animacion.html