Comunidad de diseño web y desarrollo en internet online

Fondo que se ajusta al tamño del navegador+diagramación líquida

Citar            
MensajeEscrito el 16 Abr 2011 09:35 am
Hola,

lo que ando buscado es algo similar a lo explicado en este tutorial:
http://www.cristalab.com/tutoriales/fondo-bitmap-que-se-ajusta-al-tamano-del-navegador-en-flash-c32220l/#publicar
con la diferencia que en vez de una imagen estática busco una transición de fotos (con fade de transición/fundido). Pero ésto en principio no es lo que me preocupa.

He hecho el tuto tal cual con una imagen para empezar y ningún problema :) Pero la idea es introducir una serie de clips que actuen como menu y barra lateral de contenidos que no se escalen cuando el tamaño del navegador sea superior al del clip de fondo. Cuando lo hago simplemente reubicando posiciones de clips de (menu/contenid) sin aplicarle escalado ya veo lo esperado cuando la resolución del navegador es superior al tamaño del fondo, puesto que el contenido cabe sin problemas.

El problema viene cuando la proporción del navegador es inferior al tamaño del fondo/contenido. La imagen de fondo se redimensiona (que es lógico) pero el contenido (menu etc) se recortan. En el html he forzado el scroll para estos casos:

Código ActionScript :

</script>
 
<style type="text/css" media="screen">
   html, body {
      height:100%;
   }
   body {
      margin:0;
      padding:0;
      overflow:scroll;
   }
</style>
incluso en el swfEmbed...
<script>
....
        var params = {
         menu:"false", 
         scale:"noscale", 
         bgcolor:"ffffff", 
         allowScriptAccess:"always", 
         allowFullScreen:"true",
         overflow:"scroll",
         };
        var attributes = {};
        //swfobject.embedSWF(swfUrl,      id,    width, height, version, expressInstallSwfurl, flashvars, params, attributes)
        swfobject.embedSWF("redimensionar.swf", "miFlash", "100%", "100%", "9.0.0", false,  flashvars, params, attributes);
...


pero no aparece. Imagino que tiene su sentido ya que como el fondo se redimensiona cuando el navegador es más pequeño, considera que no hay overflow y que todo el contenido cabe sin necesidad de scroll...

Lo ideal sería que para resoluciones inferiores a la proporcion del fondo permitiera scroll de TODO. Y para tamaños superiores hiciera lo que ya hace (reescalar el fondo) y mantener el contenido. ¿Es mucho pedir? Es necesario porque sino las resoluciones pequeñas jamás verán el contenido completo.

Algo largo mi post pero era para poner en situación aunque la necesidad es algo muy concreto. Ayuda por favor!!! Llevo un tiempo dando vueltas a ésto y la única forma de mostrarlo todo es permitiendo escalado global que no es lo que busco (queda realmente mal).

Gracias de antemano!!!

Por emedmaria

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Abr 2011 10:20 am
Ninguna idea?

Por emedmaria

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Abr 2011 05:16 pm
..esto no basta con que se haga desde el embed del SWF, dicho swf debe estar programado para que se ajuste a la ventana del navegador y acomode sus elementos a dichas posiciones, es un buen hack entre As3 , Js y CSS.

Jonathan

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

chrome
Citar            
MensajeEscrito el 17 Abr 2011 05:34 pm
Gracias Jonathan!
Ya veo que no es suficiente...¿Me puedes detallar un poco mejor? o remitir a algún sitio donde lo explique?

Por emedmaria

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Abr 2011 06:02 pm
hay varios sitios solo es cosa de buscar por " liquid layout", en particular me ayudo mucho este Fluid website, ya que implementa el flotar elementos para cuando se cambia el tamaño del navegador estos se re acomoden al nuevo tamaño de la ventana.

Jonathan

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.