Code4net

Es bastante común que cuando hacemos una aplicación web con Flash esta no tenga distintas versiones para las distintas resoluciones de pantalla. En algunos casos se opta por escalar el swf a la resolución, pero en otras se deja el swf centrado horizontalmente en pantalla a su tamaño original.

Personalmente prefiero la de centrar en pantalla el swf, escalando se pierde calidad y aunque las proporciones entre elementos se mantienen queda todo bastante distinto visualmente.

Lo ideal para mi sería centrar en el navegador tanto horizontalmente como verticalmente la película. Si os fijáis, en las opciones de publicación de Flash hay una opción que es para alineación tanto horizontal como vertical... pero la vertical no funciona. Cosas de navegadores

Hay varias técnicas para conseguir esto. Quizás la más usada es la de usar frames. Esta solución a mi no me gusta ya que son poco accesibles y no estan dentro del estandar de w3c.

Estos últimos dias he estado trabajando bastante (mucho) con CSS's y ayer se me ocurrió una forma que considero bastante limpia para centrar verticalmente en pantalla un swf manteniendo el funcionamiento a distintas resoluciones.

Ver ejemplo

Si miráis el código html no tiene nada. Simplemente un swf embedido con un id="centeredSWF". El código que nos permite el centrado se encuentra en las css correspondientes.

==

#centeredSWF {
	margin-top: -250px;
	margin-left: -350px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 700px;
	height: 500px;
}

==

Fijaros que no tiene gran misterio, lo único que tenemos que poner son las medidas de la película y los margénes superior e izquierdo le restamos la mitad de esas medidas.

No he testeado en todos los navegadores esta implementación, de hecho sólo lo he probado en IE 6 y en FireFox 0.9.2 y parece que funcione bién. Si detectáis algún problema en otros navegadores añadid un comentario y le hecharé un vistazo para ver cómo lo podemos arreglar.