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!

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: