Flash e CSS: Banner Flutuante

Ver post no novo domínio: http://blog.rogeriolino.com/2007/02/04/flash-banner-flutuante/

Muitos sites, portais, adotaram o banner flutuante, aquele no qual ao você passar o mouse por cima ele “cresce” pela página e mostra os detalhes da propaganda, promoções, etc.

A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.

Então chegamos a conclusão que é só deixar o filme com o fundo transparente e colocá-lo numa div com position absolute? Certo.

Primeiramente vamos ao SWF, no Flash crie um novo documento. Nesse exemplo eu criei um de tamanho 468×280.

No primeiro frame coloque a action stop() para o filme não começar sozinho.

Desenhei um retângulo que cobre todo o palco na horizontal e com altura de 60 pixels. Dupliquei ele (copia e cola) e apertei o F8 para transformá-lo em um MovieClip. Ele vai ser o nosso botão para quando passar o mouse dar o play() no filme.

Instanciei de btn e apliquei o alpha para 0%, para deixar ele transparente. E adicionei no primeiro frame a seguinte action:

btn.onRollOver = function() {
_root.gotoAndPlay(2);
}

Com essa action definimos que ao passar o mouse sobre o botão (btn) o filme irá para seguir a partir do segundo frame.

E no frame 2 em diante fiz uma animação simple para dar impressão do fundo estar crescendo para baixo. No último frame da animação também adicionei a action stop(); para o filme não voltar para o primeiro frame.

Também temos que colocar uma action para ao tirar o mouse (rolar fora) do botão a animação ir e parar no primeiro frame. E também uma para quando clicar. Essa action pode ser colocada no primeiro frame também.

btn.onRollOut = function() {
_root.gotoAndStop(1);
}

btn.onRelease = function() {
getURL(“https://rogeriolino.wordpress.com/”, “_blank”);
}

Na primeira faz com que ao tirar o mouse de cima do botão volte para o primeiro frame mas não continua o filme (stop). Na segunda tem a função getURL() que funciona como a tag <a> no html, seus parâmetros são: página/endereço e alvo/target (_blank = nova página / _self = mesma página / _parent = pai do frame).

Com a nossa animação pronta vamos ao HTML:

Vamos colocar o SWF dentro de uma div chamada banner:

<div id=”banner“>
<object type=”application/x-shockwave-flash” data=”banner.swf” width=”480″ height=”280″>
<param name=”movie” value=”banner.swf” />
<param name=”allowScriptAcess” value=”sameDomain” />
<param name=”wmode” value=”transparent” />
<param name=”quality” value=”best” />
</object>
</div>

E o nosso CSS:

#banner {
margin-left: 250px;
_margin-left: 10px;
padding: 20px;
position: absolute;
}

O hack na margin é por causa do IE.

E pronto, já podemos ver nossa propaganda flutuante funcionando. Download do exemplo.

