Feb 18 2010

Insertar SWF desde un archivo Javascript




Posiblemente es una de las soluciones que ya habreis visto en algun sitio, pero de momento me resulta la más efectiva y limpia a la hora de modificar código. La cosa es bastante sencilla y vamos a explicarla paso a paso.

Lo primero de todos será crear el JS que contenga la función que se usará para que se muestre nuestro flash. Analicemos la función paso a paso:

Archivo: insertarSWF.js

[js] function mostrarSWF(url,ancho,alto) {

// aquí introduciremos el código de la función

}
[/js]

Lo que estamos haciendo es crear la función propiamente dicha, la podemos llamar como nosotros queramos, pero siempre recomendamos es usar nombres que nos ayuden a reconocer las funciones y así no perder tiempo. En nuestro caso la hemos llamado mostrarSWF.

[js]//A continuación creamos una variable que se llamará "valor"
var valor=”;
[/js] [js] //Aquí lo único que hemos echo es coger todos los parámetros que usamos para insertar un flash de modo convencional, y pasarlos por una variable e ir añadiendo los valores a la variable("valor").

//En los parámetros "width" y "height" le damos el valor de su atributo (ancho y alto), que más tarde ya definiremos.
valor+=’<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="’+ ancho +’" height="’+ alto +’">’;

//nombre de la película, lo definiremos desde nuestra variable ("url")
valor+=’<param name="movie" value="’+url+’" />’;

//añadimos el parámetro de la calidad de imágen
valor+=’<param name="quality" value="high" />’;

//añadimos el valor "wmode" y en este caso le decimos que el swf sea "transparent"
valor+=’<param name="wmode" value="transparent" />’;

//Eliminamos el menu típico de Flash
valor+=’<param name="menu" value="false" />’;

//Definimos los valores del embed: "src, quality, wmode, menu"
valor+=’<embed src="’+url+’" quality="high" wmode="transparent" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowScriptAccess="sameDomain" width="’+ ancho +’" height="’+ alto +’"></embed>’;

//cerramos el tag "object"
valor+=’</object>’;

//Pintamos la variable valor en nuestro docmuento
document.write(valor);
[/js]

Finalmente sólo nos quedará poner en nuestro documento html,php,cfm, el script para que localize y cargue nuestra función javascript y la función que nos muestre el flash deseado. el script que tenemos que poner sería así, lo colocamos dentro del div contenedor del swf:

[html]

<div class="contenedor_swf">
<script type="text/javascript">mostrarSWF("/swf/myflash.swf",640,480)</script>
</div>
[/html]

Resumiendo que el código final de nuestro html y nuestro js sería algo como esto:

mostrarSWF.js

[js] //función para mostrar flash en página

function insertarswf(url,ancho,alto) {
var valor=”;
valor+=’<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="’+ ancho +’" height="’+ alto +’">’;
valor+=’<param name="movie" value="’+url+’" />’;
valor+=’<param name="quality" value="high" />’;
valor+=’<param name="wmode" value="transparent" />’;
valor+=’<param name="menu" value="false" />’;
valor+=’<embed src="’+url+’" quality="high" wmode="transparent" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowScriptAccess="sameDomain" width="’+ ancho +’" height="’+ alto +’"></embed>’;
valor+=’</object>’;
document.write(valor);
}
[/js]

index.html

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insertar SWF a través de un javascript</title>
<script type="text/javascript" src="/js/insSWF.js"></script>
</head>

<body>

<div class="contenedor_swf">
<script type="text/javascript">mostrarSWF("/swf/myflash.swf",640,480)</script>
</div>

</body>
</html>
[/html]

Share on Twitter

Escrito por Laraphype • Informática, Internet, Programación, Tecnología • 2 • Tags: , , , , ,