Comunidad de diseño web y desarrollo en internet online

HTML con pelicula SWF al 100%

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>

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate