Inserindo Flash sem acabar com a acessibilidade
por Rafael Dourado - 23/09/2007Depois da discursão que rolou no último Puto-que-os-pariu e de algumas conversas pelo Messenger, percebi que o artigo sobre UFO do Henrique já está tão antigo que muitas pessoas podem não ter lido.
Antes de conhecer essa técnica eu utilizava a Flash Satay, porém tive problemas com um cliente que precisava que seu site fosse acessível para celulares. Não sei em outros celulares — estou apenas começando a estudar as particularidades de sites para celulares (e correndo o risco da Apple mudar tudo) — mas no BlackBerry que o cliente usava, Flash ou travava a aplicação com um erro ou criava um buraco branco gigante no espaço que se pretendia preencher.
E mesmo em computadores pessoais, o Internet Explorer mostrando aquela caixa branca com um xis vermelho seguido de um aviso não é nada agradável para quem não sabe nem que o Flash tinha versão, quanto mais que era “obrigado” a atualizá-la.
Para resolver esses problemas, um cidadão chamado Bobby van der Sluis criou o Unobtrusive Flash Objects (UFO). Ele nada mais é que um script que verifica a existência do Flash Player na máquina do usuário e, caso ele existe na versão desejada, exibe o Flash em uma div. Ou seja, é possível utilizar Flash em seu site e ainda assim seguir os padrões web sem discriminar ninguém que supostamente não é o seu público. Basta seguir esses passos:
- Copie este script para o servidor.
- Coloque o seguinte código na entre o <head> e o </head>, prestando atenção no caminho onde o arquivo está:
<script type="text/javascript" src="../ufo.js"></script> - Escolha a div cujo conteúdo será substituido pelo Flash e escreve este código logo após a linha anterior:
<script type="text/javascript">
var FO = { movie:"nomeDoFlash.swf", width:"300", height:"120", majorversion:"6", build:"0" };
UFO.create(FO, "nomeDaDiv");
</script> - Qualquer dúvida, consulte a página de exemplo.
Pronto. Acabou a briga com os usuários fora do seu target. Ou não…
24/09/2007 • 9:05
Muito boa a dica! fica pro dia-a-dia mesmo…
Abração e tenha uma excelente semana.
24/09/2007 • 13:21
Para dar um melhor “acabamento” no flash, insira algo como:
fo.addParam(”quality”, “best”);
11/01/2008 • 14:45
Cara, obrigado mesmo, funcionou perfeitamente.
Agora eu só to com um problema.
Eu tenho 4 divs na mesma página, ou seja, essa função, esse exemplo, está chamando um DIV, e eu preciso chamar 4 DIVs ao mesmo tempo. Como poderei fazer isso, como posso separar os scripts ?
Agradeço desde já. Abs !
11/01/2008 • 15:38
É só ir duplicando a variável e a chamada do método. Assim:
var FO = { movie:”nomeDoFlash.swf”, width:”300″, height:”120″, majorversion:”6″, build:”0″ };
UFO.create(FO, “nomeDaDiv”);
var FO = { movie:”nomeFlash2.swf”, width:”300″, height:”120″, majorversion:”6″, build:”0″ };
UFO.create(FO, “nomeDaDiv2″);
var FO = { movie:”nomeFlash3.swf”, width:”300″, height:”120″, majorversion:”6″, build:”0″ };
UFO.create(FO, “nomeDaDiv3″);
…
11/01/2008 • 15:57
Perfeito !!! Deu tudo certo agora. Po, obrigado mesmo, posso dizer que você salvo minha vida. Vlw mesmo.
Abraços !!!
11/01/2008 • 16:35
Pessoal, sem querer ser chato, mas quando eu colocava Flash sem DIV, eu usava:
E agora usando o script UFO, não consigo deixar os flash’s com fundo transparent.
Como faço isso ? Desculpe o abuso, mas acho q só falta isso pra ficar perfeito.
Obrigado !
11/01/2008 • 16:36
Pessoal, sem querer ser chato, mas quando eu colocava Flash sem DIV, eu usava:
////
E agora usando o script UFO, não consigo deixar os flash’s com fundo transparent.
Como faço isso ? Desculpe o abuso, mas acho q só falta isso pra ficar perfeito.
Obrigado !
11/01/2008 • 16:36
Pessoal, sem querer ser chato, mas quando eu colocava Flash sem DIV, eu usava:
param name=”WMode” value=”Transparent”
E agora usando o script UFO, não consigo deixar os flash’s com fundo transparent.
Como faço isso ? Desculpe o abuso, mas acho q só falta isso pra ficar perfeito.
Obrigado !
11/01/2008 • 16:45
Desconsiderem os dois acima do ultimo post, só queria saber como deixar o SWF com fundo transparente nesse caso.
Abraços !
12/01/2008 • 11:42
Rafael, os parâmetros no UFO são adicionados assim:
fo.addParam(”PARAMETRO”, “VALOR”);
Pra deixá-lo transparente, basta adicionar o parametro wmode.
fo.addParam(”wmode”, “transparent”);
14/01/2008 • 8:47
Obrigado, mas acho que sou meio leigo nisso, não estou sabendo aonde inserir esse parametro.
Na index está assim:
script type=”text/javascript” src=”ufo.js”>
var FO = { movie:”quad_1.swf”, width:”324″, height:”228″, majorversion:”6″, build:”0″ };
UFO.create(FO, “quad_1″);
var FO = { movie:”menu.swf”, width:”558″, height:”39″, majorversion:”6″, build:”0″ };
UFO.create(FO, “menu”);
var FO = { movie:”texto-novosite.swf”, width:”322″, height:”55″, majorversion:”6″, build:”0″ };
UFO.create(FO, “texto”);
var FO = { movie:”news.swf”, width:”188″, height:”325″, majorversion:”6″, build:”0″ };
UFO.create(FO, “news”);
fo.addParam(”wmode”, “transparent”);
14/01/2008 • 8:48
Como você viu, eu coloquei o param no final, antes da linha de fechamento do script, mas dessa forma não funciona.
14/01/2008 • 9:35
Rafael. Tem uma forma mais simples. O wmode pode ser adicionado dentro das chaves do objeto. Assim:
<script type="text/javascript">
var FO = { movie:"nomeDoFlash.swf", width:"300", height:"120", majorversion:"6", build:"0", wmode:"transparent" };
UFO.create(FO, "nomeDaDiv");
</script>