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
Comentarios Total 31 comentarios
Publicado: 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.
Publicado: 16/03/2008 11:42 pm
Solo veo un problema, qué pasa si el usuario no tiene habilitado Javascript? :P
Publicado: 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. […]
Publicado: 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!
Publicado: 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 […]
Publicado: 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!
Publicado: 08/06/2008 4:08 pm
[…] versión de la libreria desde [ Visitar ] – Guia de como insertar y utilizar el SWFObject: [ Visitar […]
Publicado: 19/06/2008 4:43 am
[…] Unijimpe.net – Swfobject 2.0 […]
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 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.
Publicado: 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!
Publicado: 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…
Publicado: 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 […]
Publicado: 31/05/2009 5:00 pm
Hola. Interesante el artículo , pero tengo un problema al igual que Leon , no puedo lograr la transparencia del mi pelicula flash.
Embebiendo de la forma clasica si se ve transparente pero de esta manera no aque se deberá??
Espero tu respuesta.
Publicado: 12/06/2009 3:24 am
Hola ¿como se podria hacer para poder elegir el frame en el que empezase el flash? Saludos
Publicado: 02/10/2009 6:22 pm
Hola!
Necesito ayuda!
He usado esta librería para insertar una peli flash. Todo va estupendo si solo tengo un div. Pero si tengo un div metido dentro de otro y en cada uno quiero poner una peli, no me funciona…
¿Cómo debo hacerlo?
Gracias!
Publicado: 10/04/2010 4:39 pm
Tengo un problema con el swfobject.embedSWF, estoy añadiendo todos los swfobject.embedSWF en un mismo archivo… El código queda así:
<!-- carga de banners sustituidos para mo?viles -->
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("imagenes/banner/inicio_banner", "banner_inicio", "577", "185", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("imagenes/banner/diseno_banner.swf", "banner_diseno_grafico", "577", "185", "9.0.0", false, flashvars, params, attributes);
Pero llamo a este código desde diferentes paginas, para que en una cargue un banner y en otra otro, para no tener mil archivos…
El problema es que solo funciona el primero, es decir, el swf el q se carga en el root principal…
Al archivo que carga los swf lo llamo con:
(esta en un nivel superior, pero algo falla que no funciona bien)
¿como podría hacerlo?
Publicado: 13/04/2010 6:07 am
¿Has probado de esta forma: «/imagenes/banner/diseno_banner.swf», con la barra al inicio de la ruta?
Publicado: 17/04/2010 12:00 pm
Buenas a todos. .
Me estoy volviendo loco para poder hacer una cosa relacionada con este tema.
Les explico.
Estoy haciendo una web que tiene de fondo un SWF (aplicando swffit y swfobject) El resultado que quiero conseguir es que el fondo, Y SOLO EL FONDO, se ajuste a la resolucion de panatalla. Hasta ahí todo bien.
Luego aprovechandome de z-index ordeno el fondo(0), una caja blanca con transparencia(1) y por ultimo, encima de todo, el contenido(2).
Cuando lo ejecuto en mi ordenador, lo veo de muerte. Es como yo quiero.
Lo subo en el servidor y en mi ordenador lo veo bien tambien.
Pero en otros ordenadores que no sean el mio el SWF del fondo se ha plantado justo delante del todo impidiendo que las 2 capas de despues se vean.
Cuando intento añadirle un z-index al swfobject no tengo ni idea de donde hacerlo.
PORFAVORRr! que alguien me heche una mano. Me voy a volver loco. Acudo a vosotros, por que sois la hostia. Gracias! Reinaldo!
Publicado: 21/08/2010 9:26 am
[…] Todos sabemos de la guerra abierta entre MAc y Adobe y hasta que no se resuelva tenemos que buscar formas alternativas para poder construir webs con contenido gráfico dinámico que se pueda ver corréctamente en todos los dispositivos, incluidos el dichoso Iphone y otros productos similares de Mac. Gracias a la librería javascript SWFObject podemos conseguir que se pueda visualizar corréctamente ciertos contenidos en todos estos dispositivos. Pero antes un poco de historia. Mucho ha llovido desde que el señor Bobby van der Sluis creara junto a Geoff Stearns la librería open-source JavaScript llamada SWFObject 2.0. que nos permite detectar Adobe Flash Player y embeber archivos .swf dentro de las páginas html de una forma sencilla, así como de aplicar diversos parámetros a dicho .swf como pueden ser el típico “nonscale” o el “Wmode=Transparent” además de muchos otros. . Este post viene en relación a la nueva actualización de dicha librería. Más concretamente la versión SWFObject 2.2. Hablaré de los generadores de código que hay para descargar en la web del proyecto así como de unos experimentos para poder visualizar contenido alternativo en ordenadores sin Flash Player o en dispositivos como IPhone o Ipad. Este no pretende ser un tutorial de como utilizar dicha librería ya que en la red se pueden encontrar muchos post muy completos sobre este asunto. Es más, aquí os dejo dos enlaces de los más completos sobre como instalar y usar esta librería: SWFObject 2_0 blog.unijimpe.net […]
Publicado: 16/10/2010 11:20 am
estoy haciendo una web todo bien en los navegadores menos con el ie, no me cargan los archivos flash me sale un error de SWFObject id undefined, agredeceria sus respuestas, gracias
Publicado: 23/11/2010 3:55 pm
la info es de lo mejor y me ha salvado muchas ocaciones, tengo tambien un temilla, ultimamente firefox anda teniendo problemas con web hechas con flash y use elswobject pero sin resultados en IE espectacular funciona.
Publicado: 21/01/2011 8:17 pm
Gracias por el articulo la verdad que me resulto muy practico.
Saludos
Publicado: 19/05/2011 9:52 pm
Buenos días!
Les escribo para pedirles ayuda con un flash que necesito embeber con SWFObject y no se como.
¿Cómo cambiaría el siguinete código si utilizo SWFObject?
Publicado: 09/06/2011 10:54 am
[…] […]
Publicado: 29/06/2011 12:27 pm
Mmmm bastate interesante y util, es lo que andaba buscando gracias a cristalab
Publicado: 29/06/2011 12:28 pm
y gracias al que desarrollo el blog
Publicado: 27/08/2012 10:42 am
Yo intente con el generador del mismo Swfobject 2 y no funcionaba correctamente pero de la forma que lo planteas es mucho mas facil.
Muy Buen aporte muchas Gracias!!