Trabalhando com SWFObject

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:




  
    Exemplo SWFObject
    

    
    %MINIFYHTMLec126f6b2874acc7c735e8e01eea54225%%MINIFYHTMLec126f6b2874acc7c735e8e01eea54226%
  
    

Alternative content

%MINIFYHTMLec126f6b2874acc7c735e8e01eea54227%

Agora vamos dar uma olhada como utilizar SWFobject dinâmicamente. É bem parecido com o exemplo anterior.




  
    Exemplo SWFObject dinâmicamente
    %MINIFYHTMLec126f6b2874acc7c735e8e01eea54228%%MINIFYHTMLec126f6b2874acc7c735e8e01eea54229%
  
    

Alternative content

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

4 respostas para “Trabalhando com SWFObject”

  1. 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!

  2. 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!

  3. 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??

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.