Tag Archives: transparente

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.

Anúncios

Flash: SWF com Fundo transparente

Ver post no novo domínio: http://blog.rogeriolino.com/2007/02/04/lash-swf-com-fundo-transparente/

Mesmo sendo fácil ainda há gente que não conhece. Através de um parâmetro (<param>) dentro da tag object podemos especificar se o arquivo terá o fundo transparente.

<param name=”wmode” value=”transparent” />

Para muitos que aindam usam a tag embed para funcionar em todos os browsers tem que colocar o atributo wmode nela também:

<embed wmode=”transparent” … />

Então o código validado do SWF com fundo transparente ficaria assim:

<object type=”application/x-shockwave-flash” data=”filme.swf” width=”550″ height=”400″>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”filme.swf” />
<param name=”wmode” value=”transparent” />
</object>

Uma coisa que acontece também que pode gerar bastante dor de cabeça é quando algum elemento do HTML que deveria ficar por cima do SWF e acaba acontecendo o contrário. E você pode alterar o position o z-index e nada. O “bicho” insiste em ficar por cima.

E a solução consiste apenas em deixar o SWF com o fundo transparente.