Seguir o Mouse com Action Script 3

[RSS iMasters 5]

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.TweenerPrimeiramente, 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!

 

 

 

 

 

 

 

http://imasters.com.br/artigo/18997/flash/seguir-o-mouse-com-action-script-3

[Elektra 102]

Seria muito útil um tutorial ensinando a fazer uma transição de página externa (saída + preloader + entrada) com Tween em uma classe AS3. Algo bem simples, só pra dar uma referência inicial.

 

A classe para o carregamento e o preloader eu tenho, mas ainda não sei como usar uma Tween para essa finalidade.

 

Já rodei muito procurando, o único exemplo que encontrei é feito na timeline usando um movie clip com alpha.

 

 

Abraços