Usando o SWFObject para adicionar Flash ao seu projeto

swfobject_logo

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 (<embed>?) 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 <body> da sua página:

<object id="meuId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
    <param name="movie" value="test.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
    <!--<![endif]-->
       <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>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

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

2º Passo
Adicione a chamada para o SWFObject no <head>:

<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 <body> 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 <head>:

<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!

Compartilhe e use:

Sem Posts Relacionados.

Tags: Flash, HTML, javascript

Este post foi criado dia 27 de maio de 2009 as 08:14. Você pode acompanhar as respostas deste post através do RSS 2.0 feed. Você pode deixar um recado, ou linkar a trackback no seu site.

7 comentários para “Usando o SWFObject para adicionar Flash ao seu projeto”

Ricardo Says:
4 de julho de 2009 at 21:14
Parabêns pela matéria, sou leigo no assunto e após inumeras tentativas copiando e colando códigos, os seus foram os únicos que funcionaram…
Rafael Garbin Says:
29 de julho de 2009 at 14:43
Tche, jah vi gente perdendo noite por causa disse! Muito massa mesmo, parabens.
Eliane Garone Says:
25 de setembro de 2009 at 13:26
Cara, valeu mesmo!! ^^ Tentei diversas vezes e não consegui… ¬¬ e só mesmo com seu artigo para fazer funcionar!! XD
Fabiano Barbosa Says:
9 de agosto de 2010 at 11:28
Muito bom, a maneira dinâmica é o que me atendeu. A versão 2.2 está ok. Ótimas dicas. Parabéns!!!
Leandro Fiel Says:
10 de agosto de 2010 at 01:08
Muito bom seu artigo, me ajudou muito. Valeu demais!
maya-br Says:
17 de agosto de 2010 at 23:19
Amigo, já tentei c/ várias versões do flashobject e swfobject para visualizar várias fotos de uma só vez, puxadas de um xml.
Funciona direitinho, só que as fotos ficam dispostas com uma leve inclinação, ou para direita ou para esquerda e não retas como gostaria.
Onde seria o comando no script pra mudar isso, você sabe?
kidh0 Says:
23 de agosto de 2010 at 13:46
Eu precisaria ver o script para saber o que pode estar ocorrendo no teu sistema, se tiver como me mandar alguma coisa, hboaventura at gmail dot com, ficarei feliz em ajudar