íšltimamente he recibido varios mails en los cuales me preguntan como hice para que en mi sitio tmeister.dev el contenido se centre automáticamente dependiendo del tamaño del navegador.
La respuesta es mediante el listener onResize del Stage. Pero es algo difícil de explicar así que decidí crear un componente que lo haga :).
Este componente consta de 4 parámetros los cuales son:
backContent : El path a la imagen o SWF que sera el fondo del sitio
contentPath: El SWF principal el cual es la interfaz principal del sitio, el cual se centrara
backgroundColor: el color de fondo de nuestro sitio, esto es para 2 cosas. Sera el color de fondo que se mostrara mientras se carga el
backContent. Ademas puede ayudar si el backContent tiene alguna transparencia.
TextColor: El color del texto del Preloader. Por el momento el preloader aparece en la esquina inferior izquierda con el siguiente texto Loading background [ / ] con una pequeña animación.
Esto es todo el componente se encargara de todo lo demás.
Ahora el tamaño del SWF que seteamos en el archivo html debe tener las medidas de 100% de ancho y 100% de alto ademas de setear el margen del documento a 0, pueden ver el codigo fuente del HTML del ejemplo y ahi veran mejor a que me refiero.
Un ejemplo del componente lo pueden ver en http://tmeister.dev/stageresize/ simula exactamente lo que hago en mi sitio tmeister.dev
Aquí les dejo el Zip con el componente y con los archivos utilizados en el ejemplo. El Fla que contiene el componente es stage.fla.
Por otro lado aprovecho para decirles que aun estamos desarrollando desktoptwo al día de hoy muchos bugs han sido corregidos y estamos por lanzar un par de aplicaciones nuevas. Una interfaz para hacer búsquedas en Yahoo y en Google desde deskoptwo, un visor de Imágenes, un foro. Y pronto vendrán mas aplicaciones.
Bueno, como siempre aquí los archivos fuente stageResize.zip
Enjoy.. 8)
Fantástico el componente !!!
Solamente una duda:
¿Por qué en tu sitio, en la etiqueta embed, aumentas el tamaño de la película al 110%, mientras que en la etiqueta object es al 100%?
Un saludo.
hola, me interesa tu solucion pero aunque parezca sencillo tengo un problema,
mi idea es contraria a tu componente,
yo necesito simplemente que el swf se acomode en un 100% a su ancho en el navegador y en el % que deberia en su alto para que : independiente del navegador el encabezado se acomode al resto del sitio,
es esto posible,
gracias por tu ayuda
Adriano
Que tal Adriano..
Esto te puede servir, es algo que escribi hace tiempo.
http://tmeister.dev/varios/menuResize.html
Aqui el Fla
http://tmeister.dev/varios/menuResize.fla
Saludos !! 8)
Esta súper bueno el componente pero tengo una duda… como puedo hacer para q el fondo no se ajuste al tamaño de la ventan pero solo el fondo ya que cuando uno pone una imagen con ciertos detalles se distorsiona (no se ve muy bien) la idea que cuando yo achique la ventana o agrande siga del mismo tamaño ..no si me entiendes espero que si..
saludos
Excelente componente, ahora veo un problema, cuando lo probas en resoluciones de 800×600 el scroll esta deshabilitado. Mmmm eso lo veo como un grave problema de accesibilidad, creo q seria bueno buscar una buena solución a este problema.
No digo que sea lo optimo diseñar para 800×600, y estoy totalmente de acuerdo con que 800×600 es una resolución en la que ya no se deberá diseñar, pero tus estadísticas son muy diferentes a las más, porque? Vivo en Argentina – Tucumán, para las empresas que tengo que diseñar a veces todavá usan monitores de 14†o 15†con resolución de 800×600 (y casos de monitores de 17†que usan resolución de 800×600) es la realidad tecnológica que nos toca vivir a nosotros y lamentablemente tenemos que amoldarnos a ella.
Ahora el componente esta perfecto, el único detalle que yo veo es que no deshabilite el scroll, nada mas.
No trato de descalificar tu trabajo, ni mucho menos me pareció muy bueno y tu blog lo leo muy seguido solo quise hacer una critica constructiva.
No hay ningún problema sobre tu comentario, en verdad, solo me surguio la duda de las resoluciones es por ello que publique el post, pero como dices hay que adaptarse al medio.
Ahora, el componente funciona sobre el tamaño del navegador, para adaptarse al mismo, es por ello que necesita estar al 100% de ancho y 100% de alto, lo que se podrá hacer es:
Al momento de estar “escuchando” el tamaño del navegador verificar por un tamaño mínimo, si es tamaño actual del navegador es menor al tamaño mínimo requerido mediante javascript cambiar el valor del objeto contenedor del SWF así aparecerá el scroll. no se tal vez sea mucho trabajo. pero es una idea.
Es por ello que siempre pongo el código fuente de todo lo que publico, ya que no siempre las necesidades son las mismas y así quien use el, componente en este caso, tenga la posibilidad de modificarlo como guste.
Y las criticas son siempre bienvenidas, sean buenas o malas, estoy abierto a ellas y en ningún momento paso por mi mente la que estuvieras desacreditando solo fue una duda y publique sobre ella.
Saludos!!
Se puede hacer que el fondo quede fijo con la pelicula principal??? por ejemplo http://www.cheyenne.com.mx
Hola! excelente componente, podrás decirme cual es la ruta de referencia a los MC dentro de content.swf? Algo como _level0.myMC no me lo encuentra.
Gracias
Fantastico el componente. Pero ahora se me plantea una nueva duda. Me gustaria saber como se consigue el efecto de transicion entre secciones. Es decir, si estamos en la seccion de trabajo y presionamos perfil (por ejemplo), primero se desvanece la seccion en la que estabamos (fade out) y despues aparace la que hemos presionado. Me seria de gran ayuda porque es lo unico que me queda para terminar mi web.
Muchas gracias.
hola, cuando abro el .fla me aparece “formato de archivo inesperado” yo uso el Flash MX Professional 2004, sera por la version que tengo este problema.
Realmente estoy en adaptar mi backgrownd pero no lo conseguir como..
Muchas Gracias
Excelente aportacion!!!
SOLO UNA PREGUNTA:
¿Que se debe hacer para que la imagen de fondo no se distorsione al cambiar la proporcion de la ventana del explorador?
gracias!!
exelente maestro!!!!!
Hola, veo que habeis estado peleando con el tema de redimensionar swf, la pregunta es sabeis alguna manera diferente de hacerlo, es que soy novato.
Gracias
un saludo a todos
hola, habria alguna manera de poder obtener el clip sin compilar…el original, no como componente…porque el problema es que entonces ese clip tiene un tamaño determinado, y un color de fondo, que no se puede modificar…
gracias! 😉
Excelente componente.
Me gustará utilizarlo, pero modificando la precarga (introducir mi propio diseño). ¿Es esto posible?
Gracias!
@Miguel
En el archivo .zip, estan los archivos fuente, solo es cuestion de que busques la precargar y la cambies.
Saludos.
Hola,
Muchas gracias por la explicación, me fue perfecto, pero tengo una duda:
Como hago para quitar el efecto que se crea de resplendor en el clip:content. se puede?
gracias.
hola. buenas tardes, vi tus ejemplos y me fueron de gran ayuda, estan muy claros. pero tengo una duda. el swf que obtengo de flash funciona bárbaro, pero cuando lo inserto en un html deja de funcionar(no funciona el resize) o sea que no se escala… queda en la esquina en el tamaño original. esto lo hice publicando el swf desde flash y también en DW insertándolo en una pagina nueva..
me podrás ayudar? como hago para que se escale dentro de un htm dependiendo la resolución?
desde ya muchas gracias.
Primero debes poner el ancho y el alto del html y body a 100%
html, body{
height:100%;
width:100%;
margin:0;
}
Despues el ancho y alto de tu objeto debe ser igual al 100%
Para ver el codigo completo visista http://tmeister.dev/stageresize/ y ve el codigo fuente.
Saludos!!
Hola Tmeister,
que bueno el componente
una pregunta el stage, back y content, tienen q tener el mismo tamaño (digamos 500 x 400) xk yo e cambiado el tamaño del content y el back y se me a distorsionado todo, respondeme porfa y felicidades x tu blog
amigo tengo una pregunta me estoy volviendo loco buscando la manera de que el tamaño de una ventana nueva que mi pagina abre se adapte al tamño del swf (que es un photoflow de imagenes) gracias..ejemplo: http://www.mobileplanet.cjb.net/catalogopeliculas.html
MuY buen componente. Gracias,
COMO HAGO PARA CAMBIAR EL FONDO AZUL DE ESE BACKGROUND?
gracias!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!…………
ahhh :D:D:D:D:D:D
Ya se que haré con éste código, cuando lo tenga te muestro. Muchas gracias por compartir…
Hola Buenas tardes. espero alguien pueda ayudarme con el componente pues tengo una gran pero gran duda y no he podido resolverla. Se trata de lo siguiente:
Si se dan cuenta al publicar el archivo el fondo siempre se ajusta a el tamaño de la ventana el cual esta identificado como back pero el content que se trata del otro swf NO!!! haciendo que se corte y no se vea adecuadamente así como en otros monitores de menor tamaño. Ojalá alguien se apiade de mi y pueda resolver esta gran duda y problema pues tengo un trabajo que entregar. También he hecho pruebas con el archivo donde viene el código y sin embargo no pasa nada ni borrando todo y guardándolo.
Espero puedan responder
Gracias