quarta-feira, 3 de setembro de 2008

Fazendo seu HTML ficar por cima do FLASH

Oláá pessoal!! Venho por meio deste post compartilhar o que talvez tenha sido a minha melhor descoberta.

O Problema

Acho que o mais comum é ter um menu horizontal com submenus e logo abaixo dele, vem um banner em flash. Quando tenta-se abrir um dos submenus, ele fica por baixo do flash, sendo impossível de ser clicado. Veja um exemplo:



E aí, o que fazer? A maioria de nós opta por refazer o menu inteiro em flash, mas calma, isso não é necessário. Na verdade, é mais simples do que você imagina!!

A única coisa que temos que fazer é deixar o flash transparente. Como? Vá no código gerado para o objeto em flash e adicione a seguinte tag: <param name="wmode" value="transparent"> e no último embed, junto com os parâmetros width, height, src, type e o que mais tiver ali, adicione wmode="transparent". Veja:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="100">
<param name="movie" value="banner_post.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="banner_post.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="100" wmode="transparent">

Veja como fica depois de implantados os códigos:



Para quem está usando as versões mais atualizadas do Dreamweaver, ele gera um código em javascript, creio eu que seja para contornar aquele problema do Internet Explorer, que é necessário dar um clique no flash antes de poder utilizá-lo. Basta colocar o wmode também no javascript para que esse método funcione:

AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '1000',
'height', '768',
'src', 'teste',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'teste',
'bgcolor', '#000000',
'name', 'teste',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'teste',
'salign', '',
'wmode', 'transparent'

); //end AC code

Voilá, está pronto!!!

Um grande abraço para todos!!

6 comentários:

Samy disse...
Este comentário foi removido pelo autor.
otto disse...

hello ana, thanks ur info

Ana Tafarello disse...

Hello!!! You're welcome, I hope it could help!!! =)

hiurebezerra disse...

Muito obrigado e parabéns pela clareza na explicação.

Unknown disse...

Oi Ana Tafarello foi muito util este seu post, perfeito, parabéns, já estva louco com esse problema.

Valeu mesmo continue assim.

Anônimo disse...

pra que escrever "wmode='transparent'" se ja tinha o "wmode='window'" sujando o codigo não seria mais bonito explicar de forma correta ao usuario???? apaga o 'window' e escreve 'transparent' mas boa a iniciativa.