Comunidad de diseño web y desarrollo en internet online

Mc se escale segun resolucion pero no fullscreen.

Citar            
MensajeEscrito el 22 Feb 2012 06:41 pm
Buenos dias,

Quisiera hacer lo siguiente:

Un mc alineado al margen superior derecho que tenga un tamaño de 600 x 600 y que al escalar el navegador se escale dicho mc, por ejemplo si achico un poco el navegador deberia bajar el tamaño el mc alineado donde esta. Dejo dos imagenes para ver si me explico un poco mejor.

Tamaño normal:



Cambiando resolucion del navegador:



Estuve viendo y encontre varios ejemplos pero para que sea a pantalla completa y no es lo que necesito.

Espero que alguien pueda ayudarme, desde ya gracias.

Por Rakin

Claber

140 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Feb 2012 10:50 am
Mira el tutorial de diagramación líquida aquí en Cristalab, te explica como cambiar el tamaño de los elementos manualmente cuando ocurre el evento onResize

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 23 Feb 2012 08:08 pm
Estuve viendo los tutoriales que están en la web, pero no puedo comprender como utilizar esas funciones en un movieclip que no sea 100% sino que tenga un tamaño inicial y si el navegador se "achica" que se escale a una menor medida pero hasta cierto punto. Con lo ejemplos vi como hacerlo para que sea fullscreen.

Por Rakin

Claber

140 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Feb 2012 10:57 pm
Solisarg, estuve viendo un tema donde respondiste sobre algo similar a lo que yo preguntaba, en este tema.

Diste este codigo:

Código :

var origW:Number = Stage.width
var origH:Number = Stage.height
Stage.scaleMode = "noScale";
var miListener:Object = new Object();
miListener.onResize = function() {
       var perW:Number = int((origW*100)/Stage.width)
       var perH:Number =  int((origH*100)/Stage.height)
   algun_mc._xscale = perW
   algun_mc._yscale = perH
};
Stage.addListener(miListener);


Lo que vos explicabas era que se deformaba la imagen si el navegador se redimensionaba de alto o ancho indiferentemente, lo que hice fue sumar esta linea de codigo para que escale de forma igual

Código :

algun_mc._yscale=algun_mc._xscale;


Me funciona bien, pero me hace la escala al reves. Osea que al agrandar el navegador me achica el mc y al achicar el navegador me agranda el mc. Yo necesito hacerlo diferente, que solo al achicar el navegador tb me escale el mc achicandolo. Si agrando el navegador quiero que no se escale el mc y quede en su tamaño original. Alguna ayuda? Desde ya gracias.

Por Rakin

Claber

140 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Feb 2012 10:40 am
Estas tomando solo el yscale, si el usuario lo achica en ancho entonces tu MC no se entera. En cuanto al algoritmo prueba

var perW:Number = int((Stage.width*100)/origW)

Si da 100 o mas no lo apliques, si da menos entonces si ... eso si, se quedará cada vez mas chico porque ahica pero no agranda

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 24 Feb 2012 03:23 pm
Jorge, muchas gracias por tu ayuda. Con esa linea el mc se comporta como debe, no importa que no tome la altura del navegador.

Ahora te hago una pregunta mas, necesito alinearlo a la derecha-arriba, estuve viendo la info de diagramacion liquida y probe con el siguiente codigo:

Código :

MovieClip.prototype.centrar = function(pos:String, margen:Number) {
   var ancho:Number = Stage.width;
   var alto:Number = Stage.height;
   var peli:MovieClip = this;
   //
   switch (pos) {   
      case "der-top" :
         this._x = ancho-(this._width+margen);
         this._y = margen;
         break;
   }
   //
   var escuchador:Object = new Object();
   escuchador.onResize = function() {
      ancho = Stage.width;
      alto = Stage.height;
      //
      switch (pos) {
         case "der-top" :
            peli._x = ancho-(peli._width+margen);
            peli._y = margen;
            break;
         
      }
   };
   Stage.addListener(escuchador);
};
//
algun_mc.centrar("der-top",10);


Si bien me lo alinea donde quiero, al escalar el navegador se me mueve hacia cualquier lado. Si pruebo poniendo solo Stage.align = "TL"; me lo alinea bien a la izquierda-arriba y funciona correctamente al cambiar el tamaño del navegador, como lo alineo de esa manera a la derecha? Vi en algunos lugares que hablaban de Stage.align = "TR"; pero no funciona :s

Por Rakin

Claber

140 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Feb 2012 03:50 pm
Arriba a la derecha, en el eje x sería

mc._x = Stage.width - (mc._width + margen)

Donde margen es el espacio extra que quieres dejar para que no aparezca pegado

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 24 Feb 2012 04:04 pm
Excelente Jorge. Muchas gracias por tu ayuda.

Si tengo alguna otra duda volvere a molestarte :lol: .

Gracias, saludos.

Por Rakin

Claber

140 de clabLevel



 

chrome
Citar            
MensajeEscrito el 28 Feb 2012 04:21 pm
Hola!

Me sumo a la consulta asi no abro un tema nuevo.

Yo utilizo el siguiente codigo para que un mc se adapte proporcionalmente según la resolución y este alineado a la derecha:

Código :

Stage.align = "TL";
Stage.scaleMode = "noScale";
fscommand("fullscreen", false);
var T:String = "easeoutexpo";

fondo._x = 0;
fondo._y = 0;
intro._x = 0;
intro._y = 0;

var stageL:Object = new Object();
stageL.onResize = function() {
fondo._width = Stage.width;
fondo._height = Stage.height;

ancho1 = intro._width;
alto1 = intro._height;
ancho2 = Stage.width;
alto2 = (ancho2 * alto1) / ancho1;

if (alto2 > Stage.height) {
alto2 = Stage.height;
ancho2 = (ancho1 * alto2) / alto1; 
}
intro._width = ancho2;
intro._height = alto2;

fondo._x = Stage.width/mainContent_mc._width;
fondo._y = Stage.height/mainContent_mc._height;

intro._y = fondo._y+fondo._height/2-intro._height/2;
intro._x = fondo._x+fondo._width/2-intro._width/2;
};
Stage.addListener(stageL);
stageL.onResize();

intro._x = Stage.width - (intro._width + 0 )


Como puedo hacer para que intro se escale según la resolución pero hasta un valor máximo y mínimo? Por ej, que el máximo sea 600 de alto y de ahí que se pueda escalar hasta 200 por ejemplo.

Por Chompi

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Feb 2012 02:23 am
Chompi, la verdad que a mi también me interesa saber como hacerlo. Si ya lo resolviste o alguien puede ayudar por favor que nos de una mano.

De paso pruebo el as que dejaste así voy entendiendo de a poco como es esto de diagramacion liquida.

Saludos.

Por Rakin

Claber

140 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Feb 2012 02:49 am
Es simplemente aplicar un poco de lógica. Voy a tirar un ejemplo genérico a ver si lo pueden aplicar. Supongamos que quiero asignar un valor en un umbral de 200 a 600

Código ActionScript :

ancho = (calculo<200)?200:calculo;
if(calculo>600) ancho = 600;


"calculo" es lo que me ha dado el ancho según el cálculo estandard. Uso un operador ternario para limitar por abajo, luego un if para limitar por arrriba

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 29 Feb 2012 06:06 pm
Ya me hice bolas :lol:

A ver si entiendo, calculo es una variable con un valor? :?

No se podria hacer una variable llamada min que sea 800, entonces decir que si el Stage es menor a min que intro sea igual a min o asignar un valor fijo por ejemplo 800.

Se puede de esa manera?

Seria algo asi lo que me imagino:

Código :

var anchomin:Number = 800
var anchomin:Number = 600
   if (anchomin > Stage.width)
{
intro._width= anchomin;
} // end if
   if (altomin > Stage.height)
{
intro._height= altomin;
} // end if


Se que no esta bien pero quiero saber si tiene algo de logica lo que digo

Por Chompi

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Feb 2012 06:24 pm
No le veo la lógica a lo que pusiste. Voy a extender lo que puse antes, el único valor no explícito es calculo, que se supone el resultado que te haya dado el recalculo del ancho en el onresize

Código ActionScript :

anchoMin = 200;
anchoMax = 600;
if(calculo<anchomin){
    ancho = anchoMin
} 
if(calculo>anchoMax){
 ancho = anchoMax
}


Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 29 Feb 2012 08:28 pm
Entiendo la logica de decir que si el ancho en el onresize es menor a anchoMin muestre el valor asignado y viceversa, pero tengo las siguiente dudas:

Ancho vendria a ser el width de intro? Como especifico que calculo sea el resultado del ancho al redimensionar?

Por Chompi

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Feb 2012 08:39 pm
Esa es la lógica, ahora te toca aplicarlo a tu contexto ... ¿o también tengo que hacer eso?

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 29 Feb 2012 11:30 pm
Vuelvo con el tema anterior usando la ayuda que diste Solisarg para adaptar un mc según la resolución

Código :

var origW:Number = Stage.width
var origH:Number = Stage.height
Stage.align = "T";
Stage.scaleMode = "noScale";
algun_mc._x = Stage.width - (algun_mc._width + margen)
algun_mc._y = Stage.height - (algun_mc._height + margen)
var miListener:Object = new Object();
miListener.onResize = function() {
algun_mc._x = Stage.width - (algun_mc._width + margen)
algun_mc._y = Stage.height - (algun_mc._height + margen)
   var perW:Number = int((Stage.width*100)/origW)
   var perH:Number =  int((Stage.height*100)/origW)
   algun_mc._xscale = perW
   algun_mc._yscale = perH
   algun_mc._yscale=algun_mc._xscale;
};
Stage.addListener(miListener);


Tengo un error que es el siguiente; al cargar la web el mc se ve visible alineado al margen superior derecho y con un tamaño adecuado, si redimensiono el navegador el mc se escala correctamente y sigue alineado a la derecha, pero si con el navegador redimensionado pongo actualizar el mc se escala demasiado y se pierde de la ventana :s . Podre usar la misma logica que diste al ejemplo de Chompi para esto o no serviria de nada?

Por Rakin

Claber

140 de clabLevel



 

chrome

 

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