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!!