Curso AS3

Classe Key

Com a classe Key do Actionscript pode-se controlar pelo teclado tanto sistemas quanto jogos.

This movie requires Flash Player 8.

this.onKeyDown = function(){
	trace("Alguma tecla foi pressionada.");
	}
Key.addListener(this);

No código acima, o método onKeyDown é invocado quando alguma tecla for pressionada, e imprime uma frase no painel de saída (output). Quando este código for aplicado na timeline, o uso do this referênciará ao _root, o mais correto seria registrar um ouviente através do método Key.addListener.

var teclas:Object = new Object(); //objeto "tecla"
	teclas.onKeyDown = function(){
	trace("Alguma tecla foi pressionada.");
	}
Key.addListener(teclas); //utilizando o método Key.addListener() resgistrou-se o objeto "teclas" como ouvinte

Para se remover um objeto anteriormente registrado com o método Key.addListener, utiliza-se o método Key.removeListener. Se for bem sucessido retorna true, caso contrário retorna false.

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	trace("Alguma tecla foi pressionada.");
	}
Key.addListener(teclas);
Key.removeListener(teclas);

Tecla pressionada, tecla liberada

Trocando o método onKeyDown, que é acionado quando um tecla é precionada, por onKeyUp os comandos passarão a serem executados quando a tecla for liberada.

var teclas:Object = new Object();
teclas.onKeyUp = function(){
	trace("Alguma tecla foi liberada.");
	}
Key.addListener(teclas);

Para testar o código acima, matenha qualquer tecla pressionada, assim que esta seja liberada é exibida a frase “Alguma tecla foi liberada.” no painél Output.

Comandos específicos a uma tecla ou mais

A estrutura condicional if é utilizada para adicionarmos comandos específicos a uma tecla, observe:

var teclas:Object = new Object();
	teclas.onKeyDown = function(){
	if(Key.isDown(Key.SPACE)){
		trace("A tecla espaço foi pressionada.");
		}
	}
Key.addListener(teclas);

No código acima foi utilizado o método isDown para verificar se a tecla “espaço” foi pressionada.

Para adicionar comandos a duas ou mais teclas, basta adicionar a estrutura condicional if, para cada tecla.

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	if(Key.isDown(Key.RIGHT)){
		trace("A tecla direita foi pressionada.");
		}
 
	if(Key.isDown(Key.LEFT)){
		trace("A tecla esquerda foi pressionada.");
		}
	}
Key.addListener(teclas);

Para testar o código acima pressione as teclas “direita” e “esquerda”.

Resgatando o código virtual de tecla e o código ASCII

Cada tecla possui uma identificação numérica, e algumas teclas, as mais usadas, possuem constantes que nos possibilitam idêntificá-las através do nome.

São elas: ALT, BACKSPACE, CAPSLOCK, CONTROL, DELETEKEY, DOWN, END, ENTER, ESCAPE, HOME, INSERT, LEFT, PGDW, PGUP, SPACE, SHIFT, RIGHT, TAB, UP.

Caso necessite utilizar alguma tecla que não esteja na seqüência acima, basta resgatar o código da tecla virtual utilizando o método Key.getCode().

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	trace(Key.getCode());
	}
Key.addListener(teclas);

No código acima, quando alguma tecla for pressionada, o código de tecla virtual desta será exibido no painel Output, e é este o código que é utilizado para idêntificarmos a tecla, o qual garante que os controles se comportem da mesma forma independente da plataforma ou linguagem.

Pode-se utilizar o código ASCII que é atribuido aos primeiros 127 caracteres. O código ASCII fornece a informação sobre um caractere de uma tecla, por exemplo, o código ASCII de “a” é diferente de “A”. Para se resgatar o código ASCII de uma tecla utiliza-se o método Key.getAscii(), veja:

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	trace(Key.getAscii());
	}
Key.addListener(teclas);

Após resgatar o código da tecla, no exemplo abaixo a tecla “L” (76), aplica-se o código da seguinte maneira:

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	if(Key.isDown(76)){
		trace("A tecla L foi pressionada.");
		}
	}
Key.addListener(teclas);

[ATENÇÃO] Quando você for utilizar o “Control>Test Movie” (Control + Enter), algumas teclas possuem comportamentos internos, como a tecla “ENTER”, portanto podem não funcionar no ambiente de teste, entretanto, basta marcar a opção no menu “Control>Disable Keyboard Shortcuts” para que funcionem corretamente.

Combinar teclas

Para combinar duas teclas ou mais, utilize o operador lógico &&.

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	if(Key.isDown(Key.SPACE)&&Key.isDown(76)){
		trace("A tecla espaço + L foi pressionada.");
		}
	}
Key.addListener(teclas);

Para testar o código acima, mantenha a tecla “espaço” pressionada e em seguida pressione a tecla “L”.

Verificando se a tecla Capslock e NumLock estão ativadas

Com o método Key.isToggled(), pode-se verificar se as teclas NumLock(144) ou a tecla CapsLock(20) esta ativadas ou não. Caso estejam ativadas o método retornará true, e se estiverem desativadas retornam false.

