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 delHTML 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</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 flashrequerida. 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
</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.
fuente ujimpe
Comentarios