Tween Lite

As classes de animações são uma mão na roda para os desenvolvedores flash , um conjunto de classes que permitem com apenas um linha de código, fazer ótimas animações modificando varias propriedades, passei um bom tempo utilizando as classes do caurina Tweener, melhoraram muito minha produtividade, mas a adição dessas classes aumentavam 12kb no swf final. Para um site em flash isso não é muito significativo, mas para um banner para web pode complicar.

Alguns portais tem um limite para o tamanho do swf por exemplo a globo e suas filiadas tem um limite de 20kb por banner, ou seja com a adição do caurina já é usado mais de 50% dos kbytes permitido.

Um dia fazendo uma pesquisa sobre Papervision3D vi uma recomendação de um pacote de classes para animação TweenMax e TweenLite. Fiz meus testes e gostei, depois perguntei a alguns amigos que também fizeram boas recomendações.

No site Greensock grupo responsável pelo desenvolvimento das classes TweenLite e TweenMax. Têm alguns testes de desempenho, documentação completa e exemplos, a seguir vou mostra um simples exemplo utilizando TweenMax.

Seu uso é bastante simples vamos lá :

1 – Primeiro baixe o pacote das classes, se ainda não baixou clique aqui .

2 – Descompacte o zip na mesma pasta que está o seu arquivo .fla como na figura abaixo.

3 – Abra o arquivo .fla que no meu caso é tweenLite.fla , crie um movieClip no palco com o nome de instância bola_mc.

4 – Crie uma nova layer com um nome ações , selecione o primeiro frame e pressione  F9 para inserir o nosso código AS.

Na janela de ações jogamos o seguinte código:

import gs.TweenMax;
TweenMax.to(bola_mc, 1, {x:400, y:100 });

Na linha 1 importamos a Classe TweenMax.

Na linha 2 usamos a classe de animação que funciona da seguinte forma:

TweenMax.to( [ alvo ], [ tempo ], {[propriedades do movie clipe]}); no exemplo a cima as propriedades x e y do movieClip;

Se você quiser adicionar as propriedades de ease fica assim:

 import gs.TweenMax;
 import gs.easing.*
 TweenMax.to(mc, 1, {x:400, y:100, ease:Back.easeOut});

A diferença para o primeiro código foi o import do easing na linha dois e a inclusão de mais uma propriedade a de ease na linha 3 neste caso eu estou utilizando o Back e easeOut diz que o efeito vai ser aplicado no fim da animação.

Alguns tipos de easing são:

  • Back
  • Bounce
  • Cubic
  • Elastic
  • Expo

E suas variações : easeIn para aplicar o efeito no início da animação , easeOut no final e easeInOut em ambos.

Por enquanto é só depois vou complementar esse exercício .

Participe da discussão

2 comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *