El buen manejo y entendimiento de los fotogramas y la lÃnea de tiempo es crucial para lograr los resultados esperados en los trabajos de Flash. En esta clase veremos los aspectos básicos de la animación, sus principales componentes, qué tipos de fotogramas hay y cómo alcanzar los resultados deseados con el mÃnimo esfuerzo.
En sÃ, Flash nos proporciona todas las herramientas para que podamos realizar una animación buena en poco tiempo. ¡Aprovechémoslas!
Fotogramas
Si este tema no es el más importante del taller, se le acerca mucho. Dado que Flash es un programa de animación y los fotogramas son lo que hacen posible esa animación, diré que al menos son un engranaje fundamental en el funcionamiento de esta máquina.
Se le dice fotograma a cada una de las imágenes impresas en una tira de pelÃcula. En este caso lo veremos un poco diferente, pero en esencia es lo mismo.
Ahora, centrémonos en nuestra lÃnea de tiempo. Ese es el escenario donde vamos a tratar con los fotogramas.
En Flash hay 2 tipos básicos de fotogramas: claves y comunes. En la lÃnea de tiempo, los fotogramas clave poseen un punto, como se puede ver en el ejemplo de la primer imagen.
Funcionamiento de los fotogramas
En los fotogramas clave vamos a insertar “lo importante”. ¿Cómo es eso? Flash realiza la animación automáticamente. Imagina una pelota que cae del cielo. En Flash no necesitamos crear todos los fotogramas de la escena. Únicamente creamos los fotogramas clave: cuando la pelota está arriba y cuando está abajo. Son sólo dos fotogramas. El resto de los fotogramas los genera Flash.
Si haces clic en el siguiente archivo SWF podrás ver tres cÃrculos animados de forma diferente. Como se puede ver, la animación tiene dos puntos importantes: el inicio y el final. Cada cÃrculo fue insertado en una capa diferente, pero los fotogramas clave están en la misma posición.
En total se utilizaron 10 fotogramas, pero sólo tuvimos que especificar 2 por cÃrculo. De esta manera Flash nos ahorra los pasos intermedios.
En la imagen se pueden ver los fotogramas en la lÃnea de tiempo. Los fotogramas clave (marcados con un punto) están en el fotograma 1 y el 10.
Antes de realizar la animación, los sÃmbolos o elementos con los que trabajamos deberán ser convertidos en “gráficos”. (Este concepto lo veremos en clases posteriores). Esto se hace rápidamente seleccionando el sÃmbolo y, a través del comando F8, seleccionado la opción “Gráfico”.
Los fotogramas se ven de color violeta y con una flecha hacia la derecha porque están animados. Como indica la imagen, la animación comienza en el fotograma 1 y termina en el 10, que no posee animación.
Para animar una serie de fotogramas, sólo debes hacer clic con el botón derecho del mouse sobre la parte que desees animar y seleccionar la opción “Crear interpolación de movimiento“. Recuerda que para animar algo tiene que haber una diferencia entre el primer fotograma clave y el último de esa animación. Puedes variar el color del “gráfico”, su tamaño, transparencia, etc. Todo eso se realiza seleccionando el gráfico cuando estés en el fotograma clave y variando sus caracterÃsticas desde el Cuadro de Propiedades.
También pueden haber fotogramas vacÃos. Dado que todo funciona en una misma lÃnea temporal, puede pasar que en un capa la animación comience mucho más tarde que en otra. ¿Qué sucede mientras tanto? Nada. La capa en esos fotogramas queda vacÃa.
En la imagen se ve que la animación de la capa “CÃrculo 3″ comienza recién en el fotograma 5. Antes de eso, la capa permanece blanca, vacÃa.
Una regla general es que el fotograma 1 de cualquier capa inicialmente aparece como un fotograma clave. El primer fotograma es el inicio de la animación… Si este fotograma no se utiliza, queda blanco pero permanece como fotograma clave, a menos que se elimine.
La animación
Para insertar un fotograma clave, debes hacer lo siguiente:
- Posicionarte en el fotograma deseado
- Presionar F6
Con el botón izquierdo del mouse verás un menú que también te permite insertar fotogramas.
Los fotogramas comunes se generan solos entre dos fotogramas clave.
¿Qué pasa si quiero que un objeto inanimado (un cÃrculo estático, por ejemplo) permanezca en la pelÃcula durante varios fotogramas?
- Inserta el objeto en una capa nueva
Llamaremos a esta capa “CÃrculo inanimado”.
Si creamos la nueva capa y dibujamos o pegamos directamente un cÃrculo, este aparecerá en el primer fotograma. Si queremos que el cÃrculo se aparezca recién en el fotograma 5, deberemos:
Crear un fotograma clave en el fotograma 5 (como se ve en la imagen)- Crear o pegar el sÃmbolo.
Todo elemento nuevo se inserta en un fotograma clave.
Ahora bien, no tengo ningún interés en animar el cÃrculo. Quiero que del fotograma 5 al 8 se vea igual. Por lo tanto, no necesito convertirlo a “Gráfico”, ni animarlo. Sólo quiero que Flash entienda que el fotograma 5 se repite igual hasta el 8. Para esto sólo debo “prolongar” el fotograma 5, agregando fotogramas comunes a partir del fotograma 6. Para hacerlo:
Selecciona el fotograma 8- Presiona F5.
Verás que se agregarán los fotogramas que deseabas. Otra forma es seleccionar el fotograma clave 5 y presionar F5 desde ahÃ. Verás que cada vez que presiones F5 se agregará un solo fotograma después del que has seleccionado.
Esto funciona únicamente cuando no se haya ocupado ningún fotograma posterior al 8 en ninguna capa.
Toda pelÃcula tiene un fotograma inicial y uno final. Cuando nosotros insertamos un fotograma clave y dibujamos o pegamos allà un sÃmbolo, Flash interpreta que ese sÃmbolo va a aparecer hasta el final de nuestra pelÃcula. Esto es porque al crear la capa, esta se crea desde el fotograma 1 al último fotograma que tengamos ocupado (incluyendo todas las capas de la misma escena).
Por eso, puede pasar que al pegar o crear un sÃmbolo, este aparezca en todos los fotogramas siguientes al fotograma inicial y tengamos que borrar aquellos fotogramas donde no queremos que figure. Exactamente esto fue lo que he tenido que hacer en el caso de la última imagen, pues al crear mi sÃmbolo los fotogramas se habÃan creado automáticamente hasta el fotograma 10. Para eliminar los fotogramas, sólo debes seleccionar los que deseas borrar y presionar Shift+F5.
En el caso de intermitencia, tal como se ve en la imagen, es necesario crear un fotograma clave cada vez que modifiques la visualización. Las flechas rojas muestran la ubicación de cada fotograma clave. Esto funciona tanto para objetos inanimados como para gráficos animados.
En este caso el cÃrculo se verá recién a partir del fotograma 5, en tres intervalos. Hay varias formas posibles de realizar cada acción, un ejemplo para esta pelÃcula serÃa el siguiente:
- Creo el fotograma clave 5
- Pego el sÃmbolo
- Creo el fotograma clave 7
- Borro el sÃmbolo
- Creo el fotograma clave 10
- Pego el sÃmbolo
Los pasos se repiten.
Otra forma de hacerlo es:
- Creo el fotograma clave 5
- Pego el sÃmbolo
- Creo los siguientes fotogramas clave
- Borro el contenido de los fotogramas clave que quiero dejar vacÃos
Haz clic en el archivo para ver un ejemplo de las intermitencias en la animación.
Fotogramas Por Segundo (FPS)
Los Fotogramas Por Segundo o FPS es una medida de tiempo que, como su nombre lo indica, se refiere a la cantidad de fotogramas que la animación tiene por segundo.
Para comprender mejor este concepto puedes comparar las siguientes animaciones:
4 Fotogramas Por Segundo
12 Fotogramas Por Segundo
36 Fotogramas Por Segundo
Ahora puedes crear tus propias animaciones. Comienza desde lo más simple, con sÃmbolos básicos (cÃrculos, cuadrados) haciendo pequeñas variaciones (color, tamaño). Luego puedes experimentar con otros elementos. Realiza animaciones con varias capas y varios objetos sincronizados. No importa si te equivocas, siempre puedes volver a empezar. Y cualquier duda que tengas, puedes preguntarme a través de los comentarios. Ya verás que Flash no es tan difÃcil como parece…
| << CLASE ANTERIOR |
Domingo, 2 de Marzo de 2008 a las 02.31
Hola: BuenÃsimo el curso, tengo alguna experiencia en el manejo de flash en la parte de animación, más no en la de programación, en el contenido del taller he encontrado algunas cosas que sabÃa y otras que no, aun asà lo sigo y me parece interesante y bien formulado.
Tengo una pregunta: Nunca he entendido para que sirve volver un elemento como grafico o como clip de peÃcula, no veo la diferencia entre uno y otro.
Gracias
Hasta la próxima.
Lunes, 3 de Marzo de 2008 a las 09.43
Hola Nelson, gracias… La principal diferencia es que un gráfico se anima dentro de una pelÃcula. Transformar un elemento en pelÃcula me permite darle animación propia a esa pelÃcula, totalmente independiente de la animación de la escena donde se encuentre. Un gráfico se anima desde la escena. ¿Me explico? De todas formas, voy a incluir la respuesta a tu pregunta en las próximas clases, cuando hable de la diferencia y usos de los botones, gráficos y pelÃculas. Un saludo!
Lunes, 3 de Marzo de 2008 a las 17.36
Hola Alejandra. Sólo para dejar mis agradecimientos por el Taller.
Martes, 4 de Marzo de 2008 a las 16.26
Hola chicos…. Es para dejar mis más agradecimientos por tan buen recurso, el cual me ha servido de mucho ya que no sabÃa trabajar con este programa. Espero que lo sigan haciendo bien…. Saludos!
Viernes, 7 de Marzo de 2008 a las 20.52
Muy bueno el curso !! mirá que tocando por tocar nunca pude hacer nada de nada (ni siquiera que se moviera la famosa pelotita…).
Está muy bueno para los que empezamos de cero.
Chau.
Jueves, 13 de Marzo de 2008 a las 14.23
Hola a todos! MuchÃsimas gracias por las felicitaciones y ya saben, cualquier duda… me dejan un comentario. La idea es que puedan hacer todo lo que se propongan. Un saludo!
Miércoles, 23 de Abril de 2008 a las 11.14
Hola!. gracias por el aporte excelente, cuando aplique los talleres les mandaré mi opinión y mi experiencia. Clara ines
Viernes, 9 de Mayo de 2008 a las 04.04
Hola,
creo q llegue tardepero por las dudas pregunto igual,
como ago para ver mi animacion? porq ago too lindo pero no se donde tengo q poner para ver si quedo.
Gracias, mui bueno el taller me re encanto, quiero leer todas las clases el mismo dia xD
Salu2