This article is going to look at utilizing ASP's FileSystem Object and Flash's new MovieClipLoader to build a dynamic photo gallery. Lots of times a client will say, "I have some images I would like to post on the web, can you create a photo gallery for me?" and after putting the application together, they come back and want to add images to the application. Instead of rebuilding the Flash document each time, a better solution can be achieved by building your list of images each time the photo gallery application is accessed. http://www.bizwerk.net/preload_jpegs/actionscript_com2.html
To start, create a folder called images under your web root. This will be the repository for our images. To update the application later, all you will need to do is place your new images in this folder.
Next we will use ASP to read the contents of this folder and list it's contents onto a web page. The ASP code looks like this:
As Flash uses URL encoded variables in the form of a name-value pairs, I use ASP to loop the the folder's content and append the image names to a variable called myList. Notice that each image name is separated by a comma, this will be used later when we parse out the individual image names inside flash.Make sure you set the path to the folder you set up earlier. The output of the script will look something like this:
images_list=c_jrob2_i.jpg,einstein.jpg,ftr1.jpg,img_girl_sitting.jpg,milscroll.jpg,uncut-ric-flair-1.jpg,
Now the Flash side of things.
Flash MX 2004 has a myriad of ways to load data into your application. I chose to employ loadVars() and the new MovieClipLoader Class for this example.
First we need to load the data from our ASP page to get the image names we will load into out photo gallery. For this I attach the following code to layer one frame one of our Flash movie:
cacheKill = new Date().getTime();
trace(cacheKill);
myVars = new LoadVars();
myVars.load("http://www.bizwerk.net/preload_jpegs/image_list.asp?"+cacheKill);
myVars.onLoad = function(){
trace(myVars.images_list);
image_array = myVars.images_list.split(",");
_root.image_array_length = image_array.length - 1;
trace (image_array.length);
loadPics();
}A few things to point out here. At the top of the code a variable named cacheKill is created using the Date object. This variable is appended to the URL of our ASP page. As it will have a different value each time the user accesses the Flash application, Flash will go out and get the latest information, insuring that the user will always see the most current list of uploaded images. As was shown before, our ASP page returns a list of image names as so:
images_list=c_jrob2_i.jpg,einstein.jpg,ftr1.jpg,img_girl_sitting.jpg,milscroll.jpg,uncut-ric-flair-1.jpg,
For this to be useful to Flash, an array is created by splitting the variable images_list returned via ASP at the comma character as so: image_array = myVars.images_list.split(","); Next I assign a dynamic text variable with the value of our image_array length. This will be used later in a loop that displays out images. Finally a function called loadPics() is called that we will set up now to load the images into Flash via the attachMovie method.
Attaching our images to a movie clip. Setting up the thumbnail images Open the library and create a symbol - for simplicity create a rectangle and leave it at that. Right click on the symbol's name inside the Library window and give it a linkage ID of image.
Next, create a new layer named image loader and attach the following code to it's first frame:
myLoader = new MovieClipLoader();
We will use this object to load our images. The MovieClipLoader also has several callbacks that enable you to execute code at differing times during the loading of an external asset. These callbacks give the developer far greater flexiblity in that different methods can be executed based on the loading process. A complete list of callbacks can be found http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part_ASLR.html:
We will use the onLoadComplete callback a bit later in this example.
Actionscript for out loadPics function.
function loadPics(){
myY = 80;
myX = 40;
for (i=0; i<= _root.image_array_length - 1 ; i++){
this.attachMovie("image","image" + i, i); //attach the movie
this["image"+i]._y = myY;
myLoader.loadClip( "http://www.mysite.com/images/" + image_array[i]+"?cb=11" , this["image" + i]);//load images into clip
if ((i+1) % 2 == 0){
myY +=100;
trace(myY);
this["image"+i]._x = 40;
}else{
this["image"+i]._x = 140;
}
}
}Here is the key line in this code:
myLoader.loadClip( "http://www.mysite.com/images/" + image_array[i]+"?cb=11" , this["image" + i]);//load images into clip
I won't go into attachMovie here but notice that we utilize the loadClip method of our myLoader object to load the items in our image_array into the attached instances of our image clip. As arrays in Flash start with 0, we set the initial value of i to 0 and loop through until we get to the length of our array.
To format the placement of our attached clips the following lines:
if ((i+1) % 2 == 0){
myY +=100;
trace(myY);
this["image"+i]._x = 40;
}else{
this["image"+i]._x = 140;This code checks to see if the value of i is divisible by two using the modulo operator %. If the value of i is an odd number a new line is created for our clips.
Enhancing the Interface
Open the components window and place an instance of the loader component and the progress bar component on the stage. Give the loader component an instance name of cont and the progress bar an instance name of pBar. We will load a larger copy of each picture into the loader component whenever it's thumbnail image is clicked. Set the mode parameter in the properties window to event and the source to cont - the instance name of our loader component.
Lastly we need to assign the actions to our attached movie clips that will load the larger image into our loader component . The MovieClipLoader enables us to assign code to dynamically created clips once the image has fully loaded into our application using the previously mentioned onLoadComplete event to trigger the following code:
myLoader.onLoadComplete = function(targetMC){
targetMC.onPress = function() {
photoName = targetMC._name;
trace("pname="+photoName);
// our dynamic clips are named image1 - image 2 and so on. We need to chop off the
// image prefix from our name utilizing the slice method as shown in the next line of code
photoName = photoName.slice(5);
// photoName now has a value of 1,2,3 etc
cont.autoLoad = false;
cont.contentPath = "http://www.bizwerk.net/preload_jpegs/images/" + image_array[photoName];
// set up the progress bar to monitor assets being loaded into our loader component
pBar.source = loader;
cont.load();
}
}By assigning the onPress actions after the clip is fully loaded, we insure that each attached clip will be given the appropriate actions.
Check out the code comments for additional information regarding this code block.
Test your movie and see your thumbnails load. Click on a thumbnail and watch as the progress bar monitors the download of the larger image into the loader component.
That's it. I hope that this photo gallery example enables you to move forward in your understanding of the power of Flash when teamed with dynamic data sources.