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!

Tom Carvalho