Flash en ventana completa

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%.

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

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:

  1. <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


Flash en ventana completa | MJG Adrian
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 […]

sierras de los padres
Publicado: 28/11/2007 11:31 am

buena info
saludos

burbuja
Publicado: 05/08/2008 11:21 am

hice todo el procedimiento pero no me funciona, me marca un error de javascript

tomas
Publicado: 08/08/2008 1:23 pm

hice la prueba pero no me funciona, podrias poner el codigo fuente de archivo de ejemplo?

swffit: Flash Resize Script » unijimpe
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 […]

Joaquin
Publicado: 28/03/2010 1:10 pm

esto esta obsoleto? por que no me funciona.

julver
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.

Ana
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.

ana
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.

hosedbabe
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????

Romano Ramírez
Publicado: 21/10/2011 9:12 pm

Me acabas de salvar la vida man, Gracias.. funciona perfecto

jose viza
Publicado: 12/08/2014 9:27 am

parece q n me sirve
jajajj espero q lo solucionen

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)