No código abaixo, é retornado o status das teclas apenas quando estas forem pressionadas (onKeyDown). Para testar o código abaixo, pressione as teclas “Caps Lock” e “Num Lock” aletóriamente.

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	if(Key.isDown(20)){
		if(Key.isToggled(20) == true){
			trace("Caps Lock ativado.");
		}else{
			trace("Caps Lock desativado.");
			}
		}
 
	if(Key.isDown(144)){
		if(Key.isToggled(144) == true){
		trace("Num Lock ativado.");
		}else{
			trace("Num Lock desativado.");
			}
	}
}
Key.addListener(teclas);

Método Key.isAccessible(): retorna tue ou false que indica se a última tecla pressionda pode ser acessada por outros SWF, de acordo com as configurações de segurança.

Propriedade Key._listeners: é utilizado para verificar quantos ouvintes foram registrados com o objeto Key.

var teclas:Object = new Object();
teclas.onKeyDown = function(){
	if(Key.isDown(76)){
		trace("A tecla L foi pressionada.");
		}
	}
Key.addListener(teclas);
trace(Key._listeners.length);

Movendo um movieClip e o limitando a área do palco

This movie requires Flash Player 8.

Converta algum objeto em movieClip e o instâncie de “seta”.

//velocidade
var velocidade:Number = 10;
 
var teclas:Object = new Object();
teclas.onKeyDown = function(){
	//seta para a direita
	if(Key.isDown(Key.RIGHT)){
		if(mcSeta._x <= Stage.width - mcSeta._width){
			mcSeta._x += velocidade;
		}
	mcSeta._rotation = 0;
	}
 
	//seta para a esquerda
	if(Key.isDown(Key.LEFT)){
		if(mcSeta._x > mcSeta._width){
			mcSeta._x -= velocidade;
			}
		mcSeta._rotation = 180;
	}
 
	//seta para baixo
	if(Key.isDown(Key.DOWN)){
		if(mcSeta._y <= Stage.height - mcSeta._height){
			mcSeta._y += velocidade;
			}
		mcSeta._rotation = 90;
	}
 
	//seta para cima
	if(Key.isDown(Key.UP)){
		if(mcSeta._y > mcSeta._height){
			mcSeta._y -= velocidade;
			}
		mcSeta._rotation = -90;
	}
 
	//seta para cima e esquerda
	if(Key.isDown(Key.UP)&&Key.isDown(Key.LEFT)){
		mcSeta._rotation = 225;
		}
 
	//seta para cima e direita
	if(Key.isDown(Key.UP)&&Key.isDown(Key.RIGHT)){
		mcSeta._rotation = -45;
		}
 
	//seta para baixo e esquerda
	if(Key.isDown(Key.DOWN)&&Key.isDown(Key.LEFT)){
		mcSeta._rotation = -225;
		}
 
	//seta para baixo e direita
	if(Key.isDown(Key.DOWN)&&Key.isDown(Key.RIGHT)){
		mcSeta._rotation = 45;
		}
}
Key.addListener(teclas);

