LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Flash

Feed da seção Flash

Newsletter de Flash

Patrocínio:

Segunda-feira, 24/04/2006 - 11:41 - Por Bruno do Val Benes
Seções relacionadas:

Banner expansíveis - Dicas úteis

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.

Todos os artigos de Bruno do Val Benes

14 comentários publicados

  • 1. Para habilitar links abaixo da DIV

    Terça-feira, 25/04/2006, por 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.

    Responder comentário

  • 2. Banners Abertos

    Segunda-feira, 15/05/2006, por 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.

    Responder comentário

  • 3. Falando francamente...

    Segunda-feira, 07/08/2006, por 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!

    Responder comentário

  • 4. Deu tudo certinho e além!

    Quarta-feira, 09/08/2006, por 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)

    Responder comentário

  • 5. Exemplo

    Segunda-feira, 14/08/2006, por 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

    Responder comentário

  • 6. Super Banner

    Sexta-feira, 15/09/2006, por 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

    Responder comentário

  • 7. Uma peguena correção

    Sexta-feira, 27/10/2006, por 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.

    Responder comentário

  • 8. banner expansível

    Quarta-feira, 21/02/2007, por 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.

    Responder comentário

  • 9. Ainda tem um pequeno BUG.

    Sexta-feira, 16/03/2007, por 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.

    Responder comentário

  • 10. Continuação...

    Sexta-feira, 16/03/2007, por Douglas Brucieri

    Como podemos resolver isso?

    Responder comentário

  • 11. Função para o Mozzila / Firefox

    Terça-feira, 20/03/2007, por 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!

    Responder comentário

  • 12. pekeno probleminha

    Terça-feira, 30/10/2007, por 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)

    Responder comentário

  • 13. banner expansível

    Quarta-feira, 11/06/2008, por 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.

    Responder comentário

  • 14. Só funciona uma vez!!!

    Sexta-feira, 27/02/2009, por 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!!!!!!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Bruno do Val Benes é formando em relações internacionais na Universidade do Centro de Estudos Unificado de Brasília Brasília e em Marketing na Unieuro. Programador avançado em ASP (Ambiente Windows) e em PHP (Ambiente Linux), programador intermediário em ActionScript (Flash Dinâmico) e possui conhecimento intermediário/Avançado em JavaScript. Atua como webmaster do Jornal de Brasília.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.