Criando uma barra de botões Flash para um site HTML

 

Vamos criar neste tutorial uma barra de botões no Flash para ser inserida num arquivo HTM pelo Dreamweaver, usando IFRAMEs.

 

Criando a interface da página no Dreamweaver

 

1. Abra o Dreamweaver e crie um novo arquivo HTML.

 

2. Salve este arquivo com o nome de modelo.htm.

 

3. Clique no botão “Page Properties” da paleta Properties. E altere o Top margin e o Left margin para 0 (zero).

 

 

4. Clique no menu Insert/Table e crie uma tabela como mostrado abaixo.

 

 

5. Dê um clique na primeira linha da tabela e modifique sua altura para 60.

 

 

6. Modifique a altura da segunda linha para 20 e da terceira linha para 340.

 

7. Clique na terceira linha da tabela.

 

8. Acesse o código HTML clicando no botão “Code” como mostrado na figura abaixo.

 

 

9. Apague a tag de espaço ( ) somente desta célula.

 

 

10. Digite o código IFRAME entre as tags <td height=”340”> e </td>.

 

<iframe name=conteudo src=principal.htm border=0 frameborder=no width=760 height=340></iframe>

 

11. Salve o arquivo com o nome de index.htm.

 

Criando a barra de botões no Flash

 

Para criar a barra de botões no Flash, precisamos de um arquivo com a largura e a altura da 2ª célula da tabela, ou seja, 760 pixels de largura e 20 pixels de altura.

 

Nossa barra vai ter 5 botoes, para calcular o tamanho deles, devemos dividir a largura total do arquivo (760) pela quantidade de botões (5). Portanto cada botão terá 152 pixels de largura.

 

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

 

2. Clique no menu Insert/New Symbol, escolha a opção Button, dê o nome de but_empresa e clique em OK.

 

 

3. Desenhe no centro da página um retângulo de 152 pixels de largura e 20 pixels de altura e retire seu contorno.

 

4. Escreva em cima deste botão a palavra “Empresa”, como se trata de uma barra horizontal, esta palavra deve estar centralizada no botão.

 

 

5. Pressione F6 3 vezes para repetir o botão até o quadro HIT da linha de tempo do botão.

 

6. Clique no quadro OVER da linha de tempo do botão e altere as cores do retângulo e/ou do texto.

 

7. Clique no quadro DOWN da linha de tempo do botão e altere as cores do retângulo e/ou do texto.

 

8. Retorne a Scene 1

 

 

9. Pressione F11 para mostrar a Library e arraste o but_empresa para o palco. Posicione-o à esquerda do palco.

 

10. Duplique este botão quatro vezes para criar: “Endereço”, “Profissionais”, “Serviços” e “Convênios”. Para duplicar observe a imagem abaixo.

 

 

11. Na caixa de diálogo que irá aparecer, dê o novo nome para o botão.

 

 

12. Ao terminar a edição dos botões distribua-os na página como mostrado abaixo.

 

 

13. Clique no botão “Empresa” e digite a action abaixo:

 

on (release)

      {

      getURL("empresa.htm","conteudo")

      }

 

Onde “empresa.htm” é o nome do arquivo a ser aberto e “conteudo” é o nome do IFRAME onde o arquivo deve aparecer.

 

14. No botão “Endereço”:

 

on (release)

      {

      getURL("endereco.htm","conteudo")

      }

 

15. No botão “Profissionais”:

 

on (release)

      {

      getURL("profissionais.htm","conteudo")

      }

 

16. No botão “Serviços”:

 

on (release)

      {

      getURL("servicos.htm","conteudo")

      }

 

17. No botão “Convênios”:

 

on (release)

      {

      getURL("convenios.htm","conteudo")

      }

 

Obs.: a palavra “conteúdo” em cada uma das ações, é o name do iframe que acabamos de digitar no Dreamweaver.

 

18. Salve o arquivo com o nome barra.fla e exporte o filme como barra.swf.

 

Finalizando o trabalho no Dreamweaver

 

1. Para ver o trabalho funcionando perfeitamente, precisamos dos arquivos que aparecerão quando clicarmos nos links correspondentes.

 

2. Crie um novo arquivo no Dreamweaver, escreva em seu conteúdo: “Este é o arquivo empresa” e salve como empresa.htm.

 

3. Crie um novo arquivo no Dreamweaver, escreva em seu conteúdo: “Este é o arquivo endereço” e salve como endereco.htm.

 

4. Crie um novo arquivo no Dreamweaver, escreva em seu conteúdo: “Este é o arquivo profissionais” e salve como profissionais.htm.

 

5. Crie um novo arquivo no Dreamweaver, escreva em seu conteúdo: “Este é o arquivo serviços” e salve como servicos.htm.

 

6. Crie um novo arquivo no Dreamweaver, escreva em seu conteúdo: “Este é o arquivo convênios” e salve como convenios.htm.

 

7. Feche estes arquivos que você acabou de criar e abra o arquivo index.htm.

 

8. Clique na primeira linha da tabela e escreva:

 

Central Média Carioca

Sua clinica em Jacarepaguá

 

9. Formate como quiser e modifique a cor de fundo desta célula.

 

 

10. Clique na segunda linha da tabela e selecione o menu, Insert/Media/Flash.

 

 

11. Escolha o arquivo barra.swf e clique em OK.

 

 

12. Salve o arquivo.

 

13. Pressione F12 para visualiza-lo no browser.

 

Experimente os links