SWFObject é uma API em Javascript para inserir aquivos swf(Flash) no HTML, simples de usar e deixa o código HTML super limpo.
Se você quer saber mais informações sobre o SWFObject acesse: http://code.google.com/p/swfobject/(inglês).
Algumas características legais do SWFObject são :
- Fácil de usar
- Obtém informações sobre o swf
- É um projeto Open Source
- Utiliza um pequeno arquivo JavaScript de 9.5Kb
- Detectar a versão do flash player.
Tem duas formas de adicionar o arquivo .swf no seu arquivo HTML. Uma via tags html e a segunda via javascript. Vou Mostrar as duas formas a seguir mais antes precisamos baixar o swfobject 2.0 em, http://swfobject.googlecode.com/files/swfobject_2_1.zip.
Baixe o arquivo zip, e descompacte na pasta que junto ao arquivo HTML.
Por exemplo:
Então eu tenho os seguintes arquivos necessário para o tutorial:
- A index.html – o arquivo que vou abrir o arquivo swf
- meu_swf.swf – o swf que será inserido no html
- swfobject.js – o próprio.
- expressInstall.swf – o arquivo que ajudará o usuário instalar a versão atual do flash player caso não tenha.
Utilizando o swfobject com tags html fica da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Exemplo SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- importamos a biblioteca do swfobject -->
<script type="text/javascript" src="swfobject.js"></script>
<!-- Registramos nosso conteúdo, e passamos os seguintes parâmetros: o primeiro é o id do object
ele tem que ser único("idAlvo"), segundo a versão do flash player e por fim o conteúdo alternativo se caso o usuário tiver uma versão do flash player mais antiga será exibido o express Install da adobe que permito o usuário baixar a ultima versão do flash player diretamente na página, esse último atributo é opcional -->
<script type="text/javascript">
swfobject.registerObject("idAlvo", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<!-- no object passamos o id, lembrando que ele tem que ser único, o classid, a largura e a altura do objeto esse valores podem ser passados em pixel ou %, dentro do object passamos o parâmetro name que se refere ao nome do objeto e por fim fim uma condicional caso esteja utilizando IE -->
<object id="idAlvo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="meu_swf.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="meu_swf.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>Agora vamos dar uma olhada como utilizar SWFobject dinâmicamente. É bem parecido com o exemplo anterior.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Exemplo SWFObject dinâmicamente</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("meu_swf.swf", "idAlvo", "300", "120", "9.0.0");
</script>
</head>
<body>
<div id="idAlvo">
<p>Alternative content</p>
</div>
</body>
</html> |
Entendendo o código anterior importamos o SWFObject adicionamos um tag de script e passamos o comando “swfobject.embedSWF” para adicionar nosso arquivo swf, o parâmetros passados são:
o endereço do arquivo swf, o id da div que será incluido o swf, a largura e altura do arquivo flash e a versão do arquivo flash, além desses parâmetros tem os opcionais, expressInstall, flashvars, parâmetros e attributos.
E por fim na div dentro do
que será substituída pelo conteúdo flash colocamos o conteúdo alternativo caso o usuário não tenha a ultima versão do flash player.Uma vantagem da inclusão por tags html é que o mecanismo de busca têm maior facilidade de encontrar o conteúdo, mas as melhorias nos mecanismo de busca já estão identificando o conteúdo adicionado com javascript.
Até a próxima
Hummmm legal pacas Fellyph.
Comecei a usar em meus projetos agora a pouco tempo. Antes usava aquele “defult” do dreamweaver/flash cs3.
Uma característica bem legal que eu acho que ele tem é realmente a limpeza que o codgigo fica, bem “clean” rs.
Uma outra é a utilização das flashvars, qu ajudam no esquema de navegação “tradicional” de voltar a página anterior pelo navegador, ou entao mandar uma página específica pra alguem , etc etc etc
Ei, podia ter um tutozinho de como utilizar essa ferramenta heim!
flw veio!
Rapaz eu tiro o chapéu para você!
sou iniciante na atividade de webdesign, e estava procurando
“limpar” o meu codigo html para ser validado pelo w3c, e sempre me acusava um erro no tal “embed”!
Agora com essa técnica espero resolver o meu problema de validação com o W3C.
Muito obrigado!
Pingback: SWFobject 2.2 | Fellyph Cintra Flash Developer
Utilizando o swfobject.embedSWF para passagem de parametros para o flash:
flashvars={efeito:1};
swfobject.embedSWF(“Principal.swf”, “myContent”, “100%”, “100%”, “9.0.0″,”",flashvars);
e no fla:
externo = LoaderInfo(this.root.loaderInfo).flashvars;
foi a maneira como encontrei nos tutoriais, mas não funcionou. Alguma dica??