Flash que se ajusta a la ventana con diagramación líquida + Stage

La expresión “Diagramación Líquida” se refiere a la diagramación que se acomoda automáticamente a las dimensiones de la ventana en que se muestra. Este término es común entre los desarrolladores CSS, Xhtml, etc. Y cada vez se vuelve más común entre los desarrolladores de Flash, ya habrán leído de artículos que defienden la idea de hacer todo un sitio en Flash. Así que trataré de hacer una introducción a lo que hace posible este fenómeno que mejorará directamente la usabilidad y navegabilidad de sus sitios.

La principal herramienta a usar, será la clase Stage, ya algunos estarán familiarizados con ella, los que no, no hay problema, es una clase sencilla de usar.

No sobra decirles que el Stage (Escenario), es TODO el espacio que ocupa nuestra película ya sea en un reproductor o en el navegador. La película siempre tendrá un tamaño que lo definimos por defecto, pero para un caso práctico el Stage siempre puede variar, ya sea por la resolución de la pantalla del usuario, por las preferencias al navegar, el tipo del navegador, la cantidad de barras de herramientas de este, etc, etc.

Las propiedades para esta clase son:

• Stage.align - Hará que la película se alinee con respecto al Stage
• Stage.height - El Alto del Stage
• Stage.scaleMode - El tipo de Escala
• Stage.showMenu - Mostrar u ocultar las opciones del menú emergente
• Stage.width - El ancho del Stage

El controlador de evento para esta clase es uno solo, Stage.onResize y reproduce el evento en el momento en que el Stage cambia de tamaño, es un bucle por lo que siempre estará evaluando mientras se esté cambiando la dimensión, en realidad mientras se mantiene el click.

Bueno, comenzamos poniendo la propiedad Stage.scaleMode con valor “noScale”, esto hace que la película no quede del mismo tamaño al del Stage. Esta propiedad es vital para que el ejercicio funcione, de hecho trataré de no hacer nada que no sea vital y ya luego probaremos cosas diferentes para darle estilo.

Ahora construimos el listener para que detecte el cambio de dimensión del Stage y asignamos los valores de ancho y alto en una variable (miTexto).

Stage.scaleMode = "noScale";
var miListener:Object = new Object();
miListener.onResize = function() {
	miTexto = "Tamaño del Stage: " + Stage.width + " x " + Stage.height;
};
Stage.addListener(miListener);

Ponemos en el Stage un campo de texto dinámico y le asignamos la variable “miTexto”. Hasta acá si todo sale bien, estaremos viendo el campo de texto cambiar dinámicamente a medida que cambiamos el tamaño.

Con esto ya tienen la base para hacer la diagramación, ahora lo que vamos a hacer son dos barras, una superior, y otra inferior, que crezcan a la medida exacta del ancho de la película, un menú a la izquierda y un campo de texto a la derecha que se acomoden al Stage.

Las dimensiones para la película serán 400 x 200, creamos una barra y la copiamos para que queden dos iguales, a una la llamaremos barraSup y la segunda barraInf, las pondremos arriba y abajo respectivamente en la película, creamos un rectángulo que llamaremos miMenu y dejaremos a la izquierda de la película; y finalmente un campo de texto que llamaremos campoTexto como nombre de instancia y le asignaremos la variable eltexto. Si lo han hecho como digo y tienen el texto de información que hicimos anteriormente el aspecto será parecido a este.

Volvemos a nuestro primer frame y desarrollamos el código:

Stage.align = "TL";
/*la propiedad stage.align hace que nuestra película quede anclada arriba (top) y a la 
izquierda (left), para el resto de opciones de anclaje usa la guía de referencia de AS */
Stage.scaleMode = "noScale";
var miListener:Object = new Object();
miListener.onResize = function() {
	miTexto = "Tamaño del Stage: " + Stage.width + " x " + Stage.height;
	//ajustamos el ancho de las barras al del Stage
	barraSup._width = Stage.width;
	barraInf._width = Stage.width;
	//ajustamos la posición de la barra inferior segun el alto del Stage y el alto propio
	barraInf._y = Stage.height - barraInf._height;
	//ajustamos el alto del menú 
	miMenu._height = Stage.height - barraSup._height - barraInf._height;
	//ajustamos el alto y ancho campo de texto, los valores son ajustados al diseño
	campoTexto._height = Stage.height - 70;
	campoTexto._width = Stage.width - 135;
};
Stage.addListener(miListener);
eltexto = "texto de prueba...";

Si nuestro interés es, y seguramente así será, hacer esto para un sitio web, entonces miremos lo necesario para que esto funcione en un html.

El estilo, css solo necesita estirar el alto al 100% el “margin” y “padding” son por estilo, no son necesarios. El ancho y el alto al 100% también son necesarios para que funcione.

Con esto ya tendremos los principios para el uso de una Diagramación Líquida, es de tener en cuenta que al iniciar la película los componentes de esta no se acomodan, esto es por el controlador de evento que solo da la orden cuando cambia de tamaño, para tomar los valores iniciales simplemente se copia el código de la función que ya tenemos y se la asignamos a otro controlador o a la línea de tiempo, como ustedes quieran, no quise hacer el código mas largo para mantenerlo simple.

Como nota final es bueno tener en cuenta que la diagramación líquida también tiene sus desventajas, la mayoría o todas, son con relación a resoluciones de pantalla muy altas o muy bajas, pues como se ve en el ejemplo el texto queda con líneas gigantes que pueden dañar un poco la estética o viceversa. Pero bueno, ya para cuestiones de usabilidad y navegabilidad hay mucho por leer acá en Cristalab.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo