Comunidad de diseño web y desarrollo en internet online

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

En este tip pretendo mostrar a fondo la nueva característica de Flash CS4, la animación basada en objetos.

Retomando, en mi Tip anterior mostré el proceso para agregar las animaciones predeterminadas de Flash CS4, aprovechando el nuevo modelo basado en los objetos que ofrece.

Bien, se me hizo un par de días semanas tarde pero al fin está listo! Aunque quedó algo extenso...


//- OOT <-- Object Oriented Tweening !

Conociendo el espacio de trabajo


Antes que nada, considero que es vital conocer el espacio sobre el cual estaremos desarrollando todo. Este es el conjunto de paneles que viene por defecto en Flash CS4, en la parte superior de la ventana:
  • Linea de Tiempo/Time Line
  • Editor de Movimiento/Motion Editor
  • Acciones/Actions
  • Compiler Errors
  • Output

Quizá, como ya te podrás imaginar, solamente serán utilizados los dos primeros paneles; la Linea de Tiempo y el Editor de Movimiento.

Aquí dejo estos screenShots para que puedan empezar a conocer los paneles. Solo da click para cambiar a la siguiente imagen:


En el fade entre cada imagen, utilicé una técnica que explicare más adelante !

Como podrás ver, los paneles facilitarán mucho el trabajo fluido entre ellos, por su proximidad.

Explorando a fondo


Para los siguientes ejemplos utilizaré la misma imagen del Tip anterior:



Crear una simple Interpolación de Movimiento

En Flash CS4 crear una Interpolación de Movimiento se puede hacer por dos vías diferentes;
  1. La primera es la manera clásica; la misma de cualquier otra versión de Flash. Solo se debe de crear en la linea de tiempo, un fotograma del tamaño deseado en base a su duración. Damos click derecho, y elegimos Crear Interpolación de Movimiento/Create Motion Tween.
  2. La segunda es menos conocida ya que es nueva, donde debes dar click derecho sobre el Clip de Película en el escenario y seleccionar la opción Interpolación de Movimiento/Create Motion Tween.
    • NOTA: Aquí se agregaran automáticamente varios fotogramas como parte del objeto, en base a la Velocidad de Reproducción/Frame Rate.
    (Ej. frameRate:30 = 30 Fotogramas Clave = 1 seg de duración)

Listo, ahora tenemos nuestro nuevo objeto de Animación.

Modificando la Interpolación

Aquí un aspecto crucial: TODOS podemos hacer una Interpolación de Movimiento, lo difícil es saber modificarla para adecuarla a nuestras necesidades.

Por ello daremos click al final de nuestra Interpolación de Movimiento dentro de la Linea de Tiempo, y abriremos el panel Editor de Movimiento/Motion Editor.

Una vez ahi encontraremos varios subPaneles bajo la siguiente estructura:
  • Movimiento Basico/Basic Motion
    • X
    • Y
    • Rotación en eje Z/Rotation Z
  • Transformación/Transformation
    • Sesgar/Skew X
    • Sesgar/Skew Y
    • Escala/Scale X
    • Escala/Scale Y
    • Efectos de Color/Color Effect
    • Filtros/Filters
  • Ease
    • Simple Slow


  1. Movimiento Básico / Basic Motion:
  2. Aquí podremos modificar la localización de nuestro Clip de Película en el escenario a lo largo de la Interpolación de Movimiento, basados en sus coordenadas X, Y, o Z. Bastara con arrastrar el Clip en el escenario y ver como los valores cambian automáticamente, o modificarlos desde aquí directamente.

    Aunque la siguiente imagen está modificada para que quepa dentro de los limites del foro, no ha perdido su enfoque.
    Se puede apreciar así siempre la misma estructura base, incluso en los demás subpaneles, de izquierda a derecha: Propiedad (Ej: Y), Variable (Ej: 205px), Ease, Gráfica.


    Vista previa general de los elementos dentro de cada subPanel. En este caso Basic Motion


    • NOTA: La propiedad "Ease" es un poco compleja como para poder mostrarlo aquí mismo, ya que además de que aparecerá en todos los demás subpaneles será necesario entender primero cómo funcionan los mismos sin intervención de este. Planeo profundizar en el tema un poco mas adelante.



    Modificando manualmente el Clip de Película: Posición y Rotación


  3. Transformación / Transformation:
  4. Aquí podremos (como su nombre deja claro), modificar la apariencia de nuestro Clip de Película, ya sea sesgándolo (Skew), o escalándolo (Scale), tal y como si lo hiciéramos manualmente en las versiones de Flash anteriores. Para ello podremos, al igual que en el caso anterior, hacerlo manualmente con la herramienta Transformación Libre/Free Transform, o cambiando los valores aquí, directamente.



    Vista previa general del subPanel Transform



    Herramienta Transformación Libre, y su vecina; Transformación de Gradiente



    Modificando manualmente el Clip de Película: Escala y Sesgado


  5. Suavizado / Ease:
  6. Este en lo personal, me parece que es uno de los aspectos mas innovadores y mejor implementados de todos los anteriormente mencionados, ya que te permite "importar" el tipo de Movimiento que se podrá efectuar durante alguna de las Interpolaciónes de Movimiento previamente especificadas.

    Para dejar una idea mas clara sobre su funcionamiento imagina que estas usando de manera gráfica la clase Tween.


    Vista previa del Subpanel Ease. Fíjense en la propiedad que tiene como default: Simple (Slow)

    Habrás notado que en todos los subpaneles se repite la presencia de Simple (Slow), el cual representa la manera en la que se reproduce la Interpolación de Movimiento, es decir suavemente de atrás hacia adelante sin ningún tipo de rebote o singular efecto.

    Prueba cambiando esto por cualquier otra propiedad y observa las diferencias.


Como podrás notar, se pueden dar cambios muy sutiles e impactantes, de saber manejar esta nueva característica en Flash CS4. Es por ello que en breve planeo postear mi otro Tip que esta arrumbado por ahí para profundizar aun mas en el subpanel Transform y cómo puede trabajar en conjunto con el subpanel Ease.

Quizá este video sobre la animación en flash te pueda ser de utilidad.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

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