timeLine de Greensock – Animacion por Codigo as3

Simplemente excelente…

Greensock ademas de su excelente tweenNano, Lite y Max, tiene otros productos menos conocidos pero muy potentes. veamos un poco el TimeLine.

TimeLine funciona justamente como una linea de tiempo pero con los effectos que brinda el tween.  Cual es la diferencia con un Tween? es que tiene el control TOTAL, tanto para PLay(), Stop(), Pause(), Reverse(); etc..  por esa razon lo convierte en algo muy como cuando esa linea de tiempo tiene interaccion. Veamos el codigo bien simple y luego bajate el link demo.

import com.greensock.*;
import com.greensock.easing.*;

var TotalDuration    :uint             =         10;
var timeLine_tw        :TimelineLite = new TimelineLite();

timeLine_tw.append(new TweenLite(dragger_mc, TotalDuration, {x: 500}));
timeLine_tw.pause();

starTimer_btn.addEventListener(MouseEvent.CLICK, empezarFnc);
stopTimer_btn.addEventListener(MouseEvent.CLICK, stopTimerFnc);

function empezarFnc (e:MouseEvent):void {

timeLine_tw.play();

}

function stopTimerFnc (e:MouseEvent):void {
timeLine_tw.pause();
}
———————————————————————————————————————–

Las primeras lineas por supuesto son para la importacion de sus clases que puedes bajar de su pagina oficial www.greensock.com

Luego tenemos 2 variables  una de tiempo (sera Duracion) y la otra es una variable de tipo TimeLineLite  y ya mismo la puede iniciar.

la clave esta en aqui:

timeLine_tw.append(new TweenLite(dragger_mc, TotalDuration, {x: 500}));

timeLine_tw (es el nombre de mi variable o mi objeto de tipo TimeLine) .append (luego le añadimos exactamente una linea de codigo de tweenLite, tweenNano o tweenMax de greensock y cerramos los parentesis…  para ponerlo claro lo ponemos asi:

timeLine_tw.append(new TweenLite(dragger_mc, TotalDuration, {x: 500}));

La parte en azul es donde se declara el timeLine y la parte roja son los parametros del tween…  el primero de e los parametros: dragger_mc (es el movie) el segundo hace mension a la variable sitada arriba  que le dimo el valor = 10 y dentro de las llaves {} separados por COMA ( , ) , escribimos el destino en X e Y o los cambios visuales que le produciremos al objeto (dragger_mc) por ejemplo alpha, rotation etc etc..en este ejemplo seria  llevarlo a 500 de X.

Continuiando con el digo…

luego existen 2 funciones una es para pausar y una para dar play a este timeline  y es tan simple como nombrar el objeto timeLine_tw.play  o .pause segun querramos … en la documentacion de la web de greensock podran ver otros ejemplos como el reverse etc etc.. pero se usan exactamente igual que el play y pause.

espero que sirva, dejo un ejemplo andando aqui:

http://www.controlz.com.ar/di3blog/as3/lineTimeGreenSock_CS55.rar

Advertisement

Deja un comentario

Fill in your details below or click an icon to log in:

Logo de WordPress.com

You are commenting using your WordPress.com account. Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. Log Out / Cambiar )

Connecting to %s