I’ve made a number of updates to my thumbnail class, mainly the following:
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();
hi this is really useful, don’t suppose you would be able to how to link the thumbnails to a corresponding large image?
thanks, thomas
hey thomas, check out this tutorial on republic of code: http://www.republicofcode.com/tutorials/flash/as3gridgallery/index.php
it helped me out a lot. my version is basically just a class of that. in short, you would just add another dimension to your array with the full size image, so your array could look something like this:
images[0] = {img:”image1.jpg”, title:”Image 1″, fullsize:”image1_full.jpg”};
then you’d create a function to show the fullsize image that is called from the thumbnail click event. let me know if you want to see a sample, but definitely check out the republic of code tutorial first.
thanks for the class, works great! Where would I enable bitmap smoothing to make the thumbnails look a bit nicer?
Hey thanks! I actually updated the class awhile back to include smoothing, so the zip should be up to date. The function showLoadResult on Line 216 of the class should have:
private function showLoadResult(evt:Event):void {
removeChild(loadProgress_txt);
var img_bm:Bitmap = new Bitmap();
img_bm = Bitmap(thumb_loader.content);
img_bm.smoothing = true;
Tweener.addTween(thumb_loader, {alpha:1, time:1, transition:”easeOut”});
this.enableRoll();
this.isLoaded = true;
}
ah, the swf in the post wasn’t updated. now it is, check out the zip for more!