Fondo bitmap que se ajusta al tamaño del navegador en Flash

Cómo colocar una imagen de fondo de nuestra película que se adapte al tamaño de la ventana del navegador, escalandose pero sin distorsionarse. Escribo este tip viendo una pregunta y buscando la respuesta, que aquí posteo para el disfrute de todos ustedes

El efecto sería este (Tarda un poco en cargar). Abran la url y redimensionen la ventana para ver el efecto.

El sistema es sencillo:

• Tenemos una película flash al 100% dentro del html
  
• La película tendrá la opción de "noscale" para que no se redimensione el contenido (sólo queremos que se redimensione el fondo)
  
• Tenemos un bitmap dentro de un clip al que escalamos según el tamaño de la ventana
  
• Cada vez que redimensionamos la ventana del navegador redimensionaremos también el clip de fondo

El código es este:

Código :

Stage.scaleMode = "noscale";
//-----------------------
var StageWidth:Number = 550;
var StageHeight:Number = 400;
function escalaFondo()
{
   if (Stage.width > Stage.height) {
      fondo._width = Stage.width;
      fondo._yscale = fondo._xscale;
   } else {
      fondo._height = Stage.height;
      fondo._xscale = fondo._yscale;
   }
   fondo._x = (StageWidth - fondo._width) / 2;
   fondo._y = (StageHeight - fondo._height) / 2;
}
//-----------------------
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();
//-----------------------
stop();

Todo él va en el primer fotograma de la película.

Breve explicación..

Primero utilizaremos "noscale" para que al colocar el swf al 100% dentro del html no se redimensione el contenido.

Código :

Stage.scaleMode = "noscale";

Introduciremos el tamaño de nuestra película dentro de variables.

Código :

var StageWidth:Number = 550;
var StageHeight:Number = 400;

Crearemos una función que será la que redimensione el clip de fondo, que se llamará escalaFondo(). Dentro de esta función escalaremos el ancho y el alto del clip en función del ancho de la ventana Stage.

Código :

fondo._width = Stage.width;
fondo._yscale = fondo._xscale;

Utilizaremos como primera medida (el alto o el ancho) la que sea más grande.

Código :

if (Stage.width > Stage.height) {

Esto es para que no nos quede un trozo sin imagen.. el lado más grande será el que tenga la vista al 100% el otro quedará recortado. Por eso es importante que la imagen que estemos utilizando sea cuadrada. Por ejemplo, la que yo he utilizado mide 1900 x 1900 px. También es importante que la imagen utilizada sea de gran tamaño (pero sin pasarse...) ya que si se escala en monitores de gran resolución puede verse pixelada.

Otro paso a dar será posicionar el clip de fondo en relación a las dimensiones de la ventana. Hacemos un calculo con el tamaño de la ventana y el de la película.

Código :

fondo._x = (StageWidth - fondo._width) / 2;
fondo._y = (StageHeight - fondo._height) / 2;

Y por último generaremos un listener que ejecute esta acción cada vez que redimensionemos la ventana del navegador.

Código :

Stage.addListener(this);
this.onResize = escalaFondo;

E voalá!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.