38 thoughts on “Flash e CSS: Banner Flutuante

  1. Carlos

    Obrigado! Eu ja tinha vasculhado a Internet e não tinha achado nada sobre esse CSS + FLASH (Banner Flutuante). Você(s) salvaram minha vida!

    Obrigado mesmo, valeu!

    Responder
  2. Navarro

    Ola Rogerio! Prazer|

    Eu não entendo nada de Flash. Fiquei interessado no banner flutuante porem, não estou conseguindo trabalhar com os arquivos.

    1) plano de fundo #778899
    2) no lugar de: , gostaria de colocar
    e logo abaixo;
    3) Ao clicar e descer deverás aparecer algumas frases como exemplo: AEROSOL NÃO USA CFC. POR ISSO NÃO AGRIDE A CAMADA DE OZÔNIO…….

    Obrigado.

    Responder
  3. Marcos

    Olá rogério, kra muito legal mas tive um problema kra quando fui salvar meu arquivo HTM ,ou seja, o que coloquei o código abaixo:

    O meu dreamweaver dava um erro na hora de salvar o arquivo troquei até todas as aspas ” ” do script acima e nada.
    A outra parte que vai para dentro do CSS deu blz mais a do HTM deu problema. O códgio acima tem algumas restrinções? tipo javascript só rola servidor! – Mesmo eu não conseguindo fazer funcionar tá show de bola kra a matéria.

    Valeu, brother!

    Responder
  4. Rogério Alencar Lino Filho Post author

    Um problema que tem no estilo que estou usando nesse blog é que ele converte as aspas em um caracter que também seria uma aspa, mas não na tabela ASCII.

    Realmente tem que trocar todas. O que pode estar acontecendo é que você deve ter esquecido de alguma, passado despercebida.

    Javascript é Client-Side, basta ter um browser com suporte (hoje qualquer um tem) que irá funcionar. Mas só lembrando que este post se refere a Flash e CSS, não tem Javascript e sim ActionScript. Talvez está aí o erro.

    Responder
  5. ewerton

    ola Rogerio parabéns pela materia porém quando fui passar e transferir pra asp usando o msm css e o msm id pra ele o banner fica por cima do conteudo teria como me ajudar com esse problema…pois to querendo que quando alguem passe o mouse a publicidade assuma po cima do conteudo que ne vc fez.
    obrigado,
    parabéns pelo artigo

    Responder
  6. Ewerton

    ola Rogerio estou postando aki de novo pois achei bastante interessante a janela que abre na hora que passa o mouse vc tem algum tutorial ai que possa posta ou algum link ensinando

    desde de ja agradeço..
    vlw..

    Responder
  7. Junior

    show d bola esse artigo … só q eu tnhu uma duvida e c poderes m ajudar é o seguinte eu criei um fly banner só q qandu eu coloco ele na frente do texto eu ñ consigo mexer no texto q ta embaixo é como o banner fica na frente msmo dpois d ter terminado o a animacao ele some so q o flash fica ali … sabs algum codigo q faz com q eu tire qandu acabar a fly banner? meu e-mail e junior.gotuzzo@hotmail.com… abraços

    Responder
  8. Guilerme

    Olá Rogério,

    Sou fã de seu blog, mas nesse caso os links que estiverem abaixo da div não funcionaram em alguns navegadores, precisa fazer uma função que mude o tamanaho da div quando estiver mouseover.

    Abs, GUilherme

    Responder
  9. Micheli

    olá
    e como fazer com que o banner não bloqueie o conteúdo do site no firefox?
    Mesmo quando está invisível, o firefox marca aquela área do flash e os links do site q estão embaixo dele ficam inacessíveis…

    Responder
  10. Bruno

    Uso o Firefox 3.0.1, o Netscape 9 e o Explorer 6.0, costumo testar o meu site nesses tres navegadore por causa da incmpatibilidade deles em certos aspectos e aqui o exmplo dado não teve alteração em nenhum dos tres talvez vc esteja usando alguma versão anterior desses navegadores, Aproveitando se alguem souber como fazer aquelas pop up em div que segue a pagina quando o usuario desce me manda um e-mail violonistaromao@hotmail.com obrigado

    Responder
  11. Douglas Prado

    parabéns pelo tutorial muito util e funcionou direitinho, só tem um pequeno problema:
    tente selecionar o texto. ele acaba selecionando a area do objeto flash, aconteceu isso principalmente no INTERNET EXPLORER 6 (sempre ele), no FIREFOX 3 tambem aconteceu.

    Responder
  12. igor

    pelo meu ver ficou com erro pois o conteudo do flash sobrepoem o da div abaixo, exemplo se voce tiver um link na priemira linha ele fica impossivel de ser clicado…

    Responder
  13. erik

    Bom dia…o Banner ficou ótimo, mas deu um pequeno problema no meu…
    eu tenho 2 banners na mesma página e quando o principal abre ele fica por baixo do banner menos importante…
    não consigo inverter para que o banner principal sempre apareça por completo, alguém pode me ajudar?

    Responder
  14. Carlos Ferreira

    Achei muito interessante e bastante clara suas orientações. Estou construindo um site para minha esposa e não sou programador, mas, pesquiso muito e COPIO muito. Uso o construtor de sites da uol, mas, já é tempo de preparar algo mais personalizado. Esta aula, definitivamente vai ajudar muito. Obrigado.

    Responder
  15. Rômulo

    Legal esse tutorial, mas o problema é o seguinte….
    A área do flash que fica transparent, fica por cima de textos e acaba tornando o texto morto… (não da pra selecionar).
    Não sei se é por causa do flash ou por causa da div.
    Cliquem com o botão direito do mouse na área invisivel do banner…. um pouco mais para baixo daonde o banner desce.

    Alguem sabe como arrumar??

    Responder
  16. Ton

    Boa tarde Rogério, faço curso Técnico de TI e estou desenvolvendo um site em HTML e JSP, mais estou utilizando um templaste pronto CSS. No templaste tinha uma imagem e no lugar tentei colocar um banner (123-banner_com_1433378.swf), mas não deu certo.

    #headerpic
    {
    position: relative;
    height: 109px;
    background-image: url(‘images/123-banner_com_1433378.swf’) no-repeat top left; /* #fff url(‘images/hdrpic.jpg’) no-repeat top left*/
    margin-bottom: 2px;
    }

    Você pode me explicar como ultilizar. Desde já agradeço.

    Responder
  17. Ton

    Bom dia Rogério obrigado pelo retorno. Dei uma olhada no seu exemplo de como colocar o banner flash swf usando o tag object, coloquei mas quando salvo dar erro, pra usar esse (tag object) devo fazer alguma configuração no Eclipse ou estou errado. Na minha pagina eu tenho uma imagem e queria colocar esse banner.
    Ai está o codigo onde fica a imagem que está lá no default.

    #headerpic
    {
    position: relative;
    height: 109px;
    background: url(‘images/imagem01.gif’) no-repeat top center; margin-bottom: -30px;
    }
    Desde já agradeço, Ton Sodré.

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s