Background Image a FullScreen en AS3
Hola a todos!
Estoy intentando poner una imagen de fondo que se ajuste a toda la pantalla y se comporte (escale) igual que este ejemplo: http://pullandbear.es/#/history/
La verdad es que me estoy rayando bastante y no me sale. El código que estoy usando es este:
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, colocaStage);
function colocaStage(e:Event):void {
__colocaStage();
}
function __colocaStage():void {
//galeria es el jpg imagen de fondo
if (galeria) {
galeria.y =0;
galeria.scaleX=galeria.scaleY=1
if (stage.stageWidth>galeria.width) {
galeria.width=stage.stageWidth
galeria.scaleY=galeria.scaleX
//
if (stage.stageHeight>galeria.height) {
galeria.height=stage.stageHeight
galeria.x=stage.stageWidth/2-(galeria.width/2)
}
} else if (stage.stageHeight>galeria.height){
galeria.height=stage.stageHeight;
galeria.scaleX=galeria.scaleY
}
}
}
Agradecería que alguien me echara una mano.
Salu2 dsd el Planeta X!
i13
Lo que has puesto tira, prueba:
///
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, colocaStage);
function colocaStage(e:Event):void {
__colocaStage();
}
__colocaStage();
function __colocaStage():void {
if (galeria) {
galeria.y =0;
galeria.scaleX=galeria.scaleY=1
if (stage.stageWidth>galeria.width){
galeria.width=stage.stageWidth;
galeria.scaleY=galeria.scaleX;
if (stage.stageHeight>galeria.height){
galeria.height=stage.stageHeight;
galeria.x=stage.stageWidth/2-(galeria.width/2);
}
}else if (stage.stageHeight>galeria.height){
galeria.height=stage.stageHeight;
galeria.scaleX=galeria.scaleY;
}
}
}
lacriatura
i13, una pregunta, no encuentro la diferencia del código que has subido respecto al mio.
i13
Además de algún ";" la línea __colocaStage(); que la tenías sólo en el evento resize y no inicializabas la posición de galería.
saludos
lacriatura
Gracias por la aclaración.
Al margen de los ";" el resto estaba bien porque, el código que he subido es un include.
En el código de la película principal si aparece "__colocaStage".
Aun sigo buscando la solución; estoy en este punto:
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, colocaStage);
function colocaStage(e:Event):void {
__colocaStage();
}
function __colocaStage():void {
//imagen de fondo full screen
if (galeria) {
galeria.x=0;
galeria.y =0;
galeria.scaleX=galeria.scaleY=1;//reseteo la foto a su tamaño original
if (stage.stageWidth>galeria.width || stage.stageHeight>galeria.height) {
galeria.width=stage.stageWidth;
galeria.scaleX=galeria.scaleY;
if (stage.stageHeight>galeria.height) {
galeria.height=stage.stageHeight
galeria.scaleX=galeria.scaleY;
galeria.x=(stage.stageWidth-galeria.width)/2
}
}
}
}
El fallo está en que en algún momento siempre se ve el escenario (fondo black) cuando onResize debería escalarse siempre para que eso no ocurra.
A ver si dáis con la solución.
Gracias
i13
Ok, no habías explicado bien el problema en tu primer post.
Prueba así:
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, colocaStage);
function colocaStage(e:Event):void {
__colocaStage();
}
function __colocaStage():void {
if (galeria) {
galeria.x=0;
galeria.y =0;
galeria.scaleX=galeria.scaleY=1;
if (stage.stageHeight>galeria.height) {
galeria.height=stage.stageHeight;
galeria.scaleX=galeria.scaleY;
}
if (stage.stageWidth>galeria.width || stage.stageHeight>galeria.height) {
galeria.width=stage.stageWidth;
galeria.scaleY=galeria.scaleX;
}
}
galeria.x=(stage.stageWidth-galeria.width)/2;
}
lacriatura
Hey Funciona!!!
Gracias!!
Ahora, por algún motivo no me coge el "__colocaStage()" en la peli principal con lo que si el tamaño de la ventana del navegador, inicialmente es mayor en ancho y/o alto que el tamaño original de la imagen (scaleX=scaleY=1), se sigue viendo el fondo.
Dejo aquí el código fuente (".FLA") por si queréis echarle un vistazo: DOWNLOAD.ZIP
;-)
i13
Sólo te puedo decir, que tal y como estas programando eso, te va dar dolores de cabeza.
Estás usando as3 como si fuese as2.
lacriatura
:(
Lo hago lo mejor que se, soy novato con as3.
Cualquier consejo es bienvenido.
Sirio
Aqui le dejo un tutorial que puse en otro foro, esta hecho en AS3, puede servir.
Sugerencia: Antes de comenzar con el diseño, se tiene que realizar un proyecto a la máxima resolución posible de nuestro escenario, de esta manera los gráficos, imágenes, texto y demás clip de película reducen su tamaño en una resolución menor, aumentando el aspecto visual (contrariamente al aumento, generando imágenes pixeladas)
Se crea un Clip con el tamaño 1600×1200 o 1920×1200, ambos serán el estándar 4:3 en UXGA y 16:9 WUXGA respectivamente.
• Creamos una nueva capa y la bajaremos al final, dejando la primera para el código que será el intérprete que haga la función de redimensión (resize). En esta haremos un clip de película y le asignan site como nombre de instancia.
Luego, si tienen elementos en la biblioteca se lo agregan, sino la importan o crean uno, una vez finalizada, vuelan a la escena principal.
• En la primera capa escribiremos el código, esta será la que redimensione el clip de película, ajustándose al monitor.
Escalamos y la alineamos arriba, izquierda
Stage.scaleMode = "noScale";
Stage.align = "TL";
Creamos el objeto Listener
miListener = new Object (this);
Al objeto le ponemos una función para redimensionar
miListener.onResize = function(){
site._width = Stage.width;// Ancho de película igual al ancho del escenario
site._height = Stage.height;// Alto de película igual al alto de escenario
site._x = (Stage.width - 10) / 2;// Centrar Stage en coordenada X
site._y = (Stage.height - 10) / 2;// Centrar Stage en oordenada Y
}
Añadir funciones al objeto creado para hacer lo mismo
Stage.addListener(miListener);
site._width = Stage.width;
site._height = Stage.height;
site._x = (Stage.width - 10) / 2;
site._y = (Stage.height - 10) / 2;
Una vez terminada el sitio en Flash, procedemos a escalarla en HTML, para que se ajuste a la ventana.
El estilo CSS, crea una etiqueta de tamaño (body), en este caso completa
<style>
html, body{
height:100%;
width:100%;
margin:0;
}
</style>
Creamos un objeto de ID, para el clip de película embebido, con alto, ancho en 100 % y con el archivo destino.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10" width="100%" height="100%" id="index" align="middle">
Se definen los parámetros de acceso al script
<param name="allowScriptAccess" value="sameDomain" />
Se define la propiedad Fullscreen en falso
<param name="allowFullScreen" value="false" />
Se integra la pelicula
<param name="movie" value="index.swf" />
Dentro de esta la definición de color
<param name="quality" value="high" />
Y el fondo del escenario
<param name="bgcolor" value="#000000" />
Realizada los clip y el archivo HTML, se prueba en el Flash para ver si funciona y se editan los archivos.