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;- 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.
- 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.
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
- Movimiento Básico / Basic Motion: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 - Transformación / Transformation: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 - Suavizado / Ease: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.
Por gersonm el 17 de Noviembre de 2008
Por The Fricky! el 17 de Noviembre de 2008
Creo que empezaré a odiarte porque aún no he podido probar Flash CS4
Por M@U el 17 de Noviembre de 2008
The Fricky! :
Gracias por los comentarios !
Por ariioo el 18 de Noviembre de 2008
Por eldervaz el 18 de Noviembre de 2008
Por Juanlu_001 el 18 de Noviembre de 2008
Llevo demasiado tiempo resistiéndome a CS4... Pensé que podría sobrevivir sin él, pero es que cada día flipo más!!
* Nota mental: avisa a tu hermano de que encienda el eMule
Por Imer el 18 de Noviembre de 2008
Por cierto, no se ke opinen uds. pero me parece ke hasta ahora, despues de que adobe compro a macromedia (permitanme enjugarme una lagrima ) se ha visto una real inovacion en flash, mas alla de la "integracion" que le hicieron al studio cs3 entre sus programas.
Por naitmare el 18 de Noviembre de 2008
Por tlacuilosound el 20 de Septiembre de 2009
Por tlacuilosound el 20 de Septiembre de 2009
Por ana el 23 de Diciembre de 2009
la pincho, le pongo freetransform con Ctrl y todo, y se ve el cambio, pero cuando suelto el click, vuelve a donde mismo....
Alguien sabe que tengo que hacer?
Por anonimo el 17 de Abril de 2010
Por nelo el 22 de Abril de 2010
Por pako8k el 13 de Octubre de 2011