Flash en ventana completa

16/11/2007
1:33 am
unijimpe

El presente es una guía para mostrar archivos flash que se muestren a ventana completa o al 100% de la ventana, este tip lo encontré en Flash Embed Tip: Minimum width and height for liquid layouts y lo comparto con ustedes.

La idea inicial para insertar un flash en ventana completa es poner el ancho y alto al 100%, pero tiene un problema y es que al hacer esto ya no se muestran los scrolls y si la película es mas grande que la pantalla no se podrá ver la parte que excede la pantalla.

Insertando SWF al 100%
El primer paso es insertar el SWF en nuestro html, esto lo hacemos utilizando SWFObject, esto lo hacemos en el siguiente código donde debe notarse que asignamos el alto y el ancho al 100%.

HTML:

<div id="main">Main Movie</div>
<script type="text/javascript">
var so = new SWFObject("my.swf","swf","100%","100%","8","#000");
so.write("main");
</script>

Lo siguiente es detectar cuando la ventana tiene las dimensiones mínimas del swf original, en cuyo caso asignamos los valores de ancho y alto al valor mínimo. Para ello creamos una función en Javascript llamada adjustSWF. Para nuestro ejemplo supongamos que las dimensiones originales de nuestro flash son 800 x 600 pixels. Entonces la función adjustSWF tendría la forma:

JavaScript:

function adjustSWF() {
if (document.body.clientWidth <= 800) {
document.getElementById("swf").style.width= '800px';
} else {
document.getElementById("swf").style.width= '100%';
}
if (document.body.clientHeight <= 600) {
document.getElementById("swf").style.height = '600px';
} else {
document.getElementById("swf").style.height = '100%';
}
}

Finalmente llamamos a esta función al momento que se carga la página y también cuando se redimensiona, esto lo hacemos llamando a los eventos onLoad y onResize del tag BODY de la siguiente forma:

HTML:

<body onLoad="adjustSWF();" onResize="adjustSWF();">

Uniendo todo el código obtenemos nuestro flash a ventana completa. Pueden ver un ejemplo funcionando en: http://samples.unijimpe.net/swffull/. Como ven, sencillo y funciona en Firefox, Internet Explorer y Safari. Con esto podremos incluir SWFs de forma que se muestren en toda la pantalla de forma sencilla.

Posts Relacionados