Alejandra 28 de febrero de 2008 a las 17.51
   Imprimir artículo
elWebmaster.com

Taller de Flash: Animación II


Taller de Adobe FlashEl 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.

Film de películaSe 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.

icono swf

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.

Círculos y fotogramas en la línea de tiempoEn 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.

Capas en Flash - Capa vac√≠a en animaci√≥nTambi√©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:

  1. Posicionarte en el fotograma deseado
  2. 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?

  1. 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:

  1. Creación de un fotograma clave en Adobe FlashCrear un fotograma clave en el fotograma 5 (como se ve en la imagen)
  2. 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:

  1. Prolongación de un símbolo en Adobe FlashSelecciona el fotograma 8
  2. 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.

Aparición intermitente de un símbolo en Adobe FlashEn 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:

  1. Creo el fotograma clave 5
  2. Pego el símbolo
  3. Creo el fotograma clave 7
  4. Borro el símbolo
  5. Creo el fotograma clave 10
  6. Pego el símbolo

Los pasos se repiten.

Otra forma de hacerlo es:

  1. Creo el fotograma clave 5
  2. icono swfPego el símbolo
  3. Creo los siguientes fotogramas clave
  4. 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:

icono swf4 Fotogramas Por Segundo

icono swf12 Fotogramas Por Segundo

icono swf36 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
 

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (24)

  1. Nelson dice:

    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.

  2. Alejandra dice:

    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!

  3. Alvaro dice:

    Hola Alejandra. Sólo para dejar mis agradecimientos por el Taller.

  4. ZARITZA dice:

    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!

  5. Claudio dice:

    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.

  6. Alejandra dice:

    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!

  7. Clara ines sanchez dice:

    Hola!. gracias por el aporte excelente, cuando aplique los talleres les mandaré mi opinión y mi experiencia. Clara ines

  8. Matias Fontan dice:

    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

  9. Eduardo dice:

    Junto con saludarte y felicitarte por este taller en la cual las explicaciones de este taller son buenisimas, me asalta la siguiente curiosidad se puede colocar una animacion flash en un progama como el visual basic 6, tienes algun ejemplo de como hacerlo?. Gracias por tu tiempo.

    Atte.

    Eduardo

  10. Alejandra dice:

    Hola Eduardo! Estoy segura que se puede, pero este espacio es muy peque√Īo como para poder explicar bien c√≥mo debes hacer. En los pr√≥ximos d√≠as estaremos publicando un art√≠culo con la respuesta a tu consulta. Un saludo. Ale

  11. Coral dice:

    Hola ale, sin abusar de tu tiempo, ojala pudieras explicar un poco de diagramacion líquida en cuanto a la posición de los elementos en un sitio hecho en flash.
    Ah y felicitaciones , el sitio es muy bueno y la forma en que explicas todo es muy claro.

  12. Alejandra dice:

    Hola Coral! Qué interesante el tema que has propuesto. Es tan interesante y tan amplio que actualmente estamos proyectando todo un curso sobre Usabilidad, donde incluiremos este tipo de temáticas de sitios Flash. Pronto informaremos en nuestro newsletter sobre los nuevos talleres. Un saludo. Ale

  13. Diego dice:

    Hola muy bueno el curso, estoy practicando flash desde hace un rato y conozco algo, me gustaria saber como hicieron el primer ejemplo de los 3 circulos amarillos, el que se agranda y se desvanece, yo lo hice fotograma por fotograma despues de darle animación por forma, no se si se pueda de una manera más rapida.
    Gracias

  14. Alejandra dice:

    En realidad lo que tienes es un círculo que quieres que desaparezca. La forma más sencilla es creando el objeto (círculo en este caso), suponte en el frame 1. Creas un Fotograma Clave (FC) en el 6 que quieres que esté vacío. A continuación creas un FC en el frame en el 11. Copias el objeto del frame 1 y lo pegas en el 11 con ctrl+shift+V, para que se pegue en el sitio exacto. Repites la operación para generar intermitencia. También puedes pegar el objeto en el frame 1 y continuarlo hasta el frame 20 (por dar un ejemplo) y luego ir creando FCs para borrar los espacios donde no quieres que aparezca el objeto. Espero que te haya servido la respuesta. ¡Hasta la próxima!

  15. Alma dice:

    Hola Alejandra
    Dia a dia leo cada uno de tus tutoriales,los cuales son bastante claros y de mucha utilidad, con ello he ido aprendiendo a conocer m√°s el programa para flash, ahora bien,, tengo la siguiente duda.. estoy realizando un flash que lleva 8 capas, lo primero que hice fue generar capas individuales y animando cada una de ellas. las nombre IMG 1, 2, 3, ETC., ya teniendo las ocho capas, abri un nuevo documento por que no sabia como acoplarlas, por ahi lei que debia seleccionar de cada imagen los fotogramas, copiar y pegar del acuerdo al orden necesario..
    Segui paso a paso, seleccionando fotogramas, copiando y pegando,,y al final de las ocho capas,, tambien aprendi que debo poner stop (). lo hice tal cual, y cuando pongo a probar la pelicula, resulta que todas las capas me dan la misma imagen… no se despliegan las capas que pegue.. puedes orientarme al respecto.???.. espero haber sido clara en mi duda.. porque entiendo muy poco de esto,, desde ya muchisimas gracias. Saludos. Alma

  16. Alejandra dice:

    ¬°Hola! ¬ŅPuedes enviarme el archivo para que lo revise? La verdad es que se me hace muy dif√≠cil entender el problema. El mail es alejandra@elwebmaster.com Saludos!

  17. ESTHER dice:

    ME GUSTARIA SABER COMO LE PONGO LA VELOCIDAD DE REPRODUCCI√ďN DE 25 FPS Y CON LAS DIMENSIONES POR DEFECTO

  18. Morton dice:

    Hola, Esther

    Puedes consultar la clase del Taller de Flash llamada “Mesa de Trabajo“, donde se explica c√≥mo configurar lo que deseas.
    Puntualmente lo hallar√°s en el punto “Cuadro de propiedades“, a partir de la segunda imagen.

    Haz clic aqu√≠ para visitar la clase Taller de Flash: Mesa de Trabajo ¬Ľ

    Un saludo!

  19. angelo dice:

    sigo adelantee.. !!!!}

  20. NELLY dice:

    HOLA COMO PUEDO BAJARME ESTE PROGRAMA ESTA INTERESANTE GRACIAS

  21. raquel dice:

    uuuuuuuuu gracias ya estoy aprendiendo jej ūüėÄ

  22. Iran dice:

    Hola!!!! muchas gracias por la info super util solo tengo una pregunta. mi fotograma no se pone morado :s me puedes ayudar???

  23. adonys dice:

    Necesito saber como usar flash y action script 2.0

  24. Daniel Bernal dice:

    Hola estoy realizando una animación el flash cs6 la idea es coger un mapa de un país seleccionar un estado y que este aparezca en zoom luego seleccionar las ciudades de ese estado y que haga el zoom en todos me sirve pero en la ultima escena que voy creando el problema es que no reproduce el zoom y cambio de posición la escena y funciona correctamente pero la escena que queda de ultimas no corre que hago?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder