Organizar columnas según tamaño del stage

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,

up

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..

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);

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.

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);

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.

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);
      };
   }
}

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,

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);}  
   }  
}

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.