In the ActionScript layer, place this code:

import flash.external.ExternalInterface;
import flash.filters.DropShadowFilter;

//a filter to give the thumbnails a little depth
var myDrop:DropShadowFilter = new
DropShadowFilter(4,45,0x000000,100,4,4,1,3);

//the directory to get images from
var dir:String = "imgs";
//main path to files
var mPath:String = "http://www.yourServer.com/";

//the function called when a thumbnail is selected
function sendFile(fl){
ExternalInterface.call
("opener.document.getElementById(ŒimageLoader').innerHTML=",
"<img src='"+dir+"/"+fl+"' border='0' />");
}

//the LoadVars object for collecting the image names from fileList.php
var imgs_lv:LoadVars = new LoadVars();
imgs_lv.onLoad = function(success){
if(success){
//the initial setting for columns and rows
var c = r = 0;
var imgs_array = this.files.split("~");
var tLength = imgs_array.length - 1;
var i = -1;
while(++i < tLength){
var img:MovieClip = createEmptyMovieClip("img"+i+"_mc", i+1);
img.createEmptyMovieClip("target_mc",
1).loadMovie(mPath+"makeThumb.php?sentFile="+dir+"/"+imgs_array[i]+"&sentSiz
e=40&sentZoom=1");
img._x = (c*50)+20;
img._y = (r*50)+55;//the plus 55 is to fit under the title at the top

c++;
if(c == 7){
c = 0;
r++;

}
//when a thumbnail is selected, call the function
img.file = imgs_array[i];
img.onRelease = function(){
sendFile(this.file);
}
//set the dropshadow
img.filters = [myDrop];
}
}else{
ExternalInterface.call("alert", "An error occured with the images.");
}
}
//go get the images
imgs_lv.sentDir = dir;
imgs_lv.sendAndLoad(mPath+"fileList.php", imgs_lv, "POST");

Most of this code is for controlling the alignment of the thumbnails. The first part grabs the two classes we need, including the Flash 8 DropShadow class to add some depth to the thumbnails. After that, we create a variable to hold the directory we are going to pass to the PHP script as well as a variable to hold the main path to the PHP scripts. The next part is the function that will be called when a thumbnail is clicked. Notice that in the call method, we are not only passing the property we want to access (the innerHTML property of the ŒimageLoader' element), but we are also using the keyword opener before we access it. What this keyword does is tell JavaScript we want to access the element in the HTML page that opened this HTML page. This means that not only can we access all the properties of the current HTML page we're in, but other HTML pages as well (provided they are on the same domain when setting allowScriptAccess to "sameDomain").

After that, a LoadVars object is created to handle the communication between the PHP and Flash. Within its onLoad event, a while loop is used to cycle through all the images and create thumbnails. This is where the makeThumb.php script comes in handy, because we know each image being returned will consistently be the same size. While we are creating the thumbnails, we set the onRelease event for them so when they are clicked, the sendFile function will be called updating the image in the other HTML page. Finally, we set the sentDir property of the LoadVars object and fetch all the images in that directory.

The only thing left to do is to publish and test it. So after you load the SWF, HTML and PHP pages (or pages that do the same thing as the PHP ones) to your server, you should be able to load the initial page, click on the image, which will open the Image Injector pop up, and swap out images in real time to see which one fits the best.

What's next? As much as I hate to use a cliché', you are bound only by your imagination. From some of the techniques in this article, you can see that not only do you have total access to JavaScript from Flash, but you can call functions, methods and even set properties of different pages from a single pop up window. Imagine being able to control layout and colors of one window from another, it will save a lot time on trial and error designing.