Criando um banner transparente

 

Vamos criar neste tutorial um banner transparente feito em Flash com botão para fechar, estes banners tem sido muito usados nos últimos tempos por que eles não são 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 retângulo com cantos arredondados, para isso você deve clicar duas vezes na ferramenta Retângulo, e digitar um valor entre 10 e 20 na caixa de diálogo que irá aparecer.

 

 

3. Feito isto, clique e arraste no palco para desenhar o retângulo, 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 retângulo 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 retângulo.

 

 

8. Clique em Insert/New symbol.

 

9. Marque a opção “Button” e dê o nome de but_fechar.

 

 

10. Desenhe um círculo de 30 pixels de largura e 30 pixels de largura no centro do palco.

 

11. Escreva um “x” em cima do círculo.

 

 

12. Pressione F6 até que o quadro “Hit” da timeline do botão tenha seu quadro-chave.

 

 

13. Clique no quadro “Over” da timeline do botão e altere a cor do círculo.

 

 

14. Clique no quadro “Down” da timeline do botão e altere a cor do círculo.

 

 

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 botão da Library para o seu palco e posicione como mostrado abaixo.

 

 

19. Vamos agora criar o botão transparente para que toda animação seja clicável e assim o visitante possa acessar o site desejado através de nosso banner.

 

20. Clique em Insert/New symbol, marque a opção “Button” e dê o nome de but_transparent.

 

 

21. Já na área de edição do botão clique no quadro “Hit” da linha de tempo do botão e pressione F7 para criar um quadro chave em branco.

 

22. Desenhe um retângulo 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 botão invisível, para sobrepor o banner e fazer com que este banner tenha toda sua área clicável.

 

 

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 botão tem a cor ciano e é transparente, mas quando a animação estiver funcionando ele some, pressione CTRL+ENTER para experimentar, verifique que o botão some e que toda a sua área é clicável.

 

 

26. Vamos colocar a ação no botão que irá abrir um site que está sendo anunciado pelo nosso banner. Dê um clique no botão transparente, pressione F9 para mostrar a paleta Action e digite o código abaixo.

 

on (release)

      {

      getURL("https://juliobattisti.com.br","_blank")

      }

 

27. Crie uma nova camada e dê o nome a ela de ações.

 

 

28. Insira a action stop() no primeiro quadro desta camada.

 

Vamos fazer agora com que nosso banner desapareça quando clicarmos no botão que tem o “X”, a idéia é bem simples: vamos selecionar o quadro 2 de todas as camadas e pressionar F7 para criar um quadro chave em branco, e colocamos uma ação no botão para que quando clicado ele nos mande para este quadro que está em branco fazendo todo o banner desaparecer.

 

29. Selecione o botão com o “X” e digite a ação 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 opção “Draw Layer” e desenhe um retângulo 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 não está transparente.

 

 

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

 

41. Selecione o objeto Flash dentro da camada e clique no botão “Parameters” na paleta Properties.

 

 

42. Configure a caixa de diálogo que irá aparecer como mostrado abaixo.

 

 

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