A simple image grid in AS 3.0

As I’m starting to code up my new AS 3 portfolio website, I have started posting articles on simple things I used to do in AS 2.0. Here’s an example of a simple image grid. One thing you will need to produce on your own is a 75X75 pixel image named image0.jpg.
Open up your favorite text editor and just type away :

package {

import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;

public class ImageGrid extends Sprite{

private var imgLoader:Loader;
private var imgArray:Array;
private var renderedAssets:Array;
private var currentIndex:uint;
private var stageWidth:uint;

public function ImageGrid():void
{
imgArray = ['image0.jpg','image0.jpg','image0.jpg','image0.jpg','image0.jpg','image0.jpg','image0.jpg','image0.jpg','image0.jpg','image0.jpg'];
renderedAssets = [];
stageWidth = stage.stageWidth;
loadImage(0);
}
private function loadImage(index:int) {

currentIndex = index;
var currentAsset:String = “src/”+ imgArray[currentIndex];
imgLoader = new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.INIT,initImage);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoaded);
imgLoader.load(new URLRequest(currentAsset));

}

private function initImage(evt:Event):void
{
addChild(imgLoader.content);
imgLoader.content.alpha = 0;
}

private function imageLoaded(evt:Event):void {
renderedAssets.push(imgLoader.content);
if(currentIndex < imgArray.length-1){
currentIndex++;
loadImage(currentIndex);
}else{
updateGridLayout();
}
}

private function updateGridLayout ():void
{

var len:uint = renderedAssets.length;
var buffer:Number = 10;
var xVal:Number = 0;
var yVal:Number = 0;
var imgWidth:Number = 75;
var imgHeight:Number = 75
var xoffSet:Number = 10;

var column:uint = Math.floor((stageWidth – (buffer + imgWidth)) / imgWidth);

for (var i:uint = 0; i < len; i++) {
if (i % column) {
xVal += (imgWidth + buffer);
} else {
xVal = 0;
yVal = (i / column) * (imgHeight + buffer);
}
renderedAssets[i].y = yVal
renderedAssets[i].x = xVal;
renderedAssets[i].alpha = 1;

}

}
}

}
Save as ImageGrid .as.
Open the Flash Ide .
Open up the Properties Panel and under the Document class dialog enter ImageGrid.
COMPILE! Select-Control Test Movie.

Now this class could be broken down into 3 classes. Main – Document class. Sequential loader class, which handles all the loading of the assets. ThumbBrowser class which would handle the layout of the images.
Enjoy!