Galeria de imagenes con texto (XML) en varias columnas

Hola a todos!! llevo trasteando con esto desde hace dias y no doy con ello. He conseguido apilar los MC en forma de lista vertical, es decir, unos encima de otros....pero unicamente uno....pero lo que quiero es que se coloquen en varias columnas, en mi caso serían 2!! y cada 2 productos/imgs o lo que fuese se colocaria en la fila de abajo y asi sucesivamente, nose si me explico.

He creado un Mc y lo llamo de la biblioteca con attachMovie. Dentro de este Mc hay 2 campos de texto dinamico y un mc vacio donde se carga una imagen. Los textos y la imagen recogen la informacion desde un XML.

Este sería el código del XML:

Código XML :

<botones>
<item name="Acceso al web site de as" precio="500 Euros" link="http://www.as.com" image="image1.jpg" />
<item name="Web oficial del estudio de animacion 3D i-real studios" precio="600 Euros" link="http://www.i-real3D.com" image="image2.jpg" />
<item name="Página web de google" precio="750€" link="http://www.google.es" image="image3.jpg" />
</botones>

Y este el codigo AS:

Código ActionScript :

var myMenu:XML = new XML();
myMenu.ignoreWhite = true;
System.useCodepage = true;
myMenu.load("enlaces.xml");
linkBoton = new Array();
textoBoton = new Array();
PrecioBoton = new Array();
imageBoton = new Array();
myMenu.onLoad = function() {
   for (var i = 0; i<this.firstChild.childNodes.length; i++) {
        textoBoton[i] = this.firstChild.childNodes[i].attributes.name;
   PrecioBoton[i] = this.firstChild.childNodes[i].attributes.precio;
        linkBoton[i] = this.firstChild.childNodes[i].attributes.link;
   imageBoton[i] = this.firstChild.childNodes[i].attributes.image;
   }
   creaBtns(this.firstChild.childNodes.length);
};
function creaBtns(cuantosBotones) {
   var separacion = 10;//separacion a cada MC
   alturaY = 10;//posY en stage
   alturaX = 10;//posX en stage
   for (var i = 0; i<cuantosBotones; i++) {
      this.attachMovie("boton", "boton"+i, this.getNextHighestDepth());
      _root["boton"+i].image_mc.loadMovie(imageBoton[i]);
      _root["boton"+i].link = linkBoton[i];
      _root["boton"+i].mytexto.text = textoBoton[i];
      _root["boton"+i].precio.text = PrecioBoton[i];
      _root["boton"+i]._x = alturaX+i*separacion+_root["boton"+i]._width*i;
      _root["boton"+i]._y = alturaY;
      _root["boton"+i].onRelease = function() {
         getURL("javascript:muestraImagen('imageBoton[i]', 'Descripción Foto #1');");
      };
   }
}

Tiene tambien un link pero eso no es problema. Espero haberme explicado con claridad, sino decidmelo e intentare ser mas claro. Muchas gracias y espero que podais ayudarme

Si quieres hacer filas y columnas, tienes que hacer dos for anidados, uno para las filas, otro para las columnas, algo así:

Código ActionScript :

var filas = 10;
var columnas = 4;
var xOffset = 25 //20 cada thumb, 5 de separación
var yOffset = 30 //25 de alto, 5 de separación
var depth = 1;
 for (var f = 0; f<filas; f++) { 
     for (var c = 0; c<columnas; c++) {
      this.attachMovie("boton", "boton"+depth, depth++, {_x: c*xOffset, y: f*yOffset}); 
     }
}

Esa es la idea

Jorge

Hola Jorge! muchas gracias por tu respuesta, he tratado de colocar el codigo como me as dixo pero, como lo abre colocado mal seguramente...no me funciona!! no se mucho de as y la verdad q por mas pruebas q ago no va!! unicamente e conseguido q se coloquen en una fila ....pero no se apilan en mas!! y ocurre otra cosa...me aparece sin contenido cargado cada boton, es decir sin la img cargada ni los textos de cada btn....no lo entiendo!! Este es el codigo que e colocado con lo ultimo q me abias dixo tu!!

Código ActionScript :

var myMenu:XML = new XML();
myMenu.ignoreWhite = true;
System.useCodepage = true;
myMenu.load("enlaces.xml");
linkBoton = new Array();
textoBoton = new Array();
PrecioBoton = new Array();
imageBoton = new Array();
myMenu.onLoad = function() {
   for (var i = 0; i<this.firstChild.childNodes.length; i++) {
      textoBoton[i] = this.firstChild.childNodes[i].attributes.name;
     PrecioBoton[i] = this.firstChild.childNodes[i].attributes.precio;
      linkBoton[i] = this.firstChild.childNodes[i].attributes.link;
     imageBoton[i] = this.firstChild.childNodes[i].attributes.image;
   }
   creaBtns(this.firstChild.childNodes.length);
};
function creaBtns() {
      var filas = 10; 
   var columnas = 4; 
   var xOffset = 290 //290 cada thumb, 5 de separación 
   var yOffset = 120 //120 de alto, 5 de separación 
   var depth = 1; 
           for (var f = 0; f<filas; f++) {  
              for (var c = 0; c<columnas; c++) { 
              this.attachMovie("boton", "boton"+depth, depth++, {_x: c*xOffset, y: f*yOffset});  
               _root["boton"+i].image_mc.loadMovie(imageBoton[i]);
         _root["boton"+i].link = linkBoton[i];
              _root["boton"+i].mytexto.text = textoBoton[i];
         _root["boton"+i].precio.text = PrecioBoton[i];
               _root["boton"+i].onRelease = function() {
                     getURL("javascript:muestraImagen('imageBoton[i]', 'Descripción Foto #1');");
                     };
         }
         }
   }

quizas haya q eliminar la funcion creaBtns y colocar el codigo de filas y colum,attachmovie y demas en otro lado, lo e intentado pero como soy bastante novato en as no me sale ni qeriendo...

Si miras, le he cambiado el nombre al botón, pero usalo así

target = this.attachMovie("boton", "boton"+depth, depth++, {_x: c*xOffset, y: f*yOffset});
target.image_mc.loadMovie(....)

Luego en todos lados que tengas _root["boton"+i] lo cambias por target, que es la referencia que te entrega el attachMovie

Jorge

He colocado le codigo ultimo q me as dixo

Código ActionScript :

var myMenu:XML = new XML(); 
myMenu.ignoreWhite = true; 
System.useCodepage = true; 
myMenu.load("enlaces.xml"); 
linkBoton = new Array(); 
textoBoton = new Array(); 
PrecioBoton = new Array(); 
imageBoton = new Array(); 
myMenu.onLoad = function() { 
   for (var i = 0; i<this.firstChild.childNodes.length; i++) { 
      textoBoton[i] = this.firstChild.childNodes[i].attributes.name; 
      PrecioBoton[i] = this.firstChild.childNodes[i].attributes.precio; 
      linkBoton[i] = this.firstChild.childNodes[i].attributes.link; 
      imageBoton[i] = this.firstChild.childNodes[i].attributes.image; 
   } 
   creaBtns(this.firstChild.childNodes.length); 
}; 
function creaBtns() { 
   var filas = 10;  
   var columnas = 2;
   var xOffset = 290 //290 cada thumb, 5 de separación  
   var yOffset = 120 //120 de alto, 5 de separación  
   var depth = 1;  
         for (var f = 0; f<filas; f++) {   
         for (var c = 0; c<columnas; c++) {  
         target = this.attachMovie("boton", "boton"+depth, depth++, {_x: c*xOffset, _y: f*yOffset});   
         target.image_mc.loadMovie(imageBoton[i]); 
            target.link = linkBoton[i]; 
            target.mytexto.text = textoBoton[i]; 
           target.precio.text = PrecioBoton[i]; 
            target.onRelease = function() { 
            getURL("javascript:muestraImagen('imageBoton[i]', 'Descripción Foto #1');");
            }; 
            }
      } 
   } 

