Consejo rápido estire su SWF con Stage.ScaleMode

¿Qué sucede cuando un sitio web mete tu SWF en un área donde no cabe? En esta Sugerencia rápida, descubrirá cómo controlar la escala de su SWF..


Paso 1: Configure su SWF

Comienza un nuevo proyecto de Flash y configura el escenario para que tenga un ancho de 350 px, un alto de 250 px..

Cree una clase de documento básica (consulte este Consejo rápido para obtener más información):

 paquete import flash.display.Sprite; clase pública principal extiende Sprite función pública principal () 

La FLA (y el SWC, para aquellos de ustedes que no usan Flash Pro) en el archivo zip contienen dos activos:

CheckedBackground, que es del mismo tamaño que el escenario, con su punto de registro en la esquina superior izquierda.

Cara, que es aproximadamente la mitad de ancho que el escenario, con su punto de registro en el centro.

Colócalos en el escenario de esta manera:

 clase pública Main extiende Sprite private var checkedBackground: CheckedBackground; cara privada de var: cara; función pública Main () checkedBackground = new CheckedBackground (); checkedBackground.x = 0; checkBackground.y = 0; this.addChild (checkedBackground); cara = cara nueva (); face.x = stage.stageWidth / 2; // centrar la cara horizontalmente face.y = stage.stageHeight / 2; // centrar la cara verticalmente this.addChild (cara); 

Ejecute su SWF:


Paso 2: Estira la ventana del jugador

Agrande la ventana, hágala más pequeña, estírela tanto dentro como fuera de proporción, y vea cómo cambian los contenidos:

Este es el modo de escala predeterminado de Flash., MOSTRAR TODO. Los contenidos nunca se distorsionan, y siempre se puede ver todo el escenario. Esto significa que obtendrá un efecto de "buzón" si se estira fuera de proporción.


Paso 3: Prueba el modo de escala NO_BORDER

MOSTRAR TODO es el modo de escala predeterminado, pero hay otros tres que podemos usar.

Importe la clase StageScaleMode:

 importar flash.display.StageScaleMode;

Este contiene consts estáticas que pueden usarse para configurar el modo de escala. Intentemos SIN BORDES; añade esta línea a tu función de constructor:

 stage.scaleMode = StageScaleMode.NO_BORDER;

Ejecute su SWF y estírelo de nuevo:

Como el nombre sugiere, SIN BORDES Evita el efecto buzón. El contenido permanece en proporción pero siempre llena el área disponible, incluso si eso significa recortar los bordes.


Paso 4: Prueba el modo de escala EXACT_FIT

Cambia la línea que establece el modo de escala de esta manera:

 stage.scaleMode = StageScaleMode.EXACT_FIT;

Pruébalo:

EXACT_FIT hace que los bordes del escenario se adhieran a los bordes del área disponible, lo que lleva a la distorsión si el jugador se estira fuera de proporción.


Paso 5: Prueba el modo de escala NO_SCALE

Para ver el modo de escala final, cambie la línea de la siguiente manera:

 stage.scaleMode = StageScaleMode.NO_SCALE;

Echale un vistazo:

Con NO_SCALE, los contenidos no cambian de tamaño en absoluto; permanecen centrados en la ventana del jugador, incluso si eso significa recortar grandes cantidades de los bordes, o dejar bordes masivos en todos los lados.


Conclusión

Stage.scaleMode le permite controlar cómo aparecerá su SWF si un sitio web cambia el tamaño del área disponible. También es útil para crear aplicaciones de AIR y sitios web de pantalla completa; NO_SCALE es una opción particularmente buena allí, ya que (cuando se combina con un detector de eventos RESIZE) le permite ajustar todo el contenido a la ventana, mientras mantiene el tamaño y las proporciones de los activos individuales.

Para más información, consulte la serie de Franci Zidar en sitios web escalables a pantalla completa :)