Desenhando um site Flash no seu programa gráfico

 

Não precisamos ficar restritos às ferramentas de desenho do Flash, para deixar nossa página com um visual mais atraente, podemos criar, interfaces, background e botões em um programa gráfico como o Fireworks ou o velho e bom Photoshop, e depois animar estas imagens no Flash.

 

Para este exercício vamos criar o background do site, uma barra de titulo e os botões no Photoshop e depois montar e animar o site no Flash.

 

1ª Parte – Background

 

1. Crie no Photoshop um novo arquivo com 760 píxels de largura e 420 pixels de altura.

 

 

2. Depois de criar este novo arquivo, abra uma imagem qualquer para ser usada no composição do background. Esta imagem deve ter no mínimo o mesmo tamanho do novo arquivo criado a pouco.

 

3. Selecione toda a imagem (CTRL + A) e copie para a área de transferência (CTRL + C).

 

4. Feche a imagem.

 

5. Alterne para o arquivo em branco e selecione a ferramenta Gradiente.

 

 

6. Após selecionar a ferramenta Gradient, seleicone a ferramenta Quick mask.

 

 

7. Clique agora no canto inferior esquerdo do documento em branco e arraste até o centro da página.

 

8. Clique na ferramenta Standart mode.

 

 

9. Inverta a seleção e clique em Edit/Paste Into.

 

10. Você terá algo assim:

 

 

11. Use o comando Save for web do menu File para exportar o arquivo no formato JPEG. Dê o nome de fundo.jpg.

 

2ª Parte – Criando a barra de título

 

1. Vamos fazer a barra de titulo em outro arquivo para termos mais mobilidade para a animação do site.

 

2. Crie no Photoshop, um novo arquivo com 760 pixels de largura e 80 pixels de altura.

 

3. Crie uma imagem como mostrado abaixo, ou use sua criatividade para montar sua própria barra de título.

 

 

3ª Parte – Criando as imagens dos botões

 

1. O botão Flash tem três comportamentos: UP, OVER, e DOWN, vamos criar um fundo para cada estado e no Flash colocar os textos de cada um dos botões de nossa simulação de site.

 

2. Crie no Photoshop um novo arquivo com 130 pixels de largura e 15 pixels de altura.

 

3. Crie uma nova Layer.

 

 

4. Escolha uma cor para seu botão e preencha com a cor desejada, pressionando ALT+BACKSPACE.

 

5. Clique no menu Layer/Layer Style/Bevel and Emboss e altere suas configurações como mostrado abaixo.

 

 

6. Use o comando Save for Web do menu File para exportar este arquivo com o nome de fundo1.jpg.

 

7. Altere a cor de primeiro plano do seu Photoshop e pressione ALT+BACkSPACE para mudar a cor de fundo de seu botão.

 

8. Para este exemplo estou apenas trocando as cores do botão, mas, é claro, não há limite para o que você e sua imaginação podem fazer com o Photoshop.

 

9. Use de novo o Save for web para exportar este arquivo com o nome de fundo2.jpg.

 

10. Modifique novamente a cor e use o Save for web para exportar o arquivo com o nome de fundo3.jpg.

 

Encerrado o trabalho no Photoshop, abra seu Flash.

 

Vamos criar um fade (efeito de transição) para as imagens do background e do topo, o site quando carregado, mostrará uma tela em branco, o background aparecerá gradativamente, e depois disto o topo aparece também gradativamente, e por fim, os botões, uma a um aparecerão e terminarão a composição do site.

 

1. Abra seu Flash e crie um novo arquivo com 760 pixels de largura e 420 pixels de altura.

 

2. Crie mais três camadas e nomeie-as como na figura abaixo.

 

 

3. Clique em Insert/New Symbol, marque a opção Button e clique em OK.

 

4. Importe a imagem fundo1.jpg e posicione-a em X=0 e Y=0.

 

5. ATENÇÃO: pelo fato de termos numerado o nome dos arquivos de imagem, o Flash irá perguntar se você quer criar uma seqüência de imagens, a resposta é NÃO.

 

 

6. Clique no quadro OVER da linha de tempo do botão e pressione F7 para criar um quadro chave em branco.

 

 

7. Importe para o palco a figura fundo2.jpg e posicione-a em X=0 e Y=-0.

 

8. Clique no quadro DOWN da linha de tempo do botão e pressione F7 para criar um quadro-chave em branco.

 

9. Importe a imagem fundo3.jpg e posicione-a em X=0 e Y=0.

 

10. Pressione agora F6 para repetir a imagem de DOWN em HIT, para que tenhamos a área clicável do botão.

 

11. Clique no quadro UP da linha de tempo do botão e escreva a palavra “Produtos” em cima do retângulo, use fundo tamanho 10 no máximo.

 

12. Selecione este texto com a ferramenta Ponteiro e pressione CTRL+C.

 

13. Clique no quadro OVER da linha de tempo do botão e pressione CTRL+SHIFT+V para colar no mesmo local, repita o processo para a opção DOWN, não há necessidade de se colar o texto na área HIT.

 

14. Retorne a Scene 1

 

 

15. Clique no primeiro quadro da camada Fundo e importe a imagem fundo.jpg (o background do site) para o palco.

 

16. Posicione a imagem em X=0 e Y=0.

 

17. Converta a imagem para símbolo gráfico.

 

18. Modifique seu Alpha para 0%.

 

 

19. Marque o quadro 10 de todas as camadas e pressione F6.

 

20. Selecione a imagem de fundo e modifique seu Alpha para 100%.

 

21. Insira um Motion Twen entre o quadro 1 e o quadro 10 da camada fundo.

 

22. Clique no quadro 10 da camada Topo e pressione F7 para criar um quadro chave em branco.

 

23. Importe para o palco a imagem topo.jpg e posicione-a em X=0 e Y=0.

 

24. Converta a imagem para símbolo gráfico e modifique seu Alpha para 0%.

 

25. Marque o quadro 20 de todas as camadas e pressione F6.

 

26. Selecione a imagem topo.jpg e modifique seu Alpha para 100%.

 

27. Insira um Motions Twen entre o quadro 10 e o quadro 20 da camada topo.

 

28. Até o momento a linha de tempo está com este aspecto.

 

 

29. Marque o quadro 25 de todas as camadas e pressione F6.

 

30. Clique no quadro 25 da camada botoes e traga da biblioteca o botão criado a pouco. Posicione como mostrado abaixo.

 

 

31. Marque o quadro 30 de todas as camadas.

 

32. Clique no quadro 30 da camada botoes, pressione F6 e puxe da biblioteca o mesmo botão produtos (vamos repetir o mesmo botão para dar menos trabalho). Posicione este botão abaixo do primeiro. Sempre na camada botoes.

 

33. Marque o quadro 35 de todas as camadas, pressione F6 e puxe novamente o botão para o palco, posicione este botão abaixo do segundo.

 

34. Marque o quadro 40 de todas as camadas, pressione F6 e puxe de novo o botão para o palco, posicione-o abaixo do último botão.

 

35. Marque o quadro 45 de todas as camadas, pressione F6 e puxe pela ultima vez o botão para o palco.

 

36. Clique no quadro 45 da camada acoes e insira uma action stop(); para fazer a animação parar.

 

37. Teste sua aplicação.

 

 

OBS.: Se você tiver algum tipo de problema em sua linha de tempo, como a animação do fundo parar de funcionar por exemplo, verifique se os botões que você inseriu estão de fato, na camada botoes, talvez você tenha colocado os botões na camada fundo.