Display all files in a directory

In the sample above, Flash sends a request to the server to run a script that returns a list of all jpgs in a specified directory, and then downloads each of those jpgs and displays it. If viewed with the Flash 8 player or above, a drop shadow is added behind each picture. The buttons at the bottom can be used to scroll back and forth through all the pictures. If more photos are added to the directory on the web server, they will appear also (in alphabetical file name order).

PHP script to return a list of files

Here is a PHP script that can be used to return all jpg files in the directory specified in the file (path specified relative to php script):

readfromdir.php
<? $dir = 'path_to_images_directory_from_this_script'; // open specified directory $dirHandle = opendir($dir); $count = -1; $returnstr = ""; while ($file = readdir($dirHandle)) { // if not a subdirectory and if filename contains the string '.jpg' if(!is_dir($file) && strpos($file, '.jpg')>0) { // update count and string of files to be returned $count++; $returnstr .= '&f'.$count.'='.$file; } } $returnstr .= '&'; echo $returnstr; closedir($dirHandle); ?>

You could pass the directory path from Flash instead, if that will vary, replacing the first line with if (isset($_POST['dir'])) $dir = $_POST['dir']; else if (isset($_GET['dir'])) $dir = $_GET['dir']; but be aware that anyone could run this script from a browser to see what files are in any directory on your server (which is why the script is set to at least check and see if ".jpg" is included in the filename before adding it to the list).

What the script above does is create a string that looks like this:

&f0=onepic.jpg&f1=anotherpic.jpg& ... &f6=lastpic.jpg&

which you will set up your LoadVars onLoad routine to handle in Flash. Remember that every "var" in that list is a property of the LoadVars instance (call it lv, eg) and as such can be accessed (the f0 property, eg) as either

lv.f0, or

lv["f"+"0"], or

lv["f"+0] (because Flash converts the number 0 to a string for concatenation), or

i = 0;
lv["f"+i]

Getting the list of pictures into an array in Flash

The following code creates an instance of LoadVars to handle communications between Flash and the PHP script, and includes a function assigned to the LoadVars' onLoad event property to handle the returned string. Because we didn't use the Delegate class to make the assignment, the scope of that function is the LoadVars instance itself, not the main timeline. In the load command, the path to the php script (the one above, eg), should be one from the page embedding the swf to the directory holding the php script. This code will read the file list and push each filename into the pics array, available to the whole Flash movie as a variable of the main timeline. It displays a message in the Output panel about how many files were read and pushed onto the array:

var lv:LoadVars = new LoadVars();
var pics:Array = [];

function fillPicsArray(ok:Boolean) {
   if (ok) {
   var i=0;
      do {
         pics.push(this["f"+i]);
      } while (this["f"+(++i)] != undefined);
      trace('the directory has ' + pics.length + ' pictures');
   } else {
      trace("problem with the script");
   }
}

function init() {
   lv.onLoad = fillPicsArray;
   lv.load("path_to_scripts_from_page/readfromdir.php");
}

init();

Notice the use of the do/while loop, where the while condition both increments i to the next value (with ++i, which means increment i first and then use its new value in the expression) and then checks to see whether there is an entry in the list for that i value. If not, the loop stops; otherwise, the loop executes again and the next entry is pushed onto the array.

Displaying the files in Flash

If there are a variable number of files in the directory, your movie has to be set up to handle whatever number there may be. The sample above is a very simple example of one way to do that: a blank holder movieclip is created and for each picture, a new blank movieclip is created dynamically within holder to hold the picture. The size and spacing is set up so that the first three pictures will display when the movie is run and the back and forward arrow buttons (movieclips) can be used to tween holder to the right or left so the others can be seen. This is the code for that:

import mx.transitions.Tween;
import mx.transitions.easing.*;
import mx.utils.Delegate;          // used to keep button function scope = main timeline

var lv:LoadVars = new LoadVars();
var pics:Array = [];
var mcl:MovieClipLoader;
var ipic:Number;                   // index into pics, used during loading
var ifarleft:Number;               // index of picture currently displayed at far left

function fillPicsArray(ok) {
   if (ok) {
      var i=0;
      do {
         pics.push(this["f"+i]);
      } while (this["f"+(++i)] != undefined);
      loadPic();                   // when all read, start first pic loading
   } else {
      trace("problem with the script");
   }
}

function onLoadInit(pic:MovieClip) {
   pic._width = 150;
   pic._height = 100;
   pic._x = 8 + 166*ipic;
   pic._y = 10;
   pic._alpha = 100;
   if (++ipic < pics.length) loadPic();
}
		
function loadPic() {
   holder.createEmptyMovieClip("p"+ipic, ipic);
   holder["p"+ipic]._alpha = 0;
   mcl.loadClip("path_to_pics_directory" + pics[ipic], holder["p"+ipic]);
}
	
function tweenToLeft() {
   // only do if there are more pics on the right to show
   if (ifarleft+3 < pics.length) {
      new Tween(holder, "_x", Strong.easeOut, holder._x, holder._x - 166, 1, true);
      ifarleft++;
   }
}

function tweenToRight() {
   // only do if there are more pics on the left to show
   if (ifarleft > 0) {
      new Tween(holder, "_x", Strong.easeOut, holder._x, holder._x + 166, 1, true);
      ifarleft--;
   }
}

function init() {
   lv.onLoad = fillPicsArray;
   lv.load("path_to_script/readfromdir.php");
   mcl = new MovieClipLoader();
   mcl.addListener(this);
   ipic = 0;
   ifarleft = 0;
	
   this.createEmptyMovieClip("holder", 1);		// holds all loaded pics
	
   right.onRelease = Delegate.create(this, tweenToLeft);
   left.onRelease = Delegate.create(this, tweenToRight);
}

init();

As a final step (which I'm not sure really adds to the presentation, but it does show how to apply one of the Flash 8 filters with code anyway), I put a drop shadow behind each picture with this additional code:

var picShadow:DropShadowFilter;

function onLoadInit(pic:MovieClip) {
   ...
   pic._alpha = 100;   
   pic.filters = [picShadow];
   ...
}

function init() {
   ...	
   picShadow = new DropShadowFilter();
   picShadow.blurY = 3;
   picShadow.blurX = 3;
   picShadow.inner = false;
   picShadow.angle = 45;
   picShadow.distance = 5;
   picShadow.color = 0;
   picShadow.alpha = 20;
   ...
}

A zip of all files (fla, as, swf, pics, php) that work for a setup in which the swf and its embedding html page are in one directory, pictures in a directory below that, and php scripts in another directory below the main one may be obtained by subscription from the link at right above.