17 Responses to “Classe Key”

  1. jardel Says:

    meu amigo eu sou iniciante no flash e tenho acompanhado todas as suas aulas atraves do seu site,e por delas tenho aprendido muito, seus ensinamentos são muito valiosos. pois muitos
    que sabem não querem dividir o seu conhecimento,mas voce tá de parabéns!.
    Eu estou com uma dúvida, eu queria fazer um jogo do labirinto,e estou usando o método do hitTest() para identificar quando o personagen tocar nas paredes do labirinto e não passar por elas,mas qual o método que uso para ele parar quando ele bater na parede e depois volte a andar novamente?

  2. aribeiros... Says:

    eu achei isso mto dificil nao consegui fazer, da pra ser mais especifico?

  3. Erick Souza Says:

    Olá aribeiros,
    O uso da classe está muito detalhada. A classe Key exige conhecimentos básicos, como de uso de Funções, Estruturas Condicionais e Classes. Aqui no blog você já encontra boa parte, pesquise sobre o assunto, caso tenha alguma dúvida entre em contato. :-)

  4. Erick Souza Says:

    Jardel, você pode por uma condicional, para que caso ele tente ir para a direção de colisão o movieClip não se mova.

    Eu estou preparando um material sobre isto, até demorei em lhe responder para ver se conseguia terminar, mas como ando muito ocupado, vou demorar um pouco para publicar.

    No site do FUGPR tem um artigo que pode lhe ajudar, veja em: http://www.fugpr.com.br/?s=artigos&a=v&id=26

  5. Fernando Rafael dos Santos Says:

    Boa Tarde Jardel…. e uma boa tarde ao amigo Erick tbm….

    Bem… tbm sou iniciante no Action Script… mas ando desvendando muita coisa….. e lendo o artigo do Erick gostei muito e vendo a dúvida do amigo Jardel…. tentei solucioná-la…
    Bem… fiz apenas alguns retângulos no palco em uma camada chamada objetos para servirem de paredes.
    Coloquei o nome de instâncias dessas paredes de “p0″,”p1″,”p2″,”p3″,”p4″,”p5″,”p6″.
    Criei a pecinha que anda tbm… e dei o nome de instância “peca”.
    e criei o código a seguir… no primeiro frame de uma camada chamada Actions.

    var peca:MovieClip = _root.peca;
    var paredes:Array = new Array(”_root.p0″, “_root.p1″, “_root.p2″, “_root.p3″, “_root.p4″, “_root.p5″, “_root.p6″);
    var parede:MovieClip;
    function colisao() {
    var x:Number = 0;
    while (x

  6. Juliano Says:

    Bom dia,
    Comessei a mexer com flash faz pouco tempo e estou precisando fazer um botão onde ele teve ter uma animação quando ser passado o mouse em cima.
    esse botão esta em duas partes uma delas deve girar e a outra abrir, e assim aparecera o texte.

    Desde de já agradeço a todos que possam me ajudar.

  7. Vinicius Says:

    Primeiramente, parabéns pelo tutorial, ficou simples e funcional. Gostaria de saber se no caso do scroll lock, tem tambem um codigo ascii? E se da para utilizar no código do caps lock por exemplo Obrigado

  8. Bruno Says:

    É para o Juliano talvez esta ação lhe ajude:
    1° on (rollOver) {
    with (sua animação)
    Play();
    }
    }
    2° on (rollOut) {
    with (sua animação)
    Play();
    }
    }
    A primeira parte, a animação da um play quando vc passa o mouse sobre o botão.
    A segunda é quando vc tira o mouse de cima do botão e a animação comtinua.
    Na ação acima onde tem entre parenteses é onde vc poem seu anime. Blz

  9. Bruno Says:

    Erick achei muito legal seu tutorial e também queria um ajuda sua eu estou tentando fazer um jogo de rpg más a colisão que fiz não está dando certo veja:

    testaColisao(this, parede);
    function testaColisao(objeto:Object, objeto2:Object) {
    with (eval(objeto)) {
    if (eval(objeto2).hitTest(getBounds(_root).xMax, _y, true)) {
    _x = _x-velocidade_perso;
    return true;
    }
    if (eval(objeto2).hitTest(getBounds(_root).xMin, _y, true)) {
    _x = _x+velocidade_perso;
    return true;
    }
    if (eval(objeto2).hitTest(_x, getBounds(_root).yMax, true)) {
    _y = _y-velocidade_perso;
    return true;
    }
    if (eval(objeto2).hitTest(_x, getBounds(_root).yMin, true)) {
    _y = _y+velocidade_perso;
    return true;
    }
    }
    };

    este foi o único que vi na internet e não esta dando certo se vc me ajudar ficarei muito grato estes efeito de colisão são bem dificieis.
    obrigado.

  10. Daniel Furini Says:

    Bruno hitTest é muito simples!!!

    exemplo

    onEnterFrame = function()
    {
    if(mc1.hitTest(mc2))
    {
    trace(”Colisão!!! entre o moviclip1 e o movieclip 2″)
    }
    }

  11. gvriwk Says:

    :lol:

  12. Ivan Says:

    Gostaria de parabenizar pela relevância e didática em todas as suas abordagens, sem dúvida são explicações práticas e muito útil, pois os conceitos soltos nas referência e nos livros nos deixam perdidos. O bom é ter exemplos com os seus.

    Aproveitando o encejo, gostaria de saber se vc tem um exemplo para o evento Key.isToggled. Quero que ao entrar no mc, apareça uma mensagem de texto, informando se a CAPSLOCK está ou não ativada, sem ter a necessidade do usuário teclar. Ficarei muito grato se vc me ajudar nessa dúvida.

    Grato,

    Ivan

  13. Seven Worlds Says:

    Seven Worlds…

    news…

  14. google company culture Says:

    google company culture…

    news…

  15. Flávio Says:

    Corrigindo o Ultimo MovieClip deve ser Instanciado como “mcSeta” e não seta

    http://www.ifranca.com.br

    Obrigado Erick … Aprendi bastante no seu Blog

  16. Fred Says:

    OLá, Erick …
    Gostei muito do seu site, e pretendo futuramente fazer os seus cursos … ( principalmente depois d ver a animação com det. d mov. com o cubo do cd dos cursos …rs ..

    Tenho uma dúvida qto a classe key : qd eu uso um addEventListener com a classe Key, cm eu tenho q fazer pra definir qual a tecla q tem q ser pressionada ? uso o Key Down mesmo, depois o código ? cm é a sintaxe disso ( imagino q deve ser algo estupidamnente simples, ms até agora n cons. encontrar … ) abs … Fred

  17. Rodrigo Says:

    bom não sei nada de actionscript,mas sou programador de delphi,e pelo que eu vi actionscript é bem semelhante ao C++ mas eu tentando esse tutorial não consegui fazer a setinha andar pois aqui no Adobe Flash CS3 Professional no meu projeto de actionscript 3 ele retornou uma porrada de erros

    Erro Source
    |1120: Access of undefined property Key. | Key.addListener(teclas);

    e tambem esse aqui
    1119: Access of possibly undefined property width through a reference with static type Class.

Leave a Reply