Cristalab

                 ¿Quieres registrarte?

HTML con pelicula SWF al 100%

Por: el_chejin
29 de Abril del 2008
8,520 visitas

Buscando cómo colocar un SWF al 100% dentro de un HTML, y gracias a algunos sitios realizados totalmente en Flash, comencé a investigar y me topé con muy buenas respuestas en los foros, así como también encontré varias consultas del tipo: ¿cómo hacer que funcione en Firefox?, o ¿cómo hacer para que desaparezcan las barras de desplazamiento del Explorer?.

Pues resulta que hay cierto problema de compatibilidad con Firefox y Netscape, que en vez de mostrar el swf al 100%, sólo muestran el efecto en width, pero no en height, osea, a lo alto el swf se cortaba. Leí varias soluciones, como borrar la línea del Doctype, lo cual no es bueno, pero leyendo en Adobe CSS Advisor encontré que se puede solucionar con CSS, gracias al aporte de David Stiller en Adobe - CSS Advisor, el cual nos propone que pongamos el siguiente código:

Código :

<style>
   html, body { height: 100%; }
</style>


Entoces ahora lo único que hay que hacer para poner un swf en la totalidad de un html es:

1. crear un swf con dimensiones grandes. Yo probé con uno de 1440 x 900, el cual no puede ser escalado, y diseñado con diagramación líquida como se explica en éste tip para que se ajuste al momento de modificar el tamaño del stage, en este caso el explorador.

2. Crear un nuevo documento html del tipo XHTML 1.0 Transitional, yo utilicé Dreamweaver.

3. Insertarle el archivo swf dentro del body, y en las propiedades del swf ponerle el tamaño en vez de pixels en porcentaje, osea Width 100% y height 100%. Lo que en muchos exploradores habría sido suficiente para mostrar el swf en la totalidad del html.

4. dentro de las etiquetas <head> </head> colocar el estilo CSS para corregir el problema de incompatibilidad con Firefox y Netscape de esta forma:

Código :

<head>
<style type="text/css">
html, body {    height: 100%;}
</style>
</head>


Pero ésto aún no corrige el problema del borde que se ve al publicar nuestro html, ya que deja un margen entre la orilla del Explorer, y el swf, además muestra la barra de desplazamiento vertical, entonces para solucionar ésto recurriremos a un quinto paso:

5. dentro de los estilos css, podemos quitarle el margen poniéndolo en cero de ésta forma:

Código :

<head>
<style type="text/css">
html, body {    
height: 100%; 
margin: 0;
}
</style>
</head>


Y listo, problema solucionado, el código deberá quedar así:

Código :

<!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>prueba de full browser</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
html, body {    height: 100%;
                margin: 0;
}

</style>

</head>

<body>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','100%','movie','fullbrowser','quality','high' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
  <param name="movie" value="fullbrowser.swf" />
  <param name="quality" value="high" />
</object></noscript>
</body>
</html>



Artículos Relacionados


Etiquetas flash xhtml

Comentarios | Enviar un comentario
Gracias por actualizar mi tip, me ahorraste el trabajo :P.

Como complemento, muestro como lo uso yo: El swf dentro de un div con id="flash".

*{margin:0; padding:0;}
body{height:100%}
#flash{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
}
Por: andresmaro
ok probaré de la forma que vos lo hacés.
Por: el_chejin
pues yo uso en de publicacion de flash y no tengo ningun problema....
pero eso si tengo que poner su archivo de configuracion de javascript.
Por: quien yo?-blog
ok, bueno es que yo lo hice enfocado a que se vea en todos los exploradores, y sea validado el xhtml, el problema surgió con firefox y netscape, que no mostraba bien el contenido, tambien probé usando la publicación de flash, y si funcionaba, pero el codigo xhtml, no éra válido según dreamweaver.

entonces el código que di, puede ser validado en: http://validator.w3.org/ para XHTML, y en http://jigsaw.w3.org/css-validator/, y no presenta ningun problema de etiquetas.
Por: el_chejin
Lo voy a probar a la brevedad, buena onda CRISTALABoratorianos.
Por: Rhamsex
Muy buenos sus tips, de ambos , yo tambien usaba algo así.
Por: flashreloco
No funciona en Opera.
Por: teteman-blog
pues lo acabo de probar en opera y si funciona.
Por: el_chejin
Barbaro
Por: Joan -blog
gracias a mi mismo, jaja, perdí los archivos de como hacer esto, y tuve que consultar mi propio tip, jajaja :lol:
Por: el_chejin
muy buen tip
una pregunta

que medida me recomiendas trabajar en el swf, para que no se noten los pixeles...
Por: Zean_Design-blog
Hola, tengo una consulta, ya que tengo videos con la barra de reproduccion cuando escalo al 100% todo, si el video es de aspecto 4:3 sobresale para abajo y no se ven los controles. Hay manera de limitar la altura al 100 pero el ancho se adapte para mantener la proporcion?

Gracias
Por: Ramiro-blog
Yo quisiera saber como hacer para que mi sitio se vea al 100% de ancho y de alto pero con barras de desplazamiento en el caso de verla en un monitor de resolucion menor a 1024x768 (http://www.inoxideas.com.ar) Porque mi cliente med ijo que vio la pagina en un monitor mas chico y no le aparecien las barras de desplzamiento para poder ver la pagina completa!!
Por: lucas_lae
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.