Comunidad de diseño web y desarrollo en internet online

Organizar columnas según tamaño del stage

Citar            
MensajeEscrito el 16 Jul 2008 09:30 am
Hola,

Organizar columnas según el temaño del stage, mi manera de definir el siguiente ejemplo:
http://brain.marconi.nu/

Usan un contenedor con deteccion de choque entre columnas? Se cambia la variable de la posición de los thumbs según el stage? O que otro truco se os ocurre?


Gracias de antemano,

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Jul 2008 10:15 am
up

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Jul 2008 11:14 am
Eso lo haces calculando el stageWidth y apartir de ese dato defines cuantas columnas te entrar en ese espacio.. Con un ON_RESIZE actualizas la visualización y listo..

Por Zguillez

BOFH

10744 de clabLevel

85 tutoriales
17 articulos
3 ejemplos

Genero:Masculino   Bastard Operators From Hell Héroes Team Cristalab Editores

BCN

clabbrowser
Citar            
MensajeEscrito el 25 Jul 2008 02:24 pm
En el ejemplo que pones se vuelven a leer todas las imágenes cuando se cambia el tamaño de la pantalla lo mejor sería cambiarlas de posición, no volver a leerlas, por ejemplo, suponiendo que nuestras imágenes midan 100 de ancho:

Código :

var ancho:Number = 100;
var separacion:Number = 20;

var listener:Object = new Object();
listener.onResize = function ():Void {
   
   var stageWidth:Number = Stage.width;
   var cantidad:Number = Math.floor(stageWidth / (ancho + separacion));
   trace("el ancho actual es " + stageWidth);
   trace("caben por la horizontal " + cantidad + " imágenes");
   
}
Stage.addListener(listener);

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 27 Oct 2008 08:08 pm
Vuelvo a sacar este hilo para seguir el experimento.

Usando el código de elchininet, y un bucle, tengo lo siguiente.

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noscale";

var ancho:Number = 100;
var alto:Number = 70;
var separacion:Number = 5;

var listener:Object = new Object();
listener.onResize = function():Void  {
   var stageWidth:Number = Stage.width;
   var cantidad:Number = Math.floor(stageWidth/(ancho+separacion));
   ordenThumb(cantidad,ancho,separacion);
};
Stage.addListener(listener);

function ordenThumb(horizontalThumb,ancho,separacion) {
   for (var a:Number = 0; a<horizontalThumb; a++) {
      for (var b:Number = 0; b<20; b++) {
         attachMovie("thumb","thumb"+b+a,_root.getNextHighestDepth());
         thumb = this["thumb"+b+a];
         thumb._x = a*(ancho+separacion);
         thumb._y = b*(alto+separacion);
         thumb.texto.text = thumb._target;
         this["thumb"+b+a].onRelease = function() {
            trace(this._target);
         };
      }
   }
}


Si amplio el stage, no hay ningún problema los thumbs se añaden, pero si lo reduzco los thumbs no se quitan. Pensé en volver a eliminar los thumbs y volver a redibujarlo. Pero no se si es lo más optimo.

Otra cosilla, me creía que si se generaba los thumbs el orden de los thumbs iban a ser numéricos, me explico.

Si en una fila caben 3, el orden debería de ser, Thumb01, Thumb02, Thumb03 (fila abajo) Thumb04, Thumb05, etc. Pero no es así, aparece así aparece así Thumb01, Thumb02, Thumb03 (fila abajo) Thumb11, Thumb12, etc.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Oct 2008 10:09 pm
En la función de ordenar los thumbs no puedes crearlos, los creas al principio y la función sólo los ordena, en caso de que quieras quitar juega con la propiedad _visible.

Para el segundo problema, le estás dando de nombre a los thumbs:

Código ActionScript :

"thumb"+ b + a;


Flash primeramente sumará "tumb" + b (se obtiene un string) y después a este string le suma el otro número y se obtiene un nuevo string (nunca se llegaron a sumar las variables "a" y "b" numéricamente), la mejor forma de solucionarlo es sacar la suma de los números aparte y después sumarla al string o situarla entre paréntesis para que se sume el string al resultado de la suma de las variables:

Código ActionScript :

"thumb"+ (b + a);

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 28 Oct 2008 08:59 am
Ya pinta mejor, uso el siguiente código:

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noscale";

var ancho:Number = 100;
var alto:Number = 70;
var separacion:Number = 5;


for (var i:Number = 0; i<50; i++) {
   attachMovie("thumb","thumb"+i,_root.getNextHighestDepth());
}


var listener:Object = new Object();
listener.onResize = function():Void  {
   var stageWidth:Number = Stage.width;
   var cantidad:Number = Math.floor(stageWidth/(ancho+separacion));
   ordenThumb(cantidad,ancho,separacion);
};
Stage.addListener(listener);

