Jun 20 2007

Flash cobrindo conteúdo (solução)

Category: CSS — vbmendes @ 10:46

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" 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.

Tags: ,

18 Responses to “Flash cobrindo conteúdo (solução)”

  1. danielle says:
    July 1st, 2007 at 12:27

    show, aí me veio uma dúvida se isso serviria a ao select com o positon absolute, não sei se vc já passou por isso mais o select fica sobre a qualquer elemento, por exemplo se tivermos um menu suspenso com evento em javascript para ser mostrado, caso haja um select o mesmo fica sobre o submenu :P desagradável… eu testei esse teste que vc sugeriu para flash mas para ele não funcionou :(

    vc já viu isso?

    div#pos{
    position : absolute;
    background-color : Aqua;
    padding : 10px;
    z-index :1;
    top : 0;
    left : 0;
    }
    select{
    z-index : 2;
    position : relative;
    }

    texto
    texto
    texto

    texto texto texto texto

  2. danielle says:
    July 1st, 2007 at 12:29

    opsssssss o conmentário tirou o meu html :D

    <select >
    <option>texto</option>
    <option>texto</option>
    <option>texto</option>

    </select>
    <div id="pos">texto texto texto texto </div>

  3. vbmendes says:
    July 1st, 2007 at 20:54

    Danielle, não entendi mto bem o que vc quis dizer… vc quer q a div #pos cubra o select?

    nunca me ocorreu algo parecido com o que vc disse nao…

    mas se a div#pos tiver que sobrepor todos os selects, ela deve estar com o z-index maior que o do select…

  4. danielle says:
    July 2nd, 2007 at 11:09

    correto, eu quero que a div cubra o select, não sei se vc fez o teste, mas não cobre nem com z-index :P

  5. Henrique S. says:
    January 21st, 2008 at 22:20

    Olá! Muito bom! Rápido e eficiente! Funcionou direitinho!
    vlw!
    :)

  6. Vinícius Mendes says:
    January 22nd, 2008 at 10:37

    Danielle,

    Desculpa a demora na resposta, mas eu realizei o teste alterando apenas um detalhe no CSS. E a div sobrepos o select, pelo menos no firefox. Não testei no IE.

    Abaixo segue o CSS:

    div#pos{
    position : absolute;
    background-color : Aqua;
    padding : 10px;
    z-index :2;
    top : 0;
    left : 0;
    }
    select{
    z-index : 1;
    position : relative;
    }

    Vale ressaltar que qnto MAIOR o z-index, mais a frente fica o elemento. No caso eu troquei os z-index, para o select esta 2 e para a div estava 1.

  7. Guillermo says:
    February 11th, 2008 at 17:11

    Muito obrigado!!!

    Fucionó muy bien la solución!

    Saludos,
    Guillermo (Argentina)

  8. Marcelo says:
    May 23rd, 2008 at 11:13

    Poxa, foi de grande ajuda sua dica!!

    Obrigado mesmo!

    abraço

  9. VITOR HUGO SILVA GOMES says:
    June 19th, 2008 at 17:42

    Cara, você é 10.

    Já estava desiludido com o flash, quase adotando uma solução em javascript ou applet.

    Estão dizendo por ai que não tem solução hem!

    Resolvido tanto pro Firefox e quanto para o IE.

    Grande abraço!

  10. Taly says:
    July 7th, 2008 at 11:18

    Essa dica é otima mesmo, mas eu to com um problema aqui que não encontro em lugar algum nem dúvidas nem respostas parecidas.. Tenho o menu em flash que fica na frente do texto como o exemplo explicado aqui.. otimo. O problema é que se existe algum link na div de texto atrás do flash, o link não funciona! aliais ele funciona mas na área em que coincide com a área do flash ele não ativa… poxa espero que você já tenha passado por isso pra me dar alguma dica..
    Obrigada, abraços

  11. Vinicius Mendes says:
    July 7th, 2008 at 14:01

    Taly,

    Eu nunca me deparei com situações como a sua não. Um caso que eu aplico é quando o link fica por cima do flash.

    No caso, existe um menu dropdown usando CSS que se utilizado, precisa cobrir o flash. E nesses casos, a técnica funciona bem. Mas no seu caso eu não consigo ver uma solução. Se o flash puder ficar por baixo da div de texto, então dá pra resolver o problema.

  12. Taly says:
    July 23rd, 2008 at 11:32

    Pois é, tá difícil issooo=/.. vou ver se faço em css mesmo ou se arranjo algum javascript que possa alterar o z-index de acordo com o posicionamento no mouse..

    Mas obrigada pela atenção!! abraços!

  13. julio says:
    August 14th, 2008 at 10:30

    Fala ae

    eu to passando por esse problema…
    a galera que faz o css aqui da empresa preparou um menu que quando passa o mouse um sub menu “desce”, porem fica escondido atras de um applet…
    sei que swf e applet são bem diferentes… mas será que existe uma maneira de o menu não ficar atras do applet…
    Eles (a galera do css) ja tentaram de tudo… z-index, position etc, etc, etc…
    conheces alguma forma de contornar esse problema?
    ou seja, o menu não ficar atras do applet ?
    obrigado :)

  14. Fábio says:
    September 8th, 2008 at 10:12

    Olá meu amigo,

    Estou precisando aplicar isso no meu código html. Na verdade, já apliquei, mas não surtiu efeito não. Quero que a div box2 fique por cima da div box1 que tem um flash dentro. Minha intenção depois é criar um campo de newsletter em cima e outro de busca para que a animação fique rolando por de traz deles. Segue meu código. O que eu fiz de errado?

    layout

    AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,'990′,’height’,'110′,’wmode’,'transparent’,’src’,'topo’,'quality’,'high’,'pluginspage’,'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'topo’ ); //end AC code

    ddddddddddddddddddddddd

     

  15. Fábio says:
    September 8th, 2008 at 10:13

    Então, se o meu código não apareceu por completo na mensagem acima, por favor, entre em contato comigo e eu lhe passo. Preciso muito dessa ajudinha… um abraço!

  16. kaue says:
    October 23rd, 2008 at 18:23

    z-index:-1;

    esse é o certo

  17. Vinicius Mendes says:
    October 23rd, 2008 at 23:06

    Julio, nunca trabalhei com applets, então fica até difícil responder sua pergunta.

    Fábio, não sei por que o seu e-mail não chegou pra mim. Não tenho como lhe contactar. Se o problema persistir, me avise.

    Kaue, não entendi direito o seu comentário.

  18. Thiago Carvalho says:
    November 11th, 2008 at 15:35

    Cara, li seu post e gostei muito, pois no passado próximo tive a mesma prosopopéia de fazer um menu drop-down por cima de uma animação flash(desisti, inclusive, fiz o menu no próprio flash! rs). Mas hoje eu sei que se você pode fazer o flash ficar atrás de todos os elementos HTMl simplesmente configurando a animação no “publishing settings” do programa. Você habilita a pubicação em html e nas configurações, na opção window mode você seleciona a “transparent windowless”. Nem precisa de z-index.
    até mais

Leave a Reply