SWFObject, flash no seu site de maneira simples e transparente
Postado por xorna em March 14th, 2008 salvo em JavaScript, Acessibilidade, Desenvolvimento, Software LivreBem pessoal, esse artigo, na verdade foi extraído da apostila de desenvolvimento web acessível, que eu e o Carlos Tristacci escrevemos a pouco tempo para ministrarmos um treinamento no MEC em Brasília.
O que é SWFObject?
SWFObject é um pequeno Script para a inserção de conteúdo Macromedia/Adobe Flash em páginas web. Ele detecta o plugin do Flash para a maioria das arquiteturas e plataformas, foi projetado para facilitar a inserção de mídias em flash. É amigável com mecanismos de busca, uma vez que, mostra um conteúdo alternativo quando a mídia não puder ser carregada. Pode ser usado tranquilamente com HTML e XHTML 1.1 (desde que seja text/html e não application/xhtml + xml).
Como Utilizar o Script?
Utilizar o script para inserir qualquer conteúdo Flash no site é muito fácil. Primeiro precisamos do código fonte do Swfobject[1], depois devemos incluí-lo em nosso código HTML. Abaixo segue exemplo com explicação de cada detalhe do processo.
Assim inserimos o script no site:
<script type=”text/javascript” src=”swfobject.js”></script>
Elemento que receberá o conteúdo flash, já como texto alternativo, no caso do usuário possuir o flash player instalado, ele não verá esse conteúdo, porém será facilmente indexado por qualquer mecanismo de busca.
<div id=”conteudoFlash”>Esse texto será substituído por conteúdo Flash</div>
E após isso, podemos criar um novo objeto da classe swfobject e fazer com que ele coloque o flash onde quisermos, conforme exemplo abaixo:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, #336699″);
so.write(”flashcontent”);
</script>
Cria um novo SWFObject passando os parâmetros obrigatórios:
• swf: o caminho e o nome do seu arquivo swf.
• id: o ID do seu objeto ou da tag “embed”. A tag embed também usará esse valor no seu atributo nome para os arquivos que utilizam o swliveconnect.
• width: a largura (em pixels) do seu filme Flash.
• height: a altura (em pixels) do seu filme Flash.
• version: a versão necessária para rodar o seu conteúdo em Flash. Pode ser uma string no formato “maiorVersão.menorVersão.revisão”. Por exemplo: “6.0.65”. Ou você pode apenas exigir a maior versão, como por exemplo “6”.
• background-color: o valor em hexa da cor de fundo do seu filme Flash.
Parâmetros opcionais:
• useExpressInstall: se você deseja atualizar o plug-in dos usuários usando o recurso ExpressInstall, use “true” para esse valor.
• quality: a qualidade com a qual você deseja que seu filme seja executado. O valor padrão é “high”.
• xiRedirectUrl: se você deseja redirecionar os usuários que completarem uma atualização via ExpressInstall, especifique a URL aqui.
• redirectUrl: se você deseja redirecionar os usuários que não têm a versão correta do plug-in, use esse parâmetro.
• detectKey: o nome da variável de URL que o script do SWFObject procurará para contornar a detecção. O padrão é “detectflash”. Por exemplo: para contornar a detecção do Flash e simplesmente escrever o filme Flash na página, você pode adicionar ?detectflash=false na URL do seu documento que contém o filme Flash.
so.write(”flashcontent”);
Diz ao script do SWFObject para escrever o conteúdo em Flash na página (se a versão correta do plug-in estiver instalada no sistema do usuário), substituindo o conteúdo dentro do elemento HTML especificado.
[1] - http://blog.deconcept.com/swfobject/swfobject_source.js
Adicionando Parâmetros para o Flash
O exemplo supracitado se ateve somente ao básico na inserção de um arquivo swf dentro de uma página HTML. Porém como todos sabem, existem parâmetros adicionais que podemos adicionar aos arquivos Flash. Abaixo segue um exemplo com alguns parâmetros adicionas, mas pode ser obtida no site da Adobe a lista completa de parâmetros[2].
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100%”, “7″, “#336699″);
so.addParam(”quality”, “low”);
so.addParam(”wmode”, “transparent”);
so.addParam(”salign”, “t”);
so.write(”flashcontent”);
</script>
Passar Valores para o Flash utilizando FlashVars
A utlização de FlashVars é a maneira mais comum e fácil de passarmos valores como parâmetros para o arquivo swf dentro de um site HTML, os valores são passados uma vez, quando o arquivo é carregado. O modo normal de inserir esse conteúdo é passar um parâmetro chamado FlashVars, e seu valor um lista de pares nome=valor, como exemplo abaixo:
variavel1=valor1&variavel2=valor2&variavel3=valor3…
O SWFObject torna isso mais prático e objetivo, permitindo que você adicione tantas variáveis quanto necessárias, de uma maneira similar à aquele usada para incluir parâmetros adicionais ao arquivo. Abaixo temos um exemplo da utilização:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.addVariable(”variavel1″, “valor1″);
so.addVariable(”variavel2″, “valor2″);
so.addVariable(”variavel3″, “valor3″);
so.write(”flashcontent”);
</script>
Desse modo, ao ser carregado, imediatamente seu arquivo contará com todos esses valores disponíveis na linha de tempo _root.
Outro recurso interessante do SWFObject é a função que permite extrair variáveis diretamente da URL do site, se tivéssemos a seguinte URL:
http://www.example.com/page.html?variavel1=valor1&variavel2=valor2
Utilizando a função getQueryParamValue(), você pode facilmente pegar esses valores da URL e passá-los para o seu arquivo swf. Abaixo exemplo para a supracitada URL:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.addVariable(”variavel1″, getQueryParamValue(”variavel1″));
so.addVariable(”variavel2″, getQueryParamValue(”variavel2″));
so.write(”flashcontent”);
</script>
EXPRESS INSTALL
Um recurso muito interessante do SWFObject é seu completo suporte ao Recurso Adobe Flash Player Express Install. Junto com o script do SWFObject existe um arquivo ActionScript que funciona com o SWFObject, para dar inicio ao processo de atualização do Plugin do Flash.
Para utilizar tal recurso, primeiro você deve incluir o arquivo expressinstall.as no seu .fla e no, inicio do arquivo, fazer uma pequena checagem para ver se o plugin do usuário precisa ser atualizado:
#include “expressinstall.as”
var ExpressInstall = new ExpressInstall();
// se o usuario precisa ser atualizado, mostra o botao “iniciar atualizacao”
if (ExpressInstall.needsUpdate) {// isto eh opcional, vc pode tambem iniciar a atualizacao automaticamente,
// chamando ExpressInstall.init() aqui, ao inves das seguintes linhas// anexa a msg personalizada de atualizacao, centralizada
var upgradeMsg = attachMovie(”upgradeMsg_src”, “upgradeMsg”, 1);
upgradeMsg._x = Stage.width / 2;
upgradeMsg._y = Stage.height / 2;// anexa as acoes de botao q iniciarao o atualizador ExpresInstall
upgradeMsg.upgradeBtn.onRelease = function() {
// este metodo eh o q dah inicio a atualizacao
ExpressInstall.init();
}
// se o expressinstall foi invocado, para a linha do tempo
stop();
}
É importante ressaltar que não se deve colocar nenhum conteúdo no primeiro quadro ou no que acontecer a checagem do expressinstall.
DOWNLOAD
No blog do autor[3] é possível baixar o conteúdo completo, incluindo o código fonte do JavaScript, arquivos .fla, arquivos .swf, expressinstaller.as e exemplos da implementação do SWFObject em diferentes circunstâncias.
Referência:
Deixe um Comentário