Movimentos básicos no Flash via teclado

Eu recebi diversos e-mails solicitando exemplos mais básicos ( Será que eu peguei pesado com “Como minimizar um aplicativo em Adobe Air no System Tray“…? ) de Flash e AS3. Pois bem, agora vamos falar sobre movimentos básico de um movieclip, detectando o teclado. Abra o Adobe Flash, crie um arquivo novo ( File / New / Flash File ( Action Script 3.0 ) ) e dê um tamanho para ele ( Eu deixei com 400 pixels de largura por 300 pixels de altura ).

Desenhe algo – um retângulo por exemplo – e em seguida, selecione-o, e crie um MovieClip ( Use a tecla F8 como atalho ). Dê um nome para o MovieClip ( Eu chamei o meu retângulo de body ) e deixe seu ponto central ( Registration ) no centro do retângulo mesmo.

Selecione seu retângulo e aperte F8 para criar seu MovieClip!

Depois, clique no seu MovieClip e em Properties, dê um nome para a instância ( Eu decidi chamar a instância de bodyMovie ). Lembre-se que Action Script é case sensitive, então letras maiúsculas são diferentes de minúsculas ( bodyMovie é diferente de bodymovie assim como é diferente de BodyMovie ). Se tiver medo de confundir, deixe todos os nomes de variáveis e objetos em letras minúsculas.

Dê um nome para a sua instância!

Agora vamos ao código! Primeiro, vamos criar variáveis para saber se determinadas teclas estão pressionadas ou não. Elas serão do tipo Boolean, que aceitam apenas dois valores: True ou False. Como nosso exemplo fala de movimentos básicos, vou criar quatro variáveis para associá-las às quatro setas de direção do teclado.

var pressLeft:Boolean = new Boolean(false);
var pressUp:Boolean = new Boolean(false);
var pressRight:Boolean = new Boolean(false);
var pressDown:Boolean = new Boolean(false);

Para este exemplo, precisaremos de três funções. Uma será responsável pelo ato de pressionar um botão, outra pelo ato de soltar um botão e finalmente, uma que fará o movimento do MovieClip. Vamos primeiro, “pressionar o botão“!

function pressButtonDown(event:KeyboardEvent):void {
switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = true;
   break;
  case 38 : //CIMA;
   pressUp = true;
   break;
  case 39 : //DIREITA;
   pressRight = true;
   break;
  case 40 : //BAIXO;
   pressDown = true;
   break;
 }
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown);

Vou explicar: Olhe primeiro para a linha 17 acima ( stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown); ). Nela nós criamos um Listener – que seria um “responsável” por uma determinada ação – que, ao detectar o pressionar de uma tecla qualquer ( KeyboardEvent.KEY_DOWN ) ele vai chamar uma função ( pressButtonDown ). A função também descrita acima, recebe todos os parâmetros do evento e guarda na variável que chamei de event. Em seguida, usando uma estrutura de decisão switch, comparamos se o valor de event.keyCode é igual à algum código relacionado às 4 setas do teclado. Ao encontrar 37 ( Esquerda ), 38 ( Cima ), 39 ( Direita ) ou 40 ( Baixo ), nós mudamos o valor da variável booleana correspondente para true.

Já no momento de soltar a tecla, precisamos detectar novamente qual tecla foi liberada e setar sua variável booleana correspondente como false. Observe que o evento muda de KeyboardEvent.KEY_DOWN para KeyboardEvent.KEY_UP, e a função também muda de nome. O código fica assim:

function pressButtonUp(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = false;
   break;
  case 38 : //CIMA;
   pressUp = false;
   break;
  case 39 : //DIREITA;
   pressRight = false;
   break;
  case 40 : //BAIXO;
   pressDown = false;
   break;
 }
}
stage.addEventListener(KeyboardEvent.KEY_UP, pressButtonUp);

E chegamos finalmente à função que vai realmente fazer nosso MovieClip se mexer. Ela será associada à um Listener de evento do tipo Event.ENTER_FRAME, que é chamada a cada execução do framerate. Ou seja, se seu Flash estiver com 12 frames por segundo, esta função será chamada 12 vezes por segundo. Eu aumentei o framerate do meu Flash para 40 frames por segundo, visando uma maior suavidade nos movimentos. Muito cuidado com o que você programa dentro de um Event.ENTER_FRAME, pois se exagerar, pode deixar seu processamento lento, ok…?

