Imágen de fondo en Flash que ocupa todo el navegador

Muchos habréis visto por ahí webs en flash que utilizan de fondo una imagen que ocupa todo el navegador. A continuación vamos a explicar cómo y además vamos a hacer que esas imágenes cambien de forma aleatoria. Es necesario un conocimiento básico de Action Script para lograr esto. Veamoslo en movimiento:

Flash con Fondo que ocupa todo el navegador y con carga aleatoria de imágenes

Lo primero que necesitamos son las fotos que harán de fondo, tantas como querais, cuantas más haya menos oportunidades de que se repitan. Para este ejemplo he usado 5 por lo que es muy probable que salga la misma dos veces seguidas. Como norma general las imágenes serán cuadradas y tendrán un tamaño de por lo menos 1600x1600 pixels. Comprimidlas en la medida de lo que podáis porque si no os van a salir una imágenes muy pesadas.

Bien pues empezamos. Creamos un nuevo archivo de flash. Con cuatro capas: fondo y AS.

Bien en el primer fotograma en la capa de AS pegamos este código:

Stage.scaleMode = "noscale";
//-----------------------
var StageWidth:Number = 762;
var StageHeight:Number = 510;
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();

Explicación del código:

En primer lugar le decimos al flash que no nuestra página no se reescale para que la foto siempre se vea bien, más grande o más pequeña, pero sin deformarse.

Luego declaramos el tamaño que va a tener la parte en la que vamos a trabajar, en nuestro caso: 762x510 pixels (Este tamaño es el mismo que le daremos a la película en sus propiedades, y por favor ponedle por lo menos 30fps de velocidad para que la animación sea fluida).

A continuación declaramos la función "escalaFondo" y le decimos que si cambia el ancho de la pantalla cambie a su vez la posción de nuestro "Stage" y que si se escala en x tambien se escale en y. Además al final ponemos un stop.

Si nos fijamos en el código aparece varias veces "fondo". Este es el nombre de instancia que tendremos que darle a nuestro movieclip que va a contener el fondo a pantalla completa que cambia.

Bien creamos un movieclip con nombre de instancia "fondo" y con un tamaño de 1600x1600px (o el tamaño que le demos a nuestras imágenes) y lo alineamos a la esquina superior izquierda de nuestro stage.

Dentro de este movieclip tenemos 4 capas: imagenes, fundir, carga y AS. En la capa de imagenes tenemos un movieclip que solo contiene un borde negro y que mide 1600x1600 pixeles. A este movieclip le daremos de nombre de instancia "imagenes_mc". Dentro de este movieclip haremos la carga aleatoria de imagenes.

En la capa de fundir tenemos un grafico negro que pasará a transparente para que la animación sea fluida.

En la capa de carga, tenemos una animación de precarga en un movieclip. Utilizad la que más os guste.

Y en la capa de AS pondremos este código:

stop();
imagenes_mc.loadMovie("fotog0"+(1+random(5))+".jpg");
function cargando() {
var total, cargados, t;
total = imagenes_mc.getBytesTotal();
cargados = imagenes_mc.getBytesLoaded();
t = Math.floor((cargados*100)/total);
if (t>=100) {
clearInterval(hiloPrecarga);
play();
}
}
var hiloPrecarga = setInterval(cargando, 1);

Empezamos con un stop para que la animación no avance hasta que este cargada la imagen. Luego con un loadMovie "llenamos" nuestro movieclip imagenes_mc con la imagen aleatoria. Mis archivos de imagenes se llaman fotog01.jpg fotog02jpg... fotog05.jpg. Así que le decimos que carge "fotog0" + un número aleatorio entre 5 y su extensión (en nuestro caso jpg.) Al random le sumamos 1 porque para flash un número aleatorio de 5 pueden ser: 0, 1, 2, 3 y 4.

Trabajando las distintas capas hacemos una animación fundiendo las capas de fundir y de carga para que nos quede fluido. Además así determinamos la duración que tendrá la animación.

Ahora solo tenemos que publicar nuestro archivo. En las opciones de publicación del html le damos a Dimensiones : Porcentaje; y luego ponemos alto y ancho al 100%. La alineación del flash al centro tanto en vertical como en horizontal.

¡Y ya está! Ahora publicamos y cómo veremos nuestro navegador tiene un pequeño borde. Para eliminarlo abrimos el archivo html que hemos creado con cualquier editor e introducirmos en la cabecera el siguiente código:



Terminado, disfrutadlo