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

Por: Zguillez

11 de Diciembre del 2006

6416 de clabLevel
Otros artículos de Zguillez

50,476 visitas

actionscript

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

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();

Código :

Stage.scaleMode = "noscale";

Código :

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

Código :

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

Código :

if (Stage.width > Stage.height) {

Código :

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

Código :

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

Artículos Relacionados

• Cambiar centro de rotación de un Movieclip en ActionScript 2
• Problemas de carga con Loader y ScrollPane en Flash
• Añadir a un MovieClip un efecto de espejo con Actionscript 2

actionscript

err.... ¿cuál es el tamaño de la imágen?
Por: La100rra

La100rra :

err.... ¿cuál es el tamaño de la imágen?

si, si, 1900x1900px
quizas es un poco grande para tí, pero es que para hacer la prueba en mi monitor una imágen más pequeña pixela bastante...

Por: Zguillez

No no, la pregunta era porque en ningún lado dices de que tamaño debe ser la imágen precisamente para que no tenga pérdida de resolución.
Por: La100rra

La100rra :

No no, la pregunta era porque en ningún lado dices de que tamaño debe ser la imágen precisamente para que no tenga pérdida de resolución.

Si que lo escribí... no debiste leer mi post entero

Contestando a esto: El tamaño del bitmap a de ser similar al tamaño de resolución de pantalla al que queremos optimizar la pelicula. Si queremos que se vea bien en monitores a 1024 podemos utilizar una imágen de 1000x1000px, si queremos que a 1280x800 tambien se vea bien utilizaremos 1200x1200px etc... Con resoluciones mayores a la elegida evidentemente pixelará. Pero tambien hay que tener en cuenta el tamaño del archivo. Lo mejor es ir probando en diferentes monitores y resoluciones y ver como queda...

PD. El tamaño de la imágen a de ser cuadrado. Se podría modificar el código para que esto no tuviese que ser así, pero era más rápido asi...
Por: Zguillez

Si, no dejes de postear cuando lo hayas terminado
Por: La100rra

1.-
2.-
3.-

Yo he intentado hacer eso con stage en flah pero que sea más dinámico, pero no me ha salido, es decir, que el centrado del flash fuera con easing. Este efecto es muy bueno. En fin lo dicho.
4.-
Por: Sisco

Que buen efecto, te felicito, donde puedo descargarme el archivo fla???
Por: .::Manu::._blog

.::Manu::._blog :

Que buen efecto, te felicito, donde puedo descargarme el archivo fla???

No reo que sea necesario postear un .FLA
Lo único que has de hacer es crear un pelicula nueva, y en el primer fotograma colocas todo el código.
Luego creas un MovieCLip con la imágen bitmap que quieras, y le pones nombre de instancia "fondo"
Y listo
Por: Zguillez

if (Stage.width > Stage.height) {

fondo._width = Stage.width;

fondo._xscale = fondo._yscale;

fondo._width = Stage.width;
fondo._height = Stage.height;

<style type="text/css">
<!--
body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
-->
</style>

<style type="text/css">
<!--
html,body { margin: 0; padding: 0; height: 100%; } 
   body {
   background-image: url(fondo.png);
   background-color: #4a4a4a;
}
-->
</style>

Hola.

Alguien al que le haya resultado podría poner un fla de ejemplo?

Lo he hecho exactamente igual un monton de veces y no soy capaz de que me salga. Lo que me resulta es un trozo de la imagen en la esquina superior izquierda de la pantalla, aun poniendole el swf al 100% en el html, estoy agobiao porque llevo un par de dias con el y lo que me falla tiene que ser una tonteria seguro .
Por: SrCrow

pues asignándole a la barra la propiedad _x e _y a 0. Y creando un objeto que al modificar el tamaño de la venta la barra se vuelva a poner arriba a la izquierda:

Código :

var miListener:Object = new Object();
miListener.onResize = function() {
   miBarra._x = 0;
   miBarra.-y = 0;
};
Stage.addListener(miListener);

Por: Sisco