SWFObject 2.1

Publicado por Iván Gajate el 29 de octubre de 2008 en AS2, AS3, Desarrollo Web, Flash, Tutoriales

Hay una nueva versión de esta librería de JavaScript que sirve para incrustar contenido flash en nuestro html.

Como ya hemos visto en Flash 99% bueno, esta forma de hacerlo nos ofrece varias ventajas:

  1. Es muy fácil de insertar, mas sencillo que incluir las etiquetas object, es una solución respetuosa con los estándares, y es común para todos los navegadores.
  2. Evita el tener que hacer clic sobre el objeto flash para activarlo en las últimas versiones de Internet Explorer.
  3. Nos permite incluir un contenido "alternativo" accesible para usuarios que no tengan flash player o naveguen con JavaScript deshabilitado.
  4. Google y otros motores de búsqueda son capaces de leer e indexar ese contenido alternativo perfectamente.

 

Ahora, con el SWFObject, ponemos una capa (div) con el contenido no-flash o alternativo (por supuesto podemos dejarla vacía). Esta capa, será sustituida por el contenido flash, de forma totalmente transparente para el usuario.

Eso si, tenemos que darle un id a la capa para que el SWFObject sepa dónde queremos que ponga nuestro flash.

<div id="miFlash">Texto Alternativo</div>

Ahora, en la cabecera del html, incluimos la librería del SWFObject, y hacemos la llamada para que se incluya el flash.

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

<script type="text/javascript">
	//swfobject.embedSWF(swfUrl,      id,    width, height, version)
	swfobject.embedSWF("test.swf", "miFlash", "300", "120", "8.0.0");
</script>

Esta es una de las novedades de la versión 2.1, ahora no hace falta incluir JavaScript en el body de nuestro documento, se puede hacer desde la cabecera. Con esto se evitan los posibles parpadeos que aparecían antes cuando se sustituía el contenido alternativo por el flash, pues se esperaba demasiado para hacer el cambio.

 

Si probamos nuestro html en un navegador, veremos la película flash de muestra, con nuestro sistema operativo y versión del player instalada.

swfobject_1

 

La llamada embedSWF tiene 5 parámetros obligatorios:

  1. swfUrl: Es el nombre de nuestra película flash, puede ser relativa o absoluta.
  2. id: El id de la capa donde irá colocado el swf.
  3. width: Anchura del swf en píxels.
  4. height: Altura del swf en píxels.
  5. version: La versión del Flash Player mínima necesaria para poder ver nuestra película. Es interesante que sea la mínima, pues así ganamos usuarios que puedan ver nuestro flash.

 

Si por ejemplo quisiéramos que nuestro swf ocupase toda la página, full flash, pondríamos como anchura y altura del swf 100%

swfobject.embedSWF("test.swf", "miFlash", "100%", "100%", "8.0.0" );

Para que esto funcione bien en Firefox, tenemos que poner unos estilos a la página, porque inicialmente no reconoce los valores de altura del body y del html. Los paddings y margin son para que cubra toda la página sin dejar márgenes.

<style type="text/css" media="screen">
	html, body {
		height:100%;
	}
		body {
		margin:0;
		padding:0;
		overflow:hidden;
	}
</style>

 

Existen otros 4 parámetros opcionales:

  1. expressInstallSwfurl: Es el nombre de un swf alternativo en caso de que no tengamos la versión del player mínima, pero por lo menos tengamos la 6.0.65.

    Nos actualiza a la última versión de flash player dentro de nuestro site, mediante esta ventana de confirmación:

    express_install 

    Este swf ya viene en el zip del SWFObject, y se llama "expressInstall.swf".
  2. flashvars: Un objeto con las variables que queramos "inyectar" a nuestro flash en formato pares de valores.
  3. params: Un objeto con los parámetros admitidos. Los mas comunes son:
    • menu: "true" o "false"
    • quality: "low", "autolow", "autohigh", "medium", "high", "best"
    • scale: "showall", "noborder", "exactfit", "noscale"
    • salign: "l", "t", "r", "b", "tl", "tr", "bl", "br"
    • wmode: "window", "opaque", "transparent"
    • bgcolor: "FFFFFF" por ejemplo
  4. attributes: Un objeto con los atributos admitidos. Los mas comunes son:
    1. id: Si no se define, el elemento object automáticamente hereda el id del div contenedor.
    2. name
    3. styleclass
    4. align

 

Un ejemplo con una variable (nombre="Ivan" por ejemplo) y con algunos parámetros opcionales (que no aparezca el menú al pulsar botón derecho, que no escale el swf y que sea un flash transparente) podría ser así:

