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.