TweenMax. El hermano mayor del TweenLite

Publicado por Iván Gajate el 21 de diciembre de 2008 en AS2, AS3, Flash, Tutoriales

Ya había hablado antes del TweenLite, una librería para hacer tweens de forma súper sencilla a la que estoy totalmente enganchado. Lo hago todo con ella.

Si se nos queda corta, podemos utilizar el TweenMax, que es exactamente igual, pero con más propiedades. Se basa en el primero, y añade cosas como la posibilidad de hacer tweens sobre filtros, movimientos con curvas Bezier, pausar un tween o hacerle un loop, así como acceder a muchas propiedades internas del tween.

Aquí se pueden ver los tweens con filtros sobre una imagen:

Como se basa en el TweenLite, sólo voy a poner las cosas que tiene diferente a éste:

Parámetros extra del TweenMax:

  • timeScale, de tipo Number: Es un multiplicador que controla la velocidad del tween. 0.5=mitad de la velocidad, 1=velocidad normal, 2=doble velocidad…
  • shortRotation, de tipo Number: Para girar un objeto por el camino mas corto podemos usar shortRotation en lugar de _rotation. Cuando tenemos un objeto con rotación +10 grados y queremos que gire hasta -10 grados, si usamos _rotation hará un giro completo en el sentido de las agujas del reloj, pero si usamos shortRotation hará un giro de 20 grados en sentido contrario.
  • roundProps, de tipo Array: Es un Array las propiedades que queremos que tengan valores enteros, no decimales en nuestros tweens. Por ejemplo, si queremos que un clip tome valores enteros en la _x y en la _y, podemos poner:
    TweenMax.to(clip, 2, {_x:300, _y:200, _alpha:0.5, roundProps:[«_x»,»_y»]});
  • bezier, de tipo Array: Ahora podemos hacer que el tween no vaya en línea recta, sino que siga una curva Bezier. Podemos añadir tantos tiradores como queramos que tenga nuestra curva (los tiradores son *tensores* hacia donde queremos que se desvíe la curva).
    Este tween mueve un clip desde donde esté hacia la esquina superior derecha, pero tendiendo hacia abajo a la derecha:
    TweenMax.to(clip, 3, {_x:800, _y:0, bezier:[{_x:400, _y:600}]});
  • bezierThrough, de tipo Array: Exactamente igual que bezier, pero aquí se indican los puntos por donde va a pasar la curva en lugar de los tiradores que modifican la curva. Es mucho mas intuitivo que el método bezier.
  • orientToBezier, de tipo Array (o Boolean): Para orientar un movieclip según la curva bezier que está haciendo, basta con poner esta propiedad a true.
    TweenMax.to(clip, 3, {_x:800, _y:0, bezier:[{_x:400, _y:600}], orientToBezier:true});
    Si queremos tener mas control sobre las propiedades del giro, se puede pasar un Array de Arrays.
  • hexColors, de tipo Object: Cambia una propiedad de tipo color en hexadecimal de un objeto de forma suave. Se pueden añadir tantos colores como queramos.
    TweenMax.to(clip, 2, {hexColors:{miColorFondo:0xFF0000, miColorContorno:0x00FFFF}});
  • yoyo, de tipo Number: Invierte el tween cuando se termina como si de un yoyo se tratase. Muy útil para hacer animaciones de ida y vuelta. El número indica el número de repeticiones de la animación, cero para hacerlo indefinidamente.
  • loop, de tipo Number: Repite el tween tantas veces como indiquemos. Cero para hacerlo indefinidamente.

  • blurFilter, de tipo Object: Aplica un filtro BlurFilter (desenfoque) al clip de película.
    Ejemplo:
    TweenMax.to(clip, 2, {blurFilter:{blurX:5, blurY:5, quality:3}});
    Utiliza uno o mas de estos parámetros:

    • blurX: Cantidad de desenfoque en X, por ejemplo 5.
    • blurY: Cantidad de desenfoque en Y, por ejemplo 5.
    • quality: Calidad del desenfoque, 1=baja, 2=media, 3=alta.

  • glowFilter, de tipo Object: Aplica un filtro GlowFilter (iluminado) al clip de película.
    Ejemplo:
    TweenMax.to(clip, 2, {glowFilter:{alpha:1, blurX:5, blurY:5, color:0xFF0000, quality:3}});
    Utiliza cuatro o mas de estas propiedades:

    • alpha: Opacidad del filtro, 1 por defecto.
    • blurX: Cantidad de desenfoque en X, por ejemplo 5.
    • blurY: Cantidad de desenfoque en Y, por ejemplo 5.
    • color: Color del filtro en hexadecimal, por ejemplo 0xFF0000
    • strength: Intensidad del filtro, 1 por defecto.
    • quality: Calidad del desenfoque, 1=baja, 2=media, 3=alta.
    • inner: Iluminado interior. Si se pone a true, el filtro se aplica hacia el interior.
    • knockout. Extractor, si se pone a true, extrae el clip, y solo muestra el halo del filtro.

  • colorMatrixFilter, de tipo Object: Aplica un filtro ColorMatrixFilter (Ajustar color).
    Ejemplo:
    TweenMax.to(clip, 2, {colorMatrixFilter:{brightness:2}});
    Utiliza uno o mas de estos parámetros:

    • colorize: Color en hexadecimal al que se quiere virar el clip. Por ejemplo 0xFF0000
    • amount: Cantidad de color, 1 por defecto.
    • contrast: Cambia el contraste del clip, 1 por defecto.
    • brightness: Cambia el brillo del clip, 1 por defecto.
    • saturation: Cambia la saturación del clip, 1 por defecto.
    • hue: Cambia el tono (matiz) de todos los colores del clip, de 0 a 360, 0 por defecto.
    • threshold: Funciona como el ajuste Umbral de Photoshop. Pasa la imagen a escala de grises, y los tonos que estén por encima del umbral indicado, los pasa a blancos y los que estén por debajo, a negros. Produce un efecto de fotocopia sobre la imagen.
    • relative: Si se pone a true, toma los cambios relativos al valor actual del filtro. Si por ejemplo se aplica un brightness de 0.5, lo hará sobre el brillo que ya tenía la imagen antes de aplicar el tween.
    • matrix: Una matriz de 20 elementos (4 filas x 5 columnas) con las que Flash define el filtro ColorMatrixFilter. Podemos almacenar un estado de esta matriz, y hacer un tween al estado inicial del clip, por ejemplo. Véase la ayuda de Flash.

  • dropShadowFilter, de tipo Object: Aplica un filtro DropShadow (Sombra).
    Ejemplo:
    TweenMax.to(clip, 1, {dropShadowFilter:{color:0xFF0000, angle:45, distance:10}});
    Utiliza uno o mas de estos parámetros:

    • alpha: Opacidad del filtro, 1 por defecto.
    • angle: Ángulo de la sombra, de 0 a 360 grados.
    • blurX: Cantidad de desenfoque en X, por ejemplo 5.
    • blurY: Cantidad de desenfoque en Y, por ejemplo 5.
    • color: Color de la sombra.
    • distance: Distancia, 10 por ejemplo.
    • strength: Intensidad del filtro, 1 por defecto.
    • quality: Calidad de la sombra, 1=baja, 2=media, 3=alta.

  • bevelFilter, de tipo Object: Aplica un filtro de tipo BevelFilter (Bisel).
    Ejemplo:
    TweenMax.to(clip, 3, {bevelFilter:{distance:10, strength:1, angle:45}});
    Utiliza tres o mas de estos parámetros:

    • angle: Ángulo de la luz que simula el bisel, de 0 de 360 grados, por ejemplo 45.
    • blurX: Cantidad de desenfoque en X, por ejemplo 5.
    • blurY: Cantidad de desenfoque en Y, por ejemplo 5.
    • distance: Anchura del bisel, por ejemplo 10.
    • highlightAlpha: Opacidad del color de iluminación del bisel.
    • highlightColor: Color que simula la iluminación del bisel.
    • shadowAlpha: Opacidad del color de sombra del bisel.
    • shadowColor: Color que simula la parte oscurecida del bisel.
    • strength: Intensidad del filtro, 1 por defecto.
    • quality: Calidad del bisel, 1=baja, 2=media, 3=alta.

