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:
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>:
3º Passo
Registre seu Flash no SWFObject e mostrar o que ele deve fazer com ele:
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:
Conteudo alternativo
É 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>:
3º Passo
Adicione o SWF usando JavaScript:
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!
Sem Posts Relacionados.
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…
Tche, jah vi gente perdendo noite por causa disse! Muito massa mesmo, parabens.
Cara, valeu mesmo!! ^^ Tentei diversas vezes e não consegui… ¬¬ e só mesmo com seu artigo para fazer funcionar!! XD
Muito bom, a maneira dinâmica é o que me atendeu. A versão 2.2 está ok. Ótimas dicas. Parabéns!!!
Muito bom seu artigo, me ajudou muito. Valeu demais!
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?
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
Mt bom do artigo e s explicações, mas tenho uma duvida…tenho um site, onde coloquei um script pra que não de refresh qd mudar de pagina, porém se eu colocar o conteudo animado, chamando ele atraves de um script, quando ele carreg a página não mostra nenhuma animção. Minha ideia eh, a parte de cima do site (cabeçalho) o internatura escolhe uam foto, e ela sera usada para navegar por todo o site, se ele quosier mudar, pode mudar, e ficara a que ele escolher sempre, porem na parte do corpo do site, onde eu iria colocar animação também independente, ele não carregar se usr o script :"<script type="text/javascript">flash1('586','395','transparent','animaTop')</script>"
sabiria me ajudar com isso?!
Agradeço abra~p
Eu não entendi muito bem teu problema. O SWFObject não está carregando o teu flash?