HOLA CURSO!

Bueno como en el libro no trata a fondo todas las posibilidades de animación, pues os voy a poner este post, donde podreis ver cada animación, y luego descargar el archivo .fla.

Hasta la versión CS3, solo existían dos tipos de animación: Interpolación de movimiento e Interpolación de forma.

Con la versión CS4, hay una nueva animación basada en objetos, que toma el nombre de Interpolación de Movimiento, y el anterior tipo de Interpolación de movimiento pasa a llamarse Interpolación clásica.

Sumadas a estas, también veremos dos tipos de “animación” mas usados desde el mismo comienzo de flash, el uso de máscaras y de la guía de movimiento.

Y la que al final acaba solucionándonos mas de una vez la papeleta, sería la animación fotograma a fotograma, o para que entendais mejor, algo asi como hacer Stop Motion en cine.

Asi que haciendo balance, esto es lo que tenemos:

1.- Interpolación de movimiento.

2.- Interpolación de forma

3.- Interpolación clásica.

4.- Uso de máscaras en animación.

5.- Uso de la guía de movimiento para animación.

6.- Animación fotograma a fotograma. Stop Motion.

Pues nada, pongámonos manos a la obra:

1.- Interpolación de movimiento.

Esta nueva interpolación la tenemos ampliamente recogida en el libro:  Guía Práctica: Flash CS4 Professional, pero el resumen sería sencillo…: Cambiar las propiedades de un objeto en la línea de tiempo, por medio de animación.

  1. Para ello lo primero es hacer un dibujo/objeto sobre el escenario.
  2. Una vez que tengamos el dibujo, nos vamos a la línea de tiempo, y aumentamos los fotogramas en función de la duración que queramos darle a nuestra animación.
  3. Una vez que tengamos ya nuestro objeto, y el tiempo que queremos que dure la animación, nos posicionamos sobre cualquiera de los fotogramas de la línea de tiempo, hacemos clic con el botón derecho, y seleccionamos la primera opción: Interpolación de movimiento. Según hagamos esto, vereis que nos informará que nuestro objeto, tiene que ser convertido a simbolo para poder ser interpolado. Como os decía antes, esta animación trabaja sobre un objeto, de ahí que nos obligue a ello. Simplemente, le diremos aceptar.
  4. Una vez que ya tenemos declarada la animación toca modificar el objeto, en los hitos=fotogramas, en los que queramos que nuestro objeto cambie su comportamiento. En el ejemplo vamos a coger un pentagono, y lo vamos a ir moviendo por el escenario. Para ello, cada cierto número de fotogramas, haremos clic sobre el fotograma en el que queremos cambiar su comportamiento, y modificaremos la propiedad del mismo. Haremos esto varias veces para ir cambiando sus atributos, como son dirección, rotación, color, transparencia, etc.
  5. Una vez hecho todos estos pasos, ya solo nos queda compilar:  Menu Control -> Probar escena , o mediante teclado:  CTRL + Intro en PC, y Manzanita+INTRO en Mac)

Ej. : Ejemplo animación Interpolación de movimiento:

[swfobj src=”swf/interpolacionMovimiento.swf” height=”275″ width=”550″]

Fla.: Clica para Descargar ejemplo

2.- Interpolación de forma

Esta estoy seguro que os resultará la mas divertida, pero cuando queráis hacer algo concreto, en mas de una ocasión podrá con vuestra paciencia ;-).

Como su propio nombre indica, lo que vamos animar en este caso, no es un objeto, sino una forma, o mejor dicho: un dibujo vectorial. En el ejemplo, vamos a convertir un cuadrado en un rombo.

  1. Para ello lo primero es hacer un dibujo sobre el escenario. Tendrá que estar liberado, es decir, no podra ser un objeto, sino un dibujo editable.
  2. Al igual que con la anterior animación, le decimos cuanto tiempo queremos de animación, yendo con el botón derecho sobre la capa en la que se encuentra el dibujo, solo que en esta ocasión, con el botón derecho NO le diremos Intertar fotograma, sino Insertar fotograma Clave. Esta animación, al ser de forma, resulta que el dibujo inicial, y el dibujo final, serán diferentes, de ahí que sea de esta forma.
  3. Una vez realizado el paso anterior, nos posicionamos en el último fotograma que hemos insertado, y modificaremos su forma, mediante las herramientas de dibujo.IMPORTANTE: Si el dibujo inicial tiene borde, el dibujo final, debería tener borde, para que se correspondan en “material”.
  4. Para conseguir una animación de forma mas precisa, usameros los consejos de forma. Para ello haremos clic en el primer dibujo/fotograma, y una vez posicionados, iremos al menu Modificar->Forma->Añadir consejo de forma. Como veis, una vez hecho esto, sale un pequeño punto rojo con la letra a. Si siguiéramos añadiendo consejos de forma, seguirían apareciendo nuevos puntos rojos, en orden alfabético. En función del número de vertices de vuestro objeto, añadiremos Consejos de forma para conseguir una animación mas exacta. Una vez añadidos los Consejos de forma, si vais al último fotograma clave que hemos añadido, vereis que aparecen los consejos de forma, con lo que pasaremos a posicionarlos donde se correspondan en el nuevo dibujo. En función de como los pongamos, obtendremos distintos resultados. En este caso lo mejor, es que vayais haciendo pruebas para entender este tipo de animación.

