Flash: SWF com Fundo transparente

Ver post no novo domínio: http://blog.rogeriolino.com/2007/02/04/lash-swf-com-fundo-transparente/

Mesmo sendo fácil ainda há gente que não conhece. Através de um parâmetro (<param>) dentro da tag object podemos especificar se o arquivo terá o fundo transparente.

<param name=”wmode” value=”transparent” />

Para muitos que aindam usam a tag embed para funcionar em todos os browsers tem que colocar o atributo wmode nela também:

<embed wmode=”transparent” … />

Então o código validado do SWF com fundo transparente ficaria assim:

<object type=”application/x-shockwave-flash” data=”filme.swf” width=”550″ height=”400″>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”filme.swf” />
<param name=”wmode” value=”transparent” />
</object>

Uma coisa que acontece também que pode gerar bastante dor de cabeça é quando algum elemento do HTML que deveria ficar por cima do SWF e acaba acontecendo o contrário. E você pode alterar o position o z-index e nada. O “bicho” insiste em ficar por cima.

E a solução consiste apenas em deixar o SWF com o fundo transparente.

About these ads

61 thoughts on “Flash: SWF com Fundo transparente

  1. cliff oliveira

    utilizei esse recurso na tentativa de utilizar um filme flash como background de uma pagina, usando div para o conteudo que fica por cima da animação, funcionou pefeitamente no firefox, mas o mesmo codigo nem mostra o filme no explore.
    escreve algo aqui dentro

    o que devo fazer para funcionar nos dois ????

    Responder
  2. Matheus

    O W3C não prevê o uso da tag EMBED. Esta tag não é padrão e assim uma página com este código não poderia ser validado. Existe algum modo de transparência que funcione na maioria dos navegadores do mercado e não contenha a tag EMBED?

    Responder
  3. Leidival

    Cara!

    Já tentei de tuo para conseguir fazer funcionar no firefox mas não funciona. Já coloquei no embed e nada. No IE funciona tranquilo.

    Li que é preciso pegar a imagem de fundo e torná-la transparente usando o photoshop, mas sinceramente não sei fazer isso.

    Se vc puder ajudar eu agradeço!

    Valeu

    Responder
  4. Prof. Sabedoria

    Olá pessoal
    Também estou com dificuldade de colocar layers por cima do fundo flash, tenho bonecos e não consigo colocar os balões de fala
    Alguém pode ajudar?
    Se puder ajudar eu agradeço!
    Bom ano para todos

    Responder
  5. Borg

    Perfeito, suas dicas foram de grande ajuda para mim. Obrigado!

    Testei e funciona no IE, Firefox e Opera, e não precisa mexer no fundo da imagem nada.

    exemplo do código que funcionou pra mim:

    Abraço a todos!

    Responder
  6. Micheli

    Você já viu que em alguns sites o conteúdo que está por baixo desse banner flutuante fica inacessível no firefox?
    Acontece também com os banners expansíveis, se há algum link que fica na área onde o flash expande, não se consegue clicar nele, o firefox interpreta que o flash está em cima, o que acaba bloqueando o conteúdo que está na layer de baixo.
    Saberia como resolver isso?

    Responder
  7. Gloradin

    Já ando no mundo do web design há muitos anos e nunca tinha necessitado de pôr o fundo transparente no flash, e assim abre-se mais um leque infinito de probabilidades de se fazerem mais coisas novas. O mundo da informática é assim mesmo, quanto mais se descobre mais á a descobrir.
    obrigado pelo excelente exemplo.

    Responder
  8. Jefferson Romano

    Cara,

    Parabéns pela explicação sobre background transparente no flash… eu sempre quis saber como tirava a cor de fundo da animação e jamais imaginei que um simples parâmetro o fizesse. Parabéns…

    Responder
  9. André

    Para o pessoal que não conseguiu fazer funcionar:

    Copiei o código postado aqui e colei dentro da tag object. A princípio não funcionou. Fiquei um bom tempo fazendo testes até descobrir que as apas (“) não estavam corretas.
    As aspas postadas aqui são assim:

    mas pra mim só funcionou quando coloquei assim:

    Talvez isso resolva o problema de alguns.

    Responder
  10. André

    (desconsiderem a mensagem acima)
    Para o pessoal que não conseguiu fazer funcionar:

    Copiei o código postado aqui e colei dentro da tag object. A princípio não funcionou. Fiquei um bom tempo fazendo testes até descobrir que as apas ” não estavam corretas.

    As aspas postadas aqui são assim:

    mas pra mim só funcionou quando coloquei assim:

    *não esqueçam de tirar a barra / na linha acima

    Talvez isso resolva o problema de alguns.

    Responder
  11. André

    Bom, não consegui postar o código html nas mensagens acima. Mas resumindo, pra mim só funcionou quando troquei as aspas em itálico ” pelas aspas normais “

    Responder
  12. Arno Roldão Junior

    Mesma duvida de – Micheli :

    Você já viu que em alguns sites o conteúdo que está por baixo desse banner flutuante fica inacessível no firefox?
    Acontece também com os banners expansíveis, se há algum link que fica na área onde o flash expande, não se consegue clicar nele, o firefox interpreta que o flash está em cima, o que acaba bloqueando o conteúdo que está na layer de baixo.

    Saberia como resolver isso?

    Responder
  13. Rogério Alencar Lino Filho Post author

    Junior,

    Isso acontece porque o browser mesmo o swf com o fundo transparente, ele ainda está sobre o conteúdo, o que acaba bloqueando acesso aos links que estão abaixo.

    Uma maneira de resolver isso seria utlizando javascript. Primeiramente deixaria o swf com o seu tamanho mínimo inicial (com autoScale false), e ao passar o mouse sobre a animação chamaria um método javascript para aumentar o tamanho do swf com o tamanho padrão do palco da animação.

    E quando o mouse fosse “rolado” para fora chamaria um outro método javascript para retornar o tamanho inicial do swf.

    obs: eu tinha respondido por email, e acabei esquecendo de colocar a mensagem aqui.

    Att.

    Rogério

    Responder
  14. wesllay

    olá realmente estava faltando algo para funcionar no firefox, outra coisa qual o comando que posso colocar no botão fechar p/ que funcione em ambos navegadores?

    Obrigado té mais.

    Responder
  15. xamicoles

    Galera. O lance é o seguinte. Tem que fazer as duas alterações que o bruxo aí informou:

    e

    <embed wmode=”transparent” ….

    Mas também tem que fazer esta aqui:

    ‘wmode’, ‘transparent’,

    Responder
  16. xamicoles

    Galera. O lance é o seguinte. Tem que fazer as duas alterações que o bruxo aí informou:

    ..

    (substituindo os pontos por espaços)

    e

    <embed wmode=”transparent” ….

    Mas também tem que fazer esta aqui:

    ‘wmode’, ‘transparent’,

    Responder
  17. George Fercalli

    Já tentei 1000 vezes e nao consegui fazer, a porra do fundo continua branco! Abandonei o projeto há uma semana fui vencido pelo cansaço!

    Dúvida: ONDE DIABOS VOU EDITAR ESSE PARAMETRO????

    Eu faço seguindo deixo a opção marcado no flash em “html’ dou F12 pra visualizar a animação vou na aba EXIBIR da pagina, depois CODIGO DA FONTE, mas como não se pode editar nada ali, salvo a pagina, abro pelo Dreamweaver altero o codigo e substituo COLOR por TRANSPARENT, E NADA!!!

    Alguem por favor, sabe como se faz isso?

    Vou postar aqui o codigo dele:

    img/botao/original/submenu



    Responder
  18. George Fercalli

    Acabei de descobrir o codigo tem que ser alterado no proprio dreamweaver e esqueceram de dizer que falta ainda mudar um terceiro parametro fora de “object”. Dessa forma descrita acima era impossivel deixar o fundo transparente. Mas aqui está onde vcs devem adicionar o esquecido terceiro parametro:

    AQUI:

    AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0′,’width’,’730′,
    ‘height’,’242′,’src’,’exemplo’,’quality’,’high’,’wmode’,’transparent’,’pluginspage’,
    ‘http://www.macromedia.com/go/getflashplayer’,’movie’,’spine2_camuflado’ ); //end AC code

    Responder
  19. Jonathas

    Cara obrigado! funcionou no ie8 e no chrome :D

    claro que c precisa excluir os codigos que utiliza um script dos players mais novos, mas funciona no geral!!!

    ;D

    Responder
  20. Rogério

    Minha duvida é parecida com a da Michele e do Junior… e no meu caso nao daria certo usar metodos javascript….. pois eu quero colocar um swf por cima de toda a pagina, como por exemplo ficar nevando, no IE tranquilo consegui fazer com o fundo transparente… porém no Firefox fica transparente mas o conteudo do site fica coberto pelo swf você ve os links mas nao consegue clicar neles…

    Ja vi muita gente com essa duvida mas ninguem conseguiu resolver ainda…..

    Responder
  21. gabriel

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

    Responder
  22. gabriel

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

    esse código está exatamente como o descrito acima mas não funciona nem com a reza… que qui tem de errado?

    Responder
    1. Adriano de Andrade Oliveira

      Olá Gabriel, o que pode estar acontecendo é a incompatibilidade com seu navegador, usei esse código, funcionou corretamente no IE, já no Mozilla e no Opera não funcionou “nem com reza brava”.

      Responder
  23. Jeferson

    Ola amigo, eu faço umas animações simples para meus amigos e eles tão me pedindo para colocar em transparente.
    Já procurei na net, mais achei a mesma coisa que achei aqui e no codigo que eu uso não tem esse seguinte codigo: , é que o codigo que o proprio flash disponibiliza não roda no blogspot, então teve que colocar a animação em um codigo projetado. Como faço para deixar a animação transparente no proprio flash sem ser pelo codigo e exportar em .swf em modo transparente?

    Responder
  24. Diego

    essa tag nao funciona em alguns navegadores pelo fato de que nao esta sendo alterada nos dois scripts….

    vejam esta video aula que esta bem esplicado…(obs. ha navegadores que nao ultilizam determinadosrecursos de scripts,)

    ;D
    Abraço

    Responder
  25. Hospedagem de Sites

    Uma dica impotantíssima a todos, além de colocar o wmode como parametro e dentro do emblem, dentro da função AC_FL_RunContent() precisa colocar as duas opção também, ,’wmode’,’transparent’,

    Veja como ficaria abaixo:

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

    Ta ai a dica a todos.

    Aqui funcionou filé. :)

    Responder
  26. Neurivan Maia

    Muito importante esse detalhe da transparent no swf. Eu so vi isso no photoshop e firework. Existia uma dificuldade muito grande em relacao ao flash, mas agora depois desta aula ficou tudo mais claro. Vou passar essa experiencia para frente. Obrigado a todos. DEUS continue fortalecendo todos nos. Desculpe pela falta de acentuacao no texto, e porque eu escrevi no tablet. Eu ainda nao estou familiarizado com o teclado. Um abraco.

    Responder
  27. Dustin

    Deu certinho!! :p Valew cara! Eu uso o pacote CS4 fiz meu arquivo flv. Joguei pro Dreamweaver e procurei o código como explicado aqui no post. TIve que mudar duas linhas, não sei porque tem duas… mais em fim… mudei e deu certo:

    http://../../Projetos/Flash/teste2.swf

    Responder
  28. Mateus

    Valeu galera aqui funcionou perfeitamente no firefox, mas no IE ficou todo ele transparente so os textos é que não.
    Não testei no google chromer

    Mas mesmo assim funcionou

    Responder

Deixar uma resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

WordPress.com Logo

Está a comentar usando a sua conta WordPress.com Log Out / Modificar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Log Out / Modificar )

Facebook photo

Está a comentar usando a sua conta Facebook Log Out / Modificar )

Google+ photo

Está a comentar usando a sua conta Google+ Log Out / Modificar )

Connecting to %s