Dossier: Objetos Flash – Unobtrusive Flash Objects (UFO) v1.0

[ATUALIZANDO – 20/07/2010] Versão mais atual do SWF Object 2.0.[/ATUALIZANDO]

[ATUALIZANDO] Se você costumava utilizar este script para embedar Flash no seus sites, saiba que ele ficou obsoleto. Leia meu texto “SWFObject e o fim do UFO” para mais detalhes.[/ATUALIZANDO]

O Script deste artigo pode ser baixado em AQUI e o código de exemplo AQUI.

Inserir objetos Flash nos sites que construímos é sempre uma tentação. Mesmo sabendo que o sistema de indexação de mecanismos de busca não "lê" objetos flash, ainda assim fazemos uso dele em menus, banners e destaques do site. Outro problema decorrido da utilização de objetos flash além da falta de indexação é a limitação do acesso apenas àqueles que possuem o plugin Flash Player instalado na máquina. Apesar de existir diversas soluções para este problema, até hoje eu não encontrei aquela que seria definitiva. Pelo menos até agora!

Antes de migrar para webstandards o padrão para inserção de objetos flash era o seguinte:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="AQUELA URL GRANDE DEMAIS " width="588" height="24">

<param name="movie" value="imagens/Inovando.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src="imagens/Inovando.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="588" height="24"></embed>
</object>

Este código era utilizado na época em que o Internet Explorer reconhecia a tag "object" e ignorava a "embed" e o Netscape fazia o inverso. A existência dos dois browsers no mercado fez com que a maioria de nós procurasse atender aos dois tipos de público/usuários. Com o fim da "guerra dos browsers", tudo pode ser resumido no seguinte código que é interpretado por praticamente por todos os browsers contemporâneos ou posteriores ao Internet Explorer 5.0 / 5.5:


<object type="application/x-shockwave-flash" data="swf/header.swf" width="778" height="129">
<param name="movie" value="swf/header.swf" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
</object>

A tag embed é extinta, apesar de a maioria dos webdesigners continuarem a fazer sites como se fazia no início da década de 90. Utilizando este código, é possível validar o seu XHTML, mas o problema de alguém acessar o seu site e não ter o plugin instalado não está resolvido. Você deve estar se perguntando: Mas daí é só o cara baixar e instalar o plugin certo? A resposta é sim, mas procure ver esta outra solução.

 

Fora este problema da ausência do plugin, eu me deparei com problema. Para movies com tamanhos superiores a 200kb por exemplo, com carregadores internos, o objeto flash começava a exibir o movie após já ter sido carregado 30%, 40% e às vezes até 60%, sem explicação alguma. O que pude observar é que quanto maior era o objeto, mais o carregador demorava para aparecer. Antes do movie começar a ser exibido, geralmente um quadro branco ocupava o lugar, ou quando se utiliza transparência, nada aparecia até que o carregamento já estivesse avançado. Isso pode ser frustrante para a maioria dos usuários que não possuiu uma banda muito larga. Ou seja, seguir os webstandards e deixar os usuários frustrados, ou colocar o código sujo? Ainda não encontrei uma explicação concreta para isto, quem souber explicar e quiser me escrever…

 

