Como usar SWFObject

En la actualidad muchos habrán visto páginas hechas en Flash con un borde extraño y un mensaje: “Haga clic para activar y usar este control” o en ingles “Click for activate and using this control” esto se debe a nuevas políticas de Internet Explorer en cual no reproduce automáticamente los archivos ActiveX y para ello pregunta antes de ejecutarlo. Esto por motivos de seguridad pues si se permite que se ejecuten todos los ActiveX se puede ejecutar archivos maliciosos en nuestra PC.

Bueno, este pequeño inconveniente es resuelto por SWFObject el cual permite embeber los archivos SWF sin que te muestre este mensaje de advertencia, además de insertar el archivo flash de manera compatible para todos los navegadores. SWFObject es una librería en javascript llamada antes FlashObject, en cual permite embeber archivos SWFs en páginas HTML de manera limpia y estándar.

Como usar SWFObject

Primero descargamos los archivos desde: http://blog.deconcept.com/swfobject/
Luego de ellos extraemos los archivos incluidos en: swfobject1-4.zip donde encontraremos varios archivos de ejemplo, de los cuales el archivo principal es: swfobject.js

Para hacer uso de este javascript deberemos colocarlos en la carpeta de publicación de nuestra web. Para esto debemos insertar el javascript en nuestra página, esto es insertar la siguiente línea antes del cierre del tag HEAD.

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

El segundo requerimiento es insertar un DIV el cual contendrá el SWF. Este DIV debe tener un ID el cual lo identificará para mas adelante asociarlo al javascript que insertará el SWF. El el ejemplo el ID es flashcontent

  1. <div id="flashcontent">
  2.     // Mensaje si no existe el plugin de flash.
  3. </div>

Finalmente la inserción del flash se realiza con el siguiente código:

  1. <script type="text/javascript">
  2. // <![CDATA[
  3. var so = new SWFObject(path, id, ancho, alto, version, color);
  4. so.write("flashcontent");   
  5. // ]]>
  6. </script>


En donde se tiene:

  • path: ruta del swf a insertar.
  • id: identificador del swf a insertar, esto se usara para procesarlo con javascript en caso se necesite.
  • ancho: ancho de la pelicula a insertar.
  • alto: alto de la pelicula a insertar.
  • version: version del flash player necesario para reproducir la pelicula.
  • color: es el color de fondo de la pelicula insertada.

Veamos un ejemplo básico:

  1. <div id="myflash">
  2. Este site necesita el plugin de Flash Player.
  3. </div>
  4. <script type="text/javascript">
  5. // <![CDATA[
  6. var so = new SWFObject("main.swf","id","50","30","8","#FFF");
  7. so.write("myflash");   
  8. // ]]>
  9. </script>

Agregando Parametros al SWF

El el caso que necesitemos añadir Parametros adicionales a la página, esto se hace con el uso del comando addParam. Veamos el siguiente ejemplo:

  1. <div id="myflash">
  2. Este site necesita el plugin de Flash Player.
  3. </div>
  4. <script type="text/javascript">
  5. // <![CDATA[
  6. var so = new SWFObject("main.swf","id","50","30","8","#FFF");
  7. so.addParam("scale", "noscale");
  8. so.addParam("wmode", "transparent");
  9. so.addParam("flashvars", "nombre=jim&pais=peru");
  10. so.write("myflash");   
  11. // ]]>
  12. </script>

Como una observación final les comento que si su página es completamente en flash entonces en el lugar donde colocarán el texto de aviso de requerimiento del plugin, seria adecuado colocar la descripción de la página pues este texto es el que indexarán los buscadores.

Comentarios Total 53 comentarios


Diana
Publicado: 05/07/2006 3:52 pm

Hola mi pregunta es la siguiente y ojala me puedan ayudar.

Si tengo un SWF contenido en un archivo html, como hago para decirle a esta pagina ke ejecute el swf desde el frame 10 al abrirse la pagina por ejemplo.

Gracias

unijimpe
Publicado: 07/07/2006 1:24 am

Bueno eso se deberia hacer en el mismo flash por ejemplo poner en el primer frame:

gotoAndPlay(10);

Ahora si lo quieres hacer desde el mismo html, debes crear un javascript.

Ahora esto lo insertar antes de de tu html, luego en el body deberas escribir:

Ojo debes tener en cuenta que “movie” es el id que le has asignado a tu movie.

