Centrar una película mediante CSS, usando SWFObject
martes, 22 de agosto de 2006

Tal vez tu seas alguien que para centrar un SWF en una web, utiliza los porcentajes (ejemplo: width = 80%, height = 80%)

  

El método no es malo: al ser porcentual el tamaño del swf, éste se adaptará a los distintos tamaños de pantallas. Sin embargo posee sus contras:

  

  • Si poseemos mapas de bits, al agrandar la película, las imágenes se verán pixeladas;
  • Cuanto más grande es el escenario, más trabajo tendrá el Flash Player para renderizar la película.
  • Si poseemos otros elementos fuera del escenario,también se mostraran.


Por lo tanto, muchas veces, es mejor tener una película con un tamaño fijo, el cual sea perfectamente visible con distintos tamaños de pantallas. Y es justamente eso lo que voy a mostrar utilizando CSS y SWFObject , con la ayuda de dos excelentes tutoriales:

  



En el ejemplo se utilizará una película de 720 px de ancho por 400 px de largo.

  

Una vez exportado el documento HTML, lo abrimos con un editor y entre <head> y </head> ponemos...

 

<!--SWFObject-->
<script type="text/javascript" src="swfobject.js"></script>
<!--CSS-->
<style type="text/css">
<!--
#centrar {
    margin-top: -225px;
    margin-left: -360px;
    position: absolute;
    top: 50%;
    left: 50%;    
    width: 720px;
    height: 450px;
}
-->
</style>

 

Entre <body> y </body> reemplazamos todo el contenido entre las etiquetas <object> y </object> por:

 

<div id="centrar">
Texto de reemplazo en caso de no existir la pelicula ó SWFObject
</div>
<script type="text/javascript">
   var so = new SWFObject("pelicula.swf", "pelicula", "720", "450", "7", "#FFFFFF");
   so.write("centrar");
</script>

 

De esta forma  tendremos la película centrada, con un tamaño fijo para todas las resoluciones, sin que se muestren elementos que tengamos fuera del escenario y además sin problemas con Internet Explorer y Opera 9.0

 

Ejemplo creado

Descargar ejemplo  


Tags:  tutorial flash



 Comentarios (2)
 1 Escrito por Rogelio, el 09-01-2008 14:12
Bastante bien explicado, yo no habia entendido como se usaba el SWFObject y nadie me despejaba la duda, con éste tutorial lo hice en 2 o 3 minutos, excelentisimo, gracias
 2 Escrito por Jon, el 07-02-2008 11:27
No funciona al intentar centrar 2 archivos swf. Aparecen duplicados


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code

 
Delicious
Mister Wong
< Anterior   Siguiente >

Suscribirse por feed


Suscribirse por e-mail

Tu dirección de correo