Oi, pessoal.
Hoje iremos aprender a desenvolver um sistema de “seguir o mouse” utilizando ActionScrit 3 e a classe Tweener para realizar a animação.
Para iniciar, precisaremos baixar a classe Tweener, que pode ser encontrada no link abaixo:
http://code.google.com/p/tweener/
Passo 01: Preparar o efeito
Vamos preparar nossa animação. Crie um arquivo novo com 400 de largura e 400 de altura e crie algum movieClip, que será o objeto que vai seguir o movimento do mouse; no exemplo acima, usei a logo do iMasters, a converti em movieClip e usei o registrarion centralizado. Isso é muito importante, pois essa indicação servirá de guia para a animação, o ponto do registrarion será o ponto onde a classe Tweener irá se guiar para animar o objeto.
Agora iremos instanciar o nosso objeto com o nome de “logo”, isso servirá de guia para o ActionScript3 executar a animação
Passo 02: Instalando a Classe Tweener e Codificando
Após realizar o download da classe Tweener, copie a pasta caurina para a raiz do seu arquivo e já estaremos prontos para importá-la.
Agora, no painel do ActionScript3, importaremos a classe Tweener e iremos codificá-la da seguinte maneira:
import caurina.transitions.Tweener
stage.addEventListener(MouseEvent.MOUSE_MOVE, moverObjeto)
function moverObjeto(e:MouseEvent):void {
Tweener.addTween(logo,{time:2,x:mouseX,y:mouseY})
}
Passo 3: Entendendo o Código
import caurina.transitions.Tweener
Primeiramente, importamos a classe Tweener, isso é fundamental para o efeito acontecer
stage.addEventListener(MouseEvent.MOUSE_MOVE, moverObjeto)
Criamos um listener no palco (stage) do tipo MouseEvent.MOUSE_MOVE, ou seja, a cada movimento do mouse no palco, ele chamará a função “moverObjeto”.
function moverObjeto(e:MouseEvent):void {
Tweener.addTween(logo,{time:2,x:mouseX,y:mouseY})
}
Criamos uma função do tipo MouseEvent e a chamamos de moverObjeto, e dentro da função executamos a classe Tweener da seguinte forma:
Tweener.addTween(logo,{time:2,x:mouseX,y:mouseY})
A animação está no objeto “logo” que instaciamos no passo 1, e suas propriedades são:
- time:2 – isso quer dizer que o tempo de execução da animação se dará em 2 segundos, você poderá alterar da forma que quiser
- mouseX – estamos indicando para a classe Tweener que a posição do objeto “logo” deve ser a mesma posição X do mouse
- mouseY – consequentemente, indicamos que a posição do objeto “logo” deve ser a mesma posição Y do mouse
Pronto, simples e rápido, estamos com nosso sisteminha de seguir o mouse pronto!
Um abraço!