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

Posted by admin | Avanzado,Efectos,Flash | Wednesday 13 December 2006 10:24 pm

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.

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

Actionscript:
  1. Stage.scaleMode = "noscale";
  2. //-----------------------
  3. var StageWidth:Number = 550;
  4. var StageHeight:Number = 400;
  5. function escalaFondo()
  6. {
  7.    if (Stage.width> Stage.height) {
  8.       fondo._width = Stage.width;
  9.       fondo._yscale = fondo._xscale;
  10.    } else {
  11.       fondo._height = Stage.height;
  12.       fondo._xscale = fondo._yscale;
  13.    }
  14.    fondo._x = (StageWidth - fondo._width) / 2;
  15.    fondo._y = (StageHeight - fondo._height) / 2;
  16. }
  17. //-----------------------
  18. Stage.addListener(this);
  19. this.onResize = escalaFondo;
  20. escalaFondo();
  21. //-----------------------
  22. stop();

Pueden ver el ejemplo y una breve explicación en el post que hize en cristalab.

Post relacinonados:

  1. Panel de zoom de imágenes en ActionScript 3
  2. Foto panorámica 360º en flash
  3. Ejemplo de Zoom con lupa en Flash CS3

2 Comments »

  1. Comment by estaper — 16 October, 2008 @ 5:51 am

    oye podrias pasarme un fla con su html a mi mail es k lo he probado muchas veces yno me sale. gracias

  2. Comment by Alberto — 15 December, 2008 @ 4:48 am

    Y si quisieramos que solo se redimensione al ancho y no el alto??

RSS feed for comments on this post. TrackBack URI

Leave a comment

Get Adobe Flash playerPlugin by wpburn.com wordpress themes