Se puede ver la explicación más detallada de algunos parámetros en el foro de Greensock

Otros métodos que tiene el TweenMax son:

  • pause() y resume() para pausar y volver a poner en marcha una instancia de tween.
  • restart(includeDelay:Boolean) reinicia el tween, con la posibilidad de incluir el delay que tenía.
  • reverse(adjustDuration, forcePlay) invierte la dirección de un tween.
    • Si adjustDuration, de tipo Boolean, se pone a true, utiliza el mismo tiempo para hacer el tween de vuelta que el que ha necesitado para la ida, pero si está puesto a false, utiliza el tiempo que quedaba para terminar el tween. Por ejemplo: Si tenemos un menú que se despliega en 2 segundos, y en el segundo 1.5 le decimos que se vuelva a plegar con adjustDuration a true, hará el movimiento de plegarse en 1.5 segundos. Si se pone a false, lo hará en 0.5 segundos.
    • forcePlay, de tipo Boolean, fuerza al tween a empezar inmediatamente. Si está pausado, se pone en marcha, y si ha terminado, se reinicia.
  • setDestination(property, value, adjustStart) cambia el valor de destino de una determinada propiedad del tween, aunque el tween ya esté en marcha.
    • property, de tipo String, es el nombre de la propiedad que queremos alterar, por ejemplo «_x»
    • value, es el nuevo valor de esa propiedad, por ejemplo 500.
    • adjustStart, de tipo Boolean, evita posibles saltos si el tween ya está en marcha. Si cambiamos el destino de un tween y este tiene un easing, lo mas normal es que al tomar el nuevo valor, se vean efectos raros. Con adjustStart a true, se recalculan los tiempos del tween para evitar estos efectos.
  • TweenMax.getTweensOf(destino:Object) nos devuelve un Array con todos los tweens que tiene el objeto de destino.
  • TweenMax.isTweening(destino:Object) nos dice si un objeto tiene algún tween activo (los pausados no cuentan).
  • TweenMax.getAllTweens() devuelve un Array con todos los tweens (incluidos los pausados).
  • TweenMax.killAllTweens(completar) mata todos los tweens activos (los retardados no). Si se usa el parámetro completar, de tipo Boolean, a true, se fuerza el evento Complete.
  • TweenMax.killAllDelayedCalls(completar) mata todos los tweens con retardo. Se puede forzar el evento Complete.
  • TweenMax.pauseAll(tweens, delayedCalls) pausa todos los tweens.
  • TweenMax.resumeAll(tweens, delayedCalls) reanuda todos los tweens.
  • TweenMax.setGlogalTimeScale(escale) acelera o ralentiza todos los tweens a la escala indicada, de tipo Number.
    0.5=mitad de la velocidad, 1=velocidad normal, 2=doble velocidad…

