Animações Dinâmicas com a classe Tween
A classe Tween nos possibilita animar sem que seja necessário utilizar a timeline ou criar códigos próprios para animação. Com esta classe podemos animar facilmente menus, transições e até mesmo alterar a animação de componentes como o ComboBox. A classe Tween esta disponível no Actionscript 2.0.
Primeiramente deve-se importar as classes:
import mx.transitions.Tween; import mx.transitions.easing.*;
A primeira linha importa a classe mx.transitions.Tween, e na segunda linha utilizou-se o asterisco (*) para importar o pacote easing de seis classes (Back, Bounce, Elastic, Strong, Regular, None) em uma única linha. Não é necessário se preocupar com o tamanho do arquivo, quando o SWF for compilado, apenas as classes usadas serão incorporadas ao arquivo.
Para utilizar os métodos e propriedades da classe Tween deve-se criar uma nova instância da classe, veja:
import mx.transitions.Tween; import mx.transitions.easing.*; var anda:Tween = new Tween(ESouza, "_x", Elastic.easeOut, 0, 200, 2, true);
Para testar a animação acima, instancie um movieClip de ESouza, e configure o FPS (CTRL+J) do filme para 20.
O construtor da classe Tween requer sete parâmetros:
var anda:Tween = new Tween(objeto:Object, propriedade:String, função:Function, início:Number, final:Number, duração:Number, segundos:Boolean);
- objeto: instância do movieClip a ser animado.
- propriedade: propriedade a ser animada: _alpha, _width, _height, _x, _y, _xscale, _ysacle, _rotation.
-
função: efeitos de animação e os métodos a serem aplicados.
Efeitos de Animação
Back: efeito de estar sendo puxado.
Bounce: efeito de salto.
Elastic: efeito elástico.
Regular: animação mais lenta em uma ou ambas extremidades.
Strong: o mesmo efeito do Regular, porém esta é mais evidente.
None: transição linear, sem efeito algum.
Métodos easing
easeIn: aplica o efeito ao início da animação.
easeOut: aplica o efeito ao final da animação.
easeInOut: aplica o efeito ao início e final da animação.
easeNone: indica que nenhum método easing deve ser usado. Este se aplica apenas junto ao easing None.
- início: valor inicial para a animação.
- final: valor final para a animação.
- duração: valor de duração para a animação, que pode ser calculada por quadro ou em segundos dependendo do próximo parâmetro.
- segundos: define se a duração da animação é calculada em segundos ou por quadros. True calculará em segundos, False por quadros.
Tween.onMotionFinished: Definindo comandos a uma animação assim que esta terminar
Utilizando o evento Tween.onMotionFinished é possível definir comandos que serão disparados assim que a animação Tween finalizar.
InstanciaDoTween.onMotionFinished = function() { //comandos };
Exemplo:
import mx.transitions.Tween; import mx.transitions.easing.*; var anda:Tween = new Tween(ESouza, "_x", Elastic.easeOut, 0, 200, 2, true); anda.onMotionFinished = function() { var anda:Tween = new Tween(ESouza, "_x", Elastic.easeOut, 200, 300, 5, true); };
Uma forma de se otimizar o código acima é utilizando o método Tween.continueTo(), que anima do valor final a um novo valor, e com um novo tempo de duração.
InstanciaDoTween.continueTo(final, duração);
- final: o valor final para a propriedade utilizada na animação.
- duração: duração da animação em segundos ou em quadros dependo do que foi setado na primeira animação.
import mx.transitions.Tween; import mx.transitions.easing.*; var anda:Tween = new Tween(ESouza, "_x", Elastic.easeOut, 0, 200, 2, true); anda.onMotionFinished = function() { anda.continueTo(300, 5); };
Tween.yoyo(): Animação reversa
Com o método Tween.yoyo() anima-se no sentido reverso, caso este seja chamado antes que a animação termine, ela imediatamente iniciará a animação no sentido contrário, do valor atual, para certificar-se de que o método Tween.yoyo() seja chamado após a animação terminar, chame-o utilizando o evento Tween.onMotionFinished.
No código abaixo a animação vai ficar em loop, pois toda vez que a animação chega ao final, é chamado o método Tween.yoyo() que fará com que a animação continue no sentido contrário.
import mx.transitions.Tween; import mx.transitions.easing.*; var anda:Tween = new Tween(ESouza, "_x", Elastic.easeOut, 0, 200, 2, true); anda.onMotionFinished = function() { anda.yoyo(); };
Alterando o FPS da animação dinamicamente via actionscript
No início deste texto foi alterado o valor do FPS manualmente para que as animações reproduzissem de forma suave, você pode alterar o FPS de cada animação dinamicamente:
import mx.transitions.Tween; import mx.transitions.easing.*; var anda:Tween = new Tween(ESouza, "_x", Elastic.easeOut, 0, 200, 2, true); anda.onMotionFinished = function() { anda.yoyo(); }; anda.FPS = 20; ESouza._y = 5; //duplica o mc ESouza e atribui a instancia de ESouza2 duplicateMovieClip("ESouza", "ESouza2", _root.getNextHighestDepth()); //coloca o novo mc abaixo do mc original ESouza2._y = ESouza._height + ESouza._y+10; var anda2:Tween = new Tween(ESouza2, "_x", Elastic.easeOut, 0, 200, 2, true); anda2.onMotionFinished = function() { anda2.yoyo(); }; anda2.FPS = 10;
Métodos de Controle de Animação
A classe Tween possui métodos que nos possibilitam ter um maior controle da animação, e nos possibilitam realizar comandos como o de anvaçar e parar a animação.
- Tween.stop(): para a animação.
- Tween.resume(): continua a animação.
- Tween.rewind(): vai para o início da animação.
- Tween.fforward(): vai para o final da animação.
- Tween.nextFrame(): avança para o próximo quadro da animação. Deve ser usado após parar a animação utilizando o método Tween.stop().
- Tween.prevFrame(): volta para o quadro anterior da animação. Deve ser usado após parar a animação utilizando o método Tween.stop().
- Tween.start(): começa a animação do início.
Para testar o código abaixo que foi usado na animação, crie os sete botões presentes na animação e os instancie de btStop, btResume, btPrev, btNext, btInicio, btFinal e btStart respectivamente.
import mx.transitions.Tween; import mx.transitions.easing.*; var anda:Tween = new Tween(ESouza, "_x", Bounce.easeOut, 0, 350, 50, false); anda.onMotionFinished = function() { anda.yoyo(); }; //botão Stop btStop.onRelease = function(){ anda.stop(); } //botão Resume btResume.onRelease = function(){ anda.resume(); } //botão Início btInicio.onRelease = function(){ anda.rewind(); } //botão Final btFinal.onRelease = function(){ anda.fforward(); } //botão Prev btPrev.onRelease = function(){ anda.prevFrame(); } //botão Next btNext.onRelease = function(){ anda.nextFrame(); } //botão Start btStart.onRelease = function(){ anda.start(); }
Definindo comandos de acordo com o estado da animação
Neste texto já foi visto o evento Tween.onMotionFinished que é invocado assim que a animação chega ao final, abaixo encontram-se os outros eventos de controle:
- Tween.onMotionChanged: invocado quando houver alterações na animação.
- Tween.onMotionResumed: invocado assim que a animação é continuada pelo método Tween.resume().
- Tween.onMotionStarted: invocado assim que a animação é iniciada pelo método Tween.start().
- Tween.onMotionStopped: invocado assim que a animação é parada pelo método Tween.stop().
- Tween.onMotionFinished: invocado assim que a animação termina.
Alguns exemplos
Escala
import mx.transitions.Tween; import mx.transitions.easing.*; var xTween:Tween = new Tween(ESouza, "_xscale", Bounce.easeOut, 100, 50, 1, true); var yTween:Tween = new Tween(ESouza, "_yscale", Bounce.easeOut, 100, 50, 1, true);
Rotação
import mx.transitions.Tween; import mx.transitions.easing.*; var gira:Tween = new Tween(ESouza, "_rotation", Bounce.easeOut, 0, 360, 2, true);
April 29th, 2006 at 17:40
muito bom. ajudou muito.
April 30th, 2006 at 13:20
Fala Erick,
Quanto tempo em brother?!
Tô vendo que continua “o cara” do flash… =)
Muito bom esse seu site.
Quero ver muita coisa sobre flash + AS aqui em cara?
É isso ai, sucesso!
Guilherme (cyber).
June 14th, 2006 at 21:47
Obrigado Guilherme. Certamente, tem muito material previsto para vir, de acordo com o tempo vou adicionando.
Um abraço.
June 26th, 2006 at 16:46
Cara, essa aula de tween foi muito produtiva pra mim. Muito bom mesmo, bem explicado, sem esconder nada. Valew mesmo.
July 6th, 2006 at 20:54
Boa Noite, Erick Souza,
infelizmente eu não consegui fazer eu observei que não tenho na lista essas funções e estou usando Flash 8 Professional, é muito estranho não ter o Tween, será que eu devo pegar pacote avulso, gostaria muito da sua respota. obrigado
July 7th, 2006 at 10:22
Thiago, apesar da classe realmente não estar incorporada ao editor de AS do Flash, você pode usá-la sem problema algum desde a versão MX2004.
Nota: na versão MX2004, a classe Tween não está presente na documentação.
Se encontrar problemas em utilizar a classe, releia esta página, está bem detalhado em como utilizá-la, caso tenha algum dúvida, sinta-se a vontade para entrar em contato.
July 18th, 2006 at 12:40
Cara muito boa esse tutorial sobre tween . Aprendi bastante ..valew mesmo ….abrasss
August 11th, 2006 at 19:33
Muito bom, eu estava mesmo procurando um site assim, onde eu encontrasse tudo sobre a classe tween, muito bem explicado, super esclarecedor. Muito bom!
September 1st, 2006 at 13:55
PERFEITO, show de bola Erick, já está nos favoritos!
October 2nd, 2006 at 23:12
Mto bom mesmo, parabéns! Grato pelo auxílio na lista FUGPE!
abraços
October 10th, 2006 at 0:41
No coments…
Simples e direto… parabéns cara
October 19th, 2006 at 16:36
Ae kra comecei a estudar action script a fundo agora! Teu site ta me dando uma grande ajuda! parabens!
October 27th, 2006 at 13:23
Cara, quando eu decidi pesquesar sobre a Classe Tween a primeira matéria q eu li foi a sua. Simplismente perfeito!! Não precisei ler mais nada!
Parabéns pela matéria.
November 8th, 2006 at 14:29
Preciso de ajuda …
Não consigo rodar os exepmlos…
Sempre apresenta erros debug …
Utilizo Flash prof. versão 8.
November 17th, 2006 at 15:17
sensacional… parabéns
November 18th, 2006 at 22:39
muito legal msm esse tutorial,….
tirou muitas duvidas sobre a classe tween…
antes eu so encontrava material em ingles,
e ficava algo q eu nao entendia,
valeu mesmo,
mas não consegui fazer funcinar a propriedade “onMotionFinished”,
uso o flash mx 2004 pro,
diz q a propriedade nãp existe.
November 23rd, 2006 at 10:58
Oi, muito legal seu tutorial!!
Estou seguindo o passo a passo e gostaria de fzr um efeito p a propriedade _alpha. Quais sao os efeitos?
Agradeço antecipadamente. vlw
November 23rd, 2006 at 11:02
Consegui fazer!!
sou sua fã! rsrs
January 11th, 2007 at 14:27
mas de qualquer forma ta muito bom
January 17th, 2007 at 10:16
Muito bom, gostaria de saber onde posso pesquisar mais sobre outras classes?
February 2nd, 2007 at 1:34
Cara vlwww
vow ser eternamente gratooo
graças a o tuto melhorei muito em relacao as
^^
brigadaoo mesmoo
vlwwwwwww
April 17th, 2007 at 16:30
Erick,
o seu site já está gravado nos favoritos e tenha certeza que passarei adiante para outros amigos. As explicações são muito boas e fáceis de entender.
[]´s
May 31st, 2007 at 23:21
Boa noite a todos. Erick primeiramente parabens pelo site e pelo nível e relevância do material! Atualmente estou me aprofundando no AS e tem sito de enorme ajuda!
Vamos ao detalhe chato: é só comigo ou o flash CS3 não trabalha com a classe TweenExtended?
Outro detalhe: abri pelo Flash 8 e o mesmo reconheceu normalmente.
Fico no aguardo e desde já obrigado.
July 24th, 2007 at 23:34
Cara muito ótimo e muito bem esplicado… estava procurando saber sobre isso faz tempo…só aprendi aqui
August 2nd, 2007 at 13:30
Cara, tu eh foda!!! mto boa a explicação, entendi tudo e jah to usando de monte…poupando a timeline direto…hehehe
valeo pelo tuto!!
abrass
August 7th, 2007 at 17:13
opaa.
gostei muito do tuto..
so q eu to com uma tremenda duvida..
como eu faco pra a tween so executa quando eu passa o mouse em cima??
desde ja agradeco..
vlwww
August 27th, 2007 at 20:46
Óptimo tutorial. Obrigado
_____________
William, fácil..
mete a tween dentro de uma função.. depois é só chamar no botão.onRollover
September 15th, 2007 at 18:01
melhor tuto de classe Tween que eu já vi.
parabéns, agradeço imensamente!!!
October 11th, 2007 at 14:24
PARABÉNS CARA, BELOO TUTORIAL, FAVORITEI!
MESMO SEM TEMPO PRA NADA, TIVE QUE PARAR AQUI E DEIXAR UM COMENTÁRIO PRA VC!!
October 26th, 2007 at 16:06
Cara, meus parabéns ótimo blog o seu.
Essas classes são sensacionais! Obrigado pela aula!
January 26th, 2008 at 10:31
Olá Erick, gostaria de agradecê-lo pelo artigo que além de ter sido muito bem explicado, as animações foram primordiais para que eu pudesse aprender.
Parabéns e muito obrigado
February 6th, 2008 at 18:59
[...] da classe Tween (as classes do Jack Doyle usam conceitos da classe Tween, então aconselho ler o artigo super completo do Erick Souza sobre a classe Tween) chamada TweenFilterLite. Com ela é possível [...]
April 2nd, 2008 at 19:43
Adeus interpolações…. obrigado EricK… mudou muito meu método de trabalho.
May 9th, 2008 at 15:37
Fala rapaz, usei muitos desses efeitos que vc posto aqui em um site, são perfeitos para o que eu quero fazer. Mas eu estava querendo usar um efeito que você postou aqui com uma alteração que não estou conseguindo inserir. É o seguinte: Queria fazer uma animação em que o mc saisse de um ponto, fosse até outro, parasse nesse ponto por um momento em que eu possa controlar e depois seguisse em frente.
Tem jeito de fazer isso?
June 4th, 2008 at 14:32
Erick Parabéns pelo tuto excelente…
Mas não rodou aqui comigo, e ocorreram varios (8) erros no Debug… O que eu estaria fazendo de errado? Alguem pode me dar uma força?
Valeu!
June 6th, 2008 at 1:29
Faço minhas as palavras de todos da lista… muito esclarecedor, porém, rs.
Tenho um defeito, ou virtude, como preferir de ser perfeccionista. Uso essas classes há um bom tempo, mas ultimamente tenho visto uma “falha” nessa classe. Acho que pode até ser o fato de eu ter alterado um pouco um valor. pegamos como exemplo seu primeiro código.
var anda:Tween = new Tween(ESouza, “_x”, Elastic.easeOut, 0, 200, 2, true);
mudei para:
var anda:Tween = new Tween(ESouza, “_x”, Elastic.easeOut, ESouza._x, 200, 2, true);
mais especificamente:
mc1.onRollOver = function(){
var pop:Tween = new Tween(mc2, “_width”, Back.easeOut, mc2._width, 200, 0.5, true);
}
mc1.onRollOut = function(){
var pop:Tween = new Tween(mc2, “_width”, Back.easeOut, mc2._width, 30, 1, true);
}
ok, mas quando faço um rollover e saio antes de completar o curso, o mc2 até volta direito pra posição inicial como deveria ser mas ao completar o caminho inverso ele salta para a posição final e pára, voltando ao movimento ao fazer um novo rollover. Enquanto digitava isso fui testando e cheguei a conclusão de que isso ocorre pelo fato de eu estar usando duas velocidades diferentes de ida e de volta. Resolvido meu problema em partes, mas pq isso ocorre e como faço pra sanar tal problema se eu precisar usar velocidades diferentes?
Obrigado e desculpe pela Ata. Parabéns pelo blog, é muito bom mesmo.
June 23rd, 2008 at 17:40
Ola Erick, Ja te parabenizo pelo site de ajuda, muito bom! mas gostaria que vc me ajudasse com este
codigo abaixo>
import mx.transitions.Tween;
import mx.transitions.easing.*;
var anda:Tween = new Tween(mc_foto1, “_y”, None.easeOut, -120,-241,
5, true);
anda.onMotionFinished = function() {
//anda.yoyo();
new Tween(mc_foto1,”_alpha”,Regular.easeOut,100,0,2,true);
new Tween(mc_foto2, “_y”, None.easeOut, -200,-341, 5, true);
};
porem o que acontece eh que, executa o mc_foto1 normal, quando chagar
ao final, faz um alfa, e depois executa o mc_foto2.
como faço pra quando executar o mc_foto2, voltar a executar o
mc_foto1?
assim. mc_foto1, alfa , mc_foto2 , mc_foto1, alfa , mc_foto2.
Obrigado.
September 9th, 2008 at 10:33
Bom Erick, quero te agradecer em compartilhar o seu conhecimento conosco. Bom minha duvida é o seguinte, estive fazendu uns trabalhos usando a Tween, só que conforme o tempo fui deixando o script muito complexo e com issu o meu trabalho quando rodado em alguns computador fica lento pra burro, e olha q o swf final tem somente 20 kbytes. Ai pensei ” acha que exagerei no classe”.^^
Teria alguma forma de aumentar essa velocidade de processamento? As travadas que dá, acaba com o meu layout e etc. Bom issu é apenas umas das muitas funções q estou usando.
///**********
function aumentoFogoes() {
var tituloFogoesX:Tween = new Tween(titulos_mc.fogoes_mc, “_xscale”, Strong.easeOut, 100, 150, 0.8, true);
var tituloFogoesY:Tween = new Tween(titulos_mc.fogoes_mc, “_yscale”, Strong.easeOut, 100, 150, 0.8, true);
var tituloContX:Tween = new Tween(titulos_mc.contato_mc, “_xscale”, Strong.easeOut, titulos_mc.contato_mc._xscale, 100, 0.8, true);
var tituloContY:Tween = new Tween(titulos_mc.contato_mc, “_yscale”, Strong.easeOut, titulos_mc.contato_mc._yscale, 100, 0.8, true);
var tituloProdutoX:Tween = new Tween(titulos_mc.produtos_mc, “_xscale”, Strong.easeOut, titulos_mc.produtos_mc._xscale, 100, 0.8, true);
var tituloProdutoY:Tween = new Tween(titulos_mc.produtos_mc, “_yscale”, Strong.easeOut, titulos_mc.produtos_mc._yscale, 100, 0.8, true);
var tituloForneX:Tween = new Tween(titulos_mc.fornecedores_mc, “_xscale”, Strong.easeOut, titulos_mc.fornecedores_mc._xscale, 100, 0.8, true);
var tituloForneY:Tween = new Tween(titulos_mc.fornecedores_mc, “_yscale”, Strong.easeOut, titulos_mc.fornecedores_mc._yscale, 100, 0.8, true);
var btn1mouse:Tween = new Tween(fundo2_mc, “_height”, Strong.easeOut, fundo2_mc._height, 480, 0.8, true);
var btn1mouseX:Tween = new Tween(fundo2_mc, “_xscale”, Strong.easeOut, fundo2_mc._xscale, 120, 0.8, true);
var btn1mouseY:Tween = new Tween(fundo2_mc, “_y”, Strong.easeOut, fundo2_mc._y, 97, 0.8, true);
var direitosmouseY:Tween = new Tween(direitos_mc, “_y”, Strong.easeOut, direitos_mc._y, 600, 0.8, true);
var direitosmouseX:Tween = new Tween(direitos_mc, “_x”, Strong.easeOut, direitos_mc._x, 795, 0.8, true);
var ruamouseY:Tween = new Tween(rua_mc, “_y”, Strong.easeOut, rua_mc._y, 595, 0.8, true);
var ruamouseX:Tween = new Tween(rua_mc, “_x”, Strong.easeOut, rua_mc._x, 238, 0.8, true);
var fonemouseY:Tween = new Tween(fone_mc, “_y”, Strong.easeOut, fone_mc._y, 610, 0.8, true);
var fonemouseX:Tween = new Tween(fone_mc, “_x”, Strong.easeOut, fone_mc._x, 238, 0.8, true);
var logo:Tween = new Tween(logo_mc, “_x”, Back.easeOut, logo_mc._x, 60, 0.8, true);
var iconesF:Tween = new Tween(icones_mc, “_x”, Back.easeOut, icones_mc._x, 830, 0.8, true);
var iconesY:Tween = new Tween(icones_mc, “_y”, Strong.easeOut, icones_mc._y, 111, 0.8, true);
var btn2_4X:Tween = new Tween(btn2_4, “_x”, Strong.easeOut, btn2_4._x, 274, 2, true);
var btn2_4Y:Tween = new Tween(btn2_4, “_y”, Strong.easeOut, btn2_4._y, 560, 2, true);
var btn2_4X:Tween = new Tween(btn2_3, “_x”, Strong.easeOut, btn2_3._x, 421, 2, true);
var btn2_3Y:Tween = new Tween(btn2_3, “_y”, Strong.easeOut, btn2_3._y, 560, 2, true);
var btn2_2X:Tween = new Tween(btn2_2, “_x”, Strong.easeOut, btn2_2._x, 572, 2, true);
var btn2_2Y:Tween = new Tween(btn2_2, “_y”, Strong.easeOut, btn2_2._y, 560, 2, true);
var btn2_1X:Tween = new Tween(btn2_1, “_x”, Strong.easeOut, btn2_1._x, 724, 2, true);
var btn2_1Y:Tween = new Tween(btn2_1, “_y”, Strong.easeOut, btn2_1._y, 560, 2, true);
var categoria2FogoesX:Tween = new Tween(titulos_mc.fogoes_mc, “_x”, Strong.easeOut, titulos_mc.fogoes_mc._x, -227, 2, true);
var categoria2FogoesY:Tween = new Tween(titulos_mc.fogoes_mc, “_y”, Strong.easeOut, titulos_mc.fogoes_mc._y, 0, 2, true);
var categoria2ForneX:Tween = new Tween(titulos_mc.fornecedores_mc, “_x”, Strong.easeOut, titulos_mc.fornecedores_mc._x, -78, 2, true);
var categoria2ForneY:Tween = new Tween(titulos_mc.fornecedores_mc, “_y”, Strong.easeOut, titulos_mc.fornecedores_mc._y, 0, 2, true);
var categoria2ProdutoX:Tween = new Tween(titulos_mc.produtos_mc, “_x”, Strong.easeOut, titulos_mc.produtos_mc._x, 73, 2, true);
var categoria2ProdutoY:Tween = new Tween(titulos_mc.produtos_mc, “_y”, Strong.easeOut, titulos_mc.produtos_mc._y, 0, 2, true);
var categoria2ContX:Tween = new Tween(titulos_mc.contato_mc, “_x”, Strong.easeOut, titulos_mc.contato_mc._x, 227, 2, true);
var categoria2ContY:Tween = new Tween(titulos_mc.contato_mc, “_y”, Strong.easeOut, titulos_mc.contato_mc._y, 0, 2, true);
}
////******
eu sei que com AS3 tem com mudar issu, agente chama somente uma vez a classe, ai depois é so atribuir o valores conforme o necessitado… Mas estou rodando o trabalho no Fplayer 8
existe essa possibilidade no AS2.????
desde já agradeço…
vlw Erick
September 21st, 2009 at 16:33
Boa tarde Erick..
desde ja agradeço por compartilhar suas experiencias conosco…
estou fazendo alguns testes com o tween no flash, mas queria saber se é possível fazer o seguinte:
1. Criei um movie clip dentro da library, e dentro deste mc, criei os movimentos, as animações e demais itens;
2. Agora quero chamar este mc no movie clip principal usando o attachmovie e fazer com que o mc que inseri seja executado.
É possivel fazer isso ??