Virtualize Interatividade Digital

Eventos

Quando desenvolvemos uma aplicação Flash, frequentemente nos deparamos com situações onde desejamos tomar ações com base em interações do usuário.

Eu posso desejar por exemplo, que o meu site exiba uma janela de cases apenas quando o visitante clique no botão “Cases” do menu. Ou posso desejar que 5 segundos após o site ser aberto, seja exibido um banner com uma promoção em destaque.

“Usuário clicar no botão” e “passar 5 segundos” são eventos. Eventos nada mais são que acontecimentos. Eles podem ser oriundos da interação do usuário ou não. Existem diversos tipos de eventos: clique do usuário, usuário digita uma tecla, usuário move o mouse, fim de load de uma imagem externa, passagem de tempo, etc.

Quando queremos tomar ações a partir da ocorrência de um evento precisamos definir o tratador do evento (event handler). Fazemos isso criando uma função, que será invocada quando aquele evento acontecer.

Vamos a um exemplo simples, onde irei exibir uma mensagem a depender da posição do cursor do mouse em relação a um movieclip. Vamos criar um MovieClip chamado “bola_mc” e adicionarmos ao centro do Stage.

Adicionemos também um Dynamic TextField abaixo da bola, chamado “texto_txt”.

Observe que nesse exemplo eu utilizei os sufixos “_mc” e “_txt” no nome das intâncias do MovieClip e do TextField respectivamente. Esses sufixos são úteis, pois indicam ao flash o tipo da instância, fornecendo-nos acesso a um recurso chamado “code completion”. Asssim, se em um código action script escrevermos o nome da instância seguido de ponto ‘.’ e pressionarmos Ctrl + Barra de espaço o flash exibirá para nós a lista de propriedades e métodos daquela instância, com base no tipo que o sufixo indica.

Experimente digitar no código AS3 “bola_mc.” e pressionar Ctrl + Barra de espaço. Esse recurso é fundamental para acelerar o desenvolvimento, evitando erros, bem como para auxiliar-nos no conhecimento das propriedades e métodos das classes.

Voltando ao nosso exemplo, vamos inserir o código Action Script para tratar alguns eventos sobre esse objeto. Para isso, clicamos na primeira frame da timeline e digitamos F9:

// Função tratadora do evento MOUSE_OVER. Tal evento é disparado quando o cursor
// do mouse é posicionado sobre o alvo.
function MouseSobreBola(evt: Event)
{
	// Alteramos o texto do componente de texto que inserimos no stage.
	texto_txt.text = "Mouse sobre a bola";
}

// Função tratadora do evento MOUSE_OUT. Tal evento é disparado quando o cursor do mouse é
// posicionado fora do alvo.
function MouseForaBola(evt: Event)
{
	// Alteramos o texto do componente de texto que inserimos no stage.
	texto_txt.text = "Mouse fora da bola";
}

// Função tratadora do evento CLICK. Tal evento é disparado quando o usuário clica no alvo.
function MouseClickBola(evt: Event)
{
	// Alteramos o texto do componente de texto que inserimos no stage.
	texto_txt.text = "Clique na bola";
}

// Associamos os tratadores de eventos que criamos aos eventos. Dessa  forma, quando o evento
// ocorrer o tratador de evento será invocado.

// Evento MOUSE_OVER
bola_mc.addEventListener(MouseEvent.MOUSE_OVER, MouseSobreBola);

// Evento MOUSE_OUT
bola_mc.addEventListener(MouseEvent.MOUSE_OUT, MouseForaBola);

// Evento CLICK
bola_mc.addEventListener(MouseEvent.CLICK, MouseClickBola);

O método addEventListener, percentente a classe MovieClip, permite que associemos uma função tratadora de eventos a um evento (na verdade o método addEventListener não pertence a classe MovieClip e sim a uma de suas superclasses, mas não pense nisso por enquanto). “addEventListener” significa mais ou menos “adicionar ouvinte do evento”. E é isso que acontece.

A função que informamos como 2° parâmetro desse método irá ser notificada sempre que o evento definido pelo 1° parâmetro do método addEventListener ocorrer.

Execute o exemplo e veja o resultado.

Nos próximos artigos iremos estudar estruturas condicionais e de repetição, fundamentais para elaboração de rotinas Action Script mais complexas. Caso tenha dúvida, sinta-se a vontade em perguntar!

Tags: actionscript 3, eventos, tutorial action script, tutorial actionscript