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 http://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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: