Os olhos seguem o cursor

Nós estamos indo construir uma animação onde os olhos de Dug, o cão do filme da Pixar UP, siga o cursor do mouse. Este tutorial é feito com ActionScript 3 e introduz o uso do método Math.atan2.

Passe o mouse envolta dos olhos do cão

1. Crie um novo arquivo flash (Actionscript 3.0) e salve-o como EyesFollow.fla.

2. Em nossos arquivos, temos um cão importado png com furos nos olhos. Criar o mesmo tipo de arquivo, ou seguir junto com os arquivos que você pode baixar, ou passar por esta etapa como o objetivo deste tutorial é fazer com que os olhos apontando para o cursor.

3. Crie uma nova camada para os olhos. Vamos criar um olho. Com a ferramenta oval selecionados (S), desenhar um círculo branco para o branco do olho. Selecione o círculo e convertê-lo em um Movie Clip com o ponto de registro no centro. Dê um duplo clique sobre ela para que possamos editá-lo.

4. Crie uma nova camada e desenhe um círculo dentro de um castanho branco. Crie uma nova camada e no centro do círculo marrom desenhar um pequeno círculo preto. Selecione o círculo marrom e preto e colocá-los à direita do círculo branco. Isto é muito importante para fazer o olho virado para a direita.

5. Retorne para a Cena 1(Scene1). Selecione o olho, copiar e colá-lo e mover o olho duplicado a sua posição. Nossos olhos são dois pronto, defina seu nome de instância para eye1_mc e eye2_mc.

6. A parte gráfica é feita, agora vamos explicar o princípio de que queremos alcançar.
Como os olhos devem seguir o cursor do mouse, queremos rodar os olhos em um determinado ângulo que muda cada vez que o mouse se move. Se desenharmos um esquema, temos que:

7. Queremos determinar o valor do ângulo para saber em que o ângulo do olho deve girar. Vamos completar o esquema por escrito para baixo todas as datas que temos em nossa posse.

Então o que podemos fazer com isso? Aqui é onde trigonometrics aparece, com o método atan2:
O método atan2 () calcula e retorna o ângulo do ponto y / x em radianos, medido a partir de um círculo horário do eixo x (onde 0,0 representa o centro do círculo). O valor de retorno é entre positivo e negativo pi.

Importante
Um erro comum é inseri-los como x, y, ao invés de y, x, conforme especificado. Note-se que o primeiro parâmetro para atan2 é sempre a coordenada y.

( http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Math.html#atan2() )

8. Parece que temos tudo na mão para determinar o ângulo:
angleRadians = Math.atan2(mouseY-eye.y,mouseX-eye.x);
Em seguida, converter esse ângulo em graus, para que possamos configurá-lo para a propriedade de rotação do olho:
angleDegress = angleRadians * 180 / Math.PI;

9. O que resta a ser feito é o de traduzir este princípio que temos explicado apenas em código ActionScript.
Crie uma nova camada "ações". Com a sua primeira imagem selecionada, abra o painel de ações.

Primeiro adicione um ouvinte Mouse_Move ao palco para detectar quando o usuário move o mouse Quando este evento será enviado, que vai chamar a função followCursor.

stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);

Em seguida escrever a função followCursor. Faça o olho que segue o cursor.

stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);

Em seguida escrever a função followCursor. Faça o olho que segue o cursor.

function followCursor(event:MouseEvent):void {
          var coordy1 : Number = mouseY - eye1_mc.y;
      var coordx1 : Number  = mouseX - eye1_mc.x;
      var angleRadians1 : Number  = Math.atan2(coordy1,coordx1);
      var angleDegrees1 : Number  = angleRadians1 * 180 / Math.PI;
      eye1_mc.rotation = angleDegrees1;
}

Faça o mesmo processo com o outro olho "eye2_mc.

10. Aqui está o código final, teste o filme para vê-lo em ação.

stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);

   function followCursor(event:MouseEvent):void {
  
      var coordy1 : Number = mouseY - eye1_mc.y;
      var coordx1 : Number  = mouseX - eye1_mc.x;
      var angleRadians1 : Number  = Math.atan2(coordy1,coordx1);
      var angleDegrees1 : Number  = angleRadians1 * 180 / Math.PI;
      eye1_mc.rotation = angleDegrees1;
  
      var coordy2 : Number = mouseY - eye2_mc.y;
      var coordx2 : Number = mouseX - eye2_mc.x;
      var angleRadians2 : Number  = Math.atan2(coordy2,coordx2);
      var angleDegrees2 : Number  = angleRadians2 * 180 / Math.PI;
      eye2_mc.rotation = angleDegrees2;
  
   }
}

Download: Download do arquivo FLA

Fonte: http://www.flashperfection.com/tutorials/Eyes-follow-the-cursor-00516.html