Criando botão no flash

Bom galera hoje eu vou ensinar como fazer um botão no flash, com códigos simples como rollOver e rollOut para que nosso botão faça uma animaçãozinha boba e simples, o intuito desse tutorial é explicar passo a passo como fazer para se criar um botão animado com MovieClip e não com botão propriamente dito.

Então vamos aos passos ok?

1 Passo – Criando um novo arquivo
Criar um arquivo para isso basta ir em File -> Novo

Próximo passo agora é escolhermos qual tipo de Flash vamos utilizar.
bom devido a grande utilização de AS 2.0 ainda e a galera de AS 3.0 eu vou ensinar como faz nos 2.

Os exemplos e imagens serão do CS 3 e CS 4, assim ninguem fica perdido, uma vez que o CS 3 utiliza o padrão antigo das versões do flash como visual, e o CS 4 já cria um novo padrão visual.

Bom então vamos lá essa telinha aqui é de prache:

Depois de selecionar o tipo de Arquivo AS 2 ou AS 3, vamos agora para o próximo passo

2 Passo – Criando um quadrado

Crie um quadrado em sua tela com a ferramenta rect tool (R) é o quadradinho que fica na barra de ferramentas.
Clique sobre sua tela e desenhe um quadrado.

3 Passo – Modificando o status do simbolo

Selecione esse quadrado e aperte F8 ou vá em modify/modificar -> convert to a symbol/converter para simbolo

4 Passo – Convertendo Simbolo para MovieClip

Ao converter para simbolo irá aparecer essa telinha:

Selecione como está selecionado, MovieClip na drop box CS4 ou radio button CS 3, e de um nome para esse arquivo, no caso vamos chamar de botão. (Pode deixar o nome acentuado mesmo, pois por enquanto acentuação ou não, não vai fazer a menor diferença pois ainda estamos só no layout).

5 Passo – Abrindo as propriedades

Agora vamos alterar as propriedades do objeto para colocar uma instância no mesmo, lembrando que se você está procurando como usar on(release) veio ao lugar errado!
Para isso vamos ter que fazer com que a caixa de propriedades apareça, aperte ctrl + F3 para que isso ocorra.
Fazendo isso você deverá ver uma das seguintes imagens:

Como podem ver, vemos agora o campo de propriedades e o que eu quero fazer com ele??
Bom você agora vai colocar o mouse onde tem escrito <instance name> e vai digitar:  botao

Porque estou fazendo isso? o que significa instance name?
Instance name é o nome do elemento que você está colocando na tela propriamente dito, é com ele que você poderá acessar as propriedades de um elemento através do ActionScript e é através dele que você poderá fazer ações de rollOver e rollOut como estou ensinando nesse tutorial.

6 Passo – Criando camada e bloqueando

Vá em sua timeline e adicione uma nova camada (para isso não tem shortcut até onde eu sei), inserir/insert -> timeline -> layer/camada
Clique sobre a mesma e renomeie como ActionScript (não que isso vá fazer muita diferença no projeto, mas é só para diferenciar essa layer das demais) e clique no cadeado para bloquear a layer, assim você não correrá o risco de colocar imagens etc na layer de actions

7 Passo – Abrindo o Action no flash

Clique agora sobre o primeiro frame da layer Actions e abra o campo de ActionScript apertando F9 ou indo em window -> Actions

8 Passo – As ações do botão

No campo de action script vamos escrever o seguinte código (já explico para que o mesmo serve):

AS2
botao.onRollOver = function(){
trace('Roll Over');
}
botao.onRollOut = function(){
trace('Roll Out');
}

AS 3
botao.addEventListener(MouseEvent.MOUSE_OVER, over);
botao.addEventListener(MouseEvent.MOUSE_OUT, out);
function over(e:MouseEvent){
trace('Roll Over');
}
function out(e:MouseEvent){
trace('Roll Out');
}

Bom agora você vai testar o clip apertando ctrl + enter ou indo em controle/control -> testar filme/test movie
Ao testar o clip passe o mouse sobre o botão criado, você verá que uma telinha de output aparecerá escrevendo Roll Over e Roll Out.

E pronto agora você tem seu clip com ação de rollover e rollout, mas poxa vida ele não faz nada de bacana 😦 queria que ele muda-se de cor ou alguma coisa quando colocar o botão sobre ele.

