Criando botões

 

Objetivos:

 

Ensinar a criar botões e aplicar algumas actions a eles.

 

Autor: Carlos Vitor de Castro

 

O botão é um tipo de símbolo usado para incorporar interatividade aos documentos. O botão tem uma linha de tempo especial, que contém três estados: Up, Over e Down. O estado Up define a aparência normal do botão, o Over é o estado do botão quando o mouse está sobre ele. O Down determina a aparência do botão quando é clicado. Há ainda o indicador Hit que define a área clicável do botão.

 

Um lembrete que vale para todos os programas gráficos: se você for fazer uma barra de botões vertical, devemos alinhar o texto do botão à esquerda, se for fazer uma barra de botões horizontal, devemos alinhar os botões ao centro.

 

Criando um botão simples

 

1. Crie um novo arquivo com 550 pixels de largura e 400 pixels de altura.

 

2. Clique no menu Insert/New Symbol, escolha Button e clique OK.

 

 

3. Observe que a linha de tempo de um botão é diferente das linhas de tempo normais.

 

 

4. Desenhe um retângulo de 150 pixels de largura por 20 de altura e pinte-o da cor que quiser.

 

5. Escreva sobre este botão a palavra “Produtos”.

 

6. Pressione F6 e observe a linha de tempo, nós repetimos a aparência do botão em seu segundo estado o “Over”.

 

7. Modifique a cor do retângulo e do texto.

 

8. Pressione F6 novamente. Agora a aparência de “Over” está presente também em “Down”.

 

9. Modifique a cor do retângulo e do texto.

 

10. Pressione F6 novamente para o botão estar presente na área “Hit”, mais tarde veremos a utilidade desta área.

 

11. Retorne a cena principal.

 

12. Pressione F11 para exibir a biblioteca e crie uma instância do botão no palco.

 

13. Pressione CTRL ENTER e experimente seu botão, passe o mouse sobre e clique.

 

Preciso criar outros botões a partir deste.

 

Os botões de um mesmo menu devem ser padronizados, cores, fontes, formatos, etc. Sendo assim todos os outros botões deve ter a mesma aparência, não precisamos repetir todo o processo, devemos duplicar o botão a partir da biblioteca e alterar o seu texto em todos os estados do botão.

 

1. Pressione F11 para mostrar a biblioteca e clique com o botão direito do mouse sobre o nome do botão que você acabou de criar.

 

 

2. Escolha Duplicate e clique em OK.

 

3. Clique duas vezes sobre a visualização do botão duplicado na biblioteca.

 

4. Entramos no modo de edição do botão, altere o texto do botão para “História” nos três estados do botão e retorne a cena principal, não use copiar/colar, por que se você tiver colocado cores diferentes para cada estado do botão, eles ficarão com a cor do estado Up.

 

5. Crie uma instância deste botão no palco, e experimente de novo seu filme.

 

Desenhando botões irregulares

 

Temos de ter cuidado com botões não convencionais porque o botão pode ser tão “artístico” que o visitante pode não entender aquilo como botão e ai sua navegação fica prejudicada.

 

Imagine um botão com a aparência abaixo.

 

 

Podemos fazer com que esta área branca no meio do botão seja clicável com auxilio da área “Hit” da linha de tempo do botão.

 

1. Clique no menu Insert/New Symbol, marque Button e clique OK.

 

2. Desenhe uma forma como a mostrada acima.

 

3. Pressione F6 até a área “Hit”.

 

4. Desenhe sobre a forma uma elipse que cubra toda sua área.

 

 

5. Deste modo definimos que toda a área coberta pela elipse preta é útil para clicar.

 

Botões animados

 

Se precisarmos de botões que façam mais do que trocar de cor, podemos usar clipes de filme nos estados do botão que quisermos modificar, no exemplo abaixo vamos criar um botão que com uma estrelinha no lado esquerdo, quando o mouse passar sobre o botão a estrelinha vai girar.

 

1. Crie um novo arquivo com 300 pixels de largura por 300 pixels de altura.

 