function ordenThumb(horizontalThumb,ancho,separacion) {
   for (var a:Number = 0; a<horizontalThumb; a++) {
      for (var b:Number = 0; b<20; b++) {
         thumb = this["thumb"+(b+a)];
         thumb._x = a*(ancho+separacion);
         thumb._y = b*(alto+separacion);
         thumb.texto.text = thumb._target;
         this["thumb"+(b+a)].onRelease = function() {
            trace(this._target);
         };
      }
   }
}


Pero la function ordena los thumbs de la siguiente forma: http://www.romanjusdado.com/ejemplos/ordenarThumbs.jpg

Y el primer thumb, no me imprime su instancia (debería ponerme Thumb0), supongo porque la suma de los string (0+0) no cuadra.

Después pondré un scroll a los thumbs, supongo que con eso no es necesario usar _visible, no?

Enfin gracias, ya di un paso importante.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Oct 2008 11:59 am
Prueba así:

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noscale";
var w:Number = 120;// ancho total de cada thumb + separacionX. 
var h:Number =  70;//  alto total de cada thumb + separacionY. 
var oX:Number = 30;// origen de la colocación (pos x del primero).
var oY:Number = 60;// origen de la colocación (pos y del primero).
var nT:Number = 50;// numero de Thumbs a crear.
for (var i:Number = 0; i<nT; i++) {
   this.attachMovie("thumb", "thumb"+i, this.getNextHighestDepth());
}
ordenThumb(w, h, oX, oY, nT);// iniciando los thumbs.
listener = new Object();
listener.onResize = function() {ordenThumb(w, h, oX, oY, nT);};
Stage.addListener(listener);

function ordenThumb(w, h, oX, oY, nT) {
   var tx:Number = oX;
   var ty:Number = oY;
   for (var i:Number = 0; i<nT; i++) {
      thumb = this["thumb"+i];
      if (Stage.width<tx+2*w)ty += h;
      Stage.width>=tx+2*w && i != 0 ? tx += w : tx=oX;
      thumb._x = tx;
      thumb._y = ty;
      thumb.texto.text = thumb._target;
      this["thumb"+i].onRelease = function() {
         trace(this._target);
      };
   }
}

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 28 Oct 2008 02:56 pm
Increíble, el código va perfecto, ahora lo usare para un caso práctico (con un XML). Lo que me cuesta entender es esta parte:

Código ActionScript :

      if (Stage.width<tx+2*w)ty += h; 
      Stage.width>=tx+2*w && i != 0 ? tx += w : tx=oX; 


Es tremendo! Muchisimas gracias,

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Oct 2008 05:19 pm
Esas lineas equivalen a:

Código ActionScript :

if (Stage.width < tx+ w*2 ){
   ty += h;
   tx = oX;
}
else tx += w*(i!=0);


y esa última linea equivale a :

Código ActionScript :

else if(i!=0){
   tx += w;
}


Lo correcto sería que al cambiar la ordenación se efectuara también un centrado.
Usando un poco más de matemáticas para conseguir eso, nos quedaría algo así:

Código ActionScript :

Stage.align = "TL";  
Stage.scaleMode = "noscale";  
 
var oX:Number = 30; //valor X mínimo para poner thumbs. 
var oY:Number = 60; //valor X mínimo para poner thumbs. 
var sw:Number = 10; //separación X entre thumbs. 
var sh:Number = 15; //separación Y entre thumbs. 
var nT:Number = 50; //número de thumbs a crear. 
 
for (var i:Number = 0; i<nT; i++) {  
   attachMovie("thumb","thumb"+i, getNextHighestDepth());  
}  
ordenThumb(oX, oY, nT, sw, sh); // iniciando la colocación. 
listener = new Object;  
listener.onResize = function(){ordenThumb(oX, oY, n, sw, sh);};  
Stage.addListener(listener);  
  
function ordenThumb(ox, oy, n, sw, sh) { 
   var w = thumb0._width + sw; 
   var df = Stage.width - 2*ox; 
   var cf = Math.floor((df - sw)/w); 
   for (var i:Number = 0; i<nT; i++){  
      thumb = this["thumb" + i]; 
      thumb._x = ox + (df - cf*w - sw)/2 + (i%cf)*w; 
      thumb._y = oy + Math.floor(i/cf)*(thumb0._height + sh)*(cf>0); 
      thumb.texto.text = thumb._target;  
      this["thumb"+i].onRelease = function() { trace(this._target);}  
   }  
}

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 29 Oct 2008 09:39 am
Muchísimas gracias por la explicación Teseo, no pensaba que se podía optimizar el código de esta forma. Voy a probar lo último que haz puesto.

Y también gracias elchininet.

Por mrxispas

36 de clabLevel



 

firefox

 

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