Este pequeño tutorial es sobre "como centar una película SWF usando xHTML y CSS", lo hago debido a que existe un tutorial similar, pero hecho con tablas (Centrado de SWF de Flash en HTML), así que para los que deseen aprender el correcto uso del CSS y XHTML, ahí les va:
Sin importar la resolución del monitor, sistema operativo o navegador en que veamos la película, esta se ajustará a la mitad de la pantalla, como ejemplo tomaré las mismas medidas del otro tutorial, 720x420px, una imagen que cabe perfectamente en un monitor con una resolución mínima de 800x600.
El documento puede estar declarado como stricto o transicional, para este ejemplo usaré Transicional:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ahora colocaremos entre las etiquetas body del documento una división y le colocaremos una clase llamada "swfcentro" y dentro de esta división colocaremos nuestra pelicula SWF (no importa el metodo de inserción de SWF, personalmente uso el método SATAY):
Código :
<body> <div class="swfcentro"> <object type="application/x-shockwave-flash" data="contenedor.swf?path=flash.swf" width="720" height="420"> <param name="movie" value="contenedor.swf?path=flash.swf" /> <param name="quality" value="high" /> <img src="flash.png" width="720" height="420" alt="Imagen en reemplazo de flash" /> </object> </div> </body>
Ahora viene el CSS:
Entre las etiquetas <head></head>, colocamos lo siguiente:
Código :
<style type="text/css">
<!--
.swfcentro {
position: absolute; /*Posicionamiento absoluto*/
top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/
left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/
margin-top: -210px; /*Restamos la mitad de alto del SWF para centrarlo verticalmente*/
margin-left: -360px; /*Restamos la mitad de ancho del SWF para centrarlo horizontalmente*/
}
-->
</style>Guardan el documento y listo
¿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.
Por MorphX el 11 de Mayo de 2006
Gracias baccxus
Por sinsonido el 11 de Mayo de 2006
Por José Miguel el 11 de Mayo de 2006
¿Se puede dejar un div siempre en la esquina inferior derecha de la ventana, sea cual sea el contenido de la misma?
¿dandole top=100%?
he estado haciendo pruebas pero me da problemas al resizar la ventana.
Gracias por adelantado.
Por Ereb el 11 de Mayo de 2006
Saludos.
Por Marcos el 11 de Mayo de 2006
position:absolute;
right:0;
bottom:0;
Por Capt.Mahou el 11 de Mayo de 2006
Capt.Mahou_blog :
Por Ruben Rojas el 12 de Mayo de 2006
Ruben Rojas_blog :
Cierto, yo para este tipo de cosas utilizo Dreamweaver en modo de diseñador, es mas facil. jejejej
Por JLSM el 14 de Mayo de 2006
Gracias baccxus
Por Andrea Solari el 15 de Mayo de 2006
Por: sinsonido_blog
Esa es una pregunta muy sutil, yo utilizaba este metodo hace pocos meses y por alguna razón no me acuerdo si en Firefox o en Internet Explorer siempre se desviaba solo un maldito pixel.
Por spitz el 25 de Junio de 2006
Por Sergio el 25 de Junio de 2006
Por Arkanto el 29 de Junio de 2006
Por umek el 18 de Agosto de 2006
¿Alguna idea?
Gracias
Por Macphisto el 14 de Noviembre de 2006
Alguien sabe como puedo hacer que el flash se vaya abajo?
Por Amador el 25 de Noviembre de 2006
el problema es que no podia centrar los swf, con su codigo lo pude hacer pero entre frame y frame me queda un espacio en blanco, y tube que ponerme a jugar con su codigo para poder centrar el primero (botonera), alguien me podria ayudar o simplemente explicarme el codigo que esta arriba, de antemano muchas gracias
Por Alejandro Zúñiga el 29 de Noviembre de 2006
Thanks a lot!!!
Por [email protected] el 29 de Diciembre de 2006
el problema es que quiero que el archivo swf abra un archivo en el mainfraim y no en el frame donde esta la botonera
Por mrkstudios el 12 de Enero de 2007
Pero cuando la resolución del monitor está a 800x600 por ejemplo, o simplemente el usuario tiene a la vista barras de herramientas tipo Google, Yahoo o simplemente la Web Developer Bar, la pelicula flash ya no queda centrada.
Las barras superiores del navegador se comen un trozo de la parte superior del swf, sin posibilidad de hacer scroll... (La parte inferior se muestra correctamente)
Así que seguimos sin solución pa esto de centrar los swfs
Por blancus el 15 de Enero de 2007
Por mauro el 17 de Enero de 2007
Por p1nch4 el 06 de Marzo de 2007
se lo agradesco de ante mano
saludos
Por Gracia el 06 de Marzo de 2007
Por acg el 29 de Mayo de 2007
Por cuno el 29 de Mayo de 2007
Por krlos el 14 de Julio de 2007
Por fm el 26 de Julio de 2007
al ser el archivo swf menor a la pantalla queda correctamente centrado. el problema es al ser mayor de la pantalla, ya que la parte inferior y la parte derecha se ven, pero la superior y la izquierda se pierden por completo.
alguna idea de como solucionarlo?
muchas gracias
Por omar el 11 de Septiembre de 2007
No tiene mucho que ver cone ste tema
Pero necesito ayuda:
Yo quiero colocar un marco pequeño en el centro de mi web, para colocar informacion adicional
Pero no se como
[email protected] si alguien me puede ayudar
Muchas gracias por vuestra atencion y felicidades baccxus.
Por celsi el 14 de Septiembre de 2007
se puede añadir un swf a un css?
Gracias
Por Bichox el 15 de Noviembre de 2007
Por Bichox el 15 de Noviembre de 2007
Para incluir objetos Flash en una página HTML son necesarias las 2 etiquetas, <object> y <embed>. Una es para IE de Windows, la otra para todos los demás.
Asi se veria correctamente en el explorer y el firefox:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="900" height="750">
<param name="movie" value="esosmomentos.swf" />
<param name="quality" value="high" />
<embed src="esosmomentos.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="750"></embed>
</object>
<!-- SCRIPT DE ESPERA -->
<script language="javascript" type="text/javascript">
<!--
ap_showWaitMessage('waitDiv', 0);
//-->
Por Nereitxu el 22 de Noviembre de 2007
funciona de maravilla. Alguien sabe como superponer un letrero ó una imagen que tape sólo en parte el video durante su proyección?
Muchas gracias
Por G@BO el 30 de Noviembre de 2007
Por Gabri el 11 de Marzo de 2008
Por el_chejin el 11 de Marzo de 2008
Por joys el 27 de Diciembre de 2008
si alguien sabe q me ayude
[email protected]
Por zean design el 15 de Enero de 2009
Por martin el 18 de Agosto de 2009
mira como se ve en con el firefox
tecnohumano.org/nuevo
porfa enviame solucion a [email protected]
Por Mario el 20 de Agosto de 2009
De antemano. Gracias!!
Por Jacosft el 24 de Agosto de 2009
Gracias !!
Por rosa el 25 de Agosto de 2009
Por Crustaceo el 15 de Abril de 2010
Por putoslokos el 01 de Octubre de 2010
Por Herbert Carrillo el 08 de Marzo de 2011
Por Tao Leo el 14 de Septiembre de 2011