2. Clique no menu Insert/New Symbol, escolha Movie clipe, depois OK.

 

3. Desenhe uma estrela estilizada de 25 pixels de largura por 25 pixels de altura.

 

 

4. Converta esta estrela em símbolo gráfico.

 

5. Clique no quadro 10 da linha de tempo e pressione para criar um quadro-chave.

 

6. Crie uma interpolação de movimento sem mover a estrela.

 

7. No inspetor de propriedades, marque CW na opção Rotate e escreva o número 3 para Times.

 

 

8. Retorne a cena principal.

 

9. Clique no menu Insert/New Symbol, marque Button e clique em OK.

 

10. Desenhe um retângulo com 160 pixels de largura e 30 pixels de altura (tem de ser mais alto que a estrela).

 

11. Como a estrela só vai girar quando o mouse estiver sobre o botão, devemos colocar na área Up a estrela que é símbolo gráfico, abra a biblioteca e observe a próxima figura para não ter dúvidas.

 

 

12. Posicione a estrela no lado esquerdo do retângulo como mostra a próxima figura.

 

 

13. Mantenha a estrela selecionada e anote o posicionamento X e Y para podermos colocar a estrela clipe de filme na mesma posição daqui a pouco.

 

 

14. Pressione F6 e na área Over apague a estrela que é símbolo gráfico e insira no lugar a estrela clipe de filme, posicione no mesmo local.

 

15. Pressione F6 mais duas vezes e retorne a cena principal.

 

16. Insira o botão no palco e teste seu filme.

 

Botões com som

 

É muito simples inserir um som em botões do Flash, no exemplo prático abaixo vamos inserir um som no estado Over e no estado Down, para que um som seja executado quando o mouse passar sobre o botão e quando o botão for clicado.

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura e 250 de altura.

 

2. Clique no menu Insert/New Symbol, selecione a opção Button e OK.

 

3. Desenhe um retângulo com 130 pixels de largura e 20 pixels de altura no centro do palco.

 

4. Digite uma palavra qualquer em cima do botão.

 

5. Pressione F6 três vezes.

 

6. Clique no estado Over e modifique a cor do texto.

 

7. Ainda no estado Over acesse o menu File/Import/Import to Library.

 

8. Importe dois arquivos .wav para sua biblioteca e pressione F11 para exibi-la.

 

 

9. Clique em um dos sons na biblioteca e arraste-o para o palco (ainda no estado Over).

 

10. Selecione o estado Down e arraste o outro som para o palco.

 

11. Retorne a cena principal, insira o botão nesta cena e teste-o.

 

Criando um banner clicável

 

Vamos criar um banner que, quando clicado abre outra página.

 

1. Crie um novo arquivo no Flash com 468 de largura e 60 de altura.

 

2. Escolha um site que você queira anunciar no seu site e crie uma animação.

 

 

3. Para fazer com que o banner possa ser clicado e abrir outro site devemos criar um botão invísivel e posicionar este botão em cima do banner. Temos de fazer isto porque queremos que o visitante clique em cima do banner para abrir outro site e só um botão aceita o evento on release.

 

4. Clique em Inserir/Novo símbolo/Botão.

 

5. Não desenhe nada em “Para cima”, clique em “Área” e pressione F7 para criar um quadro chave.

 

 

6. Retorne a Scene 1 e abra a biblioteca, pressionando F11.

 

7. Crie uma nova camada e posicione-a acima das outras.

 

 

8. Clique no quadro 1 da linha de tempo e arraste o botão para o palco. Este botão com alfa de 0 fica na cor azul transparente somente em modo de edição quando pressionamos CTRL ENTER não vemos mais o botão e o ponteiro do mouse se transforma naquela “mãozinha” caracteística dos botões.

 

 

Obs.: temos de posicionar o botão invisível exatamente sobre o banner (x=0 y=0), eu capturei a imagem do botão deslocado para cima e esquerda, para que meus possíveis leitores percebam a cor original e a cor do botão quando sobre o banner.

 

9. Selecione o botão e insira a ação abaixo para abrir uma página no formato normal.