Este tutorial mostrará como realizar una película Flash que mantenga la posición de algunos elementos y su correcta escala cuando se vea en monitores de diferentes resoluciones. En este ejemplo vamos a evaluar 2 tamaños de monitor (1280*1024 y 1024*768) pero se pueden evaluar mas tamaños.Puedes descargar el archivo .fla final el cual se encuentra comentado o ver la página .html con el archivo .swf. En el ejemplo tenemos un logo, el fondo, un menú y un texto dinámico que nos mostrará las dimensiones de la película en pixeles.
Realizamos los siguientes pasos:
- Modifica los puntos de registro de los elementos de acuerdo a la posición de los mismos en el stage para poder ubicarlos fácilmente con ActionScript. En nuestro ejemplo usamos:
– Logo = izquierda arriba
– Menu = Abajo izquierda
– Fondo = Centro - En las opciones de publicación (Publish Settings) en el tab HTML configuramos estas opciones:
– Dimensiones (Dimensions): Percent (100 * 100)
– Escala (Scale): No Scale
- Ahora agregamos las siguientes líneas de código en el panel de Acciones (el código es AS3 y se encuentra totalmente comentado para que puedan entenderlo fácilmente) :
=============
stage.scaleMode=StageScaleMode.NO_SCALE; //el stage no se escalará automáticamente
stage.align=StageAlign.TOP_LEFT; // la alineación del stage será arriba a la izquierda
f_Redimensiona();
var prop:Number=stage.stageWidth /stage.stageHeight; //la variable prop contiene el valor de la proporción del stage (ancho-alto)
stage.addEventListener(Event.RESIZE, f_Redimensiona); //listener que ejecutará la función en el momento que la ventana del navegador o del player sea redimensionada
function f_Redimensiona (evento:Event=null):void // función que ubica y redimensiona elementos
{
resolucion_txt.text=stage.stageWidth + “X” + stage.stageHeight; //la caja de texto dinámico muestra las dimensiones de la película
logo_mc.x=5; //el logo estará alineado en la parte izquierda del stage con una distancia de 5 px
logo_mc.y=5; //el logo estará alineado en la parte superior del stage con una distancia de 5 px
menu_mc.x=5; //el menú estará alineado en la parte izquierda del stage con una distancia de 5 px
menu_mc.y=stage.stageHeight -5; //el menú es ubicado en la parte inferior del stage con una separacion de 5 px
resolucion_txt.x=stage.stageWidth/2; //El borde izquierdo de la caja de texto que muestra la resolución se ubica en la mitad del Stage
if(prop >1.25) //este condicional evalúa si la proporción es mayor a 1.25 (un monitor de 1280*1024 tiene una proporcion de 1.25 y un monitor de 1024*768 tiene un proporcion de 1.33)
{
back_mc.scaleX=stage.stageWidth/1280; //si la proporción ancho/alto del stage es mayor a 1.25 la escala horizontal del fondo es igual a dividir el ancho del stage entre 1280 (la proporción nos hace asumir que es un monitor de 1280)
back_mc.scaleY=back_mc.scaleX; //para mantener la proporción, la escala vertical del fondo es igual a la escala vertical
}else
{
back_mc.scaleY=stage.stageHeight/1024; //si la proporción ancho/alto del stage es menor o igual a 1.25 la escala horizontal del fondo es igual a dividir el ancho del stage entre 1024 (la proporción nos hace asumir que es un monitor de 1024)
back_mc.scaleX=back_mc.scaleY; //para mantener la proporción, la escala vertical del fondo es igual a la escala vertical
}
back_mc.x=stage.stageWidth/2; //el fondo estará centrado a la mitad al ancho
back_mc.y=stage.stageHeight/2; //el fondo estará centrado a la mitad al alto
}
============
Tutorial enviado por: Luis Felipe Tibata
¿Dudas y preguntas? Visita nuestros foros Xpert.
December 21, 2008
profeivanMuy buen tutorial Luis Felipe! Mil gracias por tu colaboración.