Pelí­cula Flash que se reescala en monitores de diferente resolución

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:

1. 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

   

2. En las opciones de publicación (Publish Settings) en el tab HTML configuramos estas opciones:
   – Dimensiones (Dimensions): Percent (100 * 100)
   – Escala (Scale): No Scale
   
3. 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.