Y al igual que en el TweenLite, la versión en AS3 es exactamente igual que AS2, tan solo cambian los nombres de las propiedades obviamente, que en lugar de ser “_x”, es “x”, o “_visible” pasa a ser “visible”, pero por lo demás la sintaxis es igual.

 

3 comentarios para “TweenMax. El hermano mayor del TweenLite”

  1. import com.greensock.*;
    import com.greensock.easing.*;
    
    var timeline:TimelineLite = new TimelineLite();
    timeline.append( new TweenLite(TuMovieClip, 1, {_x:100, ease:Elastic.easeOut,onComplete:onFinishTween}) );
    
    //lo siguiente ocurre una vez terminada la acción de arriba
    function onFinishTween() {
          gotoAndPlay();//este es un ejemplo aqui puedes agregar cualquier accion para Movie Clips
    }
    

    para mas información pueden revisar http://www.greensock.com/tweenlite/

  2. Usando el parámetro onComplete, puedes mirar la documentación del TweenLite aquí:

    http://www.greensock.com/tweenlite/

  3. Hola: quisisera saber como detectar cuando finaliza un tween con tween y lit y llamr a una funcion,
    lo que con tweener seria asi:

    var tween:Tween = new Tween(mi_mc, "x", Elastic.easeInOut, 0, 300, 1, true);
    tween.addEventListener(TweenEvent.MOTION_FINISH, alFinalizar);
    

    pero como se hace lo mismo usando TWEENLITE?

    Desde ya Gracias
    saludos