Saludos.

Alx
Publicado: 29/07/2006 1:08 am

muy interesante tutorial, pero si hay mas de un swf en el html?

Alx
Publicado: 29/07/2006 1:11 am

perdón por el comentario innecesario pero habia probado poner otro div pero no me funcionaba,pero ya lo logré hacer.. Gracias (Y)

Daniel
Publicado: 18/10/2006 7:05 pm

hola estoy metido en este rollo y como generalmente no tenia este problema y ahora evidentemente somos muchos no me queda otra que meter mano al codigo, lo que no me queda claro es “so.write(“myflash”);” ¿”myflash” es el nombre del swf o es una variable del codigo? yo estoy tratando de poner el flash dentro de una capa y/o en una tabla es esto posible, porque llevo horas sin resolverlo. por favor estare revisando esto para encontrar la respuesta.

unijimpe
Publicado: 19/10/2006 5:15 am

myflash es el nombre de div donde se va a colocar el SWF, ojo solo se puede colocar en el DIV no en tablas u otros tag HTML.

anomi
Publicado: 20/12/2006 11:43 pm

como estas mira tengo un problema donde se pone el div antes de cerra el tag head o en el body de la pagina es que no he podido hacver lo gracias

unijimpe
Publicado: 21/12/2006 12:09 am

Bueno el div tienes que colocarlo en donde quieres que aparezca el flash que estas insertando, es decir si deseas que aparezca debajo del titulo deberás ponerlo debajo de ese titulo, ojo que siempre esto dentro del body de tu HTML.
Saludos

anomi
Publicado: 21/12/2006 12:13 am

en mi appserv local si se carga el swf pero lo subo al hosting y nada
no se ve por que esta pasabdo esto alguien me puede ayudar

unijimpe
Publicado: 21/12/2006 12:18 am

Puede ser un tema de rutas, fijate que las rutas no sean absolutas. Si tienes la ruta de tu hosting podria revisarla y ayudarte.

anomi
Publicado: 24/12/2006 5:12 am

hola unijimpe dime algo mas sobre las rutas o como te podria dar la ruta de mi hosting ayudame asabe r cual es la ruta de mi hoisting por favor

anomi
Publicado: 24/12/2006 6:00 am

unijimpe ya lo logre vusuakizar graciuas ahora mi pregunta es el sfw es uyn video que codifique pero si le das el vinculo te abre mas no te carga en la pagina principal
sera que necesito un flash media server

anomi
Publicado: 24/12/2006 6:07 am

http://www.centrointeriormandala.org

unijimpe
Publicado: 24/12/2006 1:13 pm

Bueno yo me acabo de dat un vuelta por tu site y todo esta bien, si puede ver el video, además revise el codigo fuente de tu web y esta bien colocado el swfobject. Sucede que los videos demoran en cargar por eso quiza veas al inicio la pantalla en blanco pero luego veras el video sin problemas.

anomi
Publicado: 26/12/2006 6:56 pm

hola inijimpe gracias

bueno pero si revisas de nuevo mi site te daras cuenta que al clickiar en donde dice si no puede visualizar este video haz clic a ca sale el video bien con los contriles para poder arrancar

2 al iniciar la pagina principal sale el video tambien pero no sale con los controles solo se reporoduce ud sabe por que esta psando eso??

gracias

Pablo
Publicado: 04/01/2007 10:26 am

Hola, desde hace un par de meses uso el swfobject y ahora me estoy dando cuenta de que al hacer click en los botones del menu por primera vez, el boton no responde, y si lo hace en el segundo intento de click, se puede solucionar esto utilizando el swfobject.

unijimpe
Publicado: 05/01/2007 12:44 am

Hola la verdad que a mi nunca me ha pasado ese problema, a ver si me detallas mas acerca de ese problema, en que navegador pasa y si puedes me mandas la ruta para revisarlo.
Saludos.

viv
Publicado: 21/04/2007 5:54 pm

