Follow me @Tmeister

StageResize Component

ESCRITO POR Tmeister EN August - 29 - 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)

26 Responses to “StageResize Component”

  1. Lux says:

    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.

  2. adriano says:

    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

  3. Tmeister says:

    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)

  4. Fernando says:

    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

  5. Comunicar says:

    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.

  6. [...] 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, [...]

  7. Comunicar says:

    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.

  8. Tmeister says:

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

  9. Jose says:

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

  10. 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

  11. XaviXL says:

    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.

  12. sebastian says:

    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

  13. Moy says:

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

  14. m0no says:

    exelente maestro!!!!!

  15. Alexander says:

    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

  16. guti says:

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

  17. Miguel says:

    Excelente componente.

    Me gustaría utilizarlo, pero modificando la precarga (introducir mi propio diseño). ¿Es esto posible?

    Gracias!

  18. Tmeister says:

    @Miguel

    En el archivo .zip, estan los archivos fuente, solo es cuestion de que busques la precargar y la cambies.

    Saludos.

  19. Marc says:

    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.

  20. leonardo says:

    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ías ayudar? como hago para que se escale dentro de un htm dependiendo la resolución?
    desde ya muchas gracias.

    • Tmeister says:

      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%

      < param name="movie" value="stage.swf" />
      < param name="quality" value="high" />
      < param name="bgcolor" value="#ffffff" />
      < embed src="stage.swf" quality="high" bgcolor="#ffffff"
      width="100%" height="100%" name="stage"
      align="middle" allowScriptAccess="sameDomain"
      type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
      

      Para ver el codigo completo visista http://klr20mg.com/stageresize/ y ve el codigo fuente.

      Saludos!!

  21. Leika says:

    Hola Tmeister,
    que bueno el componente

  22. therox says:

    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

  23. Javier says:

    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

  24. Luisf says:

    MuY buen componente. Gracias,
    COMO HAGO PARA CAMBIAR EL FONDO AZUL DE ESE BACKGROUND?

  25. braan says:

    gracias!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!…………
    ahhh :D :D:D:D:D:D

Acerca de mi
Enrique Chavez

Enrique Chávez también es conocido como @Tmeister es un desarrollador, emprendedor, poeta y loco.

Geek autodeclarado y apasionado de todo lo que tiene que ver con tecnología y desarrollo.

Cuenta con una experiencia de más de 7 años en el ramo del desarrollo, creando, sobre todo, aplicaciones web en la empresa Sapotek.

A finales del 2008 crea, junto con 3 colegas, la consultoría llamada AureaCode, enfocándose a brindar servicios de desarrollo web en todas sus variantes.

Si necesitas algún tipo de información o consulta por favor no dude en escribir.

View Enrique Chávez's profile on LinkedIn

Carlos Enrique Chavez Garcia's VisualCV

RSS Feed

Links Patrocinados