E o que a nossa função vai fazer…? Simples: Ela vai ver se a variável booleana de cada direção está setada como True, e se sim, vamos alterar os valores de x e y do nosso MovieClip.

function runIt(e:Event):void {
 if (pressLeft) {
   this.bodyMovie.x -= 5;
 }
 if (pressRight) {
   this.bodyMovie.x += 5;
 }
 if (pressUp) {
   this.bodyMovie.y -= 5;
 }
 if (pressDown) {
   this.bodyMovie.y += 5;
 }
}
stage.addEventListener(Event.ENTER_FRAME, runIt);

Note que no if, fazer uma condição com variável boleana dispensa a pergunta, pois ele já contém True ou False. Então fazer um (variavelBoleana) e (variavelBoleana == true) é a mesma coisa. Outro detalhe que você deve ter percebido é a forma de somar ou subtrair utilizada acima. Se você quer pegar um número e somar/subtrair com outro número, e guardar o mesmo resultado dentro dele mesmo, então variável = variável + 5; é igual à variável += 5; ok?

Com apenas isto, nosso MovieClip já é capaz de se mover mas… seria bom adicionar limites à este movimento, para que o seu usuário não tire-o da tela e fique perdido. Basta adicionar alguns if’s à função acima. Lembrando que o stage do meu Flash tem 400×300, o resultado é:

function runIt(e:Event):void {
 if (pressLeft) {
  if (this.bodyMovie.x > 0) {
   this.bodyMovie.x -= 5;
  }
 }
 if (pressRight) {
  if (this.bodyMovie.x < 400) {
   this.bodyMovie.x += 5;
  }
 }
 if (pressUp) {
  if (this.bodyMovie.y > 0) {
   this.bodyMovie.y -= 5;
  }
 }
 if (pressDown) {
  if (this.bodyMovie.y < 300) {
   this.bodyMovie.y += 5;
  }
 }
}
stage.addEventListener(Event.ENTER_FRAME, runIt);

Apenas para não se esquecer, o topo esquerdo superior do Flash é o ponto zero. Se você quer deslizar algo para a direita, você aumenta o eixo x. Então, para ir para a esquerda, basta subtrair o eixo x. A mesma coisa com o eixo y: some números para descer, subtraia números para subir.

Para testar o código em ação, clique uma vez sobre o Flash abaixo ( apenas para que o browser dê foco ao Flash, e que repasse os comandos do teclado para ele ) e em seguida, pressione as setas direcionais do seu teclado e veja o retângulo se mexer!

Agora, juntando tudo e organizando um pouco o código, teremos:

//==================================================================//
var pressLeft:Boolean = new Boolean(false);
var pressUp:Boolean = new Boolean(false);
var pressRight:Boolean = new Boolean(false);
var pressDown:Boolean = new Boolean(false);
//==================================================================//
function pressButtonDown(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = true;
   break;
  case 38 : //CIMA;
   pressUp = true;
   break;
  case 39 : //DIREITA;
   pressRight = true;
   break;
  case 40 : //BAIXO;
   pressDown = true;
   break;
 }
}
//==================================================================//
function pressButtonUp(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case 37 : //ESQUERDA;
   pressLeft = false;
   break;
  case 38 : //CIMA;
   pressUp = false;
   break;
  case 39 : //DIREITA;
   pressRight = false;
   break;
  case 40 : //BAIXO;
   pressDown = false;
   break;
 }
}
//==================================================================//
function runIt(e:Event):void {
 if (pressLeft) {
  if (this.bodyMovie.x > 0) {
   this.bodyMovie.x -= 5;
  }
 }
 if (pressRight) {
  if (this.bodyMovie.x < 400) {
   this.bodyMovie.x += 5;
  }
 }
 if (pressUp) {
  if (this.bodyMovie.y > 0) {
   this.bodyMovie.y -= 5;
  }
 }
 if (pressDown) {
  if (this.bodyMovie.y < 300) {
   this.bodyMovie.y += 5;
  }
 }
}
//==================================================================//
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown);
stage.addEventListener(KeyboardEvent.KEY_UP, pressButtonUp);
stage.addEventListener(Event.ENTER_FRAME, runIt);
//==================================================================//

E se você quiser estudar e incrementar este código, clique aqui e baixe o código-fonte zipado, num FLA salvo em Flash CS3.

Espero que você tenha apreciado esta dica básica. E até o próximo post! ^^