Tutorial FLASH - Tutorial sobre como incluir los nuevos controles ActiveX de Flash en Internet Explorer. (Revisión 2)

Versión Flash: Todas   |   Compatible con todas las versiones de ActionScript   |   Nivel: Medio   |   Hits: 61853

Desde el pasado 11 de abril de 2006, Microsoft Internet Explorer ha modificado algunos de sus comportamientos que afectan principalmente a la presencia de contenido multimedia (Flash, WMA o Quicktime) en sitios web. Esta modificación viene incorporada en un patch de actualización y es el resultado de la demanda judicial que en su momento interpuso la firma EOLAS contra Microsoft. Esta compañía acusó a Microsoft de violar una patente de su propiedad en la tecnología de plugins que incorporaba el navegador Internet Explorer.

Aunque el caso aún sigue en los tribunales de apelación, tras fallar a favor de EOLAS un tribunal de Illinois, Microsoft esta obligado a modificar su navegador si no desea incurrir en un acto de desobediencia a una resolución judicial.

A partir de ahora, los usuarios que visitan páginas con elementos flash deben autorizar la interactuación con estos elementos y cosas que antes eran totalmente automáticas y transparentes para el usuario ahora deberán contar con su participación. Por ejemplo, para que funcione un simple rollOver, el usuario debe pinchar primero sobre la película.

Para evitar estos inconvenientes, hay que cambiar totalmente la forma de incluír una película flash en el html. Microsoft y Adobe han publicado guías para adaptar las páginas a esta nueva forma de trabajar, pero debido a su complejidad hemos creído conveniente publicar este tutorial que explica cómo hacerlo de manera sencilla:

Ahora, para incluir la película swf en los documentos html, tenemos que emplear JavaScript para escribir las etiquetas object y embed que definen nuestra película. Además probando esta técnica hemos llegado a la conclusión de que el código js debe ir en un archivo js externo. No vale incluirlo en la propia página. Eso sí, este código sirve para incluir todos los swf que queramos en la misma página.

COMO HACERLO.
Reemplaza la etiqueta object (con el embed dentro) por:

<script type="text/javascript">runSWF(archivo, ancho, alto, version, bgcolor, id, menu, FlashVars, quality, allowScriptAccess);</script>

Con esto llamamos a la funcion JavaScript runSWF() que dibuja el código necesario. Simplemente tenemos que pasarle los parámetros que deseemos, los tres primeros son los únicos obligatorios. Los parámetros que podemos pasar son:

archivo. Este el nombre del archivo swf que queremos incluir en la página, si es necesario, debemos incluir la ruta. (obligatorio)
ancho. Ancho de la película, puede ser un valor en píxeles o un porcentaje. (obligatorio)
alto. Alto de la película, puede ser un valor en píxeles o un porcentaje. (obligatorio)
version. Versión de publicación del archivo swf.
bgcolor. Color de fondo de la película, hay que pasarlo en formato "#RRGGBB".
id. Identificador de la película, para referirnos a ella, por ejemplo desde JavaScript.
menu. Nos indica si se muestra el menu contextual extendido. Tiene que ser true o false. Toma false por defecto.
FlashVars. Para pasarle datos a la película en el momento de ejecutarla, debe ir en formato "miVariable1=valor1&miVariable2=valor2".
quality. Para esteblecer la calidad de visualización, por defecto toma el valor "high".
allowScriptAccess. Controla la forma de comunicar ActionScript y JavaScript. Más info aquí.

Si queremos pasar un parámetro

En nuestro ejemplo la función queda:
<script type="text/javascript">runSWF("peli.swf", 102, 276,"6,0,29,0", "#254063");</script>

La función runSWF() está definida en el archivo js externo, que definimos en el head del html de la manera siguiente:

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

En este ejemplo se trata de un archivo de script llamado run.js que está en un directorio llamado js relativo al documento html.

Por tanto, lo realmente importante es pasarle los parámetros que deseemos a la función. Aquí os mostramos el archivo run.js con la definición de la función.

function runSWF(archivo, ancho, alto, version, bgcolor, id, menu, FlashVars, quality, allowScriptAccess) {
if(version!=""){
var version_data=version;
}else{
var version_data="6,0,0,0";
}
if(menu!=""){
menu_data=menu;
}else{
menu_data=false;
}
if(bgcolor!=""){
var bgcolor_data=bgcolor;
}else{
var bgcolor_data="#FFFFFF";
}
if(id!=""){
id_data=id;
}else{
id_data="flashMovie";
}
if(quality!=""){
quality_data=quality;
}else{
quality_data="high";
}
if(allowScriptAccess!=""){
allowScriptAccess_data=allowScriptAccess;
}else{
allowScriptAccess_data="always";
}
var quality="high"; // calidad de visualización de la peli
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version= '+version_data+'" width='+ancho+' height='+alto+' id='+id_data+'>\n');
document.write('<param name="movie" value='+archivo+'>\n');
document.write('<param name= "allowScriptAccess" value= '+allowScriptAccess_data+'>\n');
document.write('<param name="quality" value='+quality_data+'>\n');
document.write('<param name="FlashVars" value='+FlashVars+'>\n');
document.write('<param name="bgcolor" value='+bgcolor_data+'>\n');
document.write('<param name="menu" value='+menu_data+' >\n');
document.write('<embed src='+archivo+' bgcolor='+bgcolor_data+' FlashVars='+FlashVars+' menu='+menu_data+' allowScriptAccess='+allowScriptAccess_data+' quality='+quality_data+' pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width='+ancho+' height='+alto+' swLiveConnect=true name='+id_data+'></embed>');
document.write('</object>\n');
}

Podéis descargaros este mismo ejemplo y ver cómo funciona: ejemplo_activex.zip