Jun 20 2007

Flash cobrindo conteúdo (solução)

Category: CSSvbmendes @ 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: ,

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

  1. danielle says:

    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:

    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:

    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:

    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:

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

  6. Vinícius Mendes says:

    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:

    Muito obrigado!!!

    Fucionó muy bien la solución!

    Saludos, Guillermo (Argentina)

  8. Marcelo says:

    Poxa, foi de grande ajuda sua dica!!

    Obrigado mesmo!

    abraço

  9. VITOR HUGO SILVA GOMES says:

    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:

    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:

    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:

    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:

    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:

    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

        &nbsp;
    
  15. Fábio says:

    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:

    z-index:-1;

    esse é o certo

  17. Vinicius Mendes says:

    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:

    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

  19. kaue says:

    Fala Vinicius..

    seguinte..to usando esse codigo que vc falou..

    tenho um menu horizontal com submenus verticais e um flash embaixo

    para o submenu aparecer em cima do flash…eu usei z-index: -1 pq com z-index: 0 nao fica por cima..nem no fire nem no ie..pode fazer o teste

    o menu que eu estou usando é desse cara:

    Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis by Micox – elmicox.blogspot.com – Ver. 2.0 – 20/02/08 – Creative Commons License

    tipo…com z-index: -1 … meu problema foi resolvido

    agora estou com outro problema..

    nesse flash que fica embaixo do menu…tem uma galeria de fotos… mas ela fica desabilitada…ai tirei o position: relative ai funcionou a galeria…o submenu fica em cima do flash..mas quando eu navego pelo submenus…eles somen..funciona somente no primeiro nivel do submenu…quando desco mais um nivel…ele some…espero que tenha entendido

    se possivel…pode me adicionar no msn kauelima@gmail.com para nos batermos esse papo :)

  20. kaue says:

    fala vinicius…deleta meu coment anterior…nao sei qual foi a besteira que eu fiz aqui…mas ja ta tudo ok eehhehehehe

    vls

  21. Elvis says:

    Cara!!!! Muito obrigado vc salvou o dia… Muito bom…

  22. Paulo Moreira says:

    Só vim deixar meus agradecimentos, pois me ajudou a resolver o meu problema.

    valeu

  23. Klaus Laube says:

    Sensacional! Salvou o meu limite de sanidade do dia…

    obrigado!

  24. aguiar says:

    Ainda não deu certo no meu, ja quebrei a cabeça e não consigo se alguém puder me ajudar eu agradeço muito, obrigado.

  25. Rafael de Mello says:

    Cara, você me salvou…muito obrigado…abraço

  26. Mauro says:

    ohohohohohohoohohoho Funcionou e eu só editei o div! Tks! :)

  27. Roy says:

    Você é o cara! funcionou e só editei – wmode=”transparent – no .

    Sds.

  28. stella says:

    cara muito muito obrigada! salvou o meu dia \o/

  29. Brunao says:

    Até que enfim consegui resolver este problema, a muito tempo eu acabo deixando de lado alguns recursos porque a porcaria do flash atrapalha a visualização de alguns elementos flutuantes em CSS. Valeu.

  30. Gregory says:

    finalmente um post decente sobre o assunto!!!! eu infelizmente resolvia isso fazendo o flash sumir da tela quando o elemento em questão aparecia……… :(

  31. Jefferson says:

    Muito bom! funcionou perfeitamente! vou até guardar este link se caso eu esquecer.

  32. Sandy says:

    Obrigado a sua dica foi de grande ajuda.!!

  33. bruno soares says:

    sensacional, apanhei disso, procurei mtoo na net e sua dica foi certeira. obrigado e parabens

  34. Mauro says:

    Certeiro cara. Parabéns!!

  35. Daniel says:

    Cara,

    Muito obrigado.

    Me salvou.

    Vou divulgar seu blog.

    Abraço.

  36. CSS – Flash cobrindo conteúdo « Alexandre Quintal says:

    [...] matéria do blog Meio Código que mostra como solucionar o problema do Flash que cobre qualquer parte do site (mesmo quando [...]

  37. Alexandre says:

    Muito bom!

  38. Henrique Dornas says:

    Boa matéria, foi ótima para aparecer os submenus do meu Portal e um pluguin lateral de redes sociais.

    Obrigado amigo Feliz ano Novo.

Leave a Reply