Comunidad de diseño web y desarrollo en internet

Cómo usar las opciones de animación avanzadas de Flash CS4

¡Hola! Tal y como comenté en mi Tip anterior; con ayuda del Panel Edición de Movimiento/Motion Tween, siendo más específico del subPanel Ease se podían lograr grandes y espectaculares efectos de una manera muy sencilla.

Es esa la razón de este Tip que como señalo en el título, busco mostrar cómo lograr efectos un tanto avanzados con el nuevo modelo de Animación basada en Objetos que Ofrece Flash CS4.



Antes de Comenzar

  1. Primero utilizaré la misma imagen que he estado acostumbrando, y la convertiremos en un Clip de Película, sobra decir por qué siempre la utilizo. Pero igual puedes usar la imagen, gráfico o demás que tu prefieras.

  2. Ahora, daremos click derecho sobre nuestro nuevo Clip en el escenario y seleccionaremos la opción Crear Interpolación de Movimiento/Create Motion Tween, así veremos cómo se creará en la línea de tiempo nuestro nuevo Objeto de Animación.
    • NOTA: Puedes encontrar un video al respecto aquí.




    Imagen editada para dejar apreciarse mejor los elementos del menú



A partir de aquí estaré editando constantemente este mismo Clip, quizá añadiendo o quitando algunas cosas, pero siempre en el mismo pero si deseas crear una nueva Interpolación de Movimiento los pasos anteriores siempre serán los mismos, lo único que difiere serán los efectos a lograr y su procedimiento que ahora mostraré como ejemplos.

Modificando el Tamaño

Para hacer la Interpolación de Movimiento con un cambio sencillo de Tamaño en nuestro clip, daremos un click al final de la línea de tiempo y nos dirigimos al SubPanel Transformación/Transform donde modificaremos los valores de escala (scaleX y scaleY), (que yo para el ejemplo cambiaré a 150% cada uno), ahora presionamos CTRL+ENTER para ver el resultado y obtendremos algo parecido a esto:


Dar Click para ver el Ejemplo: Escala hacia 150%, No Ease, 30fps
  • NOTA: Quiero dejar claro algo antes de continuar, en los Tips anteriores me preguntan que por que al probar la película, esta no se detiene en cuanto la interpolación ha terminado y que por que al dar click en ésta, automáticamente no se continúa la animación. Tal y como sucede en mis ejemplos, por lo que lo dejo claro desde ahora: YO estoy utilizando AS para ello, con el fin de dejarlo mas claro y didáctico para el Tip.
Una vez aclarado esto, podemos continuar.


ScreenShot completo que muestra todos los subPaneles y sus elementos, del Panel Ease


Bien, observando el ejemplo anterior habrán varias palabras para describirlo, entre ellas; aburrida, común, e incluso simple.
Hey, pero ahora quizá te preguntaras; ¿en donde entra el SubPanel Ease?, o ¿cuándo será que lo utilizaremos?. Pues ahora mismo;
  1. Nos dirigiremos hacia el SubPanel Ease, donde presionaremos el botón añadir.
  2. Nos aparecerá un menú contextual con varias opciones, en este caso seleccionamos “Spring”, y ahora nos dirigiremos al SubPanel Transformación.
  3. En el combo Box donde dice “No Ease” desplegaremos la (ahora) nueva opción “Spring”.
    Probaremos nuestra película (CTRL+ENTER) para ver el notable resultado:



Dar Click para ver el Ejemplo: Escala hacia 135%, Spring Ease, 30fps


  • NOTA: Quizá sea malo el ejemplo, pero yo encuentro mucha similitud a esto con el estar importando la clase Tween, Caurina, y similares. Si los has utilizado en AS me entenderás muy bien por que, ya que cada librería incluye sus efectos de movimiento para elegir. Así es aquí, de la lista Ease “importaremos” un tipo de Movimiento para utilizar en la Animación.



Añadiendo otros efectos:

1. Alpha

    1.1.__De la misma manera que añadimos el “Spring” ease, importaremos otro tipo diferente para usarlo con la propiedad alpha, por ejemplo “Bouce In”.


    Importando “Bouce In” al subPanel Ease


    1.2.__Una vez hecho esto, no podremos interactuar con algunas de las propiedades de tu MC directamente, así es que (una vez mas) añadiremos lo que deseamos manipular al panel. Nos dirigimos entonces a Color Effect > Add > Alpha.


    Importando “Bouce In” al subPanel Ease


    1.3.__Ahora que ya importamos una nueva Trancisión de Movimiento/Ease (paso 1.1), y que ya añadimos la propiedad objetivo de nuestro MC (paso 1.2), podemos hacer que la primera actue sobre la segunda mencionada de la misma manera que añadimos el efecto “Spring” al tamaño del MC (scaleX y scaleY).


    Dar Click para ver el Ejemplo: Alpha de 50% a 100%, Bounce In Ease, 30fps
    Como veras, el panel muestra cada uno de los cambios que vas haciendo


2. Tint

    2.1.__De la misma manera que agregamos la propiedad alpha al subPanel Ease de nuestro MC (paso 1.2), podemos agregar otros efectos como por ejemplo Tint. Color Effect > Add > Tint.


    Dar Click para ver el Ejemplo: Tint de #0099CC 100% a #0099CC 0%, No Ease, 30fps
    Sencillo, ¿no?



    • NOTA: Así como añadimos Alpha y Tint al MC, igual podemos agregarle otros efectos similares, como Brightness/Brillo o cambiar los colores de manera mas avanzada (Advanced Color). Los pasos son exactamente los mismos por lo que no tiene caso mostrarlos individualmente. Es algo muy predecible.



También te puede interesar

Ya que nunca están de mas un par de Tips adicionales, cabe mencionar que:
  • Interacción fácil con otras herramientas: Es sorprendente la manera con la que Flash puede unir una interpolación con otra creada por alguna herramienta de animación por ejemplo la 3D Translation Tool, y aun si estas no se hacen al mismo tiempo ya que las maneja orientándose a ellas como objetos, por ejemplo al terminar de leer este Tip, puedes añadir efectos en 3D en la misma sin que se solapen y continúen reproduciéndose cada una correctamente.
  • Unión con las animaciones prefabricadas: Tal y como mencione en el punto anterior, Flash puede trabajar con cada una de las animaciones como si estas fuesen objetos independientes, por lo que puedes anexar a una Interpolación de movimiento que hayas hecho, otra preestablecida por Flash
  • Finalmente, creatividad. Todo esto se trata de dar bases e ideas para buscar lograr efectos cada vez mas y mas creativos.
Si al terminar de leer ya sea uno o todos los Tips relacionados al tema y te logro surgir el interés por probar la herramienta por tu cuenta hemos logrado nuestro objetivo. Y si aún no te quedó todo claro como para aventurarte, se valiente y vuelve a repasarlos, ¡seguro lo conseguirás! Saludos.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate