Olá amigos!
Há pouco tempo atrás eu estava desenvolvendo a parte comercial de um portal, quando me deparei com várias dúvidas em relação aos banners expansíveis. Dúvidas estas, sobretudo, referentes às diferenças de plataformas (Windows / Linux), navegadores (IE / Mozila / Firefox) e a configuração da tela dos usuários (800x600 / 1024x768 / etc).
Bem, nesse artigo não vou abordar como desenvolver o banner em Flash propriamente dito, pois isso vocês encontrarão no artigo abaixo desenvolvido por Felipe Gomes:
http://www.imasters.com.br/artigo.php?cn=3541&cc=270
Dúvidas mais frequentes:
01. Como fazer com que o banner fique no lugar exato com as diferentes configurações de telas dos usuários?
Defina no seu html exatamente o espaço onde o banner será colocado. Você pode utilizar uma tabela para definir isso. No exemplo, estou utlizando o tamanho considerado padrão (468x60), mas que pode ser adaptado conforme o seu layout.
Nessa tabela, utilize o alinhamento Vertical "No Alto", para que o banner fique exatamente no lugar marcado, já que o alinhamento padrão ficaria no centro da célula.
Insira o seu layer dentro desse espaço. Geralmente, quando você cria um layer pelo Dreamweaver, ele aparece no canto superior esquerdo da janela. Clique no ícone referente ao layer e arraste-o para dentro do espaço que você criou.
Algumas dicas
Dê um nome ao seu div. No exemplo abaixo eu o chamei de "banner" (Isso será util mais tarde).
Apague os valores dos campos E e A. Esses valores são referentes à posição do DIV com relação ao topo e o lado esquerdo da sua janela. Sem eles, nosso DIV tomará a posição do local onde foi colocado no código, ou seja, o espaço que criamos para o banner.
Não se assuste se dentro do Dreamweaver o layer aparecer em outro ponto da tela.

Pronto, dessa forma o banner funcionará em qualquer configuração de tela. Contudo, nos navegadores como Mozilla e Firefox podem apresentar problemas, pois esses navegadores tendem a montar o site no canto da página e trazê-los ao local final assim que carregada, deixando o DIV fora do espaço programado.
Uma boa dica é reconhecer quando o navegador é diferente do Internet Explorer e fazer um pequeno resize de 1 pixel utilizando javascript.
Função:
<Script language="Javascript">
// Da um resize na pagina, para que o mozilla possa reconhecer banners expansiveis
function Resize(){
if(navigator.appName!="Microsoft Internet Explorer"){
window.moveTo(0,0);
window.resizeTo(screen.width-1,screen.height-1);
window.resizeTo(screen.width,screen.height);
}
}
</Script>
Na tag <BODY> do seu html, insira a propriedade: onLoad="Resize()"
Ex.: <BODY ONLOAD="Resize()">
02. Por que meu banner não fica com fundo transparente no Netscape, Mozilla e Firefox?
No artigo publicado pelo Felipe Gomes (link acima), ele mostra claramente para se criar o parâmetro de transparência para o Flash:
<param name="wmode" value="transparent">
Mas não esqueça de colocar a mesma propriedade dentro da tag <EMBED>, pois é nela que os navegadores como Netscape e Firefox se baseiam.
Ex.: <embed src="banner.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="250"></embed>
03. Por que os links abaixo da transparência do banner não funcionam no Netscape, Mozilla e Firefox?
Esse é um problema frequente de quem trabalha com esse tipo de banner. Uma dica interessante é alterar a área de visualização do DIV, Deixando inicialmente do tamanho de nosso banner (nesse caso, 468x60). Quando colocarmos o mouse sobre o mesmo, tirar esse limite, e quanto tirarmos o mouse, redefini-lo.
Vamos lá!
Selecione o seu DIV e preencha as áreas de corte D e X, conforme exemplo abaixo:

Com o DIV selecionado, abra a guia de Comportamentos do Dreamweaver (Shift + F3).
Em primeiro lugar defina a versão dos eventos. Siga os passos abaixo:

Agora vamos à ação propriamente dita. Clique novamente no ícone + e depois em Alterar a propriedade. Na janela que se abrirá, siga os passos a seguir:

Repare que na paleta de comportamentos, na opção eventos, estará escrito OnClick. Altere para OnMouseOver.

Ok, agora repita a operação para Alterar a propriedade, mas dessa vez vamos retornar a área visível do DIV, com as configurações abaixo:

Repita o procedimento de alterar a propriedade OnClick para OnMouseOut

É isso aí amigos, agora os links abaixo do banner expansível funcionarão em todos os navegadores.
Qualquer dúvida, crítica ou sugestão, por favor entrem em contato comigo através do e-mail bruno@eta.com.br.
Um grande abraço e até a próxima.
usuário removido
Basta adicionar o parâmetro "wmode=opaque" que tudo o que estiver abaixo do objeto será acessível.
Não precisa sujar tanto o código para alinhar o banner, utilizando web standards fica muito mais simples e sem "gambiarras" da Macromedia/Adobe.
Luiz Cláudio Costa
Olá, gostaria de parabenizar o Bruno, por está excelente matéria sobre Layer. Aproveito a aportunidade para perguntar, se existe alguma solução para os banners expansíveis em flash, que já abrem abertos (OnMouserOut), e depois fecham ficando 468x60. Neste Caso a solução da área de corte que viabilizou os links no Mozilla..., passa a não mostrar toda área do banner expandido, por estar com sua área de corte limitada em 468x60 na função OnMouserOut.
Marcelo Gomes
É por causa de artigos como este que nós webdesigners voltamos sempre e ajudamos a fazer do IMasters a ferramenta mais importante do webdesign brasileiro nos dias de hoje! MUITO OBRIGADO E PARABÉNS!
Marcelo Gomes
Olá pessoal, deu certo o sistema, consegui fazer um banner em flash, expansível, sem bloqueio de active X, 3D e transparente! Quem quiser conferir: http://www.msgdesign.com.br (clique no link do banner, embaixo da tela)
João Telmo Cabral Junior
Olá, foi sem dúvida uma ótima matéria, mas axo que deveria ter um aquivo exemplo para ser baixado para que o entendimento do mesmo possa ser maior.
Abraços
Luiz Cláudio Costa
Olá,
gostaria de saber se existe alguma solução para quando trabalhamos com super banner expansível, mas que já entra aberto e depois que se contrai para seu tamanho normal 728x90. Tenho um campo de texto para busca (form), que fica abaixo deste tipo de banner, mas quando a página é carregada e o banner é mostrado, não consigo clicar dentro da caixa para digitar nada. O layer transparente do banner do banner no seu tamanho aberto, cria uma camada sobre o campo bloqueando tudo que se tenta digitar dentro do campo!! Será que existe alguma solução??
Abraços,
Luiz
João Melo
Faz tempo que temto fazer este tipo de banner mas ñ funcionava, agora deu certinho, mas na área corte D e X deixe os valores vazios, pq se tiver uma área ex: procura ou mesmo o Menu esta poderá ser clicada, mas os campos D e X estiverem com valor ñ poderão ser clicadas.
A matéria estar super.
fausto torner
Li sua matéria no imaster e achei o artigo ótimo, mas pergunto se eu criar um random de 2 ou mais banners expansíveis , como deve ser o código para chamar os divs.Obrigado ,Fausto Torn.
Douglas Brucieri
Olá Bruno, como vai? Amigo acho que encontrei um Bug mesmo com essa função no FIREFOX. no site www.cerc21.com.br/novo/ você vai verificar que tem um banner expansivo e realmente sua função está funcionando. Só tem um porém, ele só ativa o que está abaixo do flash(div) depois que você vai com o mouse até abaixo do tamanho grande do flash.
Alex Sant Anna Silverio
A função em Java Script, funciona melhor desta forma.
<script language="javascript">
// Da um resize na pagina, para que o mozilla possa reconhecer expansiveis
function resize() {
if ((navigator.appName!="Microsoft Internet Explorer") && (screen.width == 1024) && (screen.height == 768))
{
window.moveTo(0,0);
window.resizeTo(screen.width-225,screen.height-225);
}
}
</script>
</head>
<body onload="resize()">
Ou seja, quando o usuário estiver em resolução 800*600 com seu Firefox, ele não sofre o resize, mas quando for em 1024*768 ele faz o resize ajustando a posição da LAYER na tela.
Boa Sorte!
Michelle Nastasi
o banner em flash aparece uma movimentação de posicionamento entre o ie e o mozzila ... usei tudo o ke ta falando no tutorial mas nau deu certu =/
(www.herbst.com.br)
glauce carcereri leite
Fiz um uma banner expansível, mas ele fica abrindo e fechado direto , e não funcionar quando eu passo o mouser. Fechar com eu fiz no flash:
this.bt_retraido.onRollOver =
function() {
gotoAndPlay("cena_expandido",1);
}
E na segunda cena:
this.bt_expandido.onRollOut=
function(){
gotoAndPlay("cena_retraido",1);
}
this.bt_expandido.onRelease=
function(){
getURL("http://www.easynet-rj.com.br/","_blank");
}
Onde está o erro? .obrigada glauce.
Isamara Pimentel César
Olá Bruno... Obrigada pelo tutorial, me ajudou bastante, porém o codigo para o banner não atrapalhar os links que ficam abaixo do banner expansível no Netscape, Mozilla e Firefox só funciona uma vez, depois o erro persiste e os links ficam sem acesso, inclusive aparece a borda do flash quando clicamos na área.
Já não sei mais o que fazer!!!!!!
Paulo Santos
Olá,
um cliente me pediu para instalar um template em Joomla, que esta rodando sem problemas, e agora quer um banner expansível em flash no topo.
Já tentei de tudo e nada.
Alguma dica?
Valeu
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.