Os olhos seguem o cursor

[AiroN]

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.

 

Download do .fla deste tutorial:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

Passe o mouse envolta dos olhos do cão

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

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.

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

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.

 

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

 

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

 

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

 

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

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

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.

 

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

FIM!

 

Fonte:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

[-Zero3Um-]

Ótimo esse efeito do flash e magnifico, Airon Obrigado por compartilhar com a gente .

[MrFreedomFights]

Wow.. esse eu gostei, muito manero... :)

[DuGpAnE]

WOOW mt bom kkk gostei tbm pq meu apelido eh dug kkk( ND A VER CA HISTORIA)