Citar
Como podemos ver en las muestras, tienen una característica en común estas páginas. Y es la propiedad de adaptarse al tamaño del navegador.
A esta facultad se le llama diseño web líquido, y es mucho más habitual ver esto en páginas HTML formateadas por CSS, como www.amazon.com, pero aquí vamos a hacerlo para una web en Flash.
Básicamente sólo necesitamos de la clase Stage de Flash. Esta clase hace referencia a los límites de nuestra película, no al tamaño al que configuramos el proyecto o escenario, si no a todo el espacio que ocupa nuestro Flash cuando lo reproducimos.
Comenzamos definiendo nuestro proyecto a un tamaño de por ejemplo de 770 x 420, dentro de este espacio diseñamos nuestra interface. Nosotros hemos dibujado una barra superior a modo de menú, una barra inferior para incorporar algunos datos, un clip como fondo y en el centro un motivo que es donde podrían ir los contenidos.
En el fotograma que contendrá el código, escribimos:
Stage.align = "TL"
Con la propiedad align y como valor "TL" del Stage, situamos nuestro escenario en la esquina superior izquierda del reproductor o en navegador, siempre que el contenido de flash no esté escalado, controlado con Stage.scaleMode. Hay más valores para la propiedad align como "T" que consigue una alineación superior y centrada, puedes consultar todos los valores en la ayuda de Flash.
Flash se alinea por defecto al centro, horizontal y verticalmente, pero en este caso preferimos alinearlo al "TL" para que controlar las coordenadas sea más sencillo, y no dependa del tamaño del escenario, como de otra forma sería, dejando de este modo el 0,0 en la esquita superior izquierda.
La siguiente línea de código es:
Stage.scaleMode = "noScale";
Con esto especificamos de que modo se va a escalar nuestra película. Con el valor "noScale" vamos a impedir que nuestra película se escale si modificamos el tamaño de la ventana del reproductor o navegador. Por defecto, Flash, incorpora el valor "showAll" haciendo que la película se escale para ocupar todo el área del navegador, consiguiendo un resultado bastante inadecuado.
Llegamos al punto clave, y es detectar constantemente cuando se producen cambios en el tamaño del navegador. Para ello creamos un objeto Listener para detectar el evento onResize y se lo asignamos al Stage.
Creamos el listener y la función que se ejecutara al redimensionar el navegador:
var miListener:Object = new Object();
miListener.onResize = function() {
};
y le asignamos el listener al Stage:
Stage.addListener(miListener);
En el escenario dibujamos un texto dinámico y definimos la variable "text_info"
Dentro de la función onResize vamos a colocar todas las operaciones que queramos realizar cuando cambie el tamaño del navegador. Por lo tanto incluimos la siguiente línea de código dentro de la función:
text_info = "Tamaño del Stage: "+Stage.width+" x "+Stage.height;
y ejecutamos nuestra película.Como vemos, el texto se actualiza constantemente para mostrarnos el tamaño de la película.
Vamos a incluir algunas líneas más para interactuar con los elementos de la interface, todo dentro de la función onRezise
barrasup_mc._width = Stage.width;
barrainf_mc._width = Stage.width;
Igualamos el ancho de la barra superior y la inferior, al ancho del Stage.
barrainf_mc._y = Stage.height-barrainf_mc._height;
Alteramos la posición vertical (_y) de la barra inferior, para que se recoloque constantemente en la parte inferior.La imagen de nubes que tenemos como fondo, queremos que siempre ocupe la totalidad de la pantalla, para así decorar nuestra web, y no nos importa que se desforme. Por lo tanto igualamos la altura y el ancho al Stage:
fondo_mc._width = Stage.width;
fondo_mc._height = Stage.height;
Para el motivo central (el avión) que puede ser el contenido, vamos a mantenerlo centrado, pero vamos a controlar su desplazamiento mediante la clase Tween. El Tween es una clase de Flash que nos permite hacer interpolaciones de movimiento por código, con distintas funciones matemáticas de animación, quedando un resultado bastante atractivo.
Primero, importamos y definimos la función Tween:
import mx.transitions.Tween;
import mx.transitions.easing.*
mov_tw=function(clip,prop,inicio,fin){
new Tween(clip,prop, Strong.easeOut,inicio,fin, 25, false);
}
Volvemos a centrarnos en la función onResize, dentro escribimos:
mov_tw(foto_mc,"_x",foto_mc._x,Stage.width/2);
mov_tw(foto_mc,"_y",foto_mc._y,(Stage.height/2)+20);
Con estas líneas llámanos a la función y pasamos como parámetros la nueva posición respecto al tamaño del Stage.
En definitiva, nuestro código queda se la siguiente forma:
import mx.transitions.Tween;
import mx.transitions.easing.*
mov_tw=function(clip,prop,fin){
new Tween(clip,prop, Strong.easeOut,clip[prop],fin, 25, false);
}Stage.align = "TL";
Stage.scaleMode = "noScale";
var miListener:Object = new Object();
miListener.onResize = function() {
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);
};
Stage.addListener(miListener);
Como el objetivo final es una página web, nuestro HTML necesita ciertos retoques.Insertamos de forma habitual en el HTML el archivo .swf, y configuramos su alto y ancho al 100%
Vamos a incluir un poco de CSS en nuestro HTML:
Con esta regla también configuramos el alto y el ancho al 100% de lo elementos que van a contener al archivo.swf , las etiquetas html y body.
Si ahora ejecutamos el HTML dependiendo en qué navegador lo hagamos, es posible que observemos que la película flash no se adapta, hasta que no variemos el tamaño de la ventana del navegador. Algo muy lógico, recordando que la función responde al evento onResize.
Por lo tanto, en nuestro código de Flash incluimos la última línea:
miListener.onResize();
Que ejecuta directamente la función aún sin ser variado el tamaño, puesto que lo normal es que cualquier usuario abra la web al tamaño que desee, independientemente del original de nuestro SWF, por lo que al iniciar ha de saltar la función.
Con esto quedaría listo nuestro ejemplo de un flash líquido.
NOTAS: Un flash líquido, no siempre tiene unas reglas escritas. Como se han visto en este ejemplo, existen muchas formas de actuar con los objetos, por lo que primero, lo se que ha de estructurar, es pensar qué queremos que pase con cada uno de ellos (escalar, mover, etc.). También hay que tener en cuenta todo, y todos los tamaños, pero es posible que deseemos querer forzar la visualización a un mínimo de tamaño, tanto vertical como horizontal, ya sea desde el mismo flash, o forzándolo desde el html, con un scroll. Controlar absolutamente cada clip que deseemos tener en cuenta para su escalado, puede resultar largo, pero quedará un resultado bastante positivo.
Hola termine este tutorial al pie de la letra y funciona perfecto, tanto IE como firefox. pero ahora, como puedo ingresar elementos, cuando agrego algo no forma parte del diseño liquido!, ayuda
