Construir una página web en Flash tiene sus limitaciones, casi siempre consisten en frames encerrados en un marco centrado, o se ajustan a uno de los laterales de la ventana… en fin, que se ayudan mucho del html para posicionarse en el espacio de nuestro navegador. Sin embargo, existen métodos para construir layouts en flash que se ajustan perfectamente, por sí solos, al navegador, ocupando el 100% del espacio disponible.
Para hacer funcionar un liquid layout necesitamos un par de comandos en Flash y un par de retoques en la etiqueta con la que insertamos la película dentro del html. Empecemos por el Flash.
No escalar
En primer lugar le ordenaremos que se alinee arriba a la izquierda (Stage.align) y que no se amplie junto con la página (Stage.scaleMode), como hacen los swfs que se abren directamente en cualquier navegador:
Stage.scaleMode = "noScale";
Este comando se añade en el primer frame de nuestra película.
Listeners
Listeners son los elementos que queremos que atiendan al tamaño de la ventana para posicionarse. El siguiente ejemplo añadiría un movieclip de nuestra biblioteca llamado logo en el centro del escenario.
logo.onResize = function() {
this._x = Stage.width/2;
this._y = Stage.height/2;
};
Stage.addListener(logo);
this.logo.onResize();
Mediante el comando attachMovie incluimos un elemento (que previamente hemos exportado para actionscript, en las opciones de ‘Linkage’ de la biblioteca) dentro del escenario. El siguiente comando crea una funcion que lo posiciona en el centro del escenario calculando las mitad del ancho y alto del escenario y lo siguiente es declararlo como Listener.
Dentro del HTML
Para añadir la película dentro del archivo html incluimos el siguiente código, cambiando los datos básicos como el nombre y localización de la película o el color del fondo:
Y ya estamos casi listos, sólo nos falta tocar un poco el CSS para ajustar la película a los márgenes:
Aquí teneis algún ejemplo de páginas con liquid layouts: “Stéphane Guillot (Ir a Stéphane Guillot)”:http://www.stephaneguillot.com/, “Nikodemo Animation (Ir a Nikodemo Animation)”:http://www.nikodemo.com.
Este tutorial está basado en el “Liquid Flash Layouts (Ir a Tutorio.com/Liquid Flash Layouts)”:http://www.tutorio.com/tutorial/liquid-flash-layout de Tutorio.com.
↓