RICARDO FIGUEIRA (33 pts)

SÁVIO PONTE (39 pts)

ALEXANDRE PORTO (1281 pts)

MUZAK (45 pts)

RICARDO TAKAHASHI (180 pts)

EDUARDO CARREGA (150 pts)

MANGOOST (80 pts)

DENIS CARAVALHO (85 pts)

IRAPUAN MARTINEZ (45 pts)

DEMIS BUCCI (50 pts)

HELEN TRIOLO (444 pts)

FLASHGURU (155 pts)
Treinamento PontoFlash de Flash e ActionScript

Como posso colocar uma transparência (alpha) em um objeto?

Existe um modo de fazer tellTarget em vários MCs ao mesmo tempo?

Como se faz o efeito do mouse de http://www.kazsh.com/?

Queria saber como fazer uma scrollbar (barra de rolagem) no flash.

Tenho um arquivo .exe e gostaria que este ao ser executado, preencha a tela toda em fullscreen.

Quero um mouse trail que tenha vários objetos que juntam no final.

Alguém sabe como um link em html controlar um FlashMovie.

Como se faz esse tipo de menu do site http://www.halolounge.com?

Gostaria de saber como funciona o sistema IPIX 360º?

Alguém pode me indicar algum programa ou alguma forma de converter arquivos MIDI em WAVE?

Como simular, com sharedObjects, um cookie e guardar o frame no qual o usuário estava quando saiu do filme?

Meu texto vem sem acentos e sem caracteres especiais quando o importo dinamicamente.

Existe uma função Replace no Flash, para substituir Strings?

Como fazemos um objeto andar para frente e para trás por meio de um botão (roll over e roll out).
Flash Intro - Aspectos Básicos do MX

Labirinto - Plataforma de jogo em terceira pessoa em flash 5: 1° parte

Mascara animada no Flash MX

Configurando o FTP do Dreamweaver MX

Dicas e truques - Fireworks

Funções SetInterval e clearInterval no FlashMX.

Preloader real no Flash5.

Compartilhando fontes

Utilização da class XMLConnector

Formulário de e-mail com ASP.

Guias de movimento (motion guide)

Betinhocarreiro e Dysney.
Cursor

Drag limitado

Imageviewer

Drag open menu

Simple mousefollow

Arrays

Relógio analógico

Motionblur

Formulário com ASP

Soundpan_f5

Natal Misc

Ponto e inércia
HOME | TUTORIAIS
Controlando MovieClip pelas teclas direcionais.
por Ricardo Teixeira

Nessa matéria vamos ver como controlar um MovieClip com as setas do teclado. Mas além das posições x e y controlaremos também o ângulo de rotação do MovieClip.

O Primeiro passo é criar o MovieClip. Ao criar o MovieClip, temos que prestar atenção no local que será a "frente", a face principal que usaremos de referência ao mover o MovieClip. A face principal do MovieClip, em relação a propriedade angular, é aquela que esta virada para o lado direito do palco quando o MovieClip é criado. Para nosso exemplo também deve-se prestar atenção no Registration do MovieClip pois ele é o eixo de rotação. Use o Registration centralizado no MovieClip. Usarei como exemplo um triângulo como mostra a figura abaixo:

Nosso MovieClip terá nome de instância movel_mc. Inicialmente criaremos o evento onEnterFrame para que seja capturada a movimentação na velocidade (fps) do filme. Para criar o onEnterFrame use, no frame 1:

movel_mc.onEnterFrame = function () {

};

Será dentro das chaves onde o bloco de ações referentes ao controle do MovieClip será criado. Agora vamos definir a rotação do MovieClip em seu proprio eixo:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
}

A tecla "seta para direita" rotaciona o MovieClip no sentido horário e a tecla "seta para esquerda" rotaciona o MovieClip no sentido ante-horário incrementando (+=) ou decrementando (-=) seu ângulo, em relação ao seu eixo, de 5 unidades. Faremos, então, a movimentação do nosso MovieClip para frente e para trás. Para isso devemos utilizar o cosseno (para o eixo x) e o seno (para o eixo y) do angulo do nosso MovieClip. Para mover no eixo x, a propriedade x (_x) do MovieClip será ela mesma mais o cosseno do angulo do MovieClip. Então seria:

this._x += Math.cos(angulo do MovieClip);

Então poderíamos simplesmente fazer:

this._x += Math.cos(this._rotation);

Porém o método Math.cos() não aceita grau como parâmetro mas sim radiano. Então converteremos _rotation para radiano da seguinte forma:

rad = Math.PI / 180 * this._rotation;

Agora sim podemos utilizar o cosseno. Sendo assim ficaria;

this._x += Math.cos(rad);

No nosso código devemos colocar o incremento de _x para acontecer quando pressionarmos a tecla "seta para cima". Ficaria da seguinte forma:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad);
   }
}

Para a propriedade y (_y) o raciocínio é o mesmo só que usaríamos o seno ficando da seguinte forma:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad);
      this._y += Math.sin(rad);
   }
}

Se você fizer o teste perceberá que a movimentação do MovieClip será bastante lenta. Isso porque os valores seno e cosseno são bastante pequenos. Para resolver isto basta multiplicar cada valor (seno e cosseno) por um mesmo valor. Usarei 5 que é bastante razoavél.

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad) * 5;
      this._y += Math.sin(rad) * 5;
   }
}

Não podemos esquecer que nosso MovieClip pode precisar "dar ré". Então adicionamos esta condição para a tecla "seta para baixo" da mesma forma que foi para a movimentação para frente só que dessa vez vamos decrementar os valores de _x e _y:

movel_mc.onEnterFrame = function () {
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   rad = Math.PI / 180 * this._rotation;
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad) * 5;
      this._y += Math.sin(rad) * 5;
   } else if (Key.isDown(Key.DOWN)) {
      this._x -= Math.cos(rad) * 5;
      this._y -= Math.sin(rad) * 5;
   }
}

Pronto! Agora nosso MovieClip pode se movimentar na direção que nós quisermos.

Recaptulando:

//Cria o evento para a ação de acordo com a //velocidade do filme
movel_mc.onEnterFrame = function () {
//Gira o MovieClip em seu próprio eixo
   if (Key.isDown(Key.RIGHT)) {
      this._rotation += 5;
   } else if (Key.isDown(Key.LEFT)) {
      this._rotation -= 5;
   }
   //Guarda o ângulo do MovieClip
   rad = Math.PI / 180 * this._rotation;
   //Incrementa e decrementa as propriedades
   // x e y do MovieClip
   if (Key.isDown(Key.UP)) {
      this._x += Math.cos(rad) * 5;
      this._y += Math.sin(rad) * 5;
   } else if (Key.isDown(Key.DOWN)) {
      this._x -= Math.cos(rad) * 5;
      this._y -= Math.sin(rad) * 5;
   }
}

abraços!



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
1 comentário


Comentário de Rodrigo
| 17/11/2012 - 19:45 |


Olá Ricardo. Muito legal a movimentação do movieclip e a explicação. Agora como eu faço para o movieclipe se movimentar em quanto mantenho a tecla pressionada e parar quando soltar.É que estou fazendo um jogo de luta em que o boneco é um movie clipe e quando ele anda para frente através da tecla pressionada e quando solta ele para. Como será que faz isso? Beleza obrigado