Usando a classe Tween e TweenExtended

O Action Script oferece meios de desenvolver animações dinâmicas extremamente poderosas sem usar a timeline. Há diversas classes do próprio Flash e outras desenvolvidas por terceiros. Dentre as que mais utilizo esta a Tween e a TweenExtended.
Veja como utlizar a classe Tween neste artigo escrito por Neto Leal para o site Imasters e nesse artigo no site Kirupa.

Classe TweenExtended
Antes de comerçarmos baixe a última versão da classe TweenExtended no site http://www.sqcircle.com/downloads/ e instale pelo Macromedia Extension Manager. Após a instalação deve aparecer uma nova opção no help do Flash.
A sintaxe da classe é a seguinte:

[as]import mx.transitions.easing.*;
import mx.transitions.TweenExtended;
var _tween = new TweenExtended(target, props, easeFunc, strt, end, dur, useSecs, bezierPoint1, bezierPoint2);
/*
constructor for Tween Exdended class
target: reference – the object which the Tween targets
props: array – names of the properties (in obj) that will be affected
easeFunc: function – the type of easing equation to be used [import easing equations: import mx.transitions.easing.*;]
strt: array – the starting value of props
begin: array – the ending value of props
dur: number – the length of time of the motion; set to infinity if negative or omitted
useSecs: boolean – a flag specifying whether to use seconds instead of frames

*optional bezier parameters*
To use the Bezier tween both parameters must be entered and must be used in conjunction with mx.transitions.easing.Bezier;
has three easing methods: tweenQuadBez, tweenQuadBezThru, tweenCubicBez

bezierPoint1: number – numerical x position value
bezierPoint2: number – numerical y position value
*/[/as]

Métodos:

  • TweenExtended.continueTo() – Instrução para a animação continuar do valor atual para um novo valor.
  • TweenExtended.yoyo() – Mais ou menos um “bate-e-volta” infinito.
  • TweenExtended.stop() – Condição para a animção parar.
  • TweenExtended.resume() – A animação volta de onde tinha parado anteriormente.
  • TweenExtended.addListener() – Adiciona um evento “ouvinte”.

Propriedades:

  • TweenExtended.loop – Valor booleano, indica o loop da animação.

Eventos:

  • TweenExtended.onMotionStarted – Transmite quando o movieclip começar seu tween.
  • TweenExtended.onMotionStopped – Transmite quando o movieclip parar seu tween.
  • TweenExtended.onMotionFinished – Transmite quando o movieclip terminar seu tween.
  • TweenExtended.onMotionChanged – Transmite quando a posição do movieclip for atualizada durante seu tween.
  • TweenExtended.onMotionResumed – Transmite quando o movieclip reiniciar seu tween.
  • TweenExtended.onMotionLooped – Transmite quando o tween dos movieclips entrar em loops.

Vamos ver alguns exemplos:
Crie um arquivo novo no Flash, depois crie um movieclip (uma bola por exemplo) dando o nome de instância de “ball_mc”.
Exemplo com o metodo TweenExtended.continueTo():

[as]import mx.transitions.easing.*; // optional: import all easing equations,
// or choose from: Back, Bounce, Elastic, Regular, Strong, None
import mx.transitions.TweenExtended;
var _tween:TweenExtended = new TweenExtended(ball_mc, [“_x”,”_y”,”_alpha”], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
//
_tween.onMotionFinished = function(obj) {
_tween.continueTo([150, 50, 90],5);
}
[/as]
Veja o exemplo functionando.

Exemplo com o metodo TweenExtended.yoyo():
[as]
import mx.transitions.easing.*; // optional: import all easing equations,
// or choose from: Back, Bounce, Elastic, Regular, Strong, None
import mx.transitions.TweenExtended;
var _tween:TweenExtended = new TweenExtended(ball_mc, [“_x”,”_y”,”_alpha”], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
//
_tween.onMotionFinished = function(obj) {
_tween.yoyo();
}[/as]

Veja o exemplo functionando.

Exemplo com o metodo TweenExtended.addListener():

[as]
import mx.transitions.easing.*;
// optional: import all easing equations,
// or choose from: Back, Bounce, Elastic, Regular, Strong, None
import mx.transitions.TweenExtended;
//
// EventListener Object:
var eventListener:Object = new Object();
eventListener.onMotionStarted = function(obj) {
trace(obj.obj+” – onMotionStarted – eventListener”);
};
eventListener.onMotionFinished = function(obj) {
trace(obj.obj+” – onMotionFinished – eventListener”);
};
//
//
var _tween:TweenExtended = new TweenExtended(ball_mc, [“_x”, “_y”, “_alpha”], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
//
// register the listener:
_tween.addListener(eventListener);[/as]

Veja o exemplo functionando.

Exemplo com o metodo TweenExtended.loop:

[as]import mx.transitions.easing.*;
// optional: import all easing equations,
// or choose from: Back, Bounce, Elastic, Regular, Strong, None
import mx.transitions.TweenExtended;
var _tween:TweenExtended = new TweenExtended(ball_mc, [“_x”, “_y”, “_alpha”], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
//
_tween.loop = true;
//
_tween.onMotionLooped = function(obj) {
trace(obj.obj+” – onMotionLooped”);
};[/as]

Veja o exemplo functionando.

Outra classe bastante interessante é a TransitionManager do próprio Flash. Com ela podemos criar transições via Action Script e com efeitos que levaria um certo tempo para fazer pela timeline.
Vamos ver um exemplo de como utilizar a classe TransitionManager usando o mesmo movieclip “ball_mc” utilizado nos exemplos acima:

[as]mx.transitions.TransitionManager.start(ball_mc, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:1, easing:mx.transitions.easing.Bounce.easeOut}); [/as]

Veja o exemplo functionando.

Documentação da classe TransitionManager
http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00004085.html

Classe Tween
http://www.kirupa.com/developer/actionscript/tween.htm

Classe Tween Extended
http://www.sqcircle.com/downloads/

Using the Tween and Transition Classes in Flash MX 2004
http://www.macromedia.com/devnet/flash/articles/tweening.html

4 thoughts on “Usando a classe Tween e TweenExtended

  1. Brunks

    Olá!

    Sou iniciante em AS e estou tendo dificuldade com este código: mx.transitions.TransitionManager.start

    Simplesmente, não consigo fz funcionar. A tela fica piscando e o efeito desejado não é esse. O Exemplo da bolinha(http://www.osfederais.com/posts/TransitionManager.html), teria como vc me mandar o .fla? Assim poderia ver a aplicação do código.

    Agradeço muito
    Valeu

  2. Danilo Molina

    Boa Tarde…. Nossa.. esse código supriu minhas necessidades… valew.. esse código é muuuuuuito bom!!!

    aqui funcionou belezinha!!!

    era o que faltava para o meu projeto de Revista Digital!!!

    Um abraço

    Molina

  3. Fernando

    n consegui baixar a classe tween TweenExtended, por favor, vc pode me enviar o link direto para essa classe, ou envia-la anexada por email.

    Muito obrigado pela antenção

  4. Pingback: Danilo molina | ZwerUs

Leave a Reply