SWFObject 2.0

15/03/2008
6:46 pm
unijimpe

Se acaba de lanzar SWFObject 2.0 la librería mas popular y mas versatil para insertar SWF en páginas html. SWObject es el producto del trabajo de Geoff Stearns creador de SWFObject y Bobby van der Sluis creador de UFO los cuales habían estado desarrollando SWFFix del cual comentamos hace un tiempo pero que ahora lo han llamado SWFObject 2.0.

Utilizando SWFObject 2.0
Primero descargamos los archivos desde http://code.google.com/p/swfobject/downloads/list, luego del zip extraemos el archivo swfobject.js que contiene todas las funciones necesarias para el uso de SWFObject 2.0. Lo siguiente es crear nuestra página html e insertar el javascript en el header del HTML de la siguiente forma:

<script type="text/javascript" src="swfobject.js"></script>

Luego creamos un div en donde se mostrará el SWF que deseamos insertar, dentro de este div colocamos un texto alternativo que se mostrará en caso el usuario no tenga Flash.

<div id="main">SWFObject 2.0 Demo - unijimpe</div>

El ultimo paso es utilizar el método embedSWF al cual le pasamos: el archivo swf a insertar, el identificador del div donde deseamos insertar el swf, el ancho, el alto y la versión de flash requerida. Luego si insertamos un archivo llamado main.swf tendríamos:

<script type="text/javascript">
swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
</script>

Luego uniendo todos los elementos tenemos la forma completa de insertar SWFs utilizando SWFObject 2.0. (Pueden ver el resultado en swfobject20/index.html)

<html>
<head>
<title>SWFObject 2.0 Demo - unijimpe</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
</script>
</head>
<body>
<div id="main">
SWFObject 2.0 Demo - unijimpe
</div>
</body>
</html>

Ahora si por ejemplo deseamos insertar un vídeo de Youtube en nuestra página, podemos hacerlo utilizando SWFObject 2.0 de la siguiente forma (Pueden ver el resultado en: swfobject20/youtube.html):

<html>
<head>
<title>Youtube Video with SWFObject 2.0 - unijimpe</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://www.youtube.com/v/yXQ7-9pV7RM&hl=en", "main", "425", "355", "9.0.0");
</script>
</head>
<body>
<div id="main">Youtube Video with SWFObject 2.0 - unijimpe</div>
</body>
</html>

Agregando Flashvars, Parámetros y atributos
Uno de los usos mas corrientes es el agregar flashvars o parámetros adicionales, para ello SWFObject 2.0 puede recibir parámetros adicionales

<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF("myswf.swf", "mydiv", "300", "120", "9.0.0","", flashvars, params, attributes);
</script>

Luego si por ejemplo deseamos pasarle una variable con el url de un web y además deseamos que no se muestre el menú y que el swf sea transparente tendríamos:

<script type="text/javascript">
var flashvars = {url: "www.google.com"};
var params = {menu: "false", wmode: "transparent" };
var attributes = {};
swfobject.embedSWF("myswf.swf", "mydiv", "300", "120", "9.0.0","", flashvars, params, attributes);
</script>

Como pueden ver no es muy complicado de utilizar, es mas podría asegurar que es mas sencillo de utilizar que su predecesor. Además tiene la ventaja que la librería ha sido re-escrita completamente para adecuarse a los nuevos estándares.

Ahora si aún asi se parece complicado utilizar esta librería se ha creado SFWObject Generator el cual es una aplicación que te permitirá mediante un formulario muy intuitivo generar el código que necesitas para insertar flash en tu página.

Mas Información

Posts Relacionados

Flash, General, Javascript

Total de Comentarios: 18

16/03/2008

7:41 am

Como a tantos otros visito por día cientos de RSS para estar actualizado y como de costumbre lo de ustedes es sensacional, porque?:
1) No publican material por publicar.
2) Todo lo publicado es útil en mi trabajo.
3) Toda explicación es clara sencilla y sin rebusques.
Simplemente GRACIAS!!, un gracias sencillo y contundente como ustedes.

16/03/2008

11:42 pm

Solo veo un problema, qué pasa si el usuario no tiene habilitado Javascript? :P

17/03/2008

11:43 am

[...] La librería más popular para insertar mediante javascript, archivos swf en nuestros html, ha sido actualizada a su versión 2.0. Aunque su uso es muy sencillo, aquí hay un tutorial. [...]

17/03/2008

10:42 pm

leo siempre unijimpe a traves de mi lector de rss de opera, pero esta vez me vengo a la web para dejar un comentario, porque la verdad es que la pagina y la info que brindan es de lo mejor. y ahora que leo, coincido totalmente con Migue, hay varios blogs que no hacen mas que copiar y pegar informacion repetida que está en todos lados y que cansa volver a leer… sin embargo uds hacen un post cada tanto pero con cosas importantes que nos sirven a todos. gracias por compartir ideas, conocimientos y novedades!
salu2!

25/03/2008

6:36 am

[...] los parámetros y atributos del swf se tornaba bastante odioso. Pensé en agregar ejemplos pero, he visto un blog que lo explico de maravillas. Enlace | SWF Object 2.0 Visto en (Mas ejemplos) | Unijimpe Leer [...]

17/04/2008

2:29 pm

Muchísimas gracias por la información, no tenía ni idea que existiera esta librería, me sirvió 100% bien!

08/06/2008

4:08 pm

[...] versión de la libreria desde [ Visitar ] – Guia de como insertar y utilizar el SWFObject: [ Visitar [...]

19/06/2008

4:43 am

[...] Unijimpe.net – Swfobject 2.0 [...]

16/09/2008

8:39 pm

parece que este metodo no funciona para firefox en el caso de que el documento se expanda a porcentajes de 100 x 100 W&H en lugar de pixeles concretos. Disculpen mi ignorancia.

Gracias

17/09/2008

1:39 am

html, body, #containerA, #containerB { height:100%; }
body { margin:0; padding:0; overflow:hidden; }

de las faqs de SWFObject (http://code.google.com/p/swfobject/wiki/faq)

Otra cosa ¿Sabrian como añadirle el expressInstall?

No me funciona …

Bien Gracias

17/09/2008

4:11 am

parece q expressInstall solo sirve para si tienes instalado flashplayer 6… y no apareceria en los casos en que no hubiera instalado ningún tipo de plugin en la supuesta compu que se estuviera conectando a la página en cuestión.

http://www.carrerascandi.net/eric

21/01/2009

5:58 pm

Realmente la librería SWFObject es una herramienta muy útil en el día a día de los que nos dedicamos a desarrollar webs.

Un saludo,
Alejandro Arco

25/02/2009

5:22 pm

Muy útil, como todo lo que publicáis. Seguir así… me habéis hecho un gran favor. Otra vez.

27/02/2009

12:03 pm

Hola.

Para cargar videos de Youtube no hay problema pero ¿hay alguna forma para cargar videos de otras webs como Vimeo?

¿esto es para solucionar los problemas que da IE6?

Un saludo!

23/03/2009

11:47 am

quisiera que me ayuden un poco, eh segudio las insrucciones que aqui dieron gentilmente, pero no me funiona la transparencia, y no entiendo por que, espero me puedan ayudar…

18/04/2009

4:48 pm

[...] tema en: SWFobject 1.5, SWFfix, UFO y en varios artículos publicados en unijimpe sobre SWFfix, SWFobject 2.0 y SWFobject 1.5 donde además ilustra y detalla como se realiza cada [...]