Usando o SWFObject para adicionar Flash ao seu projeto

kidh0 — Wed, 27 May 2009 11:14:37 +0000

Todo o desenvolvedor web que se preste deve gerar um HTML/XHTML válido para suas páginas. Isso não é mais uma recomendação, é um dever nosso.

Quando falamos de inserir um Flash, o negócio fica preto, o código gerado pelos famigerados programas da Adobe não são válidos, criando tags que não existem (?) e um fonte gigantes com parâmetros que não é bom nem refletirmos muito sobre eles.

Outro problema que temos é de usabilidade, visto que esse Flash não tem um conteúdo alternativo, excluindo as pessoas que não tem Flash player. Claro, isso hoje em dia é raro de existir, mas não podemos esquecer que cresce cada vez mais (a passos de tartaruga, mas ainda assim caminha) o acesso a internet usando dispositivos móveis e alguns browsers usados nesses dispositivos não têm suporte. Dessa maneira, o usuário simplesmente vai ter uma tela em branco, sem saber o que deveria ter de conteúdo ali. Também não podemos esquecer dos leitores de tela (JAWS e afins). Eles não “entendem” flash, excluindo, assim, mais uma parcela de usuários.

Devemos lembrar ainda de um problema existente (pra falar a verdade, eu não sei se ainda existe, pois faz anos que não utilizo o IE) com o Internet Explorer que, após determinada versão do Flash Player (8 se não estou enganado), tornou-se necessário clicar no flash para ativá-lo, ou seja, você precisava clicar num menu para ele funcionar como um menu.

Mas isso agora é passado! (parece aquelas propagandas de produtos duvidosos que aparecem na TV em horários alternativos) Existe uma maneira de inserir Flash gerando um HTML/XHTML válido, acessível e sem dores de cabeça e se chama SWFObject

O que é o SWFObject?

É um pequeno JavaScript (menos de 4kb após ser comprimido) para adicionar conteúdos feitos em Flash na sua página de maneira fácil e indolor.

Porque usar o SWFObject?

Dentre as razões, podemos citar:
* Sua página terá um HTML válido
* Detecta automaticamente o Flash Player (existem outras soluções para isso, mas todas tem seus problemas)
* Remove o incômodo de ter que clicar para ativar o Flash no Internet Explorer
* Como é possível ter um conteúdo alternativo para o Flash, melhora a indexação pelos mecanismos de busca
* Permite que se tenha uma Graceful Degradation

Como usar

Antes de tudo, devemos fazer o download do SWFObject do página do projeto no Google Code.
A última versão estável disponível quando escrevi o artigo é a 2.1. Já existe a 2.2, mas é uma versão beta, deixem ela para depois, ok?

Descompacte o arquivo swfobject_2_1.zip e copie o swfobject.js e o expressInstall.swf para o diretório do seu projeto.

Usando o SWFObject, existem duas maneiras de adicionar o conteúdo flash na sua página.

Maneira Estática

Adiciona o Flash e o conteúdo alternativo usando marcação válida e usa o JavaScript para resolver que a marcação não pode resolver sozinha. vantagem
Tem como vantagem:

Usa marcação standard
Não usa javascript para adicionar o conteúdo a página, apenas para corrigir problemas pontuais, ou seja, o Flash vai ser acessível a um número maior de usuários (os que não tem suporte a JavaScript, leitores RSS, etc)

1º Passo
Seu Flash deve ser adicionado da seguinte maneira no da sua página:

<object id="meuId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
    <param name="movie" value="test.swf" />
    
    <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
    
       <div>
            <h1>Conteudo Alternativo</h1>
           <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Faça o download do Flash Player" /></a></p>
        </div>
    
    </object>
    
</object>

Você pode adicionar parâmetros adicionais, mas é necessário colocar o em ambas as declarações do para o correto funcionamento

2º Passo
Adicione a chamada para o SWFObject no :

<script src="swfobject.js" type="text/javascript"></script>

3º Passo
Registre seu Flash no SWFObject e mostrar o que ele deve fazer com ele:

<script type="text/javascript">
     swfobject.registerObject("meuFlash", "9.0.0", "expressInstall.swf");
</script>

Onde o primeiro argumento é o ID do seu Flash, o segundo é a versão mínima do Flash Player que o Flash necessita e o terceiro parâmetro (opcional) é o link para a instalação expressa do Flash Player (vem junto no pacote do SWFObject)

Veja um exemplo

Maneira Dinâmica

É baseada no conteúdo alternativo e usa o JavaScript para substituir este conteúdo pelo o do Flash caso haja o Flash Player e suporte JavaScript minimo necessário.
Tem como vantagem:

Evita ter que clicar no Flah para ativá-lo no Internet Explorer 6/7 e Opera 9
Se integra melhor com aplicações que usam script

1º Passo
Crie um conteúdo alternativo usando uma marcação válida no da sua página:

<div id="meuConteudo">
    <h1>Conteudo alternativo</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Faça o download do Flash player" /></a></p>
</div>

É necessário adicionar um ID ao elemento, pois é através dele que o SWFObject irá fazer a substituição do conteúdo.

2º Passo
Adicione a chamada para o SWFObject no :

<script src="swfobject.js" type="text/javascript"></script>

3º Passo
Adicione o SWF usando JavaScript:

<script type="text/javascript">
    swfobject.embedSWF("test.swf", "meuConteudo", "300", "120", "9.0.0", "expressInstall.swf");
</script>

O método embedSWF tem 5 parâmetros obrigatórios (urlSWF,id,width,height,versionSWF) e 4 opcionais (urlInstallSWF,flashvars,params,attributes). Para este exemplo, vou usar só os obrigatórios, mais detalhes sobre os parâmetros acesse http://code.google.com/p/swfobject/wiki/documentation

Isso faz com que o SWFObject substitua o conteúdo do elemento ID, com o conteúdo do urlSWF

Veja um exemplo

Alguns links interessantes sobre o assunto:

E era isso, dúvidas? Críticas? Sugestões? Entre em contato!