Usando Tweener

Estou aqui hoje, para apresentar uma ferramenta bem conhecida por bons programadores. Tweener, uma classe que facilita muito a vida de um programador ou mesmo designers na hora de criar animações do tipo “timelineless”, o uso só de código na criação de animações, usando uma estrutura bem simples e trazendo um resultado muito.

 

Atualmente, existem vários Classes, ou pacotes (como preferirem), para fazer animações através do action script. Mas a que mais destacou a mim, pela facilidade e boa compatibilidade na hora de implementar em qualquer projeto, foi Tweener.

 

Sua forma de trabalhar é muito simples. Antes de tudo baixe Tweener. importe a classe base para o projeto:

 

import caurina.transitions.Tweener

Feito isto poderemos usar Tweener a qualquer momento, já que Tweener é uma classe estática, você não precisará criar uma instância. Para criarmos um tween nós precisamos invocar o método addTween( obj:Object, prop:Object ). Sendo obj o próprio objeto em questão, aquele a qual nos vamos mudar as suas propriedades, e prop, um objeto contendo as propriedades que iremos alterar com seus respectivos valores e as propriedades do tween.

Para o nosso exemplo iremos usar um movieclip, por ser aonde é acentuado o uso de tween. Crie, então, um movieclip no palco na posição (0, 0), de o nome de movie e voltamos ao código:

Tweener.addTween( movie, { x:100, time:1 } );

 

Execute e veja o resultado, lembrando que estamos usando AS3, caso esteja usando AS2, troque o x por _x. Muito simples e eficiente. Vamos agora as variáveis reservadas e suas finalidades.

time:Number //tempo em segundos que o tween deve durar.
delay:Number //tempo em segundos que deve ser esperado para começar o tween.
useFrames:Boolean //caso queira trocar o valor de segundos por frames;
transition:String //nome do tipo de transição a ser usada.
onStart:Function //função/método a ser executado quando o tween começar.
onUpdate:Function //função/método a ser executado toda vez que os valores forem atualizados.
onOverwrite:Function //função/método a ser executado quando tween for sobrescrito.
onComplete:Function //função/método a ser executado quando o tween for concluído.
onStartParams:Array //parâmetros que devem ser passados quando for chamada a função onStart.
onUpdateParams:Array //parâmetros que devem ser passados quando for chamada a função onUpdateParams.
onCompleteParams:Array //parâmetros que devem ser passados quando for chamada a função onCompleteParams
onOverwriteParams:Array //parâmetros que devem ser passados quando for chamada a função onOverwriteParams.
skipUpdates:Number //o números de updates que não devem ser executados, default é 0, no caso de 1 seria = update, skip, update, skip….

São vários parâmetros a serem usados, tudo para poder apresentar um resultado bom. Dos parâmetros acima o transition é o mais interessante. Como ele você poderá alterar a forma de execução do movimento. Você pode olhar alguns exemplos nesta página. É muito importante olhar os exemplos para poder ter um resultado esperado, e até mesmo saber todas as possibilidades por padrão.

Mais 3 exemplos para que fique claro.

// alterando mais de um valor ao mesmo tempo.
Tweener.addTween( movie, { x:200, y:150, time:1, transition:”linear” } );

// alterando mais de um valor com tempos diferentes no mesmo objeto
Tweener.addTween( movie, { x:200, y:100, time:1, transition:”linear” } );
Tweener.addTween( movie, { alpha:1 , time:2 } );

// executando uma função após acabar o tween
function tweenComplete() { trace( “o tween acabou” ) };
Tweener.addTween( movie, { x:100, time:0.5, onComplete:tweenComplete } );

É muito importante você fazer os seus testes e exemplos, Assim você conhece mais a fundo. Qualquer duvida ou sugestão, faça um comentário.

No próximo post falaremos sobre Tweener + Papervision3D.