Imágen de fondo en Flash que ocupa todo el navegador
Posteado por Diego González Villarejo | En la categoría Tutoriales Flash
¡Actualizado!
Este post ha sido actualizado y ahora podeis descargaros el .fla y ver el tutorial en movimiento en este otro post.
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 1600×1600 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: 762×510 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 1600×1600px (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 1600×1600 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:
<!–
body {
margin: 0px;
}
–>
Terminado, disfrutadlo
13 Respuesta to “Imágen de fondo en Flash que ocupa todo el navegador”
-
felipe Dice:
Octubre 14th, 2007 at 18:31Hola, estaba intentando el tutoria y no me resulta
esta genial y es casi el unico que he encontrado de esta forma bueno y nada, queria saber si tenias por ahi el .fla :/ o si es mucha mi confianza perdirtelo pero bueno ya me dices algo.
muchas gracias
reinciar@yahoo.com -
Diego González Villarejo Dice:
Octubre 14th, 2007 at 20:58Hola Felipe!
¿Qué parte exactamente no te sale? Me refiero a qué si el problema es en la imágen que ocupa todo el fondo o en la caraga aleatoria.
Te lo digo porque con la carga aleatoria he tenido algun bug que aún no he conseguido corregir.
De todo modos intenta explicarme tu problema y si lo necesitas te pasaré el .fla
Un saludo
-
ocon Dice:
Diciembre 14th, 2007 at 10:58Hola he hecho el tutorial que me parece muy interesante y sencillo, pero la carga aleatoria de imagenes no funciona.
Me carga la primera y se queda ahí.
Sabeis que puede pasar?
Gracias
-
david Dice:
Diciembre 29th, 2007 at 17:58hola Diego,
he realizado el tutorial y no me funciona. La verdad es que no se donde falla. Me podrías pasar el .fla para ver donde me falla?
-
Anonymous Dice:
Enero 3rd, 2008 at 11:51Hola, tampoco me funciona la carga, podrías mandarme el fla, por favor,
te dejo mi mail, gracias de todas formas. -
Anonymous Dice:
Enero 4th, 2008 at 13:37Hola Diego, soy el de arriba.
Si no te importa tambien agradecería qu me enviases el .fla
a ver si logro que funcione.Gracias de antemano
-
Chumo Dice:
Enero 28th, 2008 at 10:11Hola, me ha encantado este tutorial, pero hay algo que me falla.
Cuando carga todas las fotos se queda la animacion de la precarga ahi constante y no carga mas…no se a que se debe, he revisado el codigo pero nada, no se que pasa, y solo cuando lo subo a internet, en local no falla.
Puedes responderme a jma@silan.es por favor. -
ViCtOr AdOlFo Dice:
Septiembre 30th, 2008 at 20:12pues me pasa lo mismo no puedo hacerlo correr , me puedes enviar el fla. a mi correo by_vito@q-arto.com
-
Actualización de “Imágen de fondo en Flash que ocupa todo el navegador” | DisenioN Dice:
Junio 9th, 2009 at 19:29[...] algún tiempo ya realizé este pequeño tutorial sobre como utilizar imágenes de fondo para un flash y que además carguen dinámicamente. He recibido muchisimas peticiones para que cuelgue el .fla de aquel tutorial. Pues bien en primer [...]
-
Caladier Dice:
Agosto 15th, 2009 at 13:26Hola, no se si me puedes ayudar, yo quisiera incluir en mi pagina varias imagenes que tengan un movimiento independiente y aleatorio por el blog, por ejemplo de moscas o globos, o …
sin tener que cambir el fondo, es esto posible? -
Diego González Villarejo Dice:
Agosto 17th, 2009 at 11:55Hola Caladier. Perdona que haya tardado tanto en contestar pero no he estado disponible. Respecto a tu pregunta creo que no te puedo ayudar, mis conocimientos de flash no son tan avanzados. De todos modos lo miraré a ver qué se puede hacer. Si te interesa escribemé un correo a diego.gonzalez@disenion.com y te escribiré en cuanto sepa algo.
Un saludo y muchas gracias por leer el blog.
-
Bernardo Ibarra Dice:
Octubre 7th, 2009 at 17:26Hola, de ante mano gracias por la informacion, pero… he tenido problemas. Al publicar la peli no me dan las funciones, es decir, como si el codigo fuerra erroneo… he seguido las pautas que han preguntado antes, pero sigue sin funcionar…. ¿podrias publicar o enviarme un .fla que sea funcional?, muchas gracias… mi correo es beriba31@hotmail.com
-
Diego González Villarejo Dice:
Octubre 7th, 2009 at 21:51Hola Bernardo,
En primer lugar gracias por leer el blog. Hay un .fla publicado en otro post que actualiza a este: http://www.disenion.com/blog/actualizacion-de-imagen-de-fondo-en-flash-que-ocupa-todo-el-navegador/ desde ahí puedes descargarte el .fla de este tutorial.
Muchas gracias.
