Hoje vamos aprender a montar um botão simples que irá nos auxiliar em algum tutorial mais para frente. Como esse tutorial é bastante importante, acabei fazendo cada passo bem explicado, com figuras que mostram passo-a-passo e isso deixou o site muito pesado. Por isso estou dividindo o tutorial em pelo menos duas partes.

Então começaremos pela ferramenta retângulo (Rectangle Tool). Vamos aprender a fazer um retângulo com as bordas arredondadas.
Assim, com a ferramenta retângulo selecionada, podemos notar que no menu Options (opções) um pouco mais para baixo do menu Tools (Ferramentas) existe um botão que serve para arredondar a borda do retângulo (como indicado pela flecha azul). Selecione-o.

Ao selecioná-lo, uma janela abrirá (como na figura ao lado) e nela você poderá escolher a curvatura que deseja para seu retângulo. Como toda ferramenta, vale a pena você testar várias vezes e ver qual o número de pontos que lhe agrada mais (ou que convenha mais para seu trabalho). No caso, utilizaremos 5 pontos.

Agora, teremos então um botão como o da figura ao lado (eu escolhi o cinza, mas você poderia escolher qualquer cor para a sua animação).

Selecione todo o retângulo (tome cuidado para selecionar a linha de contorno também!) e transforme-o em um símbolo do tipo botão (Button) em Modify > Convert to Symbol ou pelo atalho F8. Preste atenção para escolher Button, como na figura ao lado! Renomei-o para botao (sem acento).

Com um clique duplo sobre o novo botão você entrará na área de edição do novo botão (da mesma forma que fizemos com o movie clip em tutoriais anteriores). Mas a linha do tempo (timeline) do símbolo botão é um pouco diferente. Ela possui apenas 4 frames (quadros) indicados pelos números:
1 – Up: é como o botão se comporta em seu estado normal;
2 – Over: é como ele se comporta quando passamos o mouse por cima dele;
3 – Down: é como ele se comporta quando clicamos nele;
4 – Hit: talvez o mais importante para evitar erros, é a área “clicável” do botão.

Agora que estamos começando a pegar o jeito de mexer com o flash, podemos começar a “apelar” mais para os atalhos, o que torna nossa vida mais fácil e nosso tempo de criação mais rápido. Com o frame Up do botão selecionado, aperte F6 três vezes. Com isso, criamos mais 3 keyframes idênticos ao do frame Up.
Lembre-se: F6 é o atalho para a criação de um keyframe, que pode ser feito clicando-se com o botão direito do mouse no frame em que se quer criá-lo e selecionando Insert Keyframe.

Crie uma nova camada e renomeie-a para texto. Renomeie a camada do retângulo para fundo (o fundo do botão).

Na camada texto, iremos colocar o texto que indicara o que o botão faz. No exemplo, coloquei botão só pra ilustrar como ficará. Caso o texto fique muito grande ou a cor não esteja do seu agrado, com o texto selecionado, abra o menu de propriedades (Window > Properties > Properties ou pelo atalho Ctrl+F3) e mude o tamanho da fonte ou sua cor.

Façamos a mesma coisa com a camada texto. Vamos criar mais três keyframes utilizando o atalho F6 (lembre-se de selecionar o frame Up da camada texto).

Faça um teste de sua animação (Ctrl+Enter) e note que o botão continua sempre da mesma forma, não mudando quando passamos o mouse por cima ou quando clicamos nele (mas o símbolo do mouse muda para uma mãozinha, indicando um botão ).

Agora, iremos mudar a cor de fundo o botão quando passamos o mouse por cima. Selecione só o fundo do botão (essa tarefa pode ser meio difícil quando estamos começando hehehehe). Com ele selecionado, abra o painel de mistura de cores (Color Mixer) em Window > Color Mixer ou Shift+F9.

Ainda com o fundo selecionado, mude a cor para outra mais escura. Note que no canto da direita existe um gradiente de cinza (no meu caso). Eu simplesmente deixei o cinza um pouco mais escuro, arrastando a flechinha preta para baixo.

r />

Note que agora o botão ficou com o fundo mais escuro no frame Over da camada fundo se compararmos com o frame Up da mesma camada.

Agora selecione o frame Over da camada texto e clique no texto. Com ele selecionado, abra o painel de propriedades (Window > Properties > Properties ou Ctrl+F3) e mude a cor da fonte.
Teste sua animação (Ctrl+Enter) e veja como seu botão fica quando o mouse passa por cima dele.

Esse é o fim da primeira parte… aguarde que logo mais eu postarei a segunda parte desse tutorial
Até mais!