Liquid , Concepto de sitios webs flash Liquidos.


La tendencia dice que los sitios deben estar hechos en este “nuevo” concepto llamado  LIQUID.

Se trata de un concepto basado en lograr mostrar la totalidad de un sitio web de forma optima en cualquier tipo de resolucion. Cuando hablamos de resolucion hablamos del tamaño de la pantalla que usa el usuario  1024 x 768  , 800 x 600  o tal vez resoluciones mayores como 1680 x 1050, tanto en sus opciones WideScreen (16.9) o la estandar (4.3).  Lograr que los sitios se muestren perfectos en cualquier dimension es un trabajo que se debe hacer con lujos de detalles, ya que cada componente del sitio debe adoptarse al tamaño y encontrar su lugar manteniendo la misma distanta entre ellos y los bordes, etc etc..  Hoy este tipo de sitios se destacan entre otros que desaprovechan los grandes monitores hogareños  y le permiten al usuario final obtener una mejor y mas rica experiencia.

Aqui voy a dejar un flash muy simple.

Este flash permite contiene una funcion simple donde se tiene un “listener” dedicado a detectar el alto y el ancho del Stage de Flash. de estamanera cuando la ventana del navegador cambia su tamaño flash se adapta y con estos valores, se re adaptan todos los componentes.

Ademas hemos importado la clase tween para hacer que el movimiento de los componente , tengan cierta fluidez y asi el sitio sea mas interesante. Por ultimo agregamos cualquier movieClip al escenario, que al ser nombrado dentro de la funciona e igualadas sus cordenadas de ._x e ._y a determinada proporcion del stage,  se mostrara siempre a la distancia correcta auque la ventana cambie su tamaño.

Aqui va lo mas importante del codigo:

Stage.align = “TL”;
Stage.scaleMode = “noScale”;

miListener.onResize = function() {
reziseMe(fondo_mc);
};

Stage.addListener(miListener);

function reziseMe(clip:MovieClip):Void{

//text_info = “Tamaño del Stage: “+Stage.width+” x “+Stage.height;
//barrasup_mc._width = Stage.width;
//barrainf_mc._width = Stage.width;
//barrainf_mc._y = Stage.height-barrainf_mc._height;
fondo_mc._width = Stage.width;
fondo_mc._height = Stage.height;
mov_tw(foto_mc,”_x”,Stage.width/2);
mov_tw(foto_mc,”_y”,(Stage.height/2)+20);

logo_mc._x = Stage.width/8
logo_mc._y = Stage.height/8;

}

reziseMe(fondo_mc);

fondo_mc, es el movieClip que se mostrara como tal y que cambiara su aspecto segun el tamaño de alto y ancho del stage. El Stage tiene un listener de la funcion onResize, quien hace continiamente resize del fondo_mc…

el logo_mc tiene su coordenada x igualada al ancho del Stage divido 8 veces y la coordenada “y” igualada al alto de Stage divido 8, esto significa que cuando el Stage cambie su tamaño el logo se mantendra en proporcion…

Aqui dejo el fla.

no te olvides de chequear el HTML que tambien tiene los anchos y altos llevados a proporcion “100%”.

un ejemplo: http://www.pullandbear.com/#/thegoldenage/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: