Estudo de Classes – Classe Tween

Olá Comunidade. Ultimamente venho recebendo E-mails de usuários com dúvida na utilização da Classe Tween. Procurando na Internet, nem sempre encontramos material de boa qualidade ou em Português. Por isso, hoje iremos enfim aprender um pouco mais sobre essa Classe.

Pré-requisitos para esse tutorial

Flash MX 2004 ou Flash 8

A Classe Tween

A Classe Tween apareceu pela primeira vez no Flash MX 2004. Ela tinha sido criada para animar os UI Componentes V2, mas a Macromedia decidiu dar um ‘plus’ para poder utilizar em MovieClips.

Utilizando a Classe

Para utilizar a Classe, devemos importar a Classe, utilizar o operador new para criar uma nova instancia da Classe. Fazendo isso, deixaremos cada Tween indepedente do outro.

import mx.transitions.Tween;

import mx.transitions.easing.*;

var nome:Tween = new Tween(alvo:Object, propriedade:String, equação:Function, posição inicial:Number, posição final:Number, duração:Number, segundos:Boolean);

nome: instancia para a Classe.
alvo: instancia do MovieClip a ser animado.
propriedade: nome da propriedade, deve estar entre aspas, exemplo: “_x”.
equação: nome da equação easing.
posição inicial: número da propriedade a ser aplicado ao alvo.
posição final: numero da propriedade a ser aplicado ao alvo.
duração: numero de frames ou segundos para que o tween ocorra.
segundos: valor Booleano que indica se a animação deve acontecer em segundos (true) ou em frames (false). Se não for especificado, por padrão é false.

Equações Easing

Essas são as equações responsáveis pelo tipo de movimento que será executado. Existem 6 tipos de movimentos:

Back: Extende a animação, dando um efeito de ser puxado.
Bounce: Efeito de ‘pulo’, o número de ‘pulos’ relaciona-se à duração, quanto maior a duração mais longo o ‘pulo’.
Elastic: Efeito elástico, a quantidade de elasticidade não é afetada pelo duração.
Regular: Efeito mais lento no inicio, no fim ou em ambos.
Strong: Efeito similar ao Regular, mas mais forte
None: Movimento de inicio e igual, sem efeito, um movimento linear.

E quatro tipos de easing:

easeIn: Efeito easing no começo da transição.
easeOut: Efeito easing no final da transição.
easeInOut: Efeito easing no começo e no final da transição.
easeNone: Nenhum efeito easing, utilizado apenas na equação None

Colocando tudo isso junto

Até agora, vimos como importar as Classes, como ela funciona, os tipos de Equações e os tipos de Easing. Agora vamos ver finalmente como animar um MovieClip.

Crie um Círculo e transforme-o em MovieClip, de instancia de circulo. Agora, coloque isso no frame em que o MovieClip se encontra:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var circuloTween:Tween = new Tween(circulo, "_x", Back.easeOut, circulo._x, 100, 1, true);

Com isso, dizemos que queremos que o MovieClip circulo se movimente no eixo x, com a equação Back, easing tipo easeOut, a posição inicial é a posição atual do MovieClip, o valor final é 100 e por fim, a animação ocorrerá em um segundo.

Podemos ainda, usar a Classe dentro de funções e passar parâmetros para ela. Vamos a um exemplo, com o mesmo círculo criado no exemplo anterior, coloquem isso no frame que o MovieClip se encontra:

import mx.transitions.Tween;

import mx.transitions.easing.*;

function anima(alvo:MovieClip, propriedade:String, equação:Function, posInicial:Number, posFinal:Number, tempo:Number, segs:Boolean) {

var tw:Tween = new Tween (alvo, propriedade, equação, posInicial, posFinal, tempo, segs);

}

anima(circulo, "_x", Elastic.easeOut, mc1._x, 300, 1, true);

Métodos da Classe Tween

A Classe Tween nos possibilita a utilização de alguns métodos. Os métodos funcionam utilizando a instancia da classe. Nos exemplos, utilizaremos o mesmo MovieClip círculo dos exemplos anteriores, colocaremos as Ações no frame do MovieClip círculo. Os métodos são:

Tween.yoyo(): Faz com que a animação Tween ocorra ao inverso, ocorrendo um loop infinito. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionFinished = function() {

meuTween.yoyo();

}

Tween.fforward(): Faz com que a animação Tween vá para o valor final, declarado. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.fforward();

Tween.nextFrame(): Faz com que a animação Tween vá para o próximo frame da animação. Utilizamos esse método depois do método Tween.stop(). Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.stop();

meuTween.nextFrame();

Tween.prevFrame(): Faz com que a animação Tween vá para o frame anterior da animação. Utilizamos esse método depois do método Tween.stop(). Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-ciculo._width, 2, true);

meuTween.stop();

meuTween.prevFrame();

Tween.resume(): Resume a animação do ponto em que ela parou. Utilizamos esse método depois do método Tween.stop(). Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.stop();

meuTween.resume();

Tween.rewind(): Faz com que a animação volte ao ponto inicial. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionFinished = function() {

meuTween.rewind();

}

Tween.start(): Começa a animação Tween da posição inicial. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.start();

Tween.stop(): Para a animação Tween no momento em que é chamado. Nesse exemplo, criaremos um botão e daremos instancia de btStop:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

btStop.onPress = function() {

meuTween.stop();

}

Tween.toString(): Retorna o nome da Classe, “[Tween]“. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

var nomeClasse:String = meuTween.toString();

trace(nomeClasse);

Manipuladores de Eventos

Os manipuladores de Eventos são utilizados para sabermos quando um determinado evento aconteceu com nosso Tween. Eles são:

Tween.onMotionChanged: É chamado quando um determinado Tween é modificado, animado. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionChanged = function() {

trace(this.position);

}

Tween.onMotionFinished: É chamado quando um determinado Tween termina. Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionFinished = function() {

trace("Tween meuTween acabado");

}

Tween.onMotionResumed: É executado quando utilizamos o método Tween.resume(). Nesse exemplo, criaremos dois botões, com instancias de btStop e btResume:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionResumed = function() {

trace("Tween resumido");

}

btStop.onPress = function() {

meuTween.stop();

}

btResume.onPress = function() {

meuTween.resume();

}

Tween.onMotionStarted: Executado quando uma animação Tween recomeça, depois de ter sido completada. Pode ser executada com os métodos Tween.start() ou Tween.yoyo(). Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionFinished = function() {

meuTween.yoyo();

}

meuTween.onMotionStarted = function() {

trace("Animação começou novamente");

}

Tween.onMotionStopped: Executado quando a animação Tween chega ao fim ou quando se utiliza o método Tween.stop(). Exemplo:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var meuTween:Tween = new Tween(circulo, "_x", Regular.easeOut, 0, Stage.width-circulo._width, 2, true);

meuTween.onMotionStopped = function() {

trace("Animação parou");

}

8 Comments to “Estudo de Classes – Classe Tween”

You can follow all the replies to this entry through the comments feed.

Vinícius

Abril 24, 2008 at 4:55 pm | Permalink

Opa… belíssimo Post.
estou precisando fazer uma animação semelhante…
poré…
precisa fazer esse movimento quanto passo o mouse em cima!!!!

voc~e pode me ajudar???
se pude me passar o código fonte…
Gerciley

Maio 22, 2008 at 9:52 am | Permalink

cara muiot bom seu post..
sou iniciante em web design, sempre trabalhei com design gráfico, e to com dificudade para importar a classe tween da laço..
no tuto que li ele indica a seguinte action:

#include “lmc_tween.as”

aparece uma mensagem disendo que o arquivo naõ foi encontrado…
minha duvida é..
onde tenho que colocar esse arquivo imc_tween.as ???
eu baixei esse arquivo e coloquei dentro da pasta classes do flash 8 no flash 8 o nome do arquivo muda para imc_tween2.as

cara se puder me ajudar serei muito grato to presisando mesmo
Wagner

Janeiro 28, 2009 at 8:13 pm | Permalink

Meu… tava procurando mesmo sobre as classes tweens, voce esplicou direitinho,
agora é so aproveitar e estuidar mais
valews
Wagner

Janeiro 28, 2009 at 8:15 pm | Permalink

Eu juro que não sbia da existencia dessas classes, voce me ajudou muito, mas so um ama coisa como eu faço o looping
JOSEEEEEEEEEEEEEEEEEEEEE

Fevereiro 6, 2009 at 4:52 pm | Permalink

Wagner

utilize o metodo yoyo();
Phillipe

Fevereiro 9, 2009 at 1:42 pm | Permalink

Valeu cara seu post me ajudou muito ^^
“Parabens”
Leo Grillo

Junho 12, 2009 at 5:16 pm | Permalink

Cara muito show este tutorial. Me ajudou muito. Parabéns.
Bruno

Dezembro 7, 2009 at 10:34 am | Permalink

Olá, bastante útil seu post, adorei. Porém gostaria de saber se existe alguma propriedade tipo: delay, ou seja, alguma forma de setar depois de qnt tempo gostaria de executar meu tween, sem intervenção da classe Timer.

vlw!