No site de Bobby van der Sluis ( http://www.bobbyvandersluis.com/ufo/ ) encontrei o Unobtrusive Flash Objects ( UFO ). UFO é um DOM Script que parte do princípio que se você utiliza flash no seu site, você deve estar preparado para usuários que não possuem o plugin instalado exibindo um conteúdo alternativo para o site. Como um menu em flash e outro em HTML para quem não tiver o plugin. Qual o principal propósito disso? A pessoa pra navegar no seu site pode não querer instalar o plugin, ou por pressa ou falta de conhecimento ela não deve ficar de fora do seu site naquele momento em que ela se interessou em te visitar. Porque, segundo as pesquisas, talvez ela nunca mais volte!

 

Para aplicar o script, proceda da seguinte maneira:

Na tag <head> do seu site você insere o seguinte código:


<script type="text/javascript" src="../ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"../swf/test6.swf", width:"300", height:"120", majorversion:"6", build:"0" };
UFO.create(FO, "ufoDemo");
</script>

A primeira referência, linka o arquivo ufo.js e o seguinte especifica o objeto Flash que você quer inserir.

 

No <body> do HTML, você prepara um conteúdo correspondente alternativo para o seu objeto Flash. Com o mesmo "id" referenciado pelo javaScript acima:


<div id="ufoDemo">
<p>Replacement content</p>
<p>
<a href="http://www.macromedia.com/go/getflashplaye"">
<img src="../img/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none"" /></a>
</p>
</div>

Quando o usuário entra no site e possuiu o plugin flash player instalado, ele esconde o conteúdo alternativo e exibe o flash, com a grande vantagem de o conteúdo alternativo permanecer no código através de texto ou imagens (devidamente inseridas com "alt" é claro) para serem indexadas pelos mecanismos de busca e como acessíveis a outros tipos de dispositivos como palms, celulares etc que talvez não possuam o flash player instalado.

 

Resultados Finais:

Para quem não possui o plugin, o conteúdo alternativo é exibido normalmente sem nenhuma limitação de navegação. Se você for criativo ela nem perceberá que algo esteja faltando. Os problemas com o carregamento de objetos com carregadores inseridos dentro dos movies se foram e o carregamento ficou perfeito. Foi esta a solução utilizada no Charges para exibição dos objetos Flash. W3C reconhece o código como válido, porque no código fonte o que fica é o conteúdo alternativo, e, além disso, todo o conteúdo é indexado pelos mecanismos de busca, ao contrario do que seria se o objeto flash estivesse na página.

19 Responses to “Dossier: Objetos Flash – Unobtrusive Flash Objects (UFO) v1.0”

  1. Carlos Roberto

    Cara, seu artigo foi uma luz pra mim, pois pra colocar um flash no XHTML e testar no HTML Validator da W3C na internet era uma decepção. Arranjei um javascript que, ao inves de colocar a tag OBJECT e EMBED no código XHTML eu linkava para um arquivo *.js, e usava document.write(");. Testei, verifiquei e nenhum erro. Mas este código está mais elaborado. Parabens!

  2. Marcelo Amaral

    Nossa, este artigo foi muito importante para min, estou comentando só para gradecer mesmo!

  3. Fernando Andr&eacute

    Cara isso alvou meu dia este arquivo. Valeu mesmo.

  4. Caciano Gabriel

    Muito Bom, tava precisando…Parabéns!!!

  5. Paulo Afonso

    È muito interessante esta técnica, mas ela ainda apresenta hum problema, que na minha opinião é muito grave: mesmo o usuário tendo o FlashPlayer instalado e rodando no navegador, ele só consegue ver o filme Flash se tiver JavaScript instalado e ativado no navegador.

    A solução melhor seria, dentro das tags (tag válida, cujo conteúdo só é renderizado pelo navegador se o usuário não tiver suporte a scripts[JavaScript em geral] no seu agente[navegador]) inserir o FilmeFlash (é mais provavel que ele tenha FlashPlayer instalado do que não e se se não tiver as tags de conteúdo alternativo ainda estarão no código fonte da página).

    É basicamente isso.

    Parabéns pelo blog bem como o conteúdo, muito instrutivo e útil.

    Até.

  6. Junior

    Caro amigo

    Muito bom isso, porém o link para o UFO está com um espaço no final.

    Até mais e parabéns pelos artigos

  7. Só comentando para agradecer!!! me ajudou muito!! ótima sugestão!!! Obrigado ^^

  8. legal esse código eu já conhecia. porém com esse código tem um grave problema, a bendita transparência no flash ( fundo ) como posso conseguir usar transparência com o UFO?

  9. Raphael Oliveira

    Então, o UFO funcionou aqui, porém eu preciso colocar mais DIVs na miha home page, e essas divs pecisam carregar swf. Com uma deu certo, agora como faço pra colocar mais, usando o mesmo código ? Dá erro aqui, ele só abre o ultimo DIV.

    Agradeço desde já, obrigado.

    Abs !

  10. theKid

    Muito bom!!

    me ajudou demais, meu projeto ficou mais dinâmico!

    obrigado!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>