Post tageado como onRollOver

Abolindo os botões no Flash – Utilizando MovieClips

Postado por Weverton Naves em ActionScript, Flash. 28/Maio/2008.

Pessoal.

Galera. Para que ainda utiliza AS2, Flash8. Vamos acabar com a mania de utilizar botões para …. botões!
Caso não saiba do que estou falando, deve estar pensando que estou ficando doido né.
Mas vou explicar.

A partir do AS3, Flash9, não se é mais permitido colocar actions diretamente nos objetos, como exemplo os botões. Antes disso (não sei desde quando), era opcional. E eu adoto essa técnica a bastante tempo, por ser mais prática, e mais maleável na questão de animação de botões.

Tudo se consiste em criar um MovieClip com animação de botão rollover e rollout. E a partir deste mc, atribuir um handler dos eventos com suas respectivas funções.

Vamos a prática:
1º Crie um arquivo novo (Flash8–).

2º Crie um movieclip. Nele, crie o primeiro frame com o estado do botão parado. Após, faça animações para rollover e rollout, com o primeiro frame de cada nomeado respectivamente, e um gotoAndStop(1) no fim da animação do rollout e um stop no fim da animação do rollover.

3º Coloque seu MovieClip no palco, instancie-o como meuMc. Na guia actions, cole o seguinte código:

meuMc.onRelease = function(){
trace(“clicado”);
}
meuMc.onRollOver = function(){
this.gotoAndPlay(“rollover”);
}
meuMc.onRollOut = function(){
this.gotoAndPlay(“rollout”);
}

Qual o segredo?
Nenhum! Simplesmente atribuimos uma função ao handler de cada movieclip. Podemos utilizar os seguintes handlers:

onPress - Ao clicar no mc
onRelease - Ao clicar e soltar o botão do mouse dentro do mc
onReleaseOutsite - Ao pressionar e soltar o botão do mouse fora do mc
onRollOver - Ao passar o mouse dentro do mc
onRollOut - Ao passar o mouse fora do mc
onLoad - Ao carregar o mc
onEnterFrame - Toda vez que ler um frame do mc (loop)
onDragOver - Ao pressinar o botão do mouse e arrastar fora e voltar para dentro (sem soltar)
onDragOut - Ao pressionar o botão do mouse e arrastar para fora do mc (sem soltar)
onMouseDown - Ao pressionar o botão do mouse no mc(igual a onPress)
onMouseUp - Ao pressionar e soltar o botão do mouse no mc (igual a onRelease)
onMouseMove - Ao mover o mouse
onUnload - Ao mc sair da timeline (no proximo frame)

É isso aí galera. Pra quem já sabe é bem simples, e bem útil pra quem não utiliza esta técnica.
Baixe um exemplo aqui.

, , , , , , ,

2 Comentários

Disparar eventos de botão pela timeline e Migração para o AS3

Postado por Weverton Naves em ActionScript. 8/Fevereiro/2008.

Depois que aprendi a disparar eventos pela timeline, percebi um grande ganho em performance do tempo de produção e da organização dos códigos. Ao colocar todo seu código na timeline, o controle e a organização se tornam elementos vitais no seu código.

Mas afinal, o que é “disparar eventos de botão pela timeline”?
Sabe aqueles comandos on(release) ou onClipEvent(load) que utilizávamos nos objetos no tempo jurássico do flash? Então, eles podem ser aplicados diretos na timeline a partir do AS2. E os seus MovieClips podem se comportar como botões, pra falar a verdade eu aboli o uso de botões, e aliei os recursos de movieclip com os eventos, para criar botões mais interativos e bonitos.

Como funciona isso?
É simples, na timeline você pode colocar:

meuMC.onRelease = function(){
trace(“O movieclip foi clicado”)
}

Você também pode utilizar handlers como onPress, onRelease, onLoad, onData, onDragOut, onDragOut, onDragOver, onReleaseOutside, onEnterFrame…

 Migração para o ActionScript 3
Com a brilhante idéia (que eu já aderia há algum tempo) da Adobe limar todo o código dos objetos e concentrá-los na timeline, a aplicação dos eventos na timeline ficou obrigatória.
Só que houve uma modificação, para acessar esses eventos, temos que setar um Listener (ouvinte) para chamar o evento, conforme o código abaixo:

function ativaBotao(event:MouseEvent){
 trace(“Você clicou no botão”)
}
meuMC.buttonMode = true; //ativa o cursor
meuMC.addEventListener(MouseEvent.MOUSE_UP,ativaBotao)

Para utilizar esse esquema, devemos definir uma função que recebe como parâmetro o evento do mouse (event:MouseEvent), e adicionamos um listener do clique do mouse no meuMC. Para que o MovieClip tenha aparência de botão, setamos a propriedade buttonMode como true.

, , , , , , , , , ,

Sem Comentários