Creating random flash image grid

1

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.

2

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.

3

no one can help me?

4

this is my approach - hope it helps

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

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

5

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:

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.