Bienvenido a Klr20mg

Cronicas de un desarrollador

Actualmente soy Jefe de Desarrollo del area Flash en Sapotek de México en la cual trabajo desde hace mas de 4 años. Desarrollando aplicaciones en Flash para Web mas comúnmente llamadas (RIAs)

Estas en : Blog » StageResize Component
  • Decrease font size
  • Default font size
  • Increase font size
  • color default
  • color verde
  • color azul
StageResize Component
AddThis Social Bookmark Button
Post2PDF Print
August 29th, 2006

Últimamente he recibido varios mails en los cuales me preguntan como hice para que en mi sitio tmeister.net 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://klr20mg.com/stageresize/ simula exactamente lo que hago en mi sitio tmeister.net

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)

Comentarios

16 Comentarios en “StageResize Component”

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.

Lux escribio el 24-September-2006 a las 3:32 am

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

adriano escribio el 15-November-2006 a las 5:02 pm

Que tal Adriano..

Esto te puede servir, es algo que escribi hace tiempo.

http://tmeister.net/varios/menuResize.html

Aqui el Fla

http://tmeister.net/varios/menuResize.fla

Saludos !! 8)

Tmeister escribio el 15-November-2006 a las 6:55 pm

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

Fernando escribio el 10-December-2006 a las 2:09 pm

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.

Comunicar escribio el 3-May-2007 a las 11:15 am

[...] día de hoy me encuentro un comentario hecho en este post, que dice así Comunicar May 3rd, 2007 at 11:15 am e Excelente componente, ahora veo un problema, [...]

.:: klr20mg ::. Una dosis diaria de …. » Blog Archive » ¿Todavía diseñas para 800×600? escribio el 3-May-2007 a las 11:34 am

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ía diseñar, pero tus estadísticas son muy diferentes a las mías, porque? Vivo en Argentina – Tucumán, para las empresas que tengo que diseñar a veces todavía 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.

Comunicar escribio el 3-May-2007 a las 12:28 pm

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ía 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!!

Tmeister escribio el 3-May-2007 a las 12:42 pm

Se puede hacer que el fondo quede fijo con la pelicula principal??? por ejemplo http://www.cheyenne.com.mx

Jose escribio el 2-June-2007 a las 6:19 pm

Hola! excelente componente, podrías decirme cual es la ruta de referencia a los MC dentro de content.swf? Algo como _level0.myMC no me lo encuentra.

Gracias

Daniel Gorosito escribio el 21-July-2007 a las 2:04 am

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.

XaviXL escribio el 25-September-2007 a las 10:27 am

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

sebastian escribio el 8-October-2007 a las 6:07 pm

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!!

Moy escribio el 3-December-2007 a las 2:19 pm

exelente maestro!!!!!

m0no escribio el 8-December-2007 a las 10:59 am

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

Alexander escribio el 6-March-2008 a las 10:37 am

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! ;)

guti escribio el 22-May-2008 a las 5:45 am

Leave a Reply

 Blog editado por:

Enrique Chavez aka Tmeister
Si los codigos de este sitio te han ayudado y gustas ayudar de alguna forma:

 Compra Links

 Suscribete


AddThis Social Bookmark Button

 Archivo

2008
2007
2006
2005
2004