Flash Photo Grid
In this post we are going to create a grid of images that is resizable using two text boxes. This task came from the Deconstruct red-issue.com post.
We are going to build a Flash file that will take the list of images and put the in a grid using the gridWidth and gridHeight as well as the text from the width_tb and height_tb text Fields.
To make reusing this file easier we are first going to define a variable to determine the directory the images are stored in. If you want to use the same images as this example you can download them here. Lets assume the images are in an images directory in the same folder as our SWF file.
var imageDir:String = new String( "images /" );
Once this file was being used in a web site, like red-issue.com, it would like get it’s list of images from an XML file. For now lets just store them in an Array.
var gridArray:Array=new Array(
({image:"img_0001.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0002.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0003.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0004.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0005.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0006.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0007.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0008.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0009.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0010.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0011.jpg",imageWidth:800,imageHeight:532}),
({image:"img_0012.jpg",imageWidth:800,imageHeight:532}));
Next we need a vaiable to determine the width and height of the photo grid.
var gridWidth:Number=new Number(4);
var gridHeight:Number=new Number(3);
Each photo im our grid is going to need a Movie Clip, a Mask and a Loader. Lets assume the number of photos we are putting in our grid is unknown. This means we will need to store these items in three sepereate Arrays.
var movieArray:Array = new Array();
var maskArray:Array = new Array();
var loaderArray:Array = new Array();
In this example we are determining the width of each photo using two Text Fields. When we go back to the Deconstruct red-issue.com post we will be using the Stage width and height. This next excerpt of code will only be used for this example.
width_tb.tabIndex = 1;
height_tb.tabIndex = 2;
submit_btn.tabIndex = 3;
width_lb.text = "Width:";
width_tb.text = "100";
height_lb.text = "Height:";
height_tb.text = "100";
submit_btn.label = "Resize";
When the Stage is resized, or in this example when the submit Button is pressed, we need to re-size our images and masks and then re-position everything in our grid. Lets break this into three seperate steps. All our clickHandler function has to do is trigger these three functions. These three functions will assume that the Movie Clips, Masks and Loaders already exist.
submit_btn.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(evt:Event):void {
for (var i:int = 0; i < gridArray.length; i ++) {
resizeMask(i);
resizeImage(i);
reposition(i);
}
}
The first functionwill reposition the Movie Clips and Masks based on the new image width and height.
function reposition(i:int):void{
maskArray[i].x = i % gridWidth * Number(width_tb.text);
maskArray[i].y = Math.floor( i / gridWidth ) * Number(height_tb.text);
movieArray[i].x = i % gridWidth * Number(width_tb.text);
movieArray[i].y = Math.floor( i / gridWidth ) * Number(height_tb.text);
}
The second function will resize the Masks.
function resizeMask(i:int):void{
maskArray[i].width = Number(width_tb.text);
maskArray[i].height = Number(height_tb.text);
}
And the last function will resize the Movie Clips. This is a little more complicated then resizing the masks as the Movie Clips need to remain proportianate.
function resizeImage(i:int):void {
var widthRatio:Number = Number(width_tb.text)/gridArray[i]["imageWidth"];
var heightRatio:Number = Number(height_tb.text)/gridArray[i]["imageHeight"];
if( widthRatio > heightRatio){
movieArray[i].scaleX = widthRatio;
movieArray[i].scaleY = widthRatio;
}else{
movieArray[i].scaleX = heightRatio;
movieArray[i].scaleY = heightRatio;
}
}
Now that all of our functions are set to go we just need to crreate our Masks, Loaders and Movie Clips. The first seven lines of our this for loop create and resize our Masks, the next seven after that create the image Movie Clips and load our images in and finally the two lines set the Masks and execite the reposition function.
for (var i:int = 0; i < gridArray.length; i ++) {
maskArray[i] = new MovieClip();
maskArray[i].graphics.lineStyle(0,0x000088);
maskArray[i].graphics.beginFill(0x000088);
maskArray[i].graphics.drawRect(0,0,1,1);
maskArray[i].graphics.endFill();
resizeMask(i);
grid_mc.addChild(maskArray[i]);
movieArray[i] = new MovieClip();
var request:URLRequest=new URLRequest(imageDir + gridArray[i]["image"]);
loaderArray[i] = new Loader();
loaderArray[i].load(request);
resizeImage(i);
movieArray[i].addChild(loaderArray[i]);
grid_mc.addChild(movieArray[i]);
movieArray[i].mask=maskArray[i];
reposition(i);
}