LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Librerías de animación en ActionScript 3, animación en AS tercera parte

| 1 Comment

La animación mediante interpolación de movimiento es una tarea de tipo manual, la cual presenta dificultad si es que queremos animar objetos que son cargados dinámicamente o sus propiedades son relativas. Para ello se implementa paquetes para manejar movimiento, eventos y física sobre objetos desde el código.

Tween

Entre las clases nativas de Adobe Flash, contamos con una llamada Tween, la cual pertenece al paquete fl.transitions, dicha clase hereda de EventDispatcher > Object.

Nota: “EventDispatcher” Clase que se encarga de que los elementos cargados en la lista de visualización puedan manejar eventos.

La clase Tween nos dará la posibilidad de animar objetos, editar sus propiedades, como por ejemplo opacidad (alpha) o escala (scaleX) utilizando código. También es importante saber que dicha clase nos permite manipular el tipo de física para un objeto determinado (aceleración, desaceleración o rebote).

La clase Tween en la versión de AS3 se implementa de la misma manera que las versiones anteriores en AS2, pero cambia la escritura literal de sus propiedades, métodos y eventos.

Implementación básica

Se requieren en el escenario un MovieClip con el nombre de instancia peli_mc. Haga clic en el primer fotograma y coloque lo siguiente:

ActionScript
< view plain text >
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Elastic;
  3. var miTween:Tween = new Tween(peli_mc,"y",Elastic.easeOut,0,100,1,true)

Importamos la clase Tween “import fl.transitions.Tween;”
Esta es la clase encargada de darnos todas las posibilidades para mover y editar propiedades de un objeto, como por ejemplo un movieClip.

import fl.transitions.easing.Elastic;
Importamos la clase de suavizado de movimiento, cuando movamos un objeto con esta clase podremos indicar comportamientos físicos como aceleración, rebote o desaceleración tanto al inicio o final de la animación.

var miTween:Tween = new Tween(peli_mc,”y”,Elastic.easeOut,0,100,1,true)
Finalmente creamos el objeto pasando por parámetro los valores requeridos. En este caso el objeto se llama miTween y al llamar el constructor (new) pasamos los siguientes parámetros:

peli_mc (Objeto): Nombre de instancia o nombre de variable del objeto a modificar su propiedad. Es importante recordar que sólo se pueden afectar a objetos que hereden de la clase InteractiveObject, por ejemplo: MovieClip, Sprite, TextField, Stage, Loader y SimpleButton.

“y” (String): Cadena de texto que representa la propiedad a modificar, en este caso la posición en el eje Y.

Elastic.easeOut (Function): El tipo de suavizado del movimiento. Si quisiéramos que el movimiento se comporte como un elástico y rebote al final de la animación, ésta es la mejor opción, o en su defecto podemos usar las siguientes: Back, Bounce, Elastic, None, Regular y Strong las cuales debemos importarlas a todas si es que necesitamos disponer de ellas.

Fíjese que al final de la línea de código se agrego un asterisco (*), el cual indica cargar todos los paquetes de ese directorio. “import fl.transitions.easing.*;”

A estas propiedades de aceleración le sumamos el suavizado que queramos: easeIn, easeOut y easeInOut.

0 (Number): Valor inicial o comienzo de la propiedad “y”.

100 (Number): Valor final de la propiedad “y”.

1 (Number): Duración de la transición.

True (Boolean, por defecto false): indicador si vamos a sincronizar la transición con segundos como unidad de tiempo o con los fotogramas. True, para utilizar una medida de tiempo en segundo, false para utilizar una medida de tiempo expresada en fotogramas.

En el ejemplo anterior podemos ver que inmediatamente cuando compilamos el swf se ejecuta la animación del MovieClip en el eje “y”. Si quisiéramos controlar dicho movimiento desde un evento del mouse tendríamos que utilizar el método start(); para dar comienzo a la interpolación cuando hacemos clic en el MovieClip.

ActionScript
< view plain text >
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Elastic;
  3. var miTween:Tween = new Tween(peli_mc,"y",Elastic.easeOut,0,100,2,true);
  4. peli_mc.addEventListener(MouseEvent.CLICK,onClick);
  5. function onClick(e:MouseEvent):void
  6. {
  7. miTween.start();
  8. }

Ahora al hacer clic en el MovieClip ejecutamos la interpolación mediante el método start().
Los métodos más comunes que podemos utilizar son los siguientes:

  • start(): Inicializa la interpolación.
  • stop(): Detiene la interpolación.
  • resume: reanuda la interpolación donde se detuvo.
  • fforward: Adelanta la interpolación hasta el final.
  • rewind: Retrocede la interpolación al valor inicial.

También es importante recordar que la clase Tween cuenta con detectores de eventos que nos facilitarán la tarea de animar objetos y desencadenar acciones según los estados de los mismos.

ActionScript
< view plain text >
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Elastic;
  3. import fl.transitions.TweenEvent;
  4. var miTween:Tween = new Tween(peli_mc,"y",Elastic.easeOut,0,100,2,true);
  5. peli_mc.addEventListener(MouseEvent.CLICK,onClick);
  6. function onClick(e:MouseEvent):void
  7. {
  8. miTween.start();
  9. }
  10. miTween.addEventListener(TweenEvent.MOTION_FINISH,onTweenFinish);
  11. function onTweenFinish(e:TweenEvent):void
  12. {
  13. trace("movimiento finalizado");
  14. }

En el ejemplo aquí expresado se agrega un escuchador al evento que se dispare cuando la interpolación a finalizado por completo.

Otros eventos utilizados normalmente son:

  • MOTION_START: La interpolación a comenzado.
  • MOTION_STOP: Se detuvo la interpolación mediante el método stop().
  • MOTION_RESUME: Se reanudó la interpolación luego de una pausa.
  • MOTION_LOOP: Se completó un ciclo de un loop (yoyo).

Nota: se importó la clase TweenEvent para estos detectores de eventos. (import fl.transitions.TweenEvent;).

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Director de la carrera de diseño gráfico, Profesor de Diseño III y Diseño Web, en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

One Comment

  1. Gracias esta muy buena esta información!

Deja un comentario

Required fields are marked *.