Criando um banner transparente

Vamos criar neste tutorial um banner transparente feito em Flash com boto para fechar, estes banners tem sido muito usados nos ltimos tempos por que eles no so bloqueados por ferramentas anti pop up como SP2 do Windows XP.

1. Crie um novo arquivo no Flash com 250 pixels de largura e 120 pixels de altura.

2. Vamos agora desenhar um retngulo com cantos arredondados, para isso voc deve clicar duas vezes na ferramenta Retngulo, e digitar um valor entre 10 e 20 na caixa de dilogo que ir aparecer.

3. Feito isto, clique e arraste no palco para desenhar o retngulo, depois de desenhado modifique seu tamanho para 190 pixels de largura e 85 pixels de altura, retire o contorno e pinte da cor que quiser.

4. Posicione este retngulo em X=8 e Y=26.

5. Modifique o nome da camada para base e bloqueie a camada.

6. Crie uma nova camada e d o nome a ela de texto.

7. Escreva uma chamada qualquer em cima do retngulo.

8. Clique em Insert/New symbol.

9. Marque a opo Button e d o nome de but_fechar.

10. Desenhe um crculo de 30 pixels de largura e 30 pixels de largura no centro do palco.

11. Escreva um x em cima do crculo.

12. Pressione F6 at que o quadro Hit da timeline do boto tenha seu quadro-chave.

13. Clique no quadro Over da timeline do boto e altere a cor do crculo.

14. Clique no quadro Down da timeline do boto e altere a cor do crculo.

15. Retorne a Scene 1.

16. Pressione F11 para exibir a Library.

17. Clique na camada texto e crie uma nova camada, chame esta nova camada de but_fechar.

18. Arraste o boto da Library para o seu palco e posicione como mostrado abaixo.

19. Vamos agora criar o boto transparente para que toda animao seja clicvel e assim o visitante possa acessar o site desejado atravs de nosso banner.

20. Clique em Insert/New symbol, marque a opo Button e d o nome de but_transparent.

21. J na rea de edio do boto clique no quadro Hit da linha de tempo do boto e pressione F7 para criar um quadro chave em branco.

22. Desenhe um retngulo de qualquer cor com 190 pixels de largura e 85 pixels de altura. Como eu j mostrei em outro tutorial, o objetivo disto criar um boto invisvel, para sobrepor o banner e fazer com que este banner tenha toda sua rea clicvel.

23. Retorne a Scene 1. 24. Crie uma nova camada e nomeie-a como transparent. 25. Arraste o but_transparent da Library para o palco. Voc vai perceber que este boto tem a cor ciano e transparente, mas quando a animao estiver funcionando ele some, pressione CTRL+ENTER para experimentar, verifique que o boto some e que toda a sua rea clicvel.

26. Vamos colocar a ao no boto que ir abrir um site que est sendo anunciado pelo nosso banner. D um clique no boto transparente, pressione F9 para mostrar a paleta Action e digite o cdigo abaixo. on (release) { getURL("http://www.juliobattisti.com.br","_blank") }

27. Crie uma nova camada e d o nome a ela de aes.

28. Insira a action stop() no primeiro quadro desta camada. Vamos fazer agora com que nosso banner desaparea quando clicarmos no boto que tem o X, a idia bem simples: vamos selecionar o quadro 2 de todas as camadas e pressionar F7 para criar um quadro chave em branco, e colocamos uma ao no boto para que quando clicado ele nos mande para este quadro que est em branco fazendo todo o banner desaparecer.

29. Selecione o boto com o X e digite a ao abaixo na paleta Actions.

on (release) { gotoAndStop(2); }

30. Selecione o quadro 2 de todas as camadas e pressione F7 para criar um quadro-chave em branco. 31. Pressione CTRL+ENTER para experimentar. 32. Salve o arquivo com o nome de banner_trans.fla e exporte o movie com o nome de banner_trans.swf. 33. Feche o Flash e abra o Dreamweaver.

34. Crie um novo arquivo no Dreamweaver e digite umas 20 linhas de texto.

35. Vamos desenhar uma layer sobre o texto para isto precisamos exibir a aba Layout, siga os passos abaixo.

36. Selecione a opo Draw Layer e desenhe um retngulo sobre o texto.

37. Salve o arquivo como banner.htm.

38. Clique dentro da camada que voc acabou de desenhar e clique em Insert/Media/Flash para inserir o arquivo banner_trans.swf.

39. salve de novo o arquivo e pressione F12 para visualizar no Internet Explorer, voc vai notar que o banner ainda no est transparente.

40. Volte para o Dreamweaver para deixarmos o banner transparente.

41. Selecione o objeto Flash dentro da camada e clique no boto Parameters na paleta Properties.

42. Configure a caixa de dilogo que ir aparecer como mostrado abaixo.

43. Salve o arquivo e visualize-o de novo no Internet Explorer.