Criando um banner dropdown

 

Vamos criar um banner que aumenta de tamanho quando o mouse passar sobre ele, este recurso tem sido muito usado nos grandes portais, é importante ressaltar que ele não apenas aumenta de tamanho quando tem o mouse sobre, mas também sobrepõe uma área HTML da página.

 

1. Crie um novo arquivo com 468 pixels de largura e 240 pixels altura.

 

2. Clique em Insert/New symbol e configure como abaixo.

 

 

3. Desenhe um retângulo de 468 pixels de largura e 60 pixels de altura, no centro da página, converta este retângulo em Button. Este retângulo poderia ter texto ou ser uma imagem importada, desde que no final tudo fosse convertido em botão. Para centralizar o retângulo, selecione-o e pressione CTRL+K para abrir a caixa de alinhamento do Flash, marque as três opções mostradas abaixo.

 

 

4. Insira uma ação stop(); no primeiro frame da linha de tempo.

 

 

5. Clique no segundo frame da linha de tempo e pressione F6 para criar um quadro-chave. Insira uma ação stop(); neste quadro.

 

6. Desenhe um retângulo de 468 pixels de largura e 180 pixels de altura, converta-o em Button e posicione-o abaixo do primeiro retângulo, não pode haver nenhum espaço entre eles. A imagem deve ficar como mostrado abaixo, é muito importante que não haja espaço entre o retângulo pequeno e o retângulo grande.

 

 

7. Clique no primeiro quadro da linha de tempo de selecione o botão na área de desenho, clicando sobre ele. Certifique-se que o botão está selecionado verificando se está escrito “Button” ao lado do título da paleta “Action”.

 

 

 

8. A action acima informa ao sistema que quando o mouse estiver sobre o deve ir para o segundo quadro da linha de tempo, mostrando assim, o retângulo maior.

 

9. Clique no segundo frame da linha de tempo e selecione o retângulo pequeno, clicando sobre ele e digite o código abaixo.

 

 

10. A action acima executa duas rotinas, a primeira instrui o sistema para que retorne ao primeiro quadro se tirarmos o mouse de cima do banner. A segunda abre uma página web. A opção “_blank”, mantém a sua página aberta e a página linkada é aberta numa nova janela.

 

 

11. Selecione o retângulo grande, clicando sobre ele e digite a action abaixo. Certifique-se que você está apontado para o quadro dois.

 

12. A action acima executa três rotinas, a primeira instrui o sistema para que mantenha o frame 2 sendo exibido quando tirarmos o mouse de cima do retângulo menor. A segunda faz com que o sistema retorne ao primeiro quadro se tirarmos o mouse de cima do retângulo grande. A terceira abre uma página web.

 

13. Retorne a Scene 1 e insira o clipe de filme na parte superior do palco (x=0 e y=0).

 

 

14. Salve o arquivo com o nome banner.fla e exporte o movie com o nome banner.swf.

 

15. Abra o seu Dreamweaver e crie um novo arquivo.

 

 

16. Grave este novo arquivo com o nome de banner.htm na mesma pasta dos arquivos quer você acabou de criar no Flash.

 

 

17. Copie para este arquivo um texto com umas 30 linhas, precisamos deste texto grande para mostrar que o banner do Flash vai sobrepor. Eu uso o Microsoft Word para este tipo de coisa, peço um novo arquivo e digito “=rand(5,10)”, sem aspas e pressionando ENTER no final da linha, ele vai criar 5 parágrafos com 10 frases cada um de um texto repetitivo, mas que é excelente para encher lingüiça.

 

18. Depois de inserir o texto precisamos desenhar uma camada, o Flash vai entrar dentro da camada e assim, sobrepor o texto. Clique na seta ao lado do botão “Commom” no alto a direita do seu Dreamweaver, como mostra a figura abaixo. Selecione a opção “Layout".

 

 

19. Clique no botão “Drag Layer” da barra “Layout”.

 

 

20. Desenhe uma camada sobre o texto, na parte superior da tela.

 

 

21. Clique dentro da camada e clique no meni Insert/Media/Flash.

 

 

22. Escolha o arquivo banner.swf que você acabou de fazer no Flash.

 

 

23. Salve o arquivo e pressione F12 para visualizar o arquivo em seu navegador, você perceberá que o banner ainda não está com o fundo transparente.

 

 

24. Para resolver esta situação, volte ao Dreamweaver, selecione o banner e clique no botão “Parameters” da barra de propriedades.

 

 

25. Configure sua caixa Parameters como mostrado abaixo.

 

 

26. wmode é o modo de janela de exibição do Flash e o value “transparency” faz com que as partes sem preenchimento do nosso banner fiquem transparentes.

 

27. Salve seu arquivo e pressione F12 para ver o resultado em seu navegador.