Usando a classe Tween e TweenExtended

Posted on January 6, 2006 by Leonardo França 4 Comments

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:

< View plain text >
ActionScript

  1. import mx.transitions.easing.*;
  2. import mx.transitions.TweenExtended;
  3. var _tween = new TweenExtended(target, props, easeFunc, strt, end, dur, useSecs, bezierPoint1, bezierPoint2);
  4. /*
  5. constructor for Tween Exdended class
  6. target: reference - the object which the Tween targets
  7. props: array - names of the properties (in obj) that will be affected
  8. easeFunc: function - the type of easing equation to be used [import easing equations: import mx.transitions.easing.*;]
  9. strt: array - the starting value of props
  10. begin: array - the ending value of props
  11. dur: number - the length of time of the motion; set to infinity if negative or omitted
  12. useSecs: boolean - a flag specifying whether to use seconds instead of frames
  13.  
  14. *optional bezier parameters*
  15. To use the Bezier tween both parameters must be entered and must be used in conjunction with mx.transitions.easing.Bezier;
  16. has three easing methods: tweenQuadBez, tweenQuadBezThru, tweenCubicBez
  17.  
  18. bezierPoint1: number - numerical x position value
  19. bezierPoint2: number - numerical y position value
  20. */

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():

< View plain text >
ActionScript

  1. import mx.transitions.easing.*; // optional: import all easing equations,
  2. //                                 or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  3. import mx.transitions.TweenExtended;
  4. 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);
  5. // 
  6. _tween.onMotionFinished = function(obj) {
  7.     _tween.continueTo([150, 50, 90],5);
  8. }

Veja o exemplo functionando.

Exemplo com o metodo TweenExtended.yoyo():

< View plain text >
ActionScript

  1. import mx.transitions.easing.*; // optional: import all easing equations,
  2. //                                 or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  3. import mx.transitions.TweenExtended;
  4. 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);
  5. // 
  6. _tween.onMotionFinished = function(obj) {
  7.     _tween.yoyo();
  8. }

Veja o exemplo functionando.

Exemplo com o metodo TweenExtended.addListener():

< View plain text >
ActionScript

  1. import mx.transitions.easing.*;
  2. // optional: import all easing equations,
  3. // or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  4. import mx.transitions.TweenExtended;
  5. //
  6. // EventListener Object:   
  7. var eventListener:Object = new Object();
  8. eventListener.onMotionStarted = function(obj) {
  9.     trace(obj.obj+" - onMotionStarted - eventListener");
  10. };
  11. eventListener.onMotionFinished = function(obj) {
  12.     trace(obj.obj+" - onMotionFinished - eventListener");
  13. };
  14. //
  15. //
  16. 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);
  17. //
  18. // register the listener:
  19. _tween.addListener(eventListener);

Veja o exemplo functionando.

Exemplo com o metodo TweenExtended.loop:

< View plain text >
ActionScript

  1. import mx.transitions.easing.*;
  2. // optional: import all easing equations,
  3. // or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  4. import mx.transitions.TweenExtended;
  5. 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);
  6. //
  7. _tween.loop = true;
  8. // 
  9. _tween.onMotionLooped = function(obj) {
  10.     trace(obj.obj+" - onMotionLooped");
  11. };

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:

< View plain text >
ActionScript

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

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

Leia também =D

Flash, Flash Platform, Principal, RIA

4 comments

  1. Brunks
    January 30, 2006 at 10:38

    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
    June 6, 2006 at 13:01

    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
    August 11, 2006 at 19:12

    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