AS3 – Redimensionar Fondo

Publicado por Iván Gajate el 31 de marzo de 2011 en AS3, Flash

Si queremos tener un fondo en nuestra web que se redimensione cuando cambia el tamaño del navegador, podemos recurrir al evento RESIZE.

Lo que es algo mas complicado es si queremos que no se distorsione el clip, y que nunca aparezcan huecos sin cubrir, algo así:

resize

Ver ejemplo:

Descargar Ejemplo.

El código es bastante sencillo, pero la primera vez cuesta un poco 😉

import flash.events.Event;

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

// Guardo la proporcion del stage y del clip que quiero redimensionar.
var _propStage:Number;
var _propFondo:Number;

// Primero guardo la proporcion del fondo.
_propFondo = fondo_mc.width/fondo_mc.height;

function redimensionar(e:Event=null):void{
	// La proporcion del stage se modifica cada vez que cambia el tamaño de la peli.
	_propStage = stage.stageWidth/stage.stageHeight;

	// Si el escenario es mas ancho que el fondo, el ancho manda, y el alto se desborda por arriba y abajo de la peli.
	if(_propStage>=_propFondo){
		fondo_mc.width = stage.stageWidth;
		fondo_mc.height = fondo_mc.width/_propFondo;
		fondo_mc.x = 0;
		fondo_mc.y = (stage.stageHeight-fondo_mc.height)*0.5;
	}else{
		// Si el fondo es mas ancho que el escenario, el alto manda, y el ancho se desborda por la izquierda y derecha de la peli.
		fondo_mc.height = stage.stageHeight;
		fondo_mc.width = fondo_mc.height*_propFondo;
		fondo_mc.x = (stage.stageWidth-fondo_mc.width)*0.5;
		fondo_mc.y = 0;
	}
}

// Escucho el evento RESIZE, y hago un redimensionado inicial para la primera vez.
stage.addEventListener(Event.RESIZE, redimensionar);
redimensionar();

 

17 comentarios para “AS3 – Redimensionar Fondo”

  1. Maria, tu problema seguramente sea esta linea que te falta:

    stage.align = StageAlign.TOP_LEFT;

    Prueba a hacer un:

    fondo_mc.width = stage.stageWidth;
    fondo_mc.height = stage.stageHeight;

    para ver como se comporta, y cuando esto te salga bien sin hacer cosas raras, prueba a hacerlo proporcional.
    Puede que también sea porque hasta que no ha terminado de cargar el contenido, no conoce sus dimensiones y hace las cuentas mal.
    Si tu swf cargado tiene animaciones o mascaras, ten en cuenta que las dimensiones las tomará de todo el contenido, aunque esté enmascarado o alpha cero.

  2. La idea es conseguir algo así pero más sencillo:http://www.basjanader.com/

    He probado hacerlo con una imagen fija y no hay problema. Pero si cargo un swf externo dentro de un clip vacio que será lo que luego reescalo y se carga pero al reescalar no lo hace bien. Hace cosas raras, o bien lo reescala proporcionalmente pero mucho más pequeño de las dimensiones del stage…
    Reescalando directamente el loader que carga el swf no funciona :_(

  3. Hola Maria
    no se si te entiendo bien: si lo que quieres es que el fondo se redimensione y el contenido no, simplemente pon este código al fondo, y tu contenido por encima independiente.
    Si quieres tener un scroll para ese contenido, tendrás que hacértelo en flash, no se si lo he entendio bien 🙁

  4. Una consulta acerca del post.
    Mi idea es incluir tambien en su interior un menu y demás clips de modo que se redimensione el fondo pero no el resto de contenido. He visto info por la red relacionada pero no consigo lo que quiero porque al redimensionar el navegador, el fondo lo hace y el contenido no (que ya es lo que busco) pero quiero que aparezca un scroll para todo el contenido, no que haga scroll del fondo y el resto del contenido sobresalga del fondo (por abajo)
    Ayuda por favor!

    Gracias

  5. Si claro, no sería muy diferente, mirate esto http://www.scotflash.co.uk/blog/?tag=stageonresize

  6. Hola, me gusta este post, mi cosulta es si se puede realizar en AS2.
    Gracias de antemano!.