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):
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>
José Miguel_blog, para posicionar el elemento donde quieres, las propiedades que le debes aplicar son: position:absolute; right:0; bottom:0; Por:Marcos_blog
Tarde, hace mil que envie a freddie el mismo codigo Por:Capt.Mahou_blog
Capt.Mahou_blog :
Tarde, hace mil que envie a freddie el mismo codigo
We are poor busy weird people... Sorry Por:Freddie
Hola, quisiera comentar que con tan solo colocar el flash en un div y decirle al body que la alineacion de texto sea a el centro este se centra y tambien especificar los margenes arriba, abajo, derecha e izquierda en 0. Por:Ruben Rojas_blog
Ruben Rojas_blog :
Hola, quisiera comentar que con tan solo colocar el flash en un div y decirle al body que la alineacion de texto sea a el centro este se centra y tambien especificar los margenes arriba, abajo, derecha e izquierda en 0.
Cierto, yo para este tipo de cosas utilizo Dreamweaver en modo de diseñador, es mas facil. jejejej Por:Jack Royce
Excelente tutorial. Me parece super útil.
Gracias baccxus Por:JLSM_blog
¿Funciona en todos los navegadores? 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:Andrea Solari_blog
P. ¿Lo correcto en este caso no sería usar “id” en vez de “class”? Por:spitz_blog
Exelente!!!! para quienes nos iniciamos en el mundo del css (porque llevamos años con flash) es una gran ayuda. Por:Sergio_blog
Gracias, muchas gracias, me sirvio bastante. Por:Arkanto_blog
Hola, el codigo me funciona correctamente a 1280x1024, pero a 1024x768 el swf no aparece completo, sino que se sube un trozo fuera del navegador, y deja el mismo espacio debajo del swf en blanco. ¿Alguna idea?
Gracias Por:umek
Hola, está muy bien el tutorial, pero tengo una duda. Estoy intentando colocar una animación en flash como fondo de una página, ya logre posicionarlo, pero al aplicarle el z-index, el flash siempre queda arriba.
Alguien sabe como puedo hacer que el flash se vaya abajo? Por:Macphisto_blog
saben soy relativamente nuevo en esto de flash, tengo una pagina web que no contiene dos frame , uno superior para poner una botonera, y el mainFrame para poder colocar el contenido de esta pagina. 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:Amador_blog
Super bueno el tutorial, me sirvió un montón!!, estoy aplicando tutorial casi en todas mis páginas.
Thanks a lot!!! Por:Alejandro Zúñiga_blog
tengo una pagina web que contiene dos frame , uno superior para poner una botonera, y el mainFrame para poder colocar el contenido de esta pagina. 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:andresdzem@hotmail.com_bl
Como dice "umek" esto funciona bien a resoluciones altas (1280x1024, etc...).
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:mrkstudios_blog
Tengo exactamente el mismo problema que Amador_blog. ¿Alguien sabe cómo enviar el swf al fondo, para poder ver bien el índice? Por:blancus_blog
buscaba esta solución hace rato...gracias Por:mauro_blog
estoy mirando el foro pero todos tienen algo de experiencia en diseño lo que es yo estoy tratando de aprender solo (autodidacta)en internet asi que si es posible de explicar paso a paso el tema del centrado de pagina se lo agradesco de ante mano Por:p1nch4_blog
p1nch4_blog, revisa los tutoriales de CSS de esta misma web y entenderas un poco mas. saludos Por:Mariux
Muchas Gracias, funciona fenomenal y muy bien explicado ademas Por:Gracia_blog
Es posible ordenar el swf con el z-order o zindex? Por:acg_blog
muchas gracias, es un aporte muy valioso. Por:cuno
bueno tuto me sirvio de mucho por que estoy diseñando una tienda y no podia hacer que el flash se viera grax. Por:krlos_blog
barbaro el tutorial, es de gran ayuda, aunque no se como solucionar el siguiente problema:
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:fm_blog
Hola 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 omar_calico@msn.com si alguien me puede ayudar Muchas gracias por vuestra atencion y felicidades baccxus. Por:omar_blog
Buenas;
se puede añadir un swf a un css?
Gracias Por:celsi_blog
Hola. tengo unos videos swf y se ven correctamente en internet explorer , pero en firefox salen pequeñisimos . Alguna idea? gracias. Por:Bichox_blog
Hola ya encontre la solucion para el tamaño en firefox. Muy simple: si has modificado las dimensiones originales, tienes que hacer otro tanto en la etiqueta <object> y la <embed>. 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:Bichox_blog
Hola a todos,
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:Nereitxu_blog
Hola a todos tengo un pequeño problema eso espero, desarrollo una pagina web que tiene un video en swf y funciona bien en mi maquina que tiene windows xp pero cuando la monto en un mini servidor que tine windows server 2003 ya no se muestra y se queda buscando el video como si no estubiera montado en la maquina, que puedo hacer Por:G@BO_blog
Hola, tengo dos peliculas una funciona como menu navegador y la otra muestra cada seccion de mi pagina, el problema es que cuando la visito desde una pagina con una resolucion inferior si quedan centradas pero una abajo de la otra, ojala me puedan dar algun cosejo Por:Gabriel_DG
muy buen tip, me sirvió muchisimo Por:el_chejin_blog
de seguro a mucha gente le habras resuelto la vida 
