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:

1
2
3
4
5
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.

1
2
3
4
5
6
7
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:

1
2
3
4
5
6
7
8
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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.

Esta entrada foi publicada em Flash, Tutoriais e marcada com a tag , . Adicione o link permanente aos seus favoritos.

24 respostas a Botões em ActionScript 3.0

  1. Marcel disse:

    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. Ph disse:

    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);
    }

  3. Inês T. disse:

    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.

  4. 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

  5. Fellyph disse:

    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.

  6. 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

  7. Vinicius Rodrigues disse:

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

  8. mauricio disse:

    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

  9. mauricio disse:

    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

  10. Fellyph disse:

    Vc está usando um button ou movieclip ?
    buttonMode é uma propriededa de sprite e movieclip.

  11. Fellyph disse:

    Dentro da função que o handle chama vc coloca
    gotoAndStop(o número do frame que vc quer) ou gotoAndPlay(…)

  12. Keit disse:

    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!

  13. Okada disse:

    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.

  14. Lisandro disse:

    aqui vc pode converter o seu as2 para as3

    http://www.5etdemi.com/convert/

  15. Davi Dorna disse:

    Explicação ficou confusa!

  16. Fellyph disse:

    Qual sua dúvida ?

  17. antonio disse:

    gostaria de saber como fazer um botão de clique duplo no as2 para ir para a proxima pagina.
    valeu!

  18. Andre Bueno disse:

    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!!!

  19. Geovane Santos disse:

    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!

  20. Fellyph disse:

    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

  21. Geovane Santos disse:

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

  22. Fellyph disse:

    se vc criar um botão no palco e colocar o nome de instância botao3 a propriedade name retornará uma string “botao3″

  23. Geovane Santos disse:

    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)……

  24. Lucas Guiot disse:

    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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">