Então vamos lá fazer a animação 🙂

9 Passo – A animação do botão

De um duplo click sobre o botão e você verá que agora está dentro do botão, a time line mudou e você poderá fazer sua animação
Então clique no frame 15 e aperte F6 para criar um novo keyframe, e depois clique sobre o 30 e faça a mesma coisa.
volte ao passo 6 e insira também dentro do  botão a camada Action.

No faça o mesmo procedimento na camada action 1 keyframe no frame 1 no 15 e no 30
Nos keyframe da camada action abra os actions e digite apenas:  stop();
Ou seja no keyframe 1 tem que ter o código stop() no 15 e no 30 também

Sua timeline tem que parecer com essa aqui:

Você pode ver um a bem pequeno no frame indicando que tem Actions naquele frame.

Agora vamos fazer o Motion Tween clicando com o botão direito do mouse sobre a segunda camada de botão no meio da timeline entre o 1 e o 15 e escolhendo motion tween, faça o mesmo procedimento para o 15 ao 30 ficando algo assim:

Agora clique sobre o frame 15 como indica na figura acima depois clique sobre o seu Movie clip no palco e vá em propriedades e selecione nas Color: e marque alpha e depois 50%, faça o mesmo procedimento no 1 e no 30 só que marcando alpha 100%

Agora volte ao palco principal para isso basta selecionar  a cena 1 / scene 1 ou clicar na setinha de voltar:

Clique novamente na sua camada de actions e abra o action script e digite o seguinte:
AS2
botao.onRollOver = function(){
this.gotoAndPlay(2);
}
botao.onRollOut = function(){
this.gotoAndPlay(16);
}

AS3
botao.addEventListener(MouseEvent.MOUSE_OVER, over);
botao.addEventListener(MouseEvent.MOUSE_OUT, out);
function over(e:MouseEvent){
botao.gotoAndPlay(2);
}
function out(e:MouseEvent){
botao.gotoAndPlay(16);
}

no lugar do código que você tinha anteriormente.

Parabéns se você completou todos os passos com sucesso agora você já tem um botão com ações de rollOver e rollOut, o que você precisa agora é fazer sua propria animação da maneira que você bem entender.

Abraços e até a próxima.

9 comentários sobre “Criando botão no flash

  1. Eae Berseck, olha nós ae novamente. Já que não tem um botão “contato” aqui no seu site, a pergunta não tem nada a ver com o que você escreveu, mas estou com uma dúvida. Quero ler este xml desse link http://rss.noticias.uol.com.br/ultnot/index.xml e jogar cada linha ordenada num array, para paginar, mostrando uma de cada vez. O que quero saber é simples, como extrair isso, e jogar no array, linha a linha?? Mostrar com um delay eu já sei, e ver o tamanho do xml ainda nao, mas isso acho que é mais fácil. Valew e desculpa por postar a dúvida por aqui.

  2. Berseck,
    gostaria de saber se você pode me ajudar em uma dúvida específica… eu não lembro como faz a função de Block. Estou desenvolvendo meu site que vai conter vários links. Um dos links será um pop-up, e queria lembrar a função que eu devo colocar no popup para desabilitar todos os botões, mcs, rollovers, etc do stage. Você poderia me ajudar? Eu lembro que tinha algo como useHandCursor = false
    Última coisa… você teria alguma indicação para cursos de FLASH AS2? Com certificado etc etc?
    Agradeço desde já!
    Abs

    • Para bloquear um botão ou com objeto.enable = false ou sumindo com ele da tela… o useHandCursos é só para aparecer a mãozinha.
      E quanto ao curso seria o da adobe mesmo que tem em milhares de lugares diferentes… tem que pesquisar o preço mais em conta. Não tenho nenhuma indicação para tal.

      Abraços

  3. Eu fiz na segunda cena (a primeira tem o preloader) em AS2 e não funciona, só funciona quando eu tiro a Scene 1 do preloader, alguem sabe o que fazer?

    • Caro colega, ai você pega o código e coloca no segundo FRAME, se você deixa o código do botão no primeiro frame ele n vai reconhecer o botão porque ele ainda não existe!!! Coloque o código referente ao botão no frame que o botão se encontra.

      Abraços

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s