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%.
<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:
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%';
}
}
[/js]
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:
<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.
Comentarios Total 12 comentarios
Publicado: 20/11/2007 12:55 am
[…] encuentro en “unijimpe.net” un muy buen tutorial para poner los archivos flash al 100% en la ventana. El tutorial esta en […]
Publicado: 28/11/2007 11:31 am
buena info
saludos
Publicado: 05/08/2008 11:21 am
hice todo el procedimiento pero no me funciona, me marca un error de javascript
Publicado: 08/08/2008 1:23 pm
hice la prueba pero no me funciona, podrias poner el codigo fuente de archivo de ejemplo?
Publicado: 12/10/2008 11:06 pm
[…] hemos comentado en Flash en ventana completa una técnica para redimensionar el alto y ancho a 100% del flash, mientras este sea menor que la […]
Publicado: 28/03/2010 1:10 pm
esto esta obsoleto? por que no me funciona.
Publicado: 22/08/2010 1:07 pm
gracias y mas gracias me estaba matando encontrando como hacer esto muchisimas gracias salio todo perfecto. y por cierto funciona a la perfeccion.
Publicado: 07/09/2010 11:58 pm
Hola. Me fue de gran ayuda el artículo que escribiste.
Lo puse en práctica, y me encontré con un obstáculo.
Cuando importo a mi html el archivo swf, y modifico los valores del alto y ancho, de 800px y 570px para 100% y 100%, en el IE el largo queda bien pero en el alto, el swf queda diminuto. En el Firefox directamente no funciona.
Por el momento, y para que funcione, coloqué nuevamente 570px para el alto; por lo que si modifico el alto de la ventana del explorador, no se reajusta.
No sé si escribí algo errado en el código, me podría dar una ayuda?
Desde ya, muchas gracias.
Publicado: 08/09/2010 12:14 am
Hola, me gustó mucho tu artículo, fue de gran ayuda.
Sólo que me topé con un problema para redimensionar la altura, ya que cuando la establezco en 100%, en el IE aparece mi site diminuto, y en el Firefox no funciona. Resuelvo esto colocando el mínimo de heigth que deseo para mi site (570px), pero cuando disminuyo en altura mi explorador, se corta parte del swf.
Por favor, podría decirme si hay alguna forma de solucionar esto?
Desde ya, muchas gracias.
Publicado: 12/10/2010 4:15 pm
a ver yo no entendi nada de esto,que se necesita pa meter esto es un programa o que o usas el dreamweaver unicamente o q????
Publicado: 21/10/2011 9:12 pm
Me acabas de salvar la vida man, Gracias.. funciona perfecto
Publicado: 12/08/2014 9:27 am
parece q n me sirve
jajajj espero q lo solucionen