Archive for the ‘Flash’ Category

Flash cobrindo conteúdo (solução)

Wednesday, June 20th, 2007

Um problema muito comum para quem usa flash combinado com html e css, apenas para destacar alguns detalhes, é o fato de o flash cobrir o conteúdo da página por padrão. Eu particularmente enfrentei este problema várias vezes ao tentar colocar um menu drop-down que ao ser visualizado deveria cobrir o flash. Mas o menu ficava sempre escondido atrás do flash.

Para solucionar o caso eu utilizei os seguintes conceitos:

  • A propriedade z-index do CSS;
  • posicionamento do CSS;
  • As tags object e embed;
  • e o atributo wmode do vídeo.

O z-index pelo que eu tenho percerbido e lido em diversos lugares só funciona em elementos html que estejam “posicionados”, ou seja, tenham o atributo position com o valor absolute, relative ou fixed.

Portanto, colocaremos o video flash dentro de uma div e aplicaremos o seguinte css a ela:

div#flash_div{
position: relative;
z-index: 0;
}

E devemos fazer o mesmo para os objetos que queremos que sobreponham o flash.

Como existem muitas divergências na renderização entre os browsers, é necessário fazer duas chamadas ao vídeo: uma por meio da tag object(a qual é aceita pelo Internet Explorer) e por meio da tag embed(aceita pelo firefox). Ambas as tags terão os mesmos atributos. E dentre eles deve-se setar o wmode do object e do embed para transparent:


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="214" height="229" id="monitor" align="">
<param name="movie" value="images/monitor.swf">
<param name="quality" value="high">
<param name=”wmode” value=”transparent”>
<embed wmode=”transparent” src=”images/monitor.swf” quality=”high” bgcolor=”#FFFFFF” width=”214″ height=”229″ name=”monitor” align=”" type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed>
</object>

Eu resolvi meu problema assim. Com apenas uma ressalva: essa solução não funciona para usuário do Linux, e não tenho conhecimento de nenhuma outra solução. Espero ter ajudado.