08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!

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(”http://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 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:

wmode” value=”transparent” />

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 banner pronto:
Clique aqui e baixe

Fonte: http://rogeriolino.wordpress.com/

Muito bom !! Era isso que eu precisava !!!
Vlew !!!!!

lol

Procurei essas informações no google por horas !!
finalmente achei, muito bom.

Obrigado

Otimo post. Estava procurando algo assim a algum tempo. Muito bom mesmo. Obrigado pela ajuda.

Tava procurando isso mesmo..

vou colocar pra funcionar

Your search term

Mto bom...

ora está aqui uma ideia muito boa, parabéns.

ok

muito bom amigo

interessante demais, vou baixar o banner.

legal

show de bola! vou testar no meu site!

Valew ja vou colocar em pratica

Muito interessante! Vou fazer o download!

ok

Parabéns.... muito bom ....

Uhuuuuu Meu Sonho e eu mesmo fazer um desses como nao consigo vou baixar...

legal obrigaduuuuuuuuuuu

^^

aeeeee

vamos ver.

DAhora

muito massa mesmo

blz
blzllll

123