Tutorial Action Script 3 – 005

Tutorial Action Script 3 – 005

Em continuação com o tutorial ( 001002003004 )

3.2.1. Como usar eventListeners?

O conceito dos eventListeners é bem simples, passando pela simples indicação no código que a instancia deve escutar determinado evento e “avisar” quando ele acontecer para que possamos executar determinada função.

Existe um pormenor que temos que ter em conta, certos eventos não são suportados por certas instâncias, por exemplo, um evento keyPress nunca será disparado numa imagem. O que quero dizer, é que como foi dito anteriormente, aqui também os eventos dependem das instâncias. Por exemplo, queremos que o utilizador ao clicar com o rato num botão seja executada uma função (funcao_a_executar) que deve ser chamado sem os () (este é dos poucos casos onde a função pode (obrigatoriamente) ser chamada sem os ()).

MeuBotão1.addEventListener(MouseEvent.CLICK, funcao_a_executar);

private function funcao_a_executar(event:MouseEvent):void {
    trace(“botão clickado”)
}

Temos que notar 1 ponto muito importante, como a funcao_a_executar() é disparada a partir de um MouseEvent, ela obrigatoriamente receberá parâmetros e características desse evento (algumas informações sobre a instancia) logo por isso terá que receber como parâmetro o “pai” desse evento, neste caso o “pai” é o MouseEvent. Um argumento muito util passado por esse evento é o target ou currentTarget que nos indica a instancia que disparou o evento à qual podemos aceder mesmo sem saber o nome dessa instancia.

Um exemplo bastante simples:

Temos 2 botões para aumentar/diminuir o tamanho de uma imagem 5 pixeis, iria-mos fazer assim:

botao_aumenta.addEventListener(MouseEvent.CLICK, aumenta);
botao_diminui.addEventListener(MouseEvent.CLICK, diminui);

private function aumenta(evt:MouseEvent):void {
    //para saber o nome da instancia:
    trace(“instancia : ”+evt.target);
    imagem1.width +=5;
}

private function diminui(evt:MouseEvent):void {
//para saber o nome da instancia:
    trace(“instancia : ”+evt.target);
    imagem1.width -=5;
}

O símbolo += ou -= serve para juntar ou diminuir os valores de certa variável/propriedade.

Podemos associar vários eventListners ao mesmo objecto:

meuBotão1.addEventListener(MouseEvent.CLICK, botao_click);
meuBotão1.addEventListener(MouseEvent.MOUSE_OVER, botao_rato_em_cima);
meuBotão1.addEventListener(MouseEvent.MOUSE_OUT, botao_rato_fora);

e todas as funções receberiam o mesmo tipo de evento:

private function botao_click (evt:MouseEvent):void {}
private function botao_rato_em_cima (evt:MouseEvent):void{}
private function botao_rato_fora (evt:MouseEvent):void{}

finalmente, podemos evitar o uso de 3 funções, e reutilizar o código usando os parâmetros passados pelo evento, para saber que tipo de evento foi disparado (se todos forem “filhos” do mesmo evento (MouseEvent)):

meuBotão1.addEventListener(MouseEvent.CLICK, botao_evento);
meuBotão1.addEventListener(MouseEvent.MOUSE_OVER, botao_evento);
meuBotão1.addEventListener(MouseEvent.MOUSE_OUT, botao_evento);

e a função:

private function botao_evento(evt:MouseEvent):void {
    /*usando um switch para saber que tipo de evento foi disparado, acedendo ao
    parametro type do evt */

    switch (evt.type) {

                case MouseEvent.CLICK:
                trace("evento CLICK");
                break;

                case MouseEvent.MOUSE_OVER:
                trace("evento MOUSE OVER");
                break;

                case MouseEvent.MOUSE_OUT:
                trace("evento MOUSE_OUT");
                break;

                }
}

Como podem ver, podemos poupar algumas linhas de código e optimizar o resultado final do swf usando a função botao_evento para lidar com qualquer tipo de eventos do rato (MouseEvent).

Podemos também usar eventos para chamar métodos de outros objectos, sempre através de uma função, usando a função em cima:

case MouseEvent.CLICK:
meuBotao1.move(btn.x+5, btn.y+5);
break;

Neste caso estamos a chamar o método move() do botão, ou seja a dizer ao botão que se deve mover 5px para a direita e 5px para baixo. Isto será executado cada vez que o utilizador clicar no botão.

Por final, podemos ainda fazer com o o botão dispare outro evento, entrando já nas propriedades internas do botão e forçando-o a disparar um evento interno, usando a função em cima, quero que o utilizador ao passar o rato em cima do botão, que seja disparado o evento click do botão:

case MouseEvent.MOUSE_OVER:
meuBotao1.dispatchEvent(new MouseEvent(MouseEvent.click));
break;

com a linha em cima estou a dizer à minha instancia/botão (meuBotao1) para que dispare o evento CLICK, para isso temos que o forçar a disparar um novo evento, exactamente igual ao que o eventListener está à espera (meuBotão1.addEventListener(MouseEvent.CLICK)) indicando também o tipo de evento (MouseEvent), ou caso contrario ele disparará o evento, mas nada acontecerá; meuBotao1.dispatchEvent(new MouseEvent(MouseEvent.click)); Se mantivermos toda a nossa função em cima com o switch (retirando o MOUSE_OUT):

private function botao_evento(evt:MouseEvent):void {
    switch (evt.type) {

                    case MouseEvent.CLICK:
                    meuBotao1.move(btn.x+5, btn.y+5);
                    break;

                    case MouseEvent.MOUSE_OVER:
                    meuBotao1.dispatchEvent(new MouseEvent(MouseEvent.click));
                    break;
                    }
}

Acontecerá que caso o utilizador passe o rato sobre ou clique no meuBotao1 será interpretado como se tivesse clicado, já que será disparado o evento CLICK na mesma em ambos os casos, o que fará com que o meuBotao1 chame o método .move();

Isto pode facilmente compreender-se com o seguinte processo:

Utilizador passa rato em cima do meuBotão1 -> Dispara o evento MOUSE_OVER -> O eventListner chama a função botao_evento() -> esta função detecta o evento como sendo MOUSE_OVER -> Obriga o botão a disparar o evento CLICK -> o eventListner chama a função botao_evento() de novo -> esta função detecta o evento como sendo CLICK -> executa o método .move do botão

Bom, por agora é tudo…

Abraço.

ccommons

http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt


6 comments

add yours
  • tideus June 14, 2008

    Meus parabéns, ótimo tutorial!

  • […] on Junho 9, 2008 – 8:08 am Em continuação com o tutorial ( 001 – 002 – 003 – 004 – 005 – […]

  • sam August 28, 2008

    O correto não é: addEventListner.
    Mais sim: addEventListener.

  • Mário Santos August 28, 2008

    Boas sam, é verdade… como muito do código foi escrito sem o validar, acabei por cometer esse erro ao longo do tutorial todo…foi a copiar de um lado para o outro…

    corrigido!

    Obrigado e Abraço.

  • Roger Câmara August 28, 2008

    mario, como faço pra linkar um link button ou linkbar??

    ja tentei por modo de actionscript, e mxml, mas n ta dando.

    podes me ajudar??

    obrigado.

  • Nelson December 31, 2009

    Só por curiosidade..

    “(este é dos poucos casos onde a função pode (obrigatoriamente) ser chamada sem os ()).”

    não são utilizados os parênteses pq a função Não está sendo chamada… esta sendo passado como parâmatro como função de callback

Leave a Comment

Post