This is an edited version of the thumbnail class that I used in the CreativeARM Showcase. It’s a pretty basic thumbnail with a rollover state and options to set the height, width, background color, text on/off, and text color. Click event is controlled in the .fla. Grid layout credit goes here. The zip download also shows how to transition all the thumbs in one after another using the Tweener classes.

You can populate the thumbnail any way you want. I used XML for the CreativeARM showcase, but here’s how to use in an .fla with data coming from a multidimensional array:

[code lang="actionscript"]
//custom imports
import com.marianomike.thumbnail;
import caurina.transitions.

var images:Array = new Array();
images[0] = {img:"http://marianomike.com/source/thumbnail/images/image1.jpg", title:"Image 1"};
images[1] = {img:"http://marianomike.com/source/thumbnail/images/image2.jpg", title:"Image 2"};
images[2] = {img:"http://marianomike.com/source/thumbnail/images/image3.jpg", title:"Image 3"};
images[3] = {img:"http://marianomike.com/source/thumbnail/images/image4.jpg", title:"Image 4"};
images[4] = {img:"http://marianomike.com/source/thumbnail/images/image5.jpg", title:"Image 5"};
images[5] = {img:"http://marianomike.com/source/thumbnail/images/image6.jpg", title:"Image 6"};
images[6] = {img:"http://marianomike.com/source/thumbnail/images/image7.jpg", title:"Image 7"};
images[7] = {img:"http://marianomike.com/source/thumbnail/images/image8.jpg", title:"Image 8"};

var columns:Number = 4;
var columnSpace:Number = 10;
var rowSpace:Number = 10;
var container:MovieClip;

function drawItems():void{
	var totalImages:Number = images.length;
	var x_counter:Number = 0;
	var y_counter:Number = 0;

	container = new MovieClip();//movieclip to hold thumbnails

	for (var i:Number = 0; i < totalImages; i++) {

		//thumbnail(thumbText:String, id:uint, image:String, thumb_height:Number, thumb_width:Number, bgColor:uint, txtColor:uint, showText:Boolean)
		var thumb_mc:thumbnail = new thumbnail(images[i].title, i, images[i].img, 100, 100, 0x000000, 0xFFFFFF, true);

		//lay out thumbs based on column number
		thumb_mc.x = (thumb_mc.width+columnSpace)*x_counter;
		thumb_mc.y = (thumb_mc.height+rowSpace)*y_counter;

		if (x_counter+1 < columns) {
			x_counter++;
		} else {
			x_counter = 0;
			y_counter++;
		}

		//add click event
		thumb_mc.addEventListener(MouseEvent.CLICK, onClick)
		container.addChild(thumb_mc);
	}
	addChild(container);
}

//thumbnail mouse events
function onClick(e:MouseEvent):void {
	var my_thumb = e.target;
	trace(my_thumb.name);
}

drawItems();
[/code]

Download Source