# Creating random flash image grid

**URL:** https://forum.kirupa.com/t/creating-random-flash-image-grid/233907
**Category:** Uncategorized
**Created:** [July 27, 2007, 10:07pm UTC](https://forum.kirupa.com/t/creating-random-flash-image-grid/233907 "2007-07-27T22:07:29Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![mykillrcr8ions](https://avatars.discourse-cdn.com/v4/letter/m/e19adc/32.png) [@mykillrcr8ions](https://forum.kirupa.com/u/mykillrcr8ions)
#### Post date: [July 27, 2007, 10:07pm UTC](https://forum.kirupa.com/t/creating-random-flash-image-grid/233907/1 "2007-07-27T22:07:29Z")

</div>

I’m trying to create a 3x3 grid that would grab random JPGs each image would then have to link to a particular page.

img1 img2 img3  
img4 img5 img6  
img7 img8 img9

These images are not necessarily nicely squared to fit 9 to a page (like above) but may take up two rows at different times.

img1 img2 img3  
img4 img5  
img6 img7

Does anyone know where I can find a tutorial? EVerything i’m finding is to load single random images and searching “flash xml grid” gives me examples of excel type flash grids.

Thanks.

---

<div class="post-metadata">

### Author: ![joanacarda](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@joanacarda](https://forum.kirupa.com/u/joanacarda)
#### Post date: [May 27, 2008, 12:42pm UTC](https://forum.kirupa.com/t/creating-random-flash-image-grid/233907/2 "2008-05-27T12:42:22Z")

</div>

Hi,  
i’ve read this thread and it’s about what i’m looking for. I’ve tried to follow **alperarslan** precious hints, but i think i do something wrong.

What i want to achieve is a random but ordered grid. like in the picture attached:  
i’ve tried with a code like this:

//keep these images in the same folder with the Fla file  
var numOfThumbs:Array = new Array(“t1.jpg”, “t2.jpg”, “t3.jpg”, “t4.jpg”, “t5.jpg”, “t6.jpg”,“t7.jpg”, “t8.jpg”, “t9.jpg”, “t10.jpg”);  
//var numOfImages:Array = new Array(“1.jpg”, “2.jpg”, “3.jpg”, “4.jpg”, “5.jpg”, “6.j pg”);  
var photos:Array = new Array();  
photos = numOfThumbs;  
trace(photos);  
photos = shuffle(photos);  
trace(photos);  
//Outside of onLoad Function  
function shuffle(arr) {  
var tmpArr = [];  
while (arr.length) {  
var rand = Math.floor(Math.random()\*arr.length);  
tmpArr.push(arr.splice(rand, 1)[0]);  
}  
return tmpArr;  
}  
var gridSpace = 1;  
var box = 90;  
var a = 0;  
var b = 0;

/////////////////////////////////////////////////////////////////////////////////////////////////////  
//function to generate a random number  
function randRange(min:Number, max:Number):Number {  
var randomNum:Number = Math.floor(Math.random()\*(max-min+1))+min;  
return randomNum;  
}

var buildGrid\_SI:Number;  
var i:Number = 0;  
\_local1=\_root;

function buildGrid():Void {  
if (i\<photos.length) {

```
	trace(i);
	_local1.loader.attachMovie("thumbnail", "thumbnail"+i, i);
	mc=_local1.loader["thumbnail"+i];
	size=randRange(1, 2);
	
	mc._width=box*size;
	mc._height=box*size;
	
	
	mc._x = (mc._width+gridSpace)*a;;
	mc._y = (mc._height+gridSpace)*b;

	mc.tLoader.loadMovie(photos*);
	
	myTween = new Tween(_local1.loader["thumbnail"+i], "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, 25, false);
	if (a&gt;=2) {
		a = 0;
		b++;
	} else {
		a++;
	}
	i++;
} else {
	clearInterval(buildGrid_SI);
}

```

}

buildGrid\_SI = setInterval(buildGrid, 150);  
//////////////////////////////////////////////////////////////////////////////

The code is a mix between alperarslan code and mine. I’ve added a setinterval control to obtain a nice composing effect. But the grid doesn’t compose as i want.  
it doesn’t work as it should. Can you help me?  
thank you.  
Joanacarda.

---

<div class="post-metadata">

### Author: ![joanacarda](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@joanacarda](https://forum.kirupa.com/u/joanacarda)
#### Post date: [May 27, 2008, 3:01pm UTC](https://forum.kirupa.com/t/creating-random-flash-image-grid/233907/3 "2008-05-27T15:01:45Z")

</div>

no one can help me?

---

<div class="post-metadata">

### Author: ![neilmmm](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@neilmmm](https://forum.kirupa.com/u/neilmmm)
#### Post date: [May 27, 2008, 8:53pm UTC](https://forum.kirupa.com/t/creating-random-flash-image-grid/233907/4 "2008-05-27T20:53:18Z")

</div>

this is my approach - hope it helps

```auto
var pic_array:Array = new Array("mc1", "mc2", "mc3", "mc4", "mc5", "mc6", "mc7", "mc8", "mc9");
var counter:Number = 0;
function shuffle(arr) {
 var tmpArr = [];
 while (arr.length) {
  var rand = Math.floor(Math.random()*arr.length);
  tmpArr.push(arr.splice(rand, 1)[0]);
 }
 return tmpArr;
}
pic_array = shuffle(pic_array);
trace(pic_array);
for (i=0; i<3; i++) {
 for (j=0; j<3; j++) {
  var pic:MovieClip = this.attachMovie(pic_array[counter], pic_array[counter]+counter, this.getNextHighestDepth());
  pic._x = pic._width*i;
  pic._y = pic._height*j;
  counter++;
 }
}

```

change the below

```auto
var pic_array:Array = new Array("mc1", "mc2", "mc3", "mc4", "mc5", "mc6", "mc7", "mc8", "mc9");

```

to the linkage name of your pictures see attached fla

---

<div class="post-metadata">

### Author: ![joanacarda](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@joanacarda](https://forum.kirupa.com/u/joanacarda)
#### Post date: [May 28, 2008, 10:21am UTC](https://forum.kirupa.com/t/creating-random-flash-image-grid/233907/5 "2008-05-28T10:21:38Z")

</div>

Hi Neilmmm,  
thank you very much for your answer and for the file.  
Your approach is correct if we want to obtain a regular grid.  
My aim is to obtain a random flash grid composed by items of different size like this:

![](http://www.attique.it/imatemp/grid.jpg)

You have cretaed a “double” for loop. This is interesting, because to create a grid as the picture I think it’s necessary to store informations in a multidimensional array.  
The array would contain the info of rows and columns according to the size of the items.

I’m not so skilled in as to create a script like this.

thanks again.