Trabalhando com o Teclado em ActionScript 3.0

Olá pessoal mais um post sobre actionScript 3.0, agora vamos trabalhar com o teclado. Em AS3 houve mudanças no tratamento dos eventos com o teclado,mas ficou no padrão no tratamento de eventos. Para disparar funções quando o teclado for pressionado fazemos da seguinte forma:

stage.addEventListener(KeyboardEvent.KEY_DOWN, fazAlgoa);

function fazAlgo(e:KeyBoardEvent):void{

 //faz qualquer coisa

 }

Na linha 01 adicionamos o evento KeyboardEvent no stage, e passamos como parâmetro que função será chamada no nosso caso ‘fazAlgo’, Na linha 02 temos a assinatura da função ‘fazAlgo’ que recebe a variável ‘e’ do tipo KeyboardEvent. Até agora simples, vamos trabalhar melhor essas funções com o exemplo a seguir:

  • Crie um novo arquivo flash
  • Determine a sua taxa de framerate para 30 fps

  • Crie um movieclip com o nome de instância bola_mc

  • Crie uma layer com nome ações

  • Seleciona a layer ações pressione f9 para inserir o código.
var vx        :Number = 0;
var vy        :Number = 0;
var ax        :Number = 0;
var ay        :Number = 0;

stage.addEventListener(Event.ENTER_FRAME, onEnter);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeydown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyup);

function onEnter(e:Event):void{
      vx += ax;
      vy += ay;
      bola_mc.x += vx;
      bola_mc.y += vy;
}

  function onKeydown(e:KeyboardEvent):void{

      if(e.keyCode == Keyboard.LEFT){
          ax = - 0.1;
      }else if(e.keyCode == Keyboard.RIGHT)
      {
          ax = 0.1;
      }else if(e.keyCode == Keyboard.UP){
          ay = -0.1
      }else if(e.keyCode == Keyboard.DOWN){
          ay = 0.1;
      }
}

function onKeyup(e:KeyboardEvent):void{
      ax = 0;
      ay = 0;
}

Nas linhas 1, 2, 3 e 4 foram criadas variavéis to tipo Number para a velocidade e aceleração do eixo x e y. Na linha 5 foi adicionado o evento ENTER_FRAME e na 6 e 7 os eventos KEY_DOWN e KEY_UP. A função onEnter incrementa a velocidade dos eixos com a aceleração. A função onKeyDown na linha 14 é disparado quando o usuário pressiona qualquer tecla e através da variável ‘e’ do tipo KeyboardEvent podemos saber qual tecla foi pressionada com o código e.KeyCode que na realidade é o número equivalente a tabela ASCI mas como nem todo mundo tem tempo de sobra para ficar decorando toda a tabela ASCI, a classe keyboard possui variáveis estáticas para facilitar a vida do programador, onde podemos ver nas linhas 15, 17, 20 e 22.

Assim a lógica fica da seguinte forma quando a tecla esquerda for pressionada a aceleração x é decrementada, quando pressionado a direita incrementada, quando a tecla cima(up) for pressionada a aceleração y é decrementada e baixo(down) o oposto. A função onKeyup é disparada no Evento KeyboarEvent.KEY_UP ou seja quando o usuário solta a tecla será chamada a função que zera a aceleração tanto x e y. Vamos ver o resultado :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/09/bola_teclado.swf w=450 h=400]

(use as teclas direcionais)

Notem que a bola foge do palco então vamos dar uma melhorada no código substituindo a função onEnter do código anterior por essa :

function onEnter(e:Event):void{
    vx += ax;
    vy += ay;

    if((bola_mc.x < bola_mc.width/2) || (bola_mc.x > stage.stageWidth - bola_mc.width/2)){
      vx *= -1;
    }
    bola_mc.x += vx;

    if((bola_mc.y < bola_mc.height/2) || (bola_mc.y > stage.stage.stageHeight -   bola_mc.height/2)){
      vy *= -1;
   }
bola_mc.y += vy;

}

O incremento da velocidade permanece da mesma foram a diferença é que quando a bola chegar nas extremidades do palco receber sua velocidade inversa. Notem que não utilizamos a posição zero como limite porque o registration do movieclipe está no centro por isso usamos a metade de suas medidas e para usarmos a largura e altura total do stage utilizamos stage.stageWidth e stage.stageHeight. O resultado que temos é esse :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2008/09/bola_teclado_2.swf w=450 h=400]

Até a próxima…

11 respostas para “Trabalhando com o Teclado em ActionScript 3.0”

  1. Fellyph, sou iniciante em flex e estou tentando usar seu script, estou fazendo da seguinte forma:

    meu initialize esta desta forma:
    initialize=”addEventKeyboard()”

    com ou sem o foco no campo texto, se eu aperto teclas de função de browser como IE não funciona, por exemplo: F5, F3, F4, são justamente as teclas que preciso tratar evento,

    você sabe de alguma solução? segui um tutorial que achei na net, porém para html, teria como por exemplo eu pegar o evento antes de ir pro browser e mandar para o javascript trata-lo?

    espero que vc possa me ajudar, desde já obrigado!

    Felipe

  2. OLá, estou com este mesmo problema… então posso desistir ?

    não tem como utilizar as teclas de função com flex, quando precisarmos alterar o comportamento padrão do navegador, ex: evitar q o f5 de reload na página, ao invés de reload, acione o salvar em uma tela de cadastro …

    É IMPOSSÍVEL ?

  3. Amigo, tutorial excelente, meus parabéns!

    Amigo, não teria como adicionar um efeito de gravidade para que a bola tenda a ficar em baixo?

  4. Estou com um problema ferrenho, estou trabalhando com classes na faculdade e o professor passou um teste valendo nota que conseguir fazer uma bola se mover no palco usando as teclas de navegação “Seta Direita” e “Seta Esquerda” mas o preblema e que este código não ta funcionando com Classe eu coloquei a bola no palco por classe mas agora não consigo movela tem alguma forma de usar o keyCode em classes do AS3

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *