0 031
1. DISEÑO Y TECNOLOGÍA FLASH / DIAGRAMACIÓN LÍQUIDA
cambios de tamaño se harán de acuerdo con lo que nosotros definamos como desarrolladores. También tendremos que configurar la alineación del documento respecto de la ventana del reproductor o navegador a través de la propiedad [align], de modo que se ubique en el ángulo superior izquierdo. Para todo esto, en el panel [Acciones] tendríamos que escribir lo siguiente:
CÓDIGO 1 var ancho:Number; var alto:Number; stage.addEventListener(Event.RESIZE, diagramacionLiquida); function diagramacionLiquida(e:Event) { ancho = stage.stageWidth; alto = stage.stageHeight;
stage.scaleMode =
}
StageScaleMode.NO_SCALE; stage.align = StageAlign. TOP_LEFT;
CÓDIGO 2 function diagramacionLiquida(e:Event) {
El objeto [stage] es el escenario más toda la zona circundante, es decir, todo lo que está fuera de él. Luego debemos suscribirnos al evento [RESIZE] disparado por el objeto [stage]. Este evento ocurre cada vez que la ventana del navegador es redimensionada. La función que escucha el evento [RESIZE] se ocupará de obtener las medidas disponibles del objeto [stage] y de guardarlas en variables previamente creadas. Utilizando estas variables, realizaremos los cálculos requeridos (en general, sumas y restas) para ubicar los elementos como menús, imágenes, pies de página y todo lo que sea necesario, con el fin de darle al usuario una situación de máximo aprovechamiento de las capacidades de su equipo. Debemos escribir el código 1 en el panel [Acciones]. Por ejemplo, en el caso del pie de página (cuyo nombre de instancia podría ser [footer] y estar instanciado en el escenario), debemos hacer que mida todo el ancho disponible de la pantalla y que siempre se mantenga ubicado en su parte inferior. Entonces, modificamos la propiedad [width] del movie clip [footer] que contiene al pie de página y cambiamos su posición respecto del eje [y], variando la propiedad [y] para darle un valor igual al alto del espacio disponible menos la altura del movie clip [footer]. Así haremos que su extremo inferior se ubique en el extremo de la pantalla. Cabe aclarar que para que este cálculo sea correcto, el punto de registro de [footer] debe estar en su ubicación predefinida, que es el ángulo superior izquierdo. En el panel [Acciones], la función [diagramacionLiquida] queda como vemos en el código 2.
FLASH_Cap1_011_040_c.indd 31
ancho = stage.stageWidth; alto = stage.stageHeight; footer.width = ancho; footer.y = alto – footer.height; }
Este diseño de Ford (www.ford.com.ar) no tiene diagramación líquida, sino que se mantiene centrado.
En este caso (www.parquedelacosta. com.ar), el sitio desaprovecha las dimensiones de la pantalla del usuario.
25/02/2012 15:48