...y bueno he avanzado mas...ahora si me crea las filas y columnas, te faltaba un "_" en la linea de target = this.attachMovie("boton", "boton"+depth, depth++, {_x: c*xOffset, _y: f*yOffset}); en la Y..y asta ahi perfec!! pero sigo teniendo un problema...no me carga ni la imagen ni los textos en cada boton...en el campo img no aparece nada y en los campos de textos me pone sin definir(undefined)..xk pasa esto si e cambiado todos los _root["boton"+i] por el target como me dijiste?? q raro..

una ultima cosa....cuando me crea las filas y columnas...si yo pongo 10 filas y 2 columnas...me crea todas...lo q yo kiero es q me cree tantos "botones" como yo le ponga nl XML...y se vayan apilando en filas y columnas, es decir, q si yo solo tengo info de 4 objetos..me cree solo esos 4 "botones"..nose si me explico

Bien, por pasos. Lo del x y el y es porque ando con AS3 y se me olvida de a poco lo de AS2
Luego mira la referencia que pasas:

target.image_mc.loadMovie(imageBoton[i]);

El i es un contador de un loop que ya no usas, por lo que es necesario cambiar la referencia. Podemos usar epth, pero sin incrementarlo de la forma en que lo estamos haciendo

Código ActionScript :

 target = this.attachMovie("boton", "boton"+depth, depth, {_x: c*xOffset, _y: f*yOffset});    
 target.image_mc.loadMovie(imageBoton[depth-1]);
  target.link = linkBoton[depth-1];  
  (...)
   depth++;
   target.onRelease = function() {  
   ...

Ahora si tienes un contador que te puede servir

Jorge

muxas gracias tio, eres una makina me funciona perfec!! solo ai un pekeño detalle, es lo q te abia comentado antes...q me crea tantos campos como yo le diga en filas y columnas, si pongo 2 filas y 2 columnas..me 4 campos...y unicamente kiero q me cree tantos campos como haya en el XML.....xk claro, solo rellena con info el nº de ellos qai nl XML..el resto me salen sin img y con texto sin definir, como es logico...xo eso keda fatal!! e estado aciendo pruebas xo me salen unas cosas rarisimas q se parecen lo q un huevo a una castaña con lo k kiero conseguir jaja

La info de cuantas filas y columnas la tienes que tener en el XML, o contar primero cuantos nodos hay y de ahi calcular cuantas filas y columnas ... si no rellenas la grilla, tienes que usar un break para salir del loop (el contador depth indica la cantidad)

Jorge

en el xml no tengo la info de cuantas filas y columnas ai.....y del resto q me as dixo lo he entendido pero no sabria como acerlo, sorry pero no tengo tanto nivel de as....la programacion basica si la conozco, pero ya contar los nodos y usar el break para q qite los campos q no tienen info...pfff imposible!!

si pudieses aunk fuera orientarme un poko y ya ir indagando yo x mi cuenta..xo asi de 0 no sabria como cogerlo!! muchas gracias tio!

Tienes la cantidad, de hecho en tu primer script es cuantosBotones
Luego si sabes cuantos botones tienes, puedes dividirlo en filas y columnas para hacer la grilla
Es decir ya tienes una variable, necesitas las otras dos

Jorge

muxas asias x el consejo....he tratado de seguirlo, digo tratado xk como no se mucho de as no me sale, bueno me sigue saliendo lo mismo de antes, me crea tantas filas y columnas como yo le dixo aunk sean vacias xk no tienen info del XML. este es el codigo

Código ActionScript :

var myMenu:XML = new XML();  
myMenu.ignoreWhite = true;  
System.useCodepage = true;  
myMenu.load("enlaces.xml");  
linkBoton = new Array();  
textoBoton = new Array();  
PrecioBoton = new Array();  
imageBoton = new Array();  
myMenu.onLoad = function() {  
   for (var i = 0; i<this.firstChild.childNodes.length; i++) {  
      textoBoton[i] = this.firstChild.childNodes[i].attributes.name;  
      PrecioBoton[i] = this.firstChild.childNodes[i].attributes.precio;  
      linkBoton[i] = this.firstChild.childNodes[i].attributes.link;  
      imageBoton[i] = this.firstChild.childNodes[i].attributes.image;  
   }  
   creaBtns(this.firstChild.childNodes.length);  
};  
function creaBtns(cuantosBotones) {  
   var filas = 2;   
   var columnas = 2; 
   var xOffset = 290 //290 cada thumb, 5 de separación   
   var yOffset = 125 //120 de alto, 5 de separación   
   var depth = 0;
   for (var i = 0; i<cuantosBotones; i++) {
         for (var f = 0; f<filas; f++) {    
         for (var c = 0; c<columnas; c++) {
       cuantosBotones = cuantosBotones/filas;
       cuantosBotones = cuantosBotones/columnas;
         target = this.attachMovie("boton", "boton"+depth, depth++, {_x: c*xOffset, _y: f*yOffset});    
       target.image_mc.loadMovie(imageBoton[depth-1]);  
         target.link = linkBoton[depth-1];  
         target.mytexto.text = textoBoton[depth-1];  
         target.precio.text = PrecioBoton[depth-1]; 
         target.onRelease = function() {  
            getURL("javascript:muestraImagen('imageBoton[depth-1]', 'Descripción Foto #1');"); 
            };  
         }
       }
      }  
   } 

No lo estás calculando, solo hardcodeaste las filas y columnas

Olvídate del código y enfoca en este problema:

- Tengo 10 manzanas y quiero destribuirlas en una grilla que tenga igual cantidad de filas que de columnas ... ¿es posible , cuantas filas y columnas me quedan?
- ¿Y si quisiera 3 columnas, puedo distribuirlas?
- Si fueran 9 podría distribuirlas en 3 columnas y que no sobren

Si resuelves las manzanas y aplicas el principio a tu código seguro lo resuelves. Recuerda que tu cantidad de manzanas está determinada por la variable cuantosBotones. Recuerda que si la cantidad no esntra exacto faltarán o sobrarán, lo cual es bastante probable, y tendrás que determinar que hacer con el sobrante/faltante

Jorge

Jorge

madre mia me estoy volviendo loco jajaja porque se razonar y acer el argumento logico para sacarlo...pero no consigo aplicar el codigo as adecuado para que funcione....e tratado de acerlo de otra manera, seria añadiendo el codigo que e puesto en negrita:

Código ActionScript :

var myMenu:XML = new XML();
myMenu.ignoreWhite = true;
System.useCodepage = true;
myMenu.load("enlaces.xml");
linkBoton = new Array();
textoBoton = new Array();
PrecioBoton = new Array();
imageBoton = new Array();
myMenu.onLoad = function() {
   for (var i = 0; i<this.firstChild.childNodes.length; i++) {
      textoBoton[i] = this.firstChild.childNodes[i].attributes.name;
     PrecioBoton[i] = this.firstChild.childNodes[i].attributes.precio;
      linkBoton[i] = this.firstChild.childNodes[i].attributes.link;
     imageBoton[i] = this.firstChild.childNodes[i].attributes.image;
   }
   creaBtns(this.firstChild.childNodes.length);
};
function creaBtns(cuantosBotones) {
   y = 10;//posY en stage
   x = 10;//posX en stage
   [b]ancho = 295;
   alto = 130;
   num_columnas = 2;[/b]

   for (var i = 0; i<cuantosBotones; i++) {
      target = this.attachMovie("boton", "boton"+i, this.getNextHighestDepth());
      target.image_mc.loadMovie(imageBoton[i]);
     target.link = linkBoton[i];
      target.mytexto.text = textoBoton[i];
     target.precio.text = PrecioBoton[i];
      target._x = x;
      target._y = y;
     [b]x += ancho;
     columna += 1;
     if (columna == num_columnas) {
         columna = 0;
         x -= (ancho*num_columnas);
         y += alto;
      }[/b]
      target.onRelease = function() {
         getURL("javascript:muestraImagen('imageBoton[i]', 'Descripción Foto #1');");
      };
   }
}

e añadido la variable num_columnas....y en la parte de abajo e puesto un codigo q le diga a la x q se aumente cada vez el ancho del "boton"...es decir q se van añadiendo columnas en la misma fila..asta q llegue al num de columnas q yo le indicado..y cuando llegue q añada otra columna nueva en la fila de abajo.....esto ultimo esta exo con el IF....exale un ojo xk ami me da la impresion de q esta bien...xo me coloca los botones en horizontal en la misma fila y no me cambia a otra fila cuando yo le dixo, en mi caso era 2 la variable num_columnas

no me ha salido en negrita el cod nuevo...me an salido los corxetes [b]
esto es la parte nueva, xa q lo puedas identificar con facilidad y no aya lios:
ancho = 295;
alto = 130;
num_columnas = 2;

y más abajo esto:
x += ancho;
columna += 1;
if (columna == num_columnas) {
columna = 0;
x -= (ancho*num_columnas);
y += alto;
}

Ok, hago un ejemplo partiendo de que cuantosBotones es la cantidad de imágenes, cuando llego al total me salgo del loop, uso el objeto de inicialización para pasarle variables y achicar el code

Código ActionScript :

totColumnas = 5;
totFilas = 5;
ancho = 295; 
alto = 130
count = 0;
for (var filas = 0; filas<totFilas; filas++) { 
  for (var columnas = 0; columnas<totColumnas; columnas++) { 
      target = this.attachMovie("boton", "boton"+i, this.getNextHighestDepth(), {_x:columnas*ancho, _y:filas *alto, link:linkBoton[count], imagen:imageBoton[count]'}); 
        target.image_mc.loadMovie(imageBoton[count]);        
       target.mytexto.text = textoBoton[count]; 
       target.precio.text = PrecioBoton[count]; 
       target.onRelease = function() { 
         getURL("javascript:muestraImagen("+this.imagen+", 'Descripción Foto #1');"); 
        };
        if(++count>=cuantosBotones) return;
  }
}

Hay que ajustarlo, pero va por ahí

Jorge

jorge no he entendido xk as puesto esto, lo q va en negrita:
this.getNextHighestDepth(), {_x:columnas*ancho, _y:filas *alto, link:linkBoton[i], imagen:imageBoton[i]});

he probado a añadir no solo el link y la imagen, sino los 2 campos de texto q tengo puestos dentro del "boton"
algo asi:
target = this.attachMovie("boton", "boton"+i, this.getNextHighestDepth(), {_x:columnas*ancho, _y:filas*alto,imagen:imageBoton[i],texto:textoBoton[i],precio:PrecioBoton[i],link:linkBoton[i]});

y he cambiado el cod final de cada elemento, asi:
target.image_mc.loadMovie(imagen);
target.mytexto.text = texto;
target.precio.text = precio;

lo curioso es q me detecta q ai 3 "botones" en el XML...xo no me lee la info de cada uno de ellos xk me sale sin img y con el texto sin definir en cada campo de txt del "boton"...q es lo q ago mal??

Estudia el ejemplo que te puse, resolverás tu problema cuando lo entiendas

Jorge

esk no llego a entender xk as puesto el texto con letras en negrita:
this.getNextHighestDepth(), {_x:columnas*ancho, _y:filas *alto, link:linkBoton[i], imagen:imageBoton[i]});

xk luego no lo usas para nada en el cod de abajo para llamar x ejemplo a la img de cada boton

El objeto de inicialización además de pasar propiedades del MC (como _x e _y en este caso) puede pasar cualquier variable, en este caso link e imagen, que en tu code lo tienes puesto en dos líneas extras, en este caso menos es mas. De todas formas, tienes que focalizarte en los dos loops uno dentro de otro que se usan para crear filas y columnas y en el return, que interrumpe los loops cuando se han agotado las imagenes disponibles

Jorge

los 2 loops de filas y columnas junto con el return me funcionan bien...vamos q me crea tantos "botones" como nº de datos tengo nl XML..en mi caso 3..y lo tengo puesto a 2 columnas...y me crea 2 filas..la primera con 2 campos y la segunda con 1....vamos q todo perfecto!! el problema es q lea la info de la img y txt de cada "boton" del XML...q no me pone la img y el texto me sale sin definir

y claro no entiendo xk ai q tocar en los loops o nl return para q consiga leer la info del XML, esk toy liadisimo xk toco de un sitio y de otro y siempre me sale lo mismo, nose q ago mal

Lo primero es ver si los datos existen, lo segundo es ver como lo muestra. Lo primero es fácil, debajo del attachMovie agrega

trace(textoBoton[i])
trace(PrecioBoton[i])

¿Salen los datos correctos?

Jorge

me dice q estan sin definir....y he probado a poner trace(imageBoton[i]);.....y nada, tb me dice q esta sin definir!! a pesar de q estaba puesto en la linea del attachMovie al final, vamos lo q me abias puesto tu en el ejemplo

El dato se define en un array y viene desde un XML, aquí:

imageBoton[i] = this.firstChild.childNodes[i].attributes.image;

Ahora traza ese dato a ver si la falla está al nivel del parser

Jorge

todos los datos tienen su array, igual q el q me as puesto de la imagen, mira:

Código ActionScript :

var myMenu:XML = new XML();
myMenu.ignoreWhite = true;
System.useCodepage = true;
myMenu.load("enlaces.xml");
linkBoton = new Array();
textoBoton = new Array();
precioBoton = new Array();
imageBoton = new Array();
myMenu.onLoad = function() {
   for (var i = 0; i<this.firstChild.childNodes.length; i++) {
      textoBoton[i] = this.firstChild.childNodes[i].attributes.name;
     precioBoton[i] = this.firstChild.childNodes[i].attributes.precio;
      linkBoton[i] = this.firstChild.childNodes[i].attributes.link;
     imageBoton[i] = this.firstChild.childNodes[i].attributes.image;
   }
   creaBtns(this.firstChild.childNodes.length);
};
function creaBtns(cuantosBotones) {
totColumnas = 2; 
totFilas = 5; 
ancho = 295;  
alto = 130; 
count = 0; 
for (var filas = 0; filas<totFilas; filas++) {  
  for (var columnas = 0; columnas<totColumnas; columnas++) {  
      target = this.attachMovie("boton", "boton"+i, this.getNextHighestDepth(), {_x:columnas*ancho, _y:filas*alto, image:imageBoton[i]});  
      trace(imageBoton[i]);
     trace(textoBoton[i]);
     trace(precioBoton[i]);
     target.image_mc.loadMovie(imageBoton[i]);         
      target.mytexto.text = textoBoton[i];  
      target.precio.text = precioBoton[i];  
      target.onRelease = function() {  
         //getURL("javascript:muestraImagen("+this.image+", 'Descripción Foto #1');");  
        }; 
        if(++count>=cuantosBotones) return; 
  } 
}
}

vamos q esta bien llamado con el array...xo luego no me lo encuentra esk no lo entiendo...

Traza a ver si existe el dato:

imageBoton[i] = this.firstChild.childNodes[i].attributes.image;
trace(imageBoton[i])

Jorge

colocando el trace en la parte de "myMenu.onLoad = function() {....." si me detecta las 3 imagenes...xo si lo coloco en la funcion cuantosBotones es cuando no los detecta, ntonces q ago?? xk no puedo trasladar la funcion entera a la parte de "myMenu.onLoad = function() {......" vamos donde e metido los trace xa ver si me los encontraba

Ok, ya veo, fue un error mío en el último script, usé i en vez de count, lo edité, mira el último código que posyie que ya lo he modificado

Jorge

ahora si funciona...weno las imagenes no, solo me carga la ultima img en el primer boton....usando el [count] tb en la img...vamos como el script q me abias corregido.....pero trasteando con el codigo q me pusistes la otra vez de depth-1 y este ultimo con el if{++count..... lo he conseguido sacar y si me carga todo perfectamente. muxas gracias tio!! en serio!! xk como as visto soy bastante patoso pa esto de los codigos y me cuesta bastante..y al final lo e sacado!

x cierto enorawena al foro, es el primer sitio donde miro cuando necesito ayuda de flash!! y pa ser la primera vez q posteo no me puedo kejar de la atencion recibida!!

un saludo!!

rocha