Tweenlite e TweenMax - Blog Fellyph Cintra
Tweenlite e TweenMax
Publicado porFellyph Cintra 18 de dezembro de 2008 8 comentários em Tweenlite e TweenMax
Um dos assuntos mais procurados no meu blog é Tweenlite e TweenMax, vou falar de algumas propriedades que você pode utilizar com o Tweenlite e TweenMax. Se você não conhece essas classes o ideal é dar uma olhada no post anterior.
Para baixar as classes do TweenLite e TweenMax deve ir no site da Greensock, Atualmente o TweenMax está na versão 3.52 e TweenLite 9.3. Então vamos começar.
tint:Essa propriedade dá a possibilidade de fazer animações com cores. Lembrando que são cores chapadas, se for animar uma foto com tint a imagem ficará toda na cor chapada.
TweenLite.to(bola, 1, { tint:0x00B000 } );
[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweetest.swf w=400 h=100]
onComplete: chama uma função quando terminar a animação e funciona da seguinte forma:
TweenLite.to(bola, 1, { tint:0x00B000, onComplete:funcao } );
function funcao():void {
trace("chamei função no fim");
onStart: Têm o mesmo funcionamento da propriedade onComplete, a diferença que a função é disparada no início da animação. este exemplo funciona da seguinte forma:
TweenLite.to(bola, 3, { tint:0x00B000, onStart:funcao } );
trace("chamei função no inicio");
frame: dá a possibilidade de fazer uma transição sobre os frames de um determinado movieclip, exemplo se meu movieclip bola possuísse 60 frame, lembrando o movieclip e não o stage, como na imagem abaixo:
com uma animação da seguinte forma bola movimenta de uma extremidade a outra da tela, o código dessa animação ficaria assim:
TweenLite.to(bola, 1, { frame:60, ease:Bounce.easeOut, onComplete:voltar } );
public function voltar():void {
TweenLite.to(bola, 1, { frame:0, delay:1 } );
[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweenframetest.swf w=400 h=100]
delay: Traz a possibilidade de atrasar o inicio da transição, é passado um número que esse número e a quantidade em segundos. ele foi utilizado no exemplo anterior na função "voltar".
yoyo(TweenMax): Como o próprio nome sugere, faz um "efeito de yoyo", inteligente essa resposta, mas explicação simples ela fazer uma Tween e no final desfaz a mesma, então se você faz um tween do ponto x:0 ao x:100, ao chegar no ponto x:100, é feita uma tween: para o ponto x:0.Lembrando que a propriedade yoyo não contém na classe TweenLite, nas versões anteriores do TweenMax era passado um valor Booleano, agora é passado um número, para determinar o número de vezes que o efeito vai ser realizado. Vamos código:
TweenMax.to(bola, 1, { x:370, yoyo:1 } );
[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweenyoyotest.swf w=400 h=100]
loop(TweenMax): A proriedade loop pertence a TweenMax, ela faz loop da animação, lembrando que nessa versão do TweenMax não é passado mas um valor booleano para a propriedade e sim um número. O código fica da seguinte forma:
TweenMax.to(bola, 1, { x:370, loop:3 } );
[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/12/tweenyoyotest1.swf w=400 h=100]
Publicado porFellyph Cintra 18 de dezembro de 2008 Publicado emFlash, TutoriaisTags: Flash, tutorial, TweenLite, TweenMax
VI Maratona de Cursos da Poli(UPE)
21 de julho de 2009 às 13:23
Oi Fellyph, quando eu vi esse post eu dei uma boa olhada no TweenMax e fiz varios testes, mas ainda fiquei em duvida se devo trocar totalmente o caurina pelo tweenmax.
É lógico que o tweenmax tem propriedades que o caurina nao tem, mas com animações de movimento ou scale eu tive a impressao que o tweenmax deixa a animacao meio .. como posso dizer.. 'piscando'.. nao sei.. 'quebradiça'.. eu testei os mesmos movimentos com o caurina e tive a impressao que o movimento fica bem mais suave.
mas resumindo minha pergunta: voce acha que foi soh impressao minha ou foi soh no meu computador, ou realmente o movimento do caurina tem mais qualidade?
22 de julho de 2009 às 06:47
Oi marcelo, os testes que eu fiz na minha máquina foram tranquilos. Tem pontos a serem considerados, frame rate, a máquina, e como é feito a animação.
Frame rate é maior que 30?
O scale é feito em imagem ou vetor?
Tem transição de alpha?
Tem outros objetos animados no palco ?
Assim eu utilizei caurina por bastante tempo.
Ela é muito boa também, mas por conta da versatilidade de tweenlite e tweenmax eu mudei. Da uma olhada no site do tweenmax tem uma parte de comparação com as classes faz esse teste no seu pc. o link é o seguinte : http://blog.greensock.com/tweening-speed-test/
FelipeSAMA diz:
9 de dezembro de 2010 às 06:02
Fala ae xará!
Eu fiquei em dúvida com relação a certos aspectos.
Por exemplo, na animação puramente em flash os tweens são criados com base na timeline. Tudo funciona manualmente, escolhe a quantidade de frames que deseja e simplesmente aperta f6, f7 quando quer que algo novo aconteça.
Os exemplos mostrados na greensock não me ajudaram muito a entender como funciona as sequências de ações e acontecimentos numa animação complexa, pois tudo é feito usando 1 único frame.
Um exemplo que acabei de inventar… Suponhamos que eu quisesse fazer o seguinte: Cenário simples, com grama e um céu nublado… brota uma arvore do chão, ela começa a crescer, depois os galhos se destacam, nasce folhas, por último as frutas.
2 segundos depois surge um gatinho que resolve sair correndo e subir na árvore.
Tudo isso tem uma sequência de animações e não imagino como ordenar isso pelo tweenLite ou tweenMax
Dúvida de newbie!! hahahahahah
10 de dezembro de 2010 às 07:31
O TweenMax e o Tweenlite é mais para animações abstratas como podemos dizer, um menu que sobe, um botão que aumenta sua escala ou uma logo que aparece em fade, animar cenários até rola mas vai exigir mais da capacidade de abstrair o cenário. Assim fazendo isso na Timeline fica mais fácil.
9 de dezembro de 2010 às 06:04
E outra coisa, existe a classe mask pra utilizar com esses twins?
10 de dezembro de 2010 às 07:37
Vc criar uma movieclip adiciona um nome de instância por exemplo "mascara" associa esse movieclip como mascara de um outro movieClip "fulano" e usa Tween sobre o movieClip "mascara" exemplo: