As a web developer or programmer, you want to make your software as dynamic as possible. This means that you can easily change the code or contents, without digging in and rebuilding your original source.

(Flash) Image rotators are a pretty effective and attractive way to show your images. Most of the times, these Flash image rotators are not dynamic and need to rebuild every time you want to change the images. Here's a solution for this problem, because I'll explain how to create a Flash image viewer by reading directory contents.

Just place all images you want to rotate in the same directory as the Flash file and this script does all the work for you. If you want to add an image, just place it online and the Flash viewer will show it.

Check out the demo of the Flash image viewer, or download the flash image viewer by reading directory contents from the download section.

Preperations

First things first. You'll need to have the following to bring this project to a success:

• A PHP editor like Dreamweaver
• A couple of images having the same dimensions (Mine are 400 x 100 and downloaded from socwall)
• A server supporting PHP
• Flash Professional for the viewer
• A little bit knowledge about XML, PHP, ActionScript and Flash is enough

Everything checked? Proceed to the next step.

Create the XML file with PHP

Now we'll need to get the directory contents using PHP. By manipulating the header type of the PHP file, you can let any other program "think" this file is a XML file. You'll need to do this in order to let Flash read the (fake) XML file.

Comments are added in the source to explain what the code does.

<?php
// Set which extensions should be approved in the XML file
$extensions = array
(
  'jpg', 'JPG',
  'png', 'PNG',
  'gif', 'GIF',
  'bmp', 'BMP'
);
 
// Echo the header (XML)
header("Content-Type: application/xml;charset=ISO-8859-1");
 
// Prepare the XML file
echo '<?xml version="1.0" encoding="ISO-8859-1"?>' . "\r\n";
echo "<images>\r\n";
 
// Get the files from the current directory
if (file_exists ("./"))
{
  if (is_dir ("./"))
  {
    $dh = opendir ("./") or die (" Directory Open failed !");
    
    // Prepare the images array
    $imgs = array();
    while ($file = readdir ($dh))
    {
      // Only get the files ending with the correct extension
      if ( in_array( substr($file, -3), $extensions ) )
      {
        array_push($imgs, $file);
      }
    }
  Closedir ($dh);
  }
  
  // Sort the array
  sort($imgs);
  
  foreach ($imgs as $img)
  {
    // Return all images in XML format
    echo ('   <image src="' . $img . '" />');
    echo "\r\n";
  }
}
echo "</images>";
?>

Save the file as source.php. Upload it in the directory on your server where you have the images stored. When viewing the PHP file, you should get something looking like this.

<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
   <image src="01.jpg" />
   <image src="02.jpg" />
   <image src="03.jpg" />
   <image src="04.jpg" />
   <image src="05.jpg" />
</images>

If everything is correct, you can go to the next step: Creating the Flash viewer.

Flash Viewer

I'm not going to explain step by step how to create the Flash viewer, you can learn from my source code.. Basically, the Flash file looks like this.

1. background: Just the background of the Flash file
2. imgholder2: Movieclip that holds one image
3. imgholder: Movieclip that holds another image
4. hidingbox: Movieclip that slowly fades out before the first images shows
5. errorbox: Dynamic text that can hold error messages

Just make sure the FPS of the file is set to 24.

Actionscript

Here is the actionscript code I created to rotate the images, slowly showing them after another. Create a new layer on top of all layers and call it "AS". Press "F9" to insert the ActionScript code.

Comments are added (as usual).

 
// settings
var changingspeed = 300;
 
// stop the frame
stop();
 
// errorbox is not visible
errorbox._visible = false;
 
// Prepare the images
var totalnrimg;
var curnrimg = 0;
 
// Prepare the images array
_root.img = new Array();
 
// Load the XML file
var xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = processXMLData;
xmlData.load("source.php");
 
// When XML data is loaded, execute this function
function processXMLData(success)
{
 if (success)
 {
  // Loop through the XML file
  for (i = 0; i < this.childNodes.length; i++)
  {
   xmlNode = this.childNodes[i];
   for (j = 0; j < this.childNodes[i].childNodes.length; j++)
   {
    _root.img[j] = xmlNode.childNodes[j].attributes.src;
   }
  }
  totalnrimg = _root.img.length;
  // Load the first image
  loadMovie(_root.img[curnrimg], imgholder);
  curnrimg++;
  // Load the second image
  loadMovie(_root.img[curnrimg], imgholder2);
 }
 else
 {
  errorbox._visible = true;
  errorbox.text = "XML file could not be found";
 }
}
 
var showingHidebox = 100;
var isShowing = 0;
var showingFirstImg = changingspeed;
var firstIsShowing = true;
_root.onEnterFrame = function()
{
 // Slowly show the image
 hidebox._alpha = showingHidebox;
 if (showingHidebox != 0)
 {
  showingHidebox--;
 }
 
 // Slowly hide the first image
 imgholder._alpha = showingFirstImg;
 if (firstIsShowing == true)
 {
  showingFirstImg--;
  if (showingFirstImg <= (0-changingspeed/2))
  {
   firstIsShowing = false;
   curnrimg++;
   if (totalnrimg == curnrimg)
   {
    curnrimg = 0;
   }
   loadMovie(_root.img[curnrimg], imgholder);
  }
 }
 if (firstIsShowing == false)
 {
  showingFirstImg++;
  if (showingFirstImg >= changingspeed)
  {
   firstIsShowing = true;
   curnrimg++;
   if (totalnrimg == curnrimg)
   {
    curnrimg = 0;
   }
   loadMovie(_root.img[curnrimg], imgholder2);
  }
 }
}

Export your file to swf and upload it to your server. Load the flash file to test your movie and check if it's working. If everything is done correct, the images should show up nicely.

Conclusion & download

You could think about reading the size of the images so it would be totally dynamic. Other than that I think this is a pretty nice way to slowly rotate and show images that are from one directory.

If you don't want to animate the viewer, just could also use the PHP Random Image Rotation.

You can download the flash image viewer by reading directory contents from the download section.

If you're looking for an image viewer for your website, you can also check out 22 beautiful image galleries for your website.

Interested in this topic? You might enjoy another article I've written called

• Zend Framework 2.0: Book Giveaway
• jQuery quickie: Unlimited Scroll using the Twitter API
• WordPress and Flash 10x: Book review and Giveaway
• Zend Framework 1.8: Book review and Giveaway
• jQuery 1.3 and PHP: Book review and Giveaway

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: