Flash – Criando Símbolo de Botão

 

1. Inicie o Flash e crie um novo documento em branco;
   
2. Altere as propriedades do paco como indicado abaixo:
   1. Tamanho: 220 x 220 pixels;
      
   2. Cor: #CC3300;
3. Selecione a ferramenta Elipse (Oval);
   
4. Altere a cor do contorno para preto;
   
5. Altere a cor do preenchimento para gradiente com branco no centro e preto na borda;
   
6. Desenhe um círculo perfeito no palco (Shift);
   
7. Selecione o círculo (contorno e preenchimento);
   
8. No painel de Propriedades (Properties) altere a Altura e a Largura (“H” e “W”) para 200, o círculo deverá ficar como na figura abaixo:

9. Selecione a ferramenta Transformação de Gradiente (Gradient Transform (F)) na barra de ferramentas;
   
10. Clique no preenchimento gradiente do círculo para selecioná-lo e arraste-o para cima como mostra a figura abaixo:

11. Selecione o círculo e agrupe-o (Ctrl + G);
    
12. Selecione a ferramenta Elipse (Oval);
    
13. Altere a cor do contorno para #666666;
    
14. Altere a cor do preenchimento para gradiente com vermelho no centro e preto na borda;
    
15. Altere a Espessura (Stroke Height) da linha para 3;
    
16. Desenhe um círculo perfeito (pode ser fora do palco);
    
17. Selecione o círculo (contorno e preenchimento);
    
18. No painel de Propriedades (Properties) altere a Altura e a Largura (“H” e “W”) para 160, e a Espessura da Linha (Stroke Height) da linha para 3. O círculo deverá ficar como na figura abaixo:

19. Selecione a ferramenta Transformação de Gradiente (Gradient Transform (F)) na barra de ferramentas;
    
20. Clique no preenchimento gradiente do círculo menor para selecioná-lo e arraste-o para cima como mostra a figura abaixo:

21. Selecione o círculo e agrupe-o;
    
22. Posicione o círculo menor sobre o maior, selecione os dois e centralize-os no mesmo centro como mostra a figura abaixo:

Dica: você pode utilizar o painel de Alinhamento (Align) para isso;

23. Com os dois círculos selecionados, agrupe-os;
    
24. Selecione a ferramenta Texto (Text) na barra de ferramentas;
    
25. Altere a cor do preenchimento/fonte para #FF0000;
    
26. Fonte: Arial Black;
    
27. Tamanho: 40;
    
28. Digite a palavra Sobe;
    
29. Com o texto selecionado, agrupe-o;
    
30. Posicione o texto sobre os círculos, selecione os três objetos e centralize-os no mesmo centro;
    
31. Selecione e agrupe todos os objetos;
    
32. Com os objetos selecionados, converta-os em símbolo (Modify > Convert to Symbol... F8);
    
33. Faça as alterações indicadas abaixo na caixa de diálogo Convert to Symbol:
    1. Name: Bt_Sobe;
       
    2. Type: Button; Ok.
34. Dê um duplo-clique em cima do símbolo Bt_Sobe para entrar no modo de edição do mesmo como mostra a figura abaixo:

35. Estando no modo de edição do símbolo, insira um Quadro-Chave (Keyframe) no evento Over da linha do tempo;
    
36. Estando no evento Over, selecione o texto “Sobe” e delete-o; Obs: Se o texto não estiver selecionável, dê um duplo-clique sobre ele.
    
37. Tendo deletado o texto, desenhe um triângulo com preenchimento na cor: #FF0000 como mostra a figura abaixo:

38. Posicione o triângulo dentro do círculo com preenchimento gradiente vermelho como mostra a figura abaixo:

39. Insira um quadro-chave no quadro Down da linha do tempo;
    
40. Com o quadro Down selecionado, diminua ligeiramente o tamanho do triângulo e desloque do círculo menor (vermelho) para baixo, conforme mostra a figura abaixo:

41. Feito isso, volte para a Cena 1 (Scene 1) e teste o filme (Ctrl + enter);
    
42. Crie agora um segundo botão com o preenchimento gradiente verde, no lugar do vermelho e com o texto Desce no lugar do Sobe e com o triângulo com o preenchimento verde e a ponta voltada para baixo.