Animación en Flash

Animación en Flash ¿CÓMO FUNCIONA LA ANIMACIÓN? Empezamos esta tercera práctica adentrándonos en la animación. Antes de empezar a ver cómo se pueden generar animaciones con Flash es conveniente entender los procesos generales que nos permiten tener una secuencia animada. El ejemplo más claro de animación, lo tenemos en el cine. El cinematógrafo fue inventado por los hermanos Lumier a finales del siglo XIX. Era este un sistema para componer una secuencia animada a partir del encadenamiento de imágenes estáticas. El fundamento del sistema era el aprovechamiento del fenómeno de la latencia en el ojo humano. A partir de una velocidad determinada, la superposición de fotogramas genera la sensación de una imagen en movimiento. Esta velocidad, en la que el ojo humano no aprecia el salto de un fotograma a otro, es de alrededor de 24 fotogramas por segundo. Mucho ha evolucionado el cine, y la imagen animada desde entonces, pero la base sigue siendo la misma: la superposición de fotogramas estáticos, a una velocidad que permitan engañar al ojo humano. Si entendemos esto, ya sabemos como Flash puede generar animaciones. Flash permite generar, con multitud de herramientas de dibujo, fotogramas estáticos. Ahora, vamos a aprender a utilizar las herramientas que Flash implementa para la superposición de estos fotogramas, con el fin de conseguir una animación o Película. LA LÍNEA DE TIEMPO. Toda película de Flash tiene una línea de tiempo que es el corazón de la animación. La línea de tiempo está compuesta por una serie de fotogramas. En cada uno de ellos se agregarán los distintos elementos que compondrán nuestra película. Igualmente, en esta línea de tiempo iremos decidiendo que elementos desaparecen y cuando. Por tanto, también podemos entender la línea de tiempo como el lugar en el que se establece la secuencia de fotogramas en el tiempo que compondrán nuestra película. La línea de tiempo se reproducirá a una velocidad que vendrá determinada por las propiedades que hayan sido ajustadas en las propiedades de la Película, accesibles a través de menú Modificar/Documento. FOTOGRAMAS Y FOTOGRAMAS CLAVE. Hay dos elementos fundamentales en el proceso de animación en Flash, los Fotogramas y los Fotogramas Clave. Como hemos dicho anteriormente, 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. Así, es perfectamente correcto decir que, una película que se reproduzca a 10 fotogramas por segundo, necesitará de 100 fotogramas para durar 10 segundos. En esta película, si quisiéramos que un elemento apareciera estático durante 10 segundos en la pantalla, necesitaríamos 100 fotogramas idénticos. Entendiendo el concepto de Fotograma, nos será bastante sencillo entender el concepto de Fotograma Clave. Un fotograma clave es un fotograma en el que el elemento o elementos del fotograma presentan alguna variación con respecto al fotograma inmediatamente anterior. Dicho de otra forma, si tomamos como referencia una animación cualquiera de Walt Disney, cada pequeño cambio en el personaje, ya sea en su posición, color, tamaño, etcétera, vendrá dado por un nuevo fotograma clave. Por tanto, una animación sencilla en Flash se compondrá de una serie de fotogramas, en los que el elemento animado no se ha introducido ninguna modificación en los elementos que aparecen en el fotograma con respecto al fotograma anterior, y una serie de fotogramas clave, en los que algún elemento sufre una variación con respecto al fotograma inmediatamente anterior. La línea de tiempo. Para insertar o eliminar fotogramas o fotogramas clave en la línea de tiempo, podemos hacer uso de las opciones disponibles en el menú Insertar. Para insertar un fotograma en la línea de tiempo, basta con seleccionar el punto de la línea de tiempo en el que se desea insertar el fotograma y a continuación escoger la opción Insertar/Fotograma. Los fotogramas normales se representan en la línea de tiempo con un color gris sólido. Los fotogramas clave presentan un pequeño círculo en su interior. Este círculo es negro si el fotograma contiene algún elemento o blanco si el fotograma esta vacío (un cambio del elemento con respecto al fotograma anterior puede ser la eliminación de dicho elemento). ANIMACIÓN FOTOGRAMA A FOTOGRAMA. En Flash existen varias formas de animar un objeto. La más directo, aunque no la más útil ni la más sencilla, entendiendo el proceso en el que se basa la animación, es crear una serie de fotogramas clave en los que fuéramos modificando manualmente el elemento animado. Por ejemplo, si quisiéramos que un objeto cruzará la pantalla de izquierda a derecha, crearíamos un primer fotograma clave con el elemento en su posición de partida (el borde izquierdo del escenario) y a continuación iríamos creando un nuevo fotograma clave en el que el objeto estuviera un poco más a la derecha que en el fotograma anterior. De esta manera, tras crear una serie de fotogramas, llegaríamos al borde derecho de la pantalla. Al reproducir esta secuencia de fotogramas tendríamos la sensación de desplazamiento continuo. Al crear una nueva película, el primer fotograma en la línea de tiempo es, por defecto, un fotograma clave vacío. Se pueden insertar dos clases de fotogramas clave, los fotogramas clave (inserta un nuevo fotograma clave cuyo contenido es idéntico al fotograma clave inmediato anterior), o insertar fotograma clave vacío (en este caso el fotograma está completamente vacío). Entre dos fotogramas siempre es posible insertar uno nuevo, para ello se elige Inserta/Fotograma. A los fotogramas así insertados se les llama fotogramas intercalados. No se pueden copiar y pegar fotogramas por el método usual de Windows. Para copiar y pegar un fotograma hay que hacer uso de la opción de menú Edición/Copiar y Edición/Pegar. El borrado de fotogramas se puede hacer de dos modos, Insertar/Eliminar Fotogramas (el resultado es que el tamaño de la película disminuye en tantos fotogramas como se han borrado), Insertar/Borrar fotograma clave (se borra el fotograma como fotograma clave y se convierte en fotograma intercalado. El tamaño de la película no varía, varía el tipo de fotograma que se ha borrado). ANIMACIÓN POR INTERPOLACIÓN DE MOVIMIENTO. La manera de crear una animación fotograma a fotograma tiene un gran inconveniente: tenemos que crear de manera manual cada uno de los fotogramas clave de nuestra animación. Esto en una animación algo compleja o de cierta duración puede suponer un montón de horas de trabajo. Además, al aumentar el número de fotogramas clave en una película, aumenta considerablemente el tamaño del archivo final, lo que supone un problema añadido para publicar animaciones en Internet. Para solucionar esto, en Flash tenemos la posibilidad de crear interpolaciones de movimiento. En una interpolación de movimiento básica, solo necesitamos definir dos fotogramas claves: El fotograma inicial y el fotograma final. Una vez definidos estos dos fotogramas clave, podemos dejar que flash calcule las posiciones intermedias necesarias para realizar el movimiento. En el ejemplo que poníamos anteriormente, para que un objeto cruzara la pantalla, crearíamos un primer fotograma clave en el que el elemento a animar estuviera en el borde izquierdo del escenario. Una vez hecho esto seleccionamos el fotograma y utilizamos la opción del menú Insertar/Crear interpolación de movimiento.A continuación, en el punto de la línea de tiempo que deseemos crearíamos un segundo fotograma, con el elemento en el borde derecho de la pantalla. En la línea de tiempo, aparecerá una línea con una flecha en su extremo derecho, con un color azul sólido, entre el fotograma de origen y el fotograma de destino. Esto es señal de que existe una interpolación de movimiento entre esos dos fotogramas. Si queremos ver el resultado de esta animación, puede utilizar la opción del menú Control/Probar película. Dos cosas a tener en cuenta en este tipo de animaciones: Solo funcionan si los elementos de ambos fotogramas son un grupo o bien una instancia de un símbolo. Por otro lado, siempre es necesario que haya un fotograma origen y uno destino. El fotograma destino es a su vez ser el fotograma origen para otra interpolación de movimiento. Si hubiera algún problema para calcular la interpolación de movimiento, por no cumplirse alguna de las condiciones anteriores, la línea que une los dos fotogramas en la línea de tiempo aparecería punteada. Si observas en el Panel de Fotograma la propiedad de Interpolación del último fotograma de una interpolación verás que es Movimiento, si añades más fotogramas tras este, conservarán esta propiedad y la interpolación de movimiento se extenderá a ellos. Para terminar una interpolación de movimiento cambia la propiedad Interpolación en el panel Fotograma a Ninguno. La Figura 3.2 muestra el panel Fotograma. Puedes añadir fotogramas clave en medio de una interpolación de movimiento, la interpolación final, tendrá en cuenta los nuevos fotogramas. El panel Fotograma desde donde se controlan los parámetros de la interpolación. Para crear una interpolación donde rote el objeto, en el último fotograma de la interpolación selecciona en el panel Fotograma Rotar/CMR si quieres una rotación en la dirección de las agujas del reloj o Rotar/CCMR si quieres la rotación en la dirección contraria a las agujas del reloj. En la práctica 4 dedicada a las capas aprenderás a mover un objeto a lo largo de una trayectoria que no sea rectilínea. ANIMACIÓN POR INTERPOLACIÓN DE FORMA. En Flash tenemos la posibilidad de realizar la transformación de un objeto en otro, como si de un "morphing" se tratara, gracias a las interpolaciones de Forma. Para realizar una interpolación de Forma, necesitamos un fotograma clave inicial, un fotograma clave final y una serie de fotogramas para la interpolación de forma. En el fotograma de origen tendremos los elementos originales. En el fotograma destino tendremos los elementos en los que se transformarán los elementos originales. Al igual que en una interpolación de movimiento, los fotogramas intermedios serán calculados por Flash automáticamente. Una vez que tenemos los fotogramas de origen y de destino, podremos incluir la Interpolación de Forma. Para ello, abriremos el menú contextual de Fotograma, en Modificar seleccionamos Fotograma (Ctrl+F) o también utilizando la opción de Paneles. Una vez allí, hacemos en la opción de interpolación, y escogeremos la opción "Forma" en el menú desplegable. La interpolación de Forma aparecerá en la línea de tiempo, representada por una flecha que une los fotogramas de origen y de destino sobre un fondo verde. Un parámetro que se puede ajustar en el panel Propiedades es la aceleración, una aceleración negativa significa que el movimiento va aumentando la velocidad, una aceleración positiva significa que el movimiento va disminuyendo la velocidad. Para realizar una interpolación de forma es necesario que ninguno de los elementos del fotograma origen o destino estén agrupados, o sean un símbolo. Prueba lo siguiente, crea una nueva película, en el fotograma 1 dibuja una elipse sin relleno, selecciona el fotograma 10 e inserta en el un nuevo fotograma clave vacío, en este fotograma dibuja un rectángulo en cualquier posición. Selecciona de nuevo el fotograma 1 y, sobre el panel Propiedades selecciona Interpolación/Forma. Se dibujará una flecha con origen en el fotograma 1 y final en el 10 sobre fondo verde. Rebobina la película y Reprodúcela, la elipse inicial se convertirá en el rectángulo final interpolando su forma suavemente. CONSEJOS PARA LA ANIMACIÓN POR INTERPOLACIÓN DE FORMA. Si las formas a interpolar son muy complejas, puede que Flash no las interpole bien. Podemos ayudar a Flash en la interpolación añadiendo consejos de forma a la interpolación. Un consejo de forma sobre un punto del objeto en el fotograma inicial indica a qué otro punto del objeto en el objeto del fotograma final se transformará. Para añadir un consejo de forma ve al fotograma inicial y selecciona la opción de menú Modificar/Forma/Añadir pista de forma, aparecerá una letra sobre un círculo de color amarillo, coloca este círculo en algún punto del objeto, ve al fotograma final, en este aparecerá la misma letra sobre un círculo de fondo verde, colócala sobre el punto al que quieres que se transforme y reproduce la animación para ver el resultado. Siempre que definas más de un consejo de forma, hazlo de manera ordenada en la dirección contraria a las agujas del reloj, esto ayudará a Flash a realizar correctamente la interpolación. SÍMBOLOS E INSTANCIAS. Todo documento de Flash tiene una biblioteca de objetos asociada. En esta biblioteca se van almacenando los elementos que hemos importado desde otras aplicaciones, así como elementos gráficos que hayamos creado en Flash como símbolos. Para entender mejor la utilidad de esta biblioteca, debemos entender lo que es un símbolo. Un símbolo es un elemento gráfico que se crea con la intención de ser utilizado en varios lugares de nuestro proyecto. Cuando un elemento se va a utilizar más de una vez, es preferible convertirlo en símbolo e insertar instancias de ese símbolo en nuestro proyecto. De esta manera, cuando nuestro símbolo sufra algún cambio, todas las instancias de ese símbolo se modificarán automáticamente. Esta manera tan productiva de trabajar tiene además la ventaja de que, cuantos más símbolos utilice nuestro proyecto en detrimento de gráficos individuales, más pequeño será el fichero final. Por tanto, y como norma, hay que crear un símbolo para todo aquel objeto que vaya a aparecer más de una vez en nuestro proyecto. Para acceder a la librería, utiliza el menú Ventana/Biblioteca. En la ventana que aparece verás todos los elementos importados, sonidos y símbolos que hay asociados a tu proyecto actual. El panel Biblioteca Para crear un símbolo en Flash, hay dos opciones: Convertir un gráfico que hayamos creado sobre nuestro escenario a símbolo, mediante menú Insertar/Convertir en símbolo, o crear un símbolo directamente a través de menú Insertar/Nuevo símbolo. En este último caso, un nuevo escenario se abrirá para que creemos nuestro símbolo, desapareciendo momentáneamente el escenario de nuestro proyecto. En ambos casos, tendremos que dar un nombre al símbolo creado y definir el tipo de símbolo que vamos a utilizar. Existen tres tipos de símbolos: Gráficos, Botones y Clip de película. Veremos más adelante cual es la diferencia entre unos y otros. Para insertar un símbolo en el escenario, basta con arrastrarlo desde la librería al escenario. Con el fin de dar mças versatilidad y variedad a estas instancias de los símbolos, individualmente podemos aplicarles distintos efectos de color a cada una de ellas. Para ello utilizaremos el panel de Propiedades. En esa ventana podrás aplicar efectos de transparencia, variar el brillo o modificar los colores de la instancia seleccionada Tipos de Instancias Como vimos anteriormente, podemos utilizar instancias de los símbolos almacenados en la Librería, de manera que cada cambio realizado en el símbolo original, actualice todas las instancias del símbolo a lo largo de la película. Existen tres tipos de símbolos que se pueden generar en Flash: Gráficos, Clips de película o Botones. Ahora bien, indistintamente del tipo que se haya definido para el símbolo original, cualquier instancia de cualquier símbolo puede ser tratada de manera distinta en la película. Así, podemos tener la instancia de un símbolo gráfico tratada como si fuera un botón, en cuyo caso será capaz de recoger eventos del usuario. Veamos que diferencias existen entre los tres tipos de instancias posibles y porque utilizar unas u otras: Botón: Una instancia tratada como botón será la única que pueda recoger eventos del usuario y ejecutar una serie de acciones asociadas a esos eventos. Gráfico: Una instancia tratada como gráfico puede ser cualquier elemento, ya sea estático o animado, que se vaya a incluir más de una vez en la película. Las instancias gráficas de símbolos animados se reproducen en consonancia con la línea de tiempo principal, lo que quiere decir que, si la línea de tiempo se para la animación de la instancia también se pararía. Clip de película: Este tipo de instancias son tratadas como películas independientes dentro de la película principal. La línea de tiempo de un clip de película se reproduce con independencia de lo que ocurra en la línea de tiempo principal, así, si la línea de tiempo principal se para, la línea de tiempo del clip de película puede continuar su reproducción. Los clips de películas pueden ser controlados a través del lenguaje ActionScript, lo que permite mucho dinamismo en una película. Para que un clip de película pueda ser citado en una acción de ActionScript, es necesario que esta tenga un nombre. Este nombre lo asignamos en el panel Propiedades. Diferencias entre los símbolos de gráficos animados y los símbolos de clips de película. Flash ofrece dos tipos de símbolos animados: los símbolos gráficos y los clips de película. La diferencia es algo sutil y un poco complicada de entender a primera vista. Un símbolo de gráfico animado está vinculado a la línea de tiempo de cualquier película en la que se coloque el símbolo, mientras que un símbolo de clip de película se ejecuta en su propia línea de tiempo independiente. Podemos imaginar los símbolos de gráficos animados como una presentación con diapositivas. Cada fotograma del símbolo es una diapositiva separada. Cuando vamos al fotograma siguiente del símbolo de gráfico animado, hay que ir a otro fotograma de la película. Además, no hay sonido. Aunque haya funciones de sonidos o de interactividad en una película, al convertirla a símbolo gráfico, se pierden estas opciones. Un símbolo de clip de película es como un bucle de película. Puede proyectar todos sus fotogramas uno tras otro, una y otra vez, en un solo fotograma de la película. Los clips de película poseen una pista de sonido y retienen su interactividad. Otra cosa que conviene saber acerca de los dos tipos de símbolos es que los clips de película, en vista de que se ejecutan en su propia línea de tiempo, no aparecen como animaciones en el entorno de edición de Flash. Sólo se ve el primer fotograma de la película como objeto estático en el Escenario. Los símbolos de gráficos animados, que utilizan la misma Línea de tiempo que los de la película principal, muestran sus animaciones en modo de edición de película. 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 continúo. 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, Flash interpola, de manera suave, los fotogramas entre el inicial y el final. La rotación es un caso de interpolación de movimiento que también está disponible en Flash. Además, también se pueden interpolar de este modo propiedades como el color o la transparencia. Únicamente se pueden animar con esta técnica las instancias de símbolos y los objetos agrupados. 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 como color, etc, la única restricción es que no se pueden aplicar a instancias de símbolos, ya que la forma de estos es fija.