Botões em ActionScript 3.0

Nesse post vamos trabalhar com botões em AS 3.0 então ao trabalho, no actionScript 2.0(AS 2.0) para fazer ações com botões e movieclips era da seguinte forma:

meubotao.onRollOver = function():Void{

 //faz alguma coisa

}

Em acitonScript 3.0(AS 3.0) houve algumas mudanças, de inicio você tem que adicionar os eventos no movieclip e falar qual a função que vai ser chamada veja o exemplo abaixo.

meubotao.addEventListener(MouseEvent.MOUSE_OVER, minhaFuncao);

function minhaFuncao(e:MouseEvent):void{

//faz alguma coisa

 }

Na linha um adicionamos o evento especificamos o Tipo de evento no exemplo é o evento de mouse o mouse_over igual ao onRollOver do actionScript 2.0.  Na assinatura da função temos de que definir o tipo de parâmetro que a função vai receber, neste caso a variável “e” do tipo MouseEvent, lembrem toda vez que adicionarmos um evento a função que é chamada tem que receber um parâmetro do tipo do evento que foi adicionado.  O “this” que usamos dentro da função para fazer referência a quem chama a função em AS2.0 foi substituído pelo “target” do evento. Obs. Em outros casos o this tem o uso normal. vamos complementar o nosso exemplo:

meubotao.buttonMode = true;

meubotao.addEventListener(MouseEvent.MOUSE_OVER, minhaFuncao);

function minhaFuncao(e:MouseEvent):void{

         e.target.alpha = 0.5
 }

Na linha 1 foi alterado um parâmentro em nosso botão(movieClip) “buttonMode” essa propriedade surgiu em AS3 e por padrão ela é inicializada com false então para o nosso botão ficar com aquela “mãozinha” quando o mouse passar sobre nosso movieclip . Na linha 4 estamos modificando a propriedade alpha do target ou seja de  quem chamou a função nesse caso o meubotao. Notem que diferente de AS2.0 a propriedade alpha escrevesse sem o “_” isso para outras propriedades como x , y e  rotation. Outras propriedades como _xscale e _yscale agora são scaleX e scaleY. Vamos então usar o TweenLite nos eventos dos botôes(movieClips). Lembrando quem não possui as classes do TweenLite clique aqui para baixar.

import gs.TweenLite;
import gs.easing.*;

meubotao.buttonMode = true;
meubotao.addEventListener(MouseEvent.MOUSE_OVER, over);
meubotao.addEventListener(MouseEvent.MOUSE_OUT, out);
meubotao.addEventListener(MouseEvent.CLICK, clicou);

function over(e:MouseEvent):void{

TweenLite.to(e.target, 0.7, {alpha:0.7, ease:Expo.easeOut});

}

function out(e:MouseEvent):void{

TweenLite.to(e.target, 0.7, {alpha:1, ease:Expo.easeOut});

}

function clicou(e:MouseEvent):void{
trace("clicou");
}

No ultimo exemplo implementamos as ações over,  out e clique do movieclip.

Até o próximo post.

Participe da discussão

52 comentários

  1. Parabéns Fellyph! muito boa a sua explicação, porém sou iniciante na área e gostaria de saber como transferir exatamente o seguinte código:

    on (rollOver) {
    gotoAndPlay(3);
    }
    on (rollOut) {
    gotoAndPlay(11);
    }
    on (release) {
    getURL(“promocoes.html”);
    }

    Gostaria de fazer isso em Action script 3.0
    e não consigo!

  2. Parabéns Fellyph! muito boa a sua explicação, porém sou iniciante na área e gostaria de saber como transferir exatamente o seguinte código:

    on (rollOver) {
    gotoAndPlay(3);
    }
    on (rollOut) {
    gotoAndPlay(11);
    }
    on (release) {
    getURL(“promocoes.html”);
    }

    Gostaria de fazer isso em Action script 3.0
    e não consigo!

  3. O marcel se é mane mermo hein!!
    Se liga no seu codigo em AS3:

    botao_mc.buttonMode = true;
    botao_mc.addEventListener(MouseEvent.CLICK, clica);
    botao_mc.addEventListener(MouseEvent.MOUSE_OVER, over);
    botao_mc.addEventListener(MouseEvent.MOUSE_OUT, out);

    function clica(e:MouseEvent):void{
    getURL(”promocoes.html”);
    }

    function over(e:MouseEvent):void{
    gotoAndPlay(3);
    }

    function out(e:MouseEvent):void{
    gotoAndPlay(11);
    }

  4. O marcel se é mane mermo hein!!
    Se liga no seu codigo em AS3:

    botao_mc.buttonMode = true;
    botao_mc.addEventListener(MouseEvent.CLICK, clica);
    botao_mc.addEventListener(MouseEvent.MOUSE_OVER, over);
    botao_mc.addEventListener(MouseEvent.MOUSE_OUT, out);

    function clica(e:MouseEvent):void{
    getURL(”promocoes.html”);
    }

    function over(e:MouseEvent):void{
    gotoAndPlay(3);
    }

    function out(e:MouseEvent):void{
    gotoAndPlay(11);
    }

  5. Olá, boa noite!
    Estou a realizar um trabalho para a faculdade mas estou com alguns problemas em criar as iigações necessárias com actionscript3 (tenho 4 botões e os respectivos conteúdos feitos, mas não os consigo ligar).
    Será que podia contar com a sua ajuda?
    Obrigada.

  6. Olá, boa noite!
    Estou a realizar um trabalho para a faculdade mas estou com alguns problemas em criar as iigações necessárias com actionscript3 (tenho 4 botões e os respectivos conteúdos feitos, mas não os consigo ligar).
    Será que podia contar com a sua ajuda?
    Obrigada.

  7. OLÁ AMIGO TUDO BEM SEGUINTE

    FIZ UMA ABERTURA ANIMADA NO FLASH

    A GRANDE PARTE DAS ANIMAÇÕES EU USEI MOVIE CLIPS E NÃO GRAPHICS COM ALGUNS CODIGOS EM ACTION 3

    FIZ UM BOTÃO GERAL PARA RODAR TODAS AS ANIMAÇÕES SEJAM AS EM GRAPHIS E AS MOVIE CLIPS

    POREM ESTE BOTÃO NÃO ESTA RESPONDENDO

    O CÓDIGO QUE EU COLOQUEI NELE E ESTE AI EM BAIXO

    ver_denovo.addEventListener(MouseEvent.CLICK,rodartudo);
    function rodartudo(event:MouseEvent):void {
    play();
    }

    O que devo fazer

    Grato pela sua atenção

    Evander

    1. Olá evander,

      1 – Você tem que verificar onde está esse código?
      2 – Se o nome de instância do botão está correto?
      3 – quem vc quer chamar a função play(). no caso que vc mostrou vc está dando play no stage.
      4 – verificar ser realmente a função rodartudo está sendo chamada dentro da função vc pode colocar um trace(“chamou”) se não aparecer no output “chamou” então quer dizer que a função não está sendo chamada.

  8. OLÁ AMIGO TUDO BEM SEGUINTE

    FIZ UMA ABERTURA ANIMADA NO FLASH

    A GRANDE PARTE DAS ANIMAÇÕES EU USEI MOVIE CLIPS E NÃO GRAPHICS COM ALGUNS CODIGOS EM ACTION 3

    FIZ UM BOTÃO GERAL PARA RODAR TODAS AS ANIMAÇÕES SEJAM AS EM GRAPHIS E AS MOVIE CLIPS

    POREM ESTE BOTÃO NÃO ESTA RESPONDENDO

    O CÓDIGO QUE EU COLOQUEI NELE E ESTE AI EM BAIXO

    ver_denovo.addEventListener(MouseEvent.CLICK,rodartudo);
    function rodartudo(event:MouseEvent):void {
    play();
    }

    O que devo fazer

    Grato pela sua atenção

    Evander

    1. Olá evander,

      1 – Você tem que verificar onde está esse código?
      2 – Se o nome de instância do botão está correto?
      3 – quem vc quer chamar a função play(). no caso que vc mostrou vc está dando play no stage.
      4 – verificar ser realmente a função rodartudo está sendo chamada dentro da função vc pode colocar um trace(“chamou”) se não aparecer no output “chamou” então quer dizer que a função não está sendo chamada.

  9. Sim amigo

    pelo vistoso esta ativando o stage ou seja apenas a animação que são graphico estão sendo ativadas já os movie cips não

    eu queria que este botão desse play em todas as animaçãoes

    uso o flash cs4

    Grato

  10. Sim amigo

    pelo vistoso esta ativando o stage ou seja apenas a animação que são graphico estão sendo ativadas já os movie cips não

    eu queria que este botão desse play em todas as animaçãoes

    uso o flash cs4

    Grato

  11. Parabens Otimo tutorial. Sou design e nao me prendo muito a programaçao e estou iniciando no AS3 agora.
    Obrigado pelo Tutorial.

  12. Parabens Otimo tutorial. Sou design e nao me prendo muito a programaçao e estou iniciando no AS3 agora.
    Obrigado pelo Tutorial.

  13. cara funciona … mais queria exemplo colocar a action na frame que ele esta quando o botao for clicado direciona para o frame ex> 7 !
    vlws

  14. cara funciona … mais queria exemplo colocar a action na frame que ele esta quando o botao for clicado direciona para o frame ex> 7 !
    vlws

  15. tentei o modo acima e da esse erro
    1119: Acess of possibily underfined property buttonMode through a reference with static type flash.display:simpleButton.

    eu criei um botao na frame5 e quero que ele busque a frame 7
    ai da o erro e no inicio aparece isso tmb
    Symbol’page contents’,layer’text’,frame 5,line 1
    aguardo resposta valeu
    biscoito_o@hotmail.com

  16. tentei o modo acima e da esse erro
    1119: Acess of possibily underfined property buttonMode through a reference with static type flash.display:simpleButton.

    eu criei um botao na frame5 e quero que ele busque a frame 7
    ai da o erro e no inicio aparece isso tmb
    Symbol’page contents’,layer’text’,frame 5,line 1
    aguardo resposta valeu
    biscoito_o@hotmail.com

  17. Olá!
    Funcionou a direção para frame.
    E para uma outra cena?
    Tentei fazer igual,só q em vez do frame coloquei a cena,tudo certinho.
    Só que quando clico vai para o inicio do site.
    Por favor me ajudem….
    Preciso disso urgente
    Obrigada!

  18. Olá!
    Funcionou a direção para frame.
    E para uma outra cena?
    Tentei fazer igual,só q em vez do frame coloquei a cena,tudo certinho.
    Só que quando clico vai para o inicio do site.
    Por favor me ajudem….
    Preciso disso urgente
    Obrigada!

  19. Amigo eu fiz um menu com os botões exatamente como você sugeriu ao carinha do primeiro post o MARCEL.
    Mas o negócio é o seguinte, eu fiz uma animação dentro do movieclip que muda o botão de forma quando passo o mouse sobre ele, o que acontece é que como não tem uma área fixa de influencia de vez em quando dá um BUG feio pacas, o botão fica piscando e às vezes não volta a forma inicial fica travado.

    Como poderia resolver? Pois no AS2.0 sabia fazer usando ações nos objetos e em um layer fora definia as ações e uma área de influência que não se movia junto com o botão já que ela quem o controlava de fora.

    Não sei se deu pra entender, mas se puder ajudar.

  20. Amigo eu fiz um menu com os botões exatamente como você sugeriu ao carinha do primeiro post o MARCEL.
    Mas o negócio é o seguinte, eu fiz uma animação dentro do movieclip que muda o botão de forma quando passo o mouse sobre ele, o que acontece é que como não tem uma área fixa de influencia de vez em quando dá um BUG feio pacas, o botão fica piscando e às vezes não volta a forma inicial fica travado.

    Como poderia resolver? Pois no AS2.0 sabia fazer usando ações nos objetos e em um layer fora definia as ações e uma área de influência que não se movia junto com o botão já que ela quem o controlava de fora.

    Não sei se deu pra entender, mas se puder ajudar.

  21. Bom dia…
    eu gostaria de saber como faço pro meu botão, que esta dentro de um movie clip, ir para o segundo frame???
    no as2 eu colocava _root.gotoAndPlay(2);
    mas no as3, como faço?

    Obrigado aee galera!!!

  22. Bom dia…
    eu gostaria de saber como faço pro meu botão, que esta dentro de um movie clip, ir para o segundo frame???
    no as2 eu colocava _root.gotoAndPlay(2);
    mas no as3, como faço?

    Obrigado aee galera!!!

  23. Olá! Ótimo tutorial!

    Tenho a seguinte dúvida – com vários botões, em AS2 eu determinava p.ex. duas funções, uma para MouseOver e outra para MouseOut e passava como parâmetro o MC que iria ser animado.
    Exemplo:
    botao.onRollOver = function() {
    funcao(nome_do_MC);
    }
    botao2.onRollOver = function() {
    funcao(nome_do_MC2);
    }
    …e assim sucessivamente conforme o número de botões.

    Assim eu escrevia a função apenas uma vez e chamava ela tantas vezes quanto o número de botões, mudando apenas o MC que ela afetaria.
    Pelo que entendi, com AS3 terei que criar uma função para cada botão dizendo qual o MC afetado? Ou tem outra maneira de fazer como era no AS2?
    Não sei se fui claro. Me diga caso não entendeu a dúvida.
    Obrigado!

    1. Olá Geovane

      Pelo que eu entendi pra cada nome de movie ele faz um comportamento, migrando seu código para as3 vc pode fazer da seguinte forma :

      //as2
      botao.onRollOver = function() {
      funcao(nome_do_MC);
      }

      botao2.onRollOver = function() {
      funcao(nome_do_MC2);
      }

      botao3.onRollOver = function() {
      funcao(nome_do_MC3);
      }

      //as3

      botao.addEventListener(MouseEvent.MOUSE_OVER, onOver)
      botao2.addEventListener(MouseEvent.MOUSE_OVER, onOver)
      botao3.addEventListener(MouseEvent.MOUSE_OVER, onOver)

      function onOver(event:MouseEvent):void{
      funcao(event.currentTarget.name)
      }

      Nesse caso só precisa de uma função, a propriedade(event) que a função recebe tem o elemento que dispara a função nesse caso o event.currentTarget. E a propriedade name carrega o nome de instancia do elemento que sofreu a ação

  24. Olá! Ótimo tutorial!

    Tenho a seguinte dúvida – com vários botões, em AS2 eu determinava p.ex. duas funções, uma para MouseOver e outra para MouseOut e passava como parâmetro o MC que iria ser animado.
    Exemplo:
    botao.onRollOver = function() {
    funcao(nome_do_MC);
    }
    botao2.onRollOver = function() {
    funcao(nome_do_MC2);
    }
    …e assim sucessivamente conforme o número de botões.

    Assim eu escrevia a função apenas uma vez e chamava ela tantas vezes quanto o número de botões, mudando apenas o MC que ela afetaria.
    Pelo que entendi, com AS3 terei que criar uma função para cada botão dizendo qual o MC afetado? Ou tem outra maneira de fazer como era no AS2?
    Não sei se fui claro. Me diga caso não entendeu a dúvida.
    Obrigado!

    1. Olá Geovane

      Pelo que eu entendi pra cada nome de movie ele faz um comportamento, migrando seu código para as3 vc pode fazer da seguinte forma :

      //as2
      botao.onRollOver = function() {
      funcao(nome_do_MC);
      }

      botao2.onRollOver = function() {
      funcao(nome_do_MC2);
      }

      botao3.onRollOver = function() {
      funcao(nome_do_MC3);
      }

      //as3

      botao.addEventListener(MouseEvent.MOUSE_OVER, onOver)
      botao2.addEventListener(MouseEvent.MOUSE_OVER, onOver)
      botao3.addEventListener(MouseEvent.MOUSE_OVER, onOver)

      function onOver(event:MouseEvent):void{
      funcao(event.currentTarget.name)
      }

      Nesse caso só precisa de uma função, a propriedade(event) que a função recebe tem o elemento que dispara a função nesse caso o event.currentTarget. E a propriedade name carrega o nome de instancia do elemento que sofreu a ação

  25. Muito obrigado pela atenção Fellyph!
    Não entendi um detalhe: como eu passo pra “name” qual será a instância?

  26. Muito obrigado pela atenção Fellyph!
    Não entendi um detalhe: como eu passo pra “name” qual será a instância?

  27. Ah sim… entendi Fellyph!
    Muito obrigado pela atenção!

    Se puder snar mais uma dúvida, fico agradecido:
    A questão da interação entre movieclips ainda não ficou clara pra mim no AS3.
    Exemplo – tenho um swf “principal” o qual carrega um swf “menu” e outro swf “main”.
    Como controlar o “main” a partir do “menu”?
    Como controlar o “principal” a partir do “menu”
    Com AS2 2 era só _root.main.gotoAndStop(2), por exemplo, mas no AS3 vi que é necessário fazer algo como MovieClip(parent)……

  28. Ah sim… entendi Fellyph!
    Muito obrigado pela atenção!

    Se puder snar mais uma dúvida, fico agradecido:
    A questão da interação entre movieclips ainda não ficou clara pra mim no AS3.
    Exemplo – tenho um swf “principal” o qual carrega um swf “menu” e outro swf “main”.
    Como controlar o “main” a partir do “menu”?
    Como controlar o “principal” a partir do “menu”
    Com AS2 2 era só _root.main.gotoAndStop(2), por exemplo, mas no AS3 vi que é necessário fazer algo como MovieClip(parent)……

  29. Bom dia,

    Fiz uma configuração no AS2 para o botão funcionar entro de um mc, mas não consegui a recriar no AS3, poderia me ajudar.
    AS2:
    botao_teste.onRelease = function()
    {
    _root.gotoAndStop(203);
    }

    Agradeço desde já.
    Lucas

  30. Bom dia,

    Fiz uma configuração no AS2 para o botão funcionar entro de um mc, mas não consegui a recriar no AS3, poderia me ajudar.
    AS2:
    botao_teste.onRelease = function()
    {
    _root.gotoAndStop(203);
    }

    Agradeço desde já.
    Lucas

  31. Boa tarde!

    Tenho uma duvida, eu não sei se foi respondido aqui!

    Mas tenho 5 MC clicáveis na tela. bt1, bt2, bt3, bt4 e bt5.

    Gostaria de uma função que eu posso clicar nos 5 independente da ordem e depois destravar a animação do bt6 !

    1. Tem vários caminhos de fazer isso, é uma lógica além de adicionar o evento de clique. Um caminho você poderia chamar uma função que guarda a sequência correta de cliques. Outra solução vc guarda somente o próximo e de acordo com uma quantidade x de cliques ele libera o clique do sexto botão.

  32. Boa tarde!

    Tenho uma duvida, eu não sei se foi respondido aqui!

    Mas tenho 5 MC clicáveis na tela. bt1, bt2, bt3, bt4 e bt5.

    Gostaria de uma função que eu posso clicar nos 5 independente da ordem e depois destravar a animação do bt6 !

    1. Tem vários caminhos de fazer isso, é uma lógica além de adicionar o evento de clique. Um caminho você poderia chamar uma função que guarda a sequência correta de cliques. Outra solução vc guarda somente o próximo e de acordo com uma quantidade x de cliques ele libera o clique do sexto botão.

Deixe um comentário

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