Comunidad de diseño web y desarrollo en internet online

adaptar flash al tamañao de stage + ...

Citar            
MensajeEscrito el 12 Sep 2007 07:14 pm
Hola estoy intentado mezclar dos tips que he encontrado y me encuentro con una pega que no logro resolver.

Por un lado tengo este codigo que me adapta una imagen de fondo al tamaño de stage sin distorsionar:
Stage.scaleMode = "noScale";
_root.fondo.loadMovie("fondo1.jpg");
StageWidth = 700;
StageHeight = 500;
//----------------------- ESCALAR FONDO
function escalaFondo(){
//reescalomos la imagen de fondo
if (Stage.width > Stage.height) {
// trace("horizr");
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.removeListener(this);
}
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();

y por otro tengo que todo se me adapta al stage, pero la imagen se distorsiona

//comprobamos el tamaño inicial de la pantalla
Stage.scaleMode = "noScale";
fondo.fotoFondo.loadMovie("imagenes/imagen1.jpg");
campoTexto.selectable=true;
Stage.align = "TL";
/*la propiedad stage.align hace que nuestra película quede anclada arriba (top) y a la
izquierda (left), para el resto de opciones de anclaje usa la guía de referencia de AS */

var miListener:Object = new Object();
miListener.onResize = function() {
miTexto = "Tamaño del Stage: "+Stage.width+" x "+Stage.height;
//ajustamos la posición de la barra inferior segun el alto del Stage y el alto propio
barraInf._width = Stage.width;
barraInf._y = Stage.height-barraInf._height+1;
//ajustamos el alto del fondo
fondo._height = Stage.height;
fondo._width = Stage.width;
//ajustamos el alto y ancho campo de texto, los valores son ajustados al diseño
campoTexto._height = Stage.height-100;
campoTexto._width = Stage.width-135;
//ajustamos el menu con la brra inferior
contacto._y = Stage.height-(contacto._height+7.5);
clientes._y = Stage.height-(clientes._height+7.5);
galeria._y = Stage.height-(galeria._height+7.5);
separador._y = Stage.height-(separador._height+10);
};
Stage.addListener(miListener);

Yo creo que el problema viene por Stage.aling="TL", pero no se como resolverlo

Alguien me puede echar una mano
gracias[/b]

Por apuerta

5 de clabLevel



 

safari
Citar            
MensajeEscrito el 13 Sep 2007 04:50 pm
Por favor necesito ayuda:
El problema es que la imagen que esta en el fondo se adapta al stage pero distorssionada, me guataria que se adaptara pero sin distorsionar.

Este me redimensiona correctamente la imagen del fondo:
http://opcion1.net/luis/escalarFondo.swf

Este me lo adapta todo al stage, pero la imagen la deforma (cambia el stage)
http://opcion1.net/luis/home.swf

Me gustaria que se adaptara todo al stage, pero que la imagen no se distorsionara.

Creo que el problema esta en Stage.align = "TL";

Me podrias echar una mano?
Gracias de nuevo a todos

Por apuerta

5 de clabLevel



 

safari
Citar            
MensajeEscrito el 13 Sep 2007 05:11 pm
El problema es que vos estas escalando la imagen al tamaño del Stage. Lo que tendrias que ver es que achique la imagen siempre en la misma proporción para que no se deforme.

Por thacon

53 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Sep 2007 05:17 pm
No te entiendo, quiero que la imagen ocupe todo el stage sin distorsionar, y a la vez que el resto de clip se adapten al tamñao del navegador.

Me lo puedes aclarar un poco mas.
Gracias, soy un poco torpe

Por apuerta

5 de clabLevel



 

safari
Citar            
MensajeEscrito el 18 Sep 2007 08:55 am
por favor alguien me puede ayudar, me estoy volviendo loca
gracias

Por apuerta

5 de clabLevel



 

safari
Citar            
MensajeEscrito el 18 Sep 2007 02:13 pm
Lo que te thacon es que se distorsiona porque el alto y el ancho no son proporcionales, es como si agarraras una foto y aumentaras sólo el alto, se distorsionaría. Una opción es usar una imagen que sea más adapatable otra (un poquito más complicada es que trates de adaptarla aunque pierdas un poco de la foto.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 19 Sep 2007 05:46 am
Ejemplo:

Tamano del Stage: 700 - 500.
Tamano original de la imagen: 400 - 250
Para que la imagen quedara del mismo tamano que el stage se aumentaria en 175 - 200 % , eso quiere decir 25% mas de alto o ancho (como lo quieras ver) .

Lo que te propone The Fricky! y thacon es que modifiques la imagen para que sean proporcionales.
Tamano del Stage: 700 - 500.
Tamano original de la imagen: 350 - 250
---------------------------------------------------------------------------------------------------------------------------------------
La otra opcion de The Fricky! (utilizando mi ejemplo)
Tamano del Stage: 700 - 500.
Tamano original de la imagen: 400 - 250
multiplicar la imagen *2 = 800 - 500,
se pasa por 100, esos 100 se perderian pero no se distorsiona la imagen.
---------------------------------------------------------------------------------------------------------------------------------------
Otra es que pongas un fondo(digno de las imagenes ^^), aumentarla o disminuir la foto (segun el caso) y en vez de que se pase, hacer que le sobre. Utilizando mismo ejemplo
Tamano del Stage: 700 - 500.
Tamano original de la imagen: 400 - 250
multiplicar la imagen *1.75 = 700 - 437.5
le sobran 62.5, este espacio lo ocuparia el fondo.
---------------------------------------------------------------------------------------------------------------------------------------

Por Wako

77 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Abr 2009 03:35 am
Acabo de encontrar la respuesta a sus súplicas :cool: yo también estuve en este dilema y aproveché todo este fin de semana para buscar una solución. Me han encargado hacer una página similar a esta ipchang. Esto me obligó a ir nuevamente por un camino desconocido para mi en ActionScript (lenguaje que no entiendo del todo aún). Encontré varios Scripts en Cristalab, pero me sucedía lo mismo que al compañero que abrió este tema. Asi que tomé algo de aquí y de allá e hice este mostrito:

En nuestro escenario tienen que haber 3 movieclips con los siguientes nombres de instancia.

bg_mov_mc => este clip contiene una la imagen o animación (como la página de muestra que me dieron para hacer) que preferentemente tenga grandes proporciones y resolución (los tamaños en ancho y alto no interesan mucho, pero lo ideal es que esté en forma horizontal).

mc_bottom => este clip será el fondo de nuestra botonera y se adaptará al ancho total del stage.

mc_menu => este clip contiene nuestros botones de navegación interna.

a continuación el código que irá en el primer fotograma:

Código :

//Sin escalar y alineado a la izquierda y arriba
Stage.scaleMode = "noScale";
Stage.align = "TL";
//objeto listener para el onResize
   var listener:Object = new Object();
//definicion de acciones para el onResize
   listener.onResize = function():Void  {
      resizebackGround();
      //aca la gracia de poner afuera la funcion es poder hacer muuchas acciones en el evento 
   };

//funcion de resize
   resizebackGround=function():Void{
      var imageAspectRatio = bg_mov_mc._width / bg_mov_mc._height;
      var stageAspectRatio = Stage.width / Stage.height;
      if (stageAspectRatio >= imageAspectRatio) {
        bg_mov_mc._width = Stage.width;
        bg_mov_mc._height = Stage.width / imageAspectRatio;
      } else {
        bg_mov_mc._height = Stage.height;
        bg_mov_mc._width = Stage.height * imageAspectRatio;
      }
   }   
//Listener de redimensionado de stage
   Stage.addListener(listener);
//llamado inicial a la funcion
   resizebackGround()

//Esto ubica el menu al pie de la pantalla y el fondo del menu al ancho de la pantalla

mc_bottom._width = Stage.width;
mc_bottom._y = Stage.height - mc_bottom._height;
mc_menu._y = Stage.height - (mc_menu._height+20);

sizeListener = new Object();
sizeListener.onResize = function() {   
   mc_bottom._width = Stage.width;
   mc_bottom._y = Stage.height - mc_bottom._height;
   mc_menu._y = Stage.height - (mc_menu._height+20);
};

Stage.addListener(sizeListener);


Para terminar, en nuestro HTML ponemos 100% de ancho y alto al SWF y sin margenes al BODY.

Pueden descargarse un ejemplo que hice aquí

Por khraom

3 de clabLevel



 

Lima - Peru

firefox
Citar            
MensajeEscrito el 27 Jul 2009 07:24 am
Hola, el link de la descarga no sirve. Podrías arreglarlo por favor?

Por logosa

2 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 27 Jul 2009 08:05 am

Por khraom

3 de clabLevel



 

Lima - Peru

firefox
Citar            
MensajeEscrito el 27 Jul 2009 08:08 am
jajaja que vaina, se coló el punto al final. Quitale el punto del final de la dirección y te lo descarga ;) suerte.

Por khraom

3 de clabLevel



 

Lima - Peru

firefox
Citar            
MensajeEscrito el 31 Jul 2009 08:52 pm
Hola khraom, el tema me interesa mucho, descargue el archivo "Escalar_bg_y_posicionar_mc.zip" pero al descomprimir sale error, puedes subir el archivo bien khraom??????

Saludos desde colombia

Por juanita_col

2 de clabLevel



 

msie7
Citar            
MensajeEscrito el 31 Jul 2009 11:00 pm

Por khraom

3 de clabLevel



 

Lima - Peru

firefox
Citar            
MensajeEscrito el 02 Sep 2009 10:47 am

khraom escribió:

http://www.webserviceperu.com/alan/Escalar_bg_y_posicionar_mc.zip
juanita_col puedes descargar ese archivo desde este enlace. Te dejo estos otros enlaces como muestras de lo que hice a partir de ese archivo.

http://webserviceperu.com/qualityprint/index.html
http://webserviceperu.com/qualityprint/boceto_qp.html

Espero les sirva.


Hola he seguido la conversación.. me baje el archivo y detecto un error, en IE8 la foto de fondo se ve mal pilla el primer pixel y lo estira al infinito, vamos que no se vé. Pero en FIREFOX se ve correctamente.

¿¿¿ Sabe alguien como puedo hacer para que se vea bien en los dos navegadores ???

gracias

Por erniekubyk

0 de clabLevel



 

msie8
Citar            
MensajeEscrito el 26 Sep 2009 01:21 am
Hola a todos, me uno al tema...
Personalmente he usado el diseño liquido basicamente para tener un fondo de pelicula que se escale generalmente a lo horizontal y que mantenga el tamaño de escenario en lo vertical con todo un contenido de pelicula que se mantenga al limite de arriba y a la vez centrado, hasta alli todo ha estado bien, el problema viene cuando dentro del contenido quiero incluir algo especial como un scroll de imagen, un tooltip, etc..., este tipo de contenido casi nunca funciona, si los pruebo en una escena aparte funciona bien, pero si lo incluyo en la pelicula de contenido de mi pagina ya se arruina.
Si alguien aqui ha tenido este mismo problema y ha logrado solucionarlo por favor paseme la informacion porque ha sido imposible encontrarle solucion.
Lo que quisiera hacer nada mas, es programar un fondo para que se escale y dejar lo demas del contenido libre en el escenario de trabajo. ¿Alguien sabe como hacerlo?

Gracias de antemano al que me auxilie

Saludos

Por Trinity09

1 de clabLevel



 

msie8
Citar            
MensajeEscrito el 26 Sep 2009 01:37 am
Si a alguien le sirve mi codigo aqui lo pongo a disposicion, esta un tanto mas sencillo, para nosotros los novatos principalmente, jaja...

stop();
Stage.scaleMode = "noScale"

var myListener:Object = new Object();

myListener.onResize = function () {
setUpInterface()
}

Stage.addListener(myListener);


function setUpInterface(){

fondo_ins._y = Stage.height - fondo_ins._height
fondo_ins._y = 0
fondo_ins._width = Stage.width

contenido_ins._x = Stage.width/2 - contenido_ins._width/2

esquina_ins._y = Stage.height - esquina_ins._height
esquina_ins._y = 0
esquina_ins._x = Stage.width - esquina_ins._width

}

setUpInterface()


Para explicarlo un poquito...
En esta accion hay 3 elementos visibles en el escenario de flash:
1. fondo_ins que es la pelicula de fondo escalada a lo horizontal y que mantiene el tamaño de escenario en lo vertical
2. contenido_ins es la pelicula con todo el contenido del sitio, este se mantiene al limite por arriba y centrado a lo horizontal
3. esquina_ins es una pelicula que se mantiene al limite de arriba y alineada a la derecha

Todo esto funciona mientras en la publicacion esten estos 3 parametros seleccionados en la casilla HTML:
Dimensiones: Porcentaje 100% V, 100% H
Escala: Sin escala
Alineacion flash: izquierda y superior

Saludos

Por Trinity09

1 de clabLevel



 

msie8
Citar            
MensajeEscrito el 09 Dic 2009 05:42 pm
hace dos dias que no duermo con este problema, logro que la imagen de fondo se adapte al stage y se scale de forma correcta sin deformarse. pero solo cuando ajusto la ventana toma el tamaño del stage, no lo hace desde que carga, cuando carga me sale la imagen completa , lo que quiero es que se redimencione desde el inicio, y no lo hace.Estoy cargando la imagen con loadmovie, alguien porfavor help. si
o si alguien puede pasarme el fla de este ejemplo
http://opcion1.net/luis/home.swf

gracias de antemano.

Por xanita

5 de clabLevel



 

Peru

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.