Hola :
No logro solucionar esto del swobjet, para dejar de hacer clic en mis peliculas flash :S
Mi problema es que se me duplican los swf , o sea aplico el codigo q dan, y se ve dos veces el mismo swf…. en uno corregido el problema y en el otro sigue igual!
** no se q poner en la parte q pide el ID ( var so = new SWFObject(“main.swf”,”???????id”,”50″,”30″,”7″,”#FFF”);
La pelicual q estoy usando en esto se llama hola.swf ( es de prueba)
Aca pongo como esta el html a ver si logran ayudarme ….

prueba

Este site necesita el plugin de Flash Player.

//

———-
gracias : :)

Santiago Bustelo
Publicado: 10/05/2007 3:07 pm

La razón de que el Explorer pregunte antes de correr Flash no se debe a “una política de seguridad”, sino a cuestiones legales y económicas.

Básicamente, perdieron un juicio millonario contra Eolas por la implementación del tag OBJECT.

Las opciones eran pagar los millones, o obligarnos a todos a cambiar la forma en que funcionan las páginas.

Así que aquí estamos, pataleando con swfobject, mientras el tío Gates cuenta los millones que se ahorró…

Saludos!

Magali Suarez
Publicado: 15/05/2007 3:47 pm

hola tengo un problema de ocultar una capa que contiene un swf. el cual contiene un boton para ocultar la dicha capa el problema es que cuando se oculta las demas animaciones dejan de reproducirse

Por favor ayuda urge!!!

SALUDOS

nanok
Publicado: 06/06/2007 8:52 pm

buenas en este blog!

Weno, tengo un problemilla. Tengo un archivo html donde hay varios iframes que contienen un swf cada uno. (uso este metodo por la utilización del swfobject).
El problema que tengo és que con el explorer se me ve el fondo blanco del iframe o del swf. he provado el allowtransparenci en el iframe i el addparam… en el swf, i no me tira!!!

Alguien save????

mekagwen el billgates!

nanok
Publicado: 06/06/2007 8:56 pm

pueden comprovarlo con el explorer en:
http://www.newgrafic.com/lobby8

unijimpe
Publicado: 06/06/2007 9:16 pm

La verdad no entiendo para que usas ifframe en tu pagina si con un solo SQFObject puedes incluir los tres flash en tu web. Creo que esa seria tu solución, pues los ifframe traen mas problemas que soluciones.

nanok
Publicado: 06/06/2007 9:26 pm

unijimpe, gracias!!!
¿te has fijado como és la web?

he provado de insertar todos los swf en una pagina i se me ponen uno por devajo del otro.

Te haré caso y intentaré montarlo todo en un html

nanok
Publicado: 06/06/2007 10:10 pm

unijimpe, si tengo este código, se me ponen los swf uno al lado del otro, que solución le ves??

  Aquesta web requereix Flash Player 8
click aquí per descarregar-tel

  Aquesta web requereix Flash Player 8
click aquí per descarregar-tel

  Aquesta web requereix Flash Player 8
click aquí per descarregar-tel

//

//

//

nanok
Publicado: 06/06/2007 10:38 pm

¿¿como puedo poner un swfobject al lado del otro??

si uso las tablas, no puedo insertar el swfobject(en scryp type)al lado del otro.

Por defecto me pone todos los objetos uno debajo del otro.

Espero vuestra respuesta!
gracias

nanok
Publicado: 06/06/2007 9:46 pm

uff, me estoy colapsando mucho!!!

Ahora el problema que tengo és que no puedo poner los swf uno al lado del otro.
lo estoy intentando con el siguiente codigo:(de momento lo hago con un separador y con un swf):

Gonxalo
Publicado: 10/07/2007 2:06 am

Hola me gustaria saber como poner mas de un archivo flash con Swfobject, si es posible me encataria saber la solucion ya que me es impresindible…
Desde ya muchas gracias…

unijimpe
Publicado: 10/07/2007 9:36 am

Para incluir varios archivos flash en un html, debes incluir varios divs con distinto nombre y luego varios bloques de javacript que selecciones SWFs diferentes y apunten a los div creados, así de sencillo.

jmpotthoff
Publicado: 29/07/2007 7:28 am

Hola, buenisimo sitio… tengo una duda: ¿como puedo hacer para que el SWF quede centrado?

s2,

JM

carlos Marin
Publicado: 10/09/2007 4:52 am

unijimpe: tengo un problema supuestamente pongo el object de swfObjects ahi como dice muy bien despliega sin problemas en ambos browsers pero me sigue pidiendo el ActiveX en el explorer, se supone que para eso es el objeto como tal, que pasa entonces puedes decirme. o es que estoy haciendo mal las cosas.
ha y netre otras felicitaciones tienes un blog demaciado interesante y con cosas muy buenas.

carlos Marin
Publicado: 14/09/2007 10:15 pm

ya solucione el problema . ahora mi problema es que este debe tomar unas jpgs externas a el con un loadmovie, peor no deja que estas pasen no permite la comunicacion.. no se por que.. que deberia hacer. gracias

Sergio
Publicado: 02/10/2007 11:54 pm

Si alguien me puede explicar como poner 2 o mas SWF en 1 html…

unijimpe
Publicado: 03/10/2007 7:54 am

Sergio, para insertar 2 o mas SWFs debes crear varios DIVs cada uno con un nombre distinto, luego creas el código SWFObject también la misma cantidad de veces referenciando a cada div donde deseas insertar tu SWF.

Por ejemplo:

<div id="header">-</div>
<div id="banner">-</div>
<script type="text/javascript">
var so = new SWFObject("header.swf","id1","50","30","8","#FFF");
so.write("header");
var so = new SWFObject("banner.swf","id2","50","30","8","#FFF");
so.write("banner");
</script>

Alexandra
Publicado: 11/11/2007 6:33 pm

Gracias por tu ayuda.
Con este tutorial logre resolver el problema de mi pagina.

Muchas gracias

Javier
Publicado: 20/12/2007 8:29 am

Muchas Gracias! de gran ayuda!! por fin me saqué esto de encima!!
(ahora solo queda que IE, por razones de seguridad, quite el SWObbject)
Ja, Ja, Ja..
Abrazo!

Santiagoloso
Publicado: 26/12/2007 1:32 pm

Muy buenas tardes, he probado el tutorial con éxito desde mi computadora, pero al subir los archivos a mi hosting me devuelve el cartel “You need to upgrade your Flash Player VivacHostel – Hostels Buenos Aires”, es decir, el mismo cartel que introduje en caso de que no tuviese el Flash player apropiado. Lo curioso es que no sucede lo mismo al cargarlo desde mi computadora.

Expresandolo nuevamente por si no se entendió: el swf me carga perfectamente cuando abro el html alojado en mi computadora, pero cuando intento cargarlo desde el host donde alojo la página me devuelve el cartel que redacté en caso de que no tenga el Flash Player actualizado.

Agradecería alguna aclaración al respecto.

Desde ya, muchas gracias.

lester
Publicado: 03/05/2008 4:12 pm

HOLA!! Tengo este codigo en un HTML:

In order to view this page you need JavaScript and Flash Player 8+ support!

//

El problema que tengo es que mi pelicula flash mide 2000 pix de alto, el ancho 100%, como unico puedo bajar para ver todo el flash es apretando la bolita del medio del raton, como puedo sacar, por medio de script o como sea, un scroll?

Gracias a todos!

Rer
Publicado: 02/06/2008 11:58 pm

Muchas gracias por la entrada. Finalmente esta instalado.

Puede verse el resultado final en

http://www.negociofijo.com/

En todos los mapas interiores esta el SWFObject.
Puede probarse en el Explorer.

Peke
Publicado: 25/06/2008 4:21 am

Hola, muchisimas gracias por esta entrada.. gracias a este “Tip” e podido solucionar un problema con mi web que llevaba dias intentado miles de soluciones pero esta fue la unica que me sirvio.. el problema era que yo hize un diseño y esta totalmente cortado y unido en dreamweaver por tablas.. pero en el centro va un logo en flash, cuando lo introducia, en firefox me creaba como especie de un debajo de la animacion, y hacia que se me deformara el diseño ya que todo era exacto.. en IE si me iba bien.. en fin, con esto, ya no sucede lo del espacio debajo de la animacion, me acabas de quitar un dolor de cabeza ejeje gracias…………..

saludos

Peke
Publicado: 25/06/2008 4:22 am

me creaba un BR.. debajo de la animacion.. no salio jeje, bye

Marcos
Publicado: 05/09/2008 10:08 am

Hola, quisiera saber como poner varios swf en un mismo div, por ejemplo tengo 4 swf, y quiero que al pulsar un boton se cargue el swf1, que al pulsar otro boton se cargue el swf2 y asi, pero que aparezcan en el mismo div.

marulafy
Publicado: 02/12/2008 2:00 pm

hola, tengo un problema. Tengo un archivo html. en dreamweaver y necesito poner en una misma columna de una tabla 2 swf. se puede? desde ya muchas gracias!!

anRoswell
Publicado: 18/10/2009 6:25 pm

Huy hermano gracias por todo el tiempo que empleas para ayudar a las demas personas…

damian
Publicado: 23/01/2010 10:23 am

hola he estado leyendo la tutorial y no se si mi problema esta relacionado, basicamente estoy iniciandome e intentando creear mi web. El problema que tengo es el siguiente:
he hecho la web con swf de fondo en el dreamweaver (que serán las imagenes y he puesto el menu también swf en una capa del dreamweaver.
resulta que la veo perfectamente en safari y firefox pero no en explorer. Además he intentado verla a través de firefox en pc y se ve el menu pero no la transparencia.
espero que me podáis dar alguna solución ya que ya no sé que hacer.
saludos

Oscar
Publicado: 15/02/2010 11:36 pm

hola, e insertado un menu hecho en flash menu labs, pero al navegar por los diferentes enlaces, se pierde el menu, y el error de la pagina que aparece dice: swfobject no esta definido. Por que me sucede esto??

Zarathustra
Publicado: 19/05/2010 5:55 pm

Hola, sé que ustedes son los que más saben y por eso recurro para preguntar cómo solucionar un error en la web que me da el IE:
“Swfobject no está definido” (Línea:319 carácter:1).
El código de la línea en cuestión es este:

swfobject.registerObject("FlashID3");

¿Qué es lo que puede estar mal?
Lo raro es que en Chrome se ve bien la web.
(www.puntcreativo.com)

Gracias por todo,
Zarathustra.

Zarathustra
Publicado: 19/05/2010 6:15 pm

Sorry, adjunto los códigos de todo el javascript:

El error está en la línea: 319 carácter:1


<script type="text/javascript">
<!--
swfobject.registerObject("FlashID3");
swfobject.registerObject("FlashID5");
swfobject.registerObject("FlashID4");
swfobject.registerObject("FlashID8");
swfobject.registerObject("FlashID7");
swfobject.registerObject("FlashID4");
swfobject.registerObject("FlashID6");
swfobject.registerObject("FlashID3");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID");
//-->
</script>

Gracias de nuevo.

unijimpe
Publicado: 19/05/2010 6:25 pm

Hola, te ayudaría pero la verdad no se de donde sacas registerObject?… Ok, es por que estas utilizando la versión 2.0 de SWFObject.

Una posible causa es que estas utilizando rutas que incluyen tildes y espacios en blanco como por ejemplo: ‘../../PÁGINA WEB CLAUDIO/WEB – DW/Scripts/’, prueba utilizando rutas que no tengan ni tildes ni espacios en blanco.

Ahora para insertar SWF con SWFObject 2.0 no te compliques tanto, es mas sencillo de hacer, para ello puedes leer: http://blog.unijimpe.net/swfobject-20/

Zarathustra
Publicado: 27/05/2010 6:18 am

Gracias por el consejo.

Alexis
Publicado: 27/07/2010 3:42 pm

no me reconoce la ruta de ninguna forma para entrar a buscar un swf al directorio siguiente en
var so = new SWFObject(“menu.swf”

ejemplos:
var so = new SWFObject(“menu1/menu.swf”
var so = new SWFObject(“/menu1/menu.swf”
var so = new SWFObject(“menu1\menu.swf”
var so = new SWFObject(“\menu1\menu.swf”

y0da
Publicado: 02/02/2011 3:03 pm

Hola que tal, seria para mi de agrado el poder recibir respuesta ante mi problema, es el siguiente: Tengo una Pagina de navegacion hecha en FLASH, tengo el .SWF correspondiente y el .HTML correspondiente, yo quiero colocar mi pagina de navegacion como TEMA en WORDPRESS y no se como hacerlo, ya he visto el contenido que se encuentra /wp-content/themes, y hay una carpeta por defecto q es twentyten (que es la carpeta del tema por defecto), me imagino que necesito tener otra carpeta con mi TEMA pero no se como obtenerla con el archivo flash que tengo, ME GUSTARIA QUE PUDIERAN AYUDARME.

rocabilly
Publicado: 07/09/2011 6:11 pm

hola recientemente edite una galeria flash de estas magnifias que tienen, pero el problema que tengo es que no puedo ver las imagnes en mozilla, si se me ve todo bien en iexplorer y chrome, alguien me puede ayudar, llevo horas mirando en foros y no he encontrado la solucion, tal vez la solucion sea haber llegado a este enlaze, un saludo

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)