Usando o SWFObject para adicionar Flash ao seu projeto
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)
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
Alguns links interessantes sobre o assunto:
E era isso, dúvidas? Críticas? Sugestões? Entre em contato!
