Interpolaciones de movimiento, de forma y máscaras

Interpolaciones

Se podría decir que llegamos a la parte más importante de esta guía. Acá se juntan todos los otros conceptos para poder animar. Tenemos dos tipos diferentes de interpolación: Interpolación de movimiento e interpolación de forma. Son bastante diferentes, la primera sirve para “mover” (como su nombre lo indica) símbolos, sean botones, MC o gráficos, y la segunda sirve para cambiar color o forma de un objeto que no es un símbolo. Vamos a ver cada una por separado.

Interpolación de movimiento

¿Qué es? 
Una forma de animar objetos, los cuales deben ser Clips de película.

¿Qué varía del objeto?
Podemos variar el tamaño, posición en el escenario, color (mediante el panel de propiedades) o filtros.

¿Cómo se aplica? 
Primero que nada seleccionamos el objeto que queremos animar, y presionamos F8 para convertirlo en un Clip de Película. Seguido de eso insertamos un fotograma clave en el fotograma que queramos (click derecho en el fotograma + “Insertar fotograma clave”). En este fotograma hacemos las variaciones que queramos hacerle al clip de película. Entre el fotograma 1 y el fotograma “x” donde se encuentren las variaciones del clip, hacemos click derecho y seleccionamos la opción “Crear interpolación clásica” (más tarde veremos la nueva interpolación de movimiento para flash CS4 y CS5). Y ya está, podemos ver el resultado presionando Ctrl + Enter para probar la película.

