Tweener

Pré-Requisitos

Adobe Flash 8 ou CS3.

Conteúdo

Olá pessoal, primeiramente um feliz ano de 2008 a todos.

Para comemorar essa passagem de ano vou postar como se usa a classe Tweener, melhorada do tween essa classe tem como objetivo principal escrever animações via Actionscript 2 ou 3.

A classe Tweener é uma classe estática você poderá chamar métodos, propriedades, mas nunca poderá criar instâncias ou objetos.

Instalando

1. Vamos fazer o download da classe, baixe aqui. Ela é free, então não tem problema nenhum em baixá-la.

2. Extraia seu arquivo em qualquer lugar.

3. Mova todos os arquivos dezipados a raíz de seu projeto.

4. Para usá-la você deve usar o import do flash. Mais pra frente veremos como.

Introdução

1. Depois de feito os passos de instalação use o seguinte para importar a classe pro seu projeto.

import caurina.transitions.Tweener;

Com a classe Tweener você pode escrever suas animações via AS com o método AddTween

Tweener.addTween(meu_mc, {_x:20, _y:40, time:1, transition:”linear”});

Aí em cima eu fiz o meu_mc andar da sua posição inicial até o valor _x = 20 e _y = 40 , simples não?

Também posso fazer ele ir a direções dinâmicas.

Tweener.addTween(meu_mc, {_x:meu_mc._x+200, _y:40, time:1, transition:”linear”});

Outra novidade interessante é o delay e _bezier, delay como todos já sabem é o tempo que se conta até algo acontecer. Como a Tweener trabalha com segundos em vez de milisegundos o número 1 representa 1 segundo.

Tweener.addTween(meu_mc, {_x:20, _y:40, time:1, delay:1, transition:”linear”});

O
_bezier serve para alterarmos nossa tangente de animação, ou seja, usar côncavos durante o percurso, quem nunca estudou sobre planos cartesianos?

Tweener.addTween(meu_mc,{_x:100, _y:100, _rotation:360, time:5, delay:1, transition:”easeStrong”, _bezier:[{_y:-100}, {_y:400}]});

Vou explicar o que acontece aí em cima. Estou falando para meu Mc que ele tem que ir até valor de _x=100, _y=100, rotacionar 360°, a animação só acontece depois de um segundo, e tem um tempo total de 5 segundos, com uma transição de easeStrong… e por último, nosso amigo _bezier, ali estou falando que durante essa animação toda ele tem que andar no eixo _y primeiro até o valor -100 e depois até o valor 400, o que faz com que ele crie essa tangente de concavo, sem termos que usar mil linhas de código pra isso.

A classe Tweener não se limita a isso, aqui estou apenas mostrando o básico do bem básico pro pessoal ir dando uma estudada. Qualquer dúvida postem no fórum ou me mandem e-mail. marcelo@marceloduende.com.br

Abraço a todos e bom estudo.

Autor: Marcelo Duende- Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.