Ej. : Ejemplo animación Interpolación de forma:

[swfobj src=”swf/interpolacionForma2.swf” height=”275″ width=”550″]

Fla.: Clica para Descargar ejemplo…

3.- Interpolación clásica.

Esta podríamos decir, que en funcionalidad es prácticamente como la Interpolación de movimiento, solo que anima sobre símbolos, y no sobre un único objeto. Por ello en la línea de tiempo, trabajaremos con fotogramas claves.

  1. Para ello lo primero es hacer un dibujo/objeto sobre el escenario.
  2. A continuación, determinamos el tiempo de la animación, haciendo clic con el botón derecho sobre el fotograma final de la misma, y añadimos Fotograma.
  3. Una vez hecho lo anterior, hacemos clic con el botón derecho sobre los fotogramas que determinan la animación, y seleccionamos Interpolación Clásica.
  4. Una vez realizada la acción anterior, comprobareis, que ahora os aparece, una serie de puntos en los fotogramas…, eso quiere decir, que la animación tiene un objeto inicial, pero que no tiene información final, de forma que si compiláramos, obtendríamos lo mismo que si tuvieramos un objeto con fotogramas, sin ningún tipo de animación.
  5. Para determinar el final, nos posicionamos con el ratón sobre el último fotograma de la animación, hacemos clic con el botón derecho, y añadimos un fotograma Clave.
  6. Si queremos hacer cambios durante la animación, actuaremos de la misma, forma, nos posicionaremos sobre los fotogramas, e insertaremos fotogramas Clave, para posteriormente cambiar el simbolo.  En este caso, también nos guardara nuestro dibujo, en un simbolo, en esta animación concreta, usará el tipo de simbolo: Gráfico. Para comprobarlo podeis ir al menú: Ventana->Biblioteca, y vereis que teneis un simbólo gráfico. De forma, que una vez realizada la animación, si quisierais cambiar el dibujo base de la animación, podríais hacerlo o bien haciendo clic al gráfico desde la biblioteca, o bien desde el escenario haciendo clic, hasta llegar al gráfico editable.

Ej. : Ejemplo animación Interpolación Clásica:

Fla.: Clica para Descargar ejemplo…

4.- Uso de máscaras en animación.

El uso de máscaras es algo que nos vendrá muy bien a la hora de trabajar con imágenes. Para crear una máscara usaremos dos capas, una que tiene el objeto o imagen, y otra por encima de ella que actuará como máscara.

  1. Una vez que tengamos un dibujo o imagen en el escenario, crearemos una nueva capa, que aparecerá por encima de esta en la línea de tiempo.
  2. Una vez que tengamos la capa superior, nos ponemos sobe ella (donde aparece su nombre), hacemos clic con el botón derecho, y elegimos la opción: Máscara.
  3. Cuando la definimos la capa como Máscara, automáticamente nos bloqueará ambas capas con el candado…, por eso desbloquearemos la capa Máscara, y pasaremos a dibujar la máscara.
  4. Para la máscara usaremos un dibujo, aunque también podremos usar un simbolo. Eso si, esta capa solo podrá contener un solo simbolo, si tuviera dos dentro del mismo fotograma, y por ejemplo hubiera un dibujo, y un simbolo, priorizará sobre el dibujo, puesto que originalmente, para la mascara solo se podía usar un dibujo.

Un ejemplo bastante típico de uso de máscara, es cuando representamos un foco, o una lupa sobre imagen, o bien cuando queremos que aparezca una imagen poco a poco.

Ej.1 : Ejemplo uso de Máscaras en animación:

[swfobj src=”swf/mascara.swf” height=”230″ width=”625″]

Fla 1.: Clica para Descargar ejemplo…

Ej. 2: Ejemplo uso de Máscaras en animación:

[swfobj src=”swf/mascara2.swf” height=”400″ width=”550″]

Fla.2: Clica para Descargar ejemplo…

5.- Uso de la guía de movimiento para animación.

Actualmente, con la nueva Interpolación de movimiento, que ofrece nos ofrece la motion Path (o curva de movimiento), podremos simular este tipo de animación, que en esta versión ya denomina como: Añadir guía de Movimiento Clasica.

De forma, que la nueva Interpolación de movimiento, podríamos decir que es algo asi, como la mezcla de ambas: Interpolación Clasica y Guía de movimiento.

En este caso, vamos a ver la versión clásica, para asi comprender mejor el nuevo tipo de animación de esta versión.

  1. Empezaremos creando una capa, en la que pondremos un objeto…

Ej. : Ejemplo uso de Guía de Movimiento.

[swfobj src=”swf/guiaMovimiento.swf” height=”275″ width=”550″]

Fla.: Clica para Descargar ejemplo…

6.- Animación fotograma a fotograma. Stop Motion.


EJ: Ejemplo animación fotograma a fotograma

[swfobj src=”swf/animacionfotogramaafotograma.swf” height=”391″ width=”500″]

Descargar ejemplo

EJERCICIO TRACA FINAL


Ver ejercicio:

[swfobj src=”swf/jueguecillo.swf” height=”313″ width=”400″]

Descargar ejemplo