¿Qué pasa si yo quiero que pare la animación al terminar? 
Para eso hace falta algo de actionscript básico. En una nueva capa, al final de la animación insertamos un fotograma clave (F6), abrimos el panel de acciones (si no está en el espacio de trabajo lo abrimos el menú ventana (o bien presionando F9), y escribimos esto:

stop();

Con este sencillo código (compatible con actionscript 1.0, 2.0 y 3.0) logramos que la película se detenga.

Guías de Movimiento

Si querés que el clip siga un recorrido podés utilizar las guías de movimiento.

Para aplicar una guía, tenés que seguir los mismos pasos que los que seguís para aplicar una interpolación de movimiento clásica. Luego de aplicar la interpolación, en una nueva capa dibujá con el lápiz, o con la herramienta de línea, el recorrido que querés que siga tu clip (debe ser una línea que tenga un extremo “tocando” al clip en el fotograma 1 y el otro extremo “tocándolo” en el fotograma “x” donde termina la interpolación). Seleccioná la capa de la guía, da click derecho y seleccioná la opción “Guía”. Corroborá que la capa de abajo (interpolación) sea modificada por la capa de arriba, si no lo es, arrastrala hacia arriba.

Probá la película con Ctrl + Enter.

Nueva Interpolación de Movimiento

Esta interpolación apareció con el Adobe Flash CS4 y ahora perdura en el CS5. No tiene muchas diferencias con el anterior, pero la manera de aplicarla es distinta y las guías de movimiento se incluyen automáticamente en la misma capa, y es más sencillo modificarlas.

Para aplicar la interpolación clásica hacía falta insertar un fotograma clave de inicio y un fotograma clave de fin. Ahora nos ahorramos un paso, ya que sólo debemos insertar el fotograma clave de inicio, dar click derecho al fotograma o al clip, seleccionar Crear Interpolación de Movimiento y Flash automáticamente inserta más fotogramas. Para que el clip de película se “mueva”, o sea que tenga un cambio por el cual querés aplicarle una interpolación, tenés que ir al último fotograma (o a cualquiera de los que abarque la interpolación) y mover o cambiar las características del clip.

Qué pasa con las guías de movimiento. Ahora flash las incluye automáticamente en la misma capa, de un color fluorescente, y es más sencillo manipularlas.

Ejercicio

• Abrí un nuevo documento.
• Dibujá´un cuadrado o un óvalo y convertilo en símbolo con F8. Dale cualquier nombre y seleccioná de tipo clip de película.
• Dale clic derecho al clip recién creado y seleccioná la opción Crear interpolación de movimiento (automáticamente Flash insertará más fotogramas).
• Si querés prolongar o achicar la interpolación, simplemente andá al último fotograma de la misma y verás que aparece un cursor diferente para variar la duración.
• Ahora andá al último fotograma de la interpolación y mové el clip de película hacia la derecha o hacia la izquierda y aumentá su tamaño (presiona Q).
• Vas a ver que apareció una línea de puntos de un color fluorescente, esa es la guía de movimiento y podés manipularla fácilmente con el mouse.
• Poné un stop en el último fotograma de una nueva capa.
• Probá la película con Ctrl+Enter

Interpolación de forma

¿Qué es? 
Una forma de animar objetos, que no pueden ser símbolos, textos (para aplicarles una interpolación de forma hay que separarlos con click derecho + separar) u objetos agrupados (deben ser separados al igual que los textos).

¿Qué varía del objeto? 
Puede variar el color, tamaño, posición y forma del objeto.

¿Cómo se aplica?
Dibujamos o incorporamos el objeto en el escenario. Insertamos un fotograma clave en el fotograma que queramos (click derecho en el fotograma + “Insertar fotograma clave”). En este fotograma hacemos las variaciones que queramos hacerle al objeto. Entre el fotograma 1 y el fotograma “x” donde se encuentren las variaciones del mismo, hacemos click derecho y seleccionamos la opción “Crear interpolación de forma. Y ya está, podemos ver el resultado presionando Ctrl + Enter para probar la película.

¿Qué pasa si yo quiero que pare la animación al terminar?
Utilizamos el código stop(); aprendido anteriormente.

Ejemplo de interpolaciones

Interpolaciones de movimiento (archivo .fla): http://www.megaupload.com/?d=U6IO2HX7
Interpolaciones de forma (archivo .fla): http://www.megaupload.com/?d=3D3AA3VP

Máscaras

Otra herramienta interesante del Flash son las máscaras. Las máscaras sirven para mostrar sólo una determinada parte de lo que se encuentra en la capa inferior. Si yo en una capa dibujo un rectángulo, en la capa “de abajo” tengo una foto, y a la capa del rectángulo la defino como máscara, de la foto se va a ver sólo la parte que sea abarcada por el rectángulo. El rectángulo no se va a ver, sea del color que sea o tenga el alfa que tenga, sólo se va a ver una parte de la foto. Para que entiendan bien pondré un ejemplo.

Supongamos que querés hacer un sencillo efecto de lupa con una interpolación de movimiento. Tenés el dibujo de la lupa animada (por ejemplo que va de un lado a otro) en una capa, en otra tenés una imagen o un texto pequeño y en una última capa tenés la misma imagen o texto pero más grande. ¿Cómo se hace para lograr el efecto de lupa?

Vamos a ver... 
Para conseguir el efecto debés tener el dibujo de una lupa en una capa. Esta lupa la vas a animar para que parezca que alguien la está moviendo de un lado a otro. En otra capa debés tener el círculo que funciona como lupa, es decir la máscara. En otra capa vas a tener el dibujo grande, que será lo que se verá sólo al pasar la lupa por encima. Y en una última capa vas a tener el dibujo pequeño. Es decir que la estructura es la siguiente:

Dibujá la lupa en la capa del dibujo de la lupa, dibujá un círculo en la capa de la lupa, dibujá, por ejemplo, una flor grande en la capa del dibujo grande y por último, una flor chica en la capa del dibujo pequeño (copiá la flor grande, en la capa de la flor chica presioná Ctrl+Shift+V para pegarla en el mismo lugar y achicala con la herramienta de transformación libre). Ahora aplicale una interpolación de movimiento a las dos primeras capas (tené cuidado, la lupa y el dibujo de la lupa deben moverse al mismo tiempo, en la misma dirección y del mismo modo).

Ahora, si probás película con Ctrl+Enter no vas a ver el efecto que esperás, porque aún no aplicaste la máscara. Para aplicarla, dale click derecho a la capa de la lupa y tildá la opción Máscara. Ahora sí, podés probar la película.

Acá está el archivo por si lo querés bajar (formato .fla): http://www.megaupload.com/?d=ZBOHGCCQ



_________________

Bueno, espero que este tutorial te sirva de ayuda. Si tenés algún comentario sobre este tutorial podés dejarlo en la sección de comentarios.

Ver todos mis tutoriales

Hasta la próxima ;)
Jime.