<script type="text/javascript">
	var flashvars = {nombre:"Iván"};
	var params = {menu:"false", scale:"noscale", wmode:"transparent"};
	var attributes = {};
	//swfobject.embedSWF(swfUrl,      id,     width,  height, version, expressInstallSwfurl, flashvars, params, attributes)
	swfobject.embedSWF("test.swf", "miFlash", "100%", "100%", "8.0.0", "expressInstall.swf", flashvars, params, attributes );
</script>

 

Nuestro HTML completo podría quedar así:

<html>
	<head>
		<title>SWFObject 2 dynamic publishing</title>
		
		<style type="text/css" media="screen">
			html, body {
				height:100%;
			}
			body {
				margin:0;
				padding:0;
				overflow:hidden;
			}
		</style>
		
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			//swfobject.embedSWF(swfUrl,      id,     width,  height, version, expressInstallSwfurl,    flashvars,     params,                                              attributes)
			swfobject.embedSWF("test.swf", "miFlash", "100%", "100%", "8.0.0", "expressInstall.swf", {nombre:"Iván"}, {menu:"false", scale:"noscale", wmode:"transparent"}, {} );
		</script>
		
	</head>
	<body>
	
		<div id="miFlash"> Texto Alternativo </div>
	
	</body>
</html>

 

Esta forma de incluir los swf además de fácil nos ofrece muchas ventajas como el poder poner un contenido alternativo accesible por los buscadores, o hacer el control de la versión del player, tanto que los de Adobe ya lo han incluido como método oficial en el CS4.

Esta forma de hacerlo, se denomina dynamic publishing, pero existe una segunda forma llamada static publishing. Sigue mas los estándares web, ya que utiliza la etiqueta object y trata de hacerlo de la manera tradicional, y en caso de no poder, tira del JavaScript. A mi me gusta menos porque es bastante mas larga de escribir y hay que hacer algún truco para reconocer Internet Explorer.

Algunos enlaces de interés:

 

12 comentarios para “SWFObject 2.1”

  1. @Cesar: Puedes incrustar todos los swf que quieras, solo tienes que cambiarle el destino:

    swfobject.embedSWF(“test1.swf”, “miFlash1”, “100%”, “100%”, “8.0.0” );
    swfobject.embedSWF(“test2.swf”, “miFlash2”, “100%”, “100%”, “8.0.0” );
    swfobject.embedSWF(“test3.swf”, “miFlash3”, “100%”, “100%”, “8.0.0” );

  2. Hola a todos.
    Estoy usando el SwfObject versión 2.2 y con el cual solamente puedo incrustar un .swf en el HTML.
    Como se podría hacer para poder colocar más de 1 película en sus respectivos div.

    Gracias de ante mano por sus respuestas.

  3. @Bernabe: Comprueba que lo hayas escrito bien porque da igual donde lo metas.

  4. Si meto el div dentro de una tabla no me sirve, tienen alguna solucion ?

  5. Tengo un problema con el swfobject.embedSWF, estoy añadiendo todos los swfobject.embedSWF en un mismo archivo… El código queda así:

    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?

  6. Interesante solución. Ahí me baje la versión 2.2 para ver si funciona.

    Gracias y les comentó mi resultado.

  7. bueno pero no funciona para internet explorer 7 que cagada
    man , tenes alguna solución para esto!

  8. Hola Gustavo,
    no hace falta que incluyas el js cada vez que lo uses.
    Además, he mirado un poco tu código y me ha parecido ver que haces un embed clásico y luego usas el swfobject para meter el mismo swf. Miralo bien, porque puede que sea eso.
    El SWFObject lo usa mucha gente y está muy testeado, y me parece muy raro que algo tan común como un menú y un player de vídeo den problemas.

  9. He probado las diferentes formas de incluir la version 2.1, pero el menu que tengo al lado, se despliega detras del objeto flash (es un video)…Lo que no sucede con a version 1.5 (Ya lo probe varias veces). El problema es que la version 1.5, no permite ejecutar las funciones de reproducción del video en Firefox y en IE no hay problema. Así que opte por dejar la versión 1.5, mientras trato de solucionar el problema de la versión 2.1…A no ser que ya alguien lo halla solucionado.

    Gracias.

  10. Interesante actualización, ese retardo además se acentuaba cuando la página está cargado de banners como en el caso de los portales.

    Echo de menos algún método para que se muestren las barras de scroll a un tamaño mínimo de ventana cuando ponemos el swf al 100%, como tiene swfIn [1], por cierto que es muy recomendable también, aunque resulta mucho más confuso de implementar.

    Oye, me gusta el sistema de expandir contenido que has metido 😉

    [1] http://code.google.com/p/swfin/

  11. […] buscarnos la vida. Pero ya hay gente por ahí que ha mirado mucho este tema y se han llegado a algunas soluciones muy buenas que paso a resumir […]