Diseño Digital
DISEÑO DIGITAL 1 Lectura No. 10 Nombre: Animación e interactividad Contextualización La elaboración de diferentes diseños de animación te va a servir como técnica para generar ideas creativas e innovadoras. Además de que es una forma de liberar tu pensamiento y ayuda la potencialización del pensamiento visual. Es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan, ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje. La creación de animaciones es una de las tareas fundamentales en el proceso de creación de proyectos multimedia. Con Flash se pueden crear de un modo sencillo animaciones de gráficos vectoriales. Estas animaciones pueden ser de tres tipos: Animaciones fotograma a fotograma: esta es la técnica utilizada en la animación tradicional de dibujos animados, en ella se crean cada uno de los fotogramas presentes en la animación y después se muestran a la suficiente velocidad como para dar la sensación de un movimiento continuo. Animaciones por interpolación de movimiento: en esta técnica se definen un fotograma inicial, un fotograma final y entre los que existe una serie de fotogramas interpolados. Animaciones por interpolación de forma: en este tipo de animación los objetos pueden variar tanto su posición como su forma y también otras propiedades.
DISEÑO DIGITAL 2 Introducción al Tema Se le conoce como interpolación a la acción de trasladar un fotograma clave a otro fotograma clave que se encuentran separados por el tiempo. Existen 2 tipos de interpolación: Interpolación de movimiento. Interpolación de forma. En la interpolación de movimiento se determinan las propiedades de posición, tamaño y rotación de un objeto sobre un escenario en un fotograma clave inicial. Estas propiedades pueden ser cambiadas en el fotograma clave final. La animación interpolada es una manera muy eficaz de crear un movimiento y hacer modificaciones, pues reduce al mínimo el tamaño del archivo. Al conjunto de fotogramas que se encuentran situados entre los fotogramas clave que tienen interpolación se les denomina fotogramas interpolados. A diferencia de los fotogramas clave, los fotogramas interpolados no son guardados en ninguna parte, simplemente son apreciados en el momento en que el video es reproducido, de tal forma que los fotogramas interpolados hacen que el peso del archivo sea más ligero, sin embargo las interpolaciones con muchos elementos o elementos gráficos muy complejos (como el uso de varias transparencias y degradados) pueden provocar que el movimiento de la animación sea más lento. Para realizar una interpolación se tienen que seguir los siguientes pasos: 1. Crear y determinar cuáles serán los fotogramas clave? 2. Seleccionar el tipo de interpolación en la pestaña: Animar que está en la barra de propiedades. 3. Ajustar parámetros de la interpolación. Y el resto del procedimiento dependerá del tipo de interpolación que vayas a realizar.
DISEÑO DIGITAL 3 Explicación Animación e interactividad Interpolación de movimiento Con la interpolación de movimiento tú como diseñador de la animación cuentas con la libertad de definir la posición, el tamaño y la rotación que quieres que lleve el objeto dentro del entorno en un fotograma. Para empezar a realizar tu animación tendrás que determinar cuál va a ser tu fotograma clave de origen y el fotograma clave de destino, para que por medio de los fotogramas interpolares se vaya realizando el movimiento que se generará en el proceso de transformación de la imagen original a la imagen final. Características: Este tipo de interpolación puede producirse con textos, grupos y símbolos. Sirve para animar propiedades de transformación: x, y, anchura, altura y rotación. Sirve para animar propiedades de color: alfa, brillo, tinta, avanzado. Pueden ser creadas a través de códigos. Estas animaciones cuentan guías de movimiento. Tomado de: http://metodos-animacion-flash.blogspot.mx/2011_06_01_archive.html para fines educativos
DISEÑO DIGITAL 4 Interpolación de forma La interpolación de formas consiste en hacer que un objeto cambie su forma física. Por ejemplo, con esta interpolación puedes hacer que un círculo se transforme en rectángulo. Para poder elaborar una interpolación de forma es necesario hacer uso de fotogramas vacíos, ya que éste nos permite realizar un vacío en la línea de tiempo, el cual nos dejará crear otras formas u objetos. Características: Se produce sobre formas vectoriales que no son agrupadas. Sirve para hacer morphs o transformaciones entre gráficos vectoriales ajustando las líneas y rellenos de un gráfico a otro por medio de interpolaciones. No se puede crear por código. Animación con pistas de forma. Creación de símbolos Los objetos símbolo son aquellos creados o importados al programa de Adobe Flash y que tienen la capacidad de tener una línea de tiempo propia, además de poder ser utilizados repetidamente. Un símbolo de animación es cualquier objeto creado o importado y pueden almacenarse más de uno en un mismo archivo con diferentes propiedades y la animación es completamente independiente. Es posible manipular las propiedades de los símbolos de animación. Pueden cambiarse varias de las propiedades de un símbolo, desde la velocidad de animación a la opacidad y rotación. Mediante la manipulación de estas propiedades se puede conseguir que un símbolo gire, acelere, aparezca o desaparezca de forma gradual o cualquier combinación de todo lo anterior.
DISEÑO DIGITAL 5 Las propiedades que tienen los símbolos de animación se pueden modificar en cualquier otro momento utilizando el cuadro de diálogo Animar o bien desde el inspector de propiedades. No es necesario que utilices símbolos en cada momento de la animación, pero al momento en que haces uso de símbolos e instancias para los gráficos que aparecen en varios fotogramas, logras obtener un archivo de animación más pequeño. Debido a que los símbolos se van guardando de manera automática en la biblioteca, puedes volver a hacer uso de éstos para crear unas nuevas animaciones. Creación de símbolos de animación Una vez creado un símbolo de animación se pueden establecer propiedades que determinen el número de fotogramas de la animación y el tipo de acción. De forma predeterminada el símbolo de animación nuevo tiene cinco fotogramas, cada uno con una demora de 0,07 segundos. Para crear símbolos en Flash: Primero debes seleccionar el objeto o imagen en escena. Vas al menú, buscas la opción modificar/convertir en símbolo (cmd+f8). Luego la ventana de diálogo. Tomado de: http://www.carterdjohnson.com/index.php/category/dma111/week-07/ para fines educativos
DISEÑO DIGITAL 6 Al momento de que queremos almacenar nuestro símbolo, Flash lo guardará en una biblioteca. Y cada vez que hagamos uso de este objeto en una película, éste se va a transformar en una instancia del símbolo. Es importante que tengas en cuenta que en la escena lo único que se va a modificar va a ser esta instancia.
DISEÑO DIGITAL 7 Conclusión El proceso de elaboración de interpolaciones es una forma realmente sencilla que tienes para realizar una animación. Las interpolaciones de movimiento básicas son animaciones muy sencillas y lo más importante que debes recordar es hacer la determinación de los 2 fotogramas claves: 1. El fotograma de origen. 2. El fotograma de destino. Teniendo estos 2 puntos de partida determinados para hacer la animación, el programa de Flash será el que calcule las posiciones intermedias que se necesitarán para que se haga el movimiento. A pesar de que el proceso de interpolación es muy simple y fácil de explicar, hay un pequeño inconveniente con este método de animación, y es que al estar haciendo el video tienes que ir generando de manera manual cada uno de los fotogramas clave que posea la animación. Al realizar una animación muy compleja o con un gran rango de duración puede llevarte horas de trabajo. Los símbolos animados también hacen uso de fotogramas pero a diferencia de las interpolaciones son mucho más sencillos de realizar, ya que no tienen tantos aspectos limitantes en su proceso de realización. Una gran ventaja que tienen es el hecho de que tú puedes guardar muchas animaciones de éstas en un mismo archivo y cada una de ellas tendrá su efecto de animación diferente, es decir cada símbolo es completamente dependiente.
DISEÑO DIGITAL 8 Para aprender más Cómo hacer una interpolación de forma? s/a (2011). Tutorial interpolación de forma. Video de You Tube. http://brd.unid.edu.mx/tutorial-interpolacion-de-forma/ Quieres saber cómo poner animación interpolar a tu texto? Juan Manuel (2012) Tutorial Flash, interpolación de texto. Video de You Tube. http://brd.unid.edu.mx/tutorial-flash-interpolacion-de-texto/ Cómo puedes hacer una animación de símbolos? Arciniegas, Mateo (2013) Tutorial Flash, animación por símbolos. Video de You Tube. http://brd.unid.edu.mx/tutorial-flash-animacion-por-simbolos/ s/a (2010) Cómo hacer una animación con símbolos. Video de You Tube. http://brd.unid.edu.mx/como-hacer-una-animacion-con-simbolos/
DISEÑO DIGITAL 9 Actividad de aprendizaje Instrucciones Esta materia combina la teoría con la práctica y toda práctica es fundamentada por la teoría. Ahora bien, ya que tienes los fundamentos básicos de la interpolarización, es necesario que los pongas en práctica. Por lo que en esta actividad se te pide elaborar una interpolación de forma en la que la imagen inicial tenga un pequeño tamaño y ésta vaya agrandándose conforme vaya transcurriendo el tiempo, de modo que esta imagen al final tenga un gran tamaño. Y también realizarás una interpolación de movimiento de 2 pelotas que reboten de un lado a otro en la pantalla. Al finalizar sube tu actividad en zip a la plataforma en el lugar indicado.
DISEÑO DIGITAL 10 Referencias Ramírez, M.E. y Rojas, L. M. (2009) Trabajo con símbolos de animación. Obtenido de: http://aprendeenlinea.udea.edu.co/lms/ova/mod/resource/view.php?id =1576 Rodríguez, J. (2011). Tutorial interpolación de forma. Obtenido de: http://www.youtube.com/watch?v=o0s0nn-gpug Rodríguez, L. (2004) Interpolación de formas. Obtenido de: http://www.desarrolloweb.com/articulos/1381.php Ruíz, I. (2000) Animación Vectorial Flash. Obtenido de: http://www.canalaudiovisual.com/ezine/books/jirflash/3flash55.htm s/a (2009) Animación por forma. Obtenido de: http://www.aulaclic.es/flash/t_14_1.htm s/a (2013) Animación de interpolación. Obtenido de: http://helpx.adobe.com/es/flash/using/motion-tween-animation.html s/a (2013) Animaciones: Interpolación de movimiento I. Obtenido de: http://www.ite.educacion.es/formacion/materiales/34/cd/curso/cap11/d oc1103.htm