AS3 Thumbnail Class 1.1

I’ve made a number of updates to my thumbnail class, mainly the following:

  • images no longer need to be a fixed width, they can either scale to fit size or thumb size will mask the full size image
  • getters and setters to indicate clicked state
  • more control over default parameters, like drop shadow and colors

Here is how I use it in a fla with a grid layout and enabling the clicked state, source file link is below the swf example:


//custom imports
import com.marianomike.thumbnail;
import caurina.transitions.*;

//flash imports
import flash.display.Stage;

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

//for grid layout
var columns:Number = 4;
var columnSpace:Number = 10;
var rowSpace:Number = 10;

//variables used in setup
var container:MovieClip;
var slideTimer:Timer;
var fadeImages:Array;

function centerContainer():void{
	Tweener.addTween(container, {x:(stage.stageWidth/2 - (container.width/2)), time:.5,transition:"easeOut"});
	Tweener.addTween(container, {y:(stage.stageHeight/2 - (container.height/2)), time:.5,transition:"easeOut"});
}

function drawItems():void{
	fadeImages = new Array();

	var totalImages:Number = images.length;
	slideTimer = new Timer(150, totalImages);//new Timer(speed, #of times function fires);
	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++) {

		/*function thumbnail(thumbText:String,
						   id:uint,
						   image:String,
						   thumb_height:Number,
						   thumb_width:Number,
						   bgColor:uint,
						   outlineColor:uint,
						   rolloverColor:uint,
						   outlineSize:uint,
						   txtColor:uint,
						   showText:Boolean,
						   showDrop:Boolean,
						   scale:Boolean):void {*/

		var thumb_mc:thumbnail = new thumbnail(images[i].title, i, imagePath+images[i].img, 67, 100, 0x000000, 0x006699, 0xFFFFFF, 3, 0xFFFFFF, true, true, true);

		//give thumb a name
		thumb_mc.name = "thumb"+i;

		//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);
		centerContainer();
		fadeImages.push(thumb_mc);//pushes to array for fading in
	}
	addChild(container);

	//scale thumbs down for initial load animation
	for (var z:uint = 0; z < totalImages; z++) {
		container.getChildByName("thumb"+z).alpha = 0;
		container.getChildByName("thumb"+z).scaleX = 0;
		container.getChildByName("thumb"+z).scaleY = 0;
	}

	//start transition in
	slideTimer.start();
   	slideTimer.addEventListener("timer", fadeNextImageIn);
}

//transition in function
function fadeNextImageIn(e:Event):void{
	e.target.removeEventListener(Event.COMPLETE, fadeNextImageIn);
	Tweener.addTween(fadeImages[e.target.currentCount - 1],{alpha:.9, scaleX:1, scaleY:1, time:.4,transition:"easeOut"});
}

function resetThumbs(id):void{
	for(var i:uint = 0; i < images.length; i++){
		var thmb:Object = new Object()
		thmb = container.getChildByName("thumb"+i);
		if(thmb.clicked == true && i != id){
			thmb.clicked = false;
		}
	}
}

//thumbnail click events
function onClick(e:MouseEvent):void {
	var my_thumb = e.target;
	resetThumbs(my_thumb.num);
	my_thumb.clicked = true;
}

drawItems();

Download Source

5 Comments »