Flash Image Slideshow with XML

I finished a Flash image slideshow for a website and this post explains how I created it. First, I created a PHP class with methods for uploading the images to the server. When a file is uploaded by the user, the script creates a filename for the image and stores it in a pre-built directory, and then inserts the filename and file location to a table in the MySQL database. This way I am able to query the database for the filename and file location and then use the data dynamically in the Flash image slideshow. Also, this would give full control to the users of the website and would allow them to change the images for the slideshow without any coding.

Next, I created a dynamic XML file using PHP to get the data for use in Flash. The following code is the PHP code for the dynamic XML file:

<?php
header('Content-Type: text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="iso-8859-1"?>';

/*
"TransTime" = Seconds between each image transition
"SlideOrder" = How images are displayed. Can be either "sequential" or "random"
"FadeTime" = velocity of image crossfade. Larger number for faster fades
"Loop" = Set to "yes" or "no" for looping in sequential mode
"Xpos" = X position of all loaded clips set to 0
"Ypos" = Y position of all loaded clips set to 0
*/

echo '<gallery TransTime="4" SlideOrder="random" FadeTime="3" Loop="yes" Xpos="0" Ypos="0">';

require_once( '../../classes/FamilyPhotos.php' );

$mySlideShow = new FamilyPhotos;

$ssquery = "
   SELECT
   SsPic_ID,
   SsPic_Filename,
   SsPic_Desc
   FROM T_SlideshowPics
   ORDER BY SsPic_ID DESC;";
$ssrs = mysqli_query($mySlideShow->mysqli, $ssquery );
while( $ssrow = mysqli_fetch_assoc($ssrs)) {

echo<image path="' . $ssrow["SsPic_Filename"] . '" />';

}

echo '</gallery>';
?>


Next I created a Flash file that loads the XML from the previous PHP file and parses the XML to get the image data. The Flash file then loads the images and adds transition effects to each image with the following Actionscript code:


function parse(success)
 {
  if (success)
  {
   imageArray = new Array();
   var root = this.firstChild;
   _global.numPause = Number(this.firstChild.attributes.TransTime * 1000);
   _global.SlideOrder = this.firstChild.attributes.SlideOrder;
   _global.Loop = this.firstChild.attributes.Loop;
   _global.FadeTime = Number(this.firstChild.attributes.FadeTime);
   _global.Xpos = Number(this.firstChild.attributes.Xpos);
   _global.Ypos = Number(this.firstChild.attributes.Ypos);
   var imageNode = root.lastChild;
   var s = 0;
   while (imageNode.nodeName != null)
   {
    imageData = new Object();
    imageData.path = imageNode.attributes.path;
    imageArray[s] = imageData;
    imageNode = imageNode.previousSibling;
    ++s;
   }
   container_mc._x = _global.Xpos;
   container_mc._y = _global.Ypos;
   imageArray.reverse();
   imageGen(imageArray);
   return;
  }
 }
function swapPlace(clip, num)
{
  eval(clip).swapDepths(eval("container_mc.loader" + num + "_mc"));
}
function loadImages(data, num)
{
  if (i == undefined || i == 2)
  {
    i = 2;
   createLoader(i, data, num);
   i = 1;
   return;
  }
  if (i == 1)
  {
   createLoader(i, data, num);
   i = 2;
  }
}
function createLoader(i, data, num)
{
  thisLoader = eval("container_mc.loader" + i + "_mc");
  thisLoader._alpha = 0;
  thisLoader.loadMovie(data[num].path);
  watcher_mc.onEnterFrame = function ()
  {
   var picLoaded = thisLoader.getBytesLoaded();
   var picBytes = thisLoader.getBytesTotal();
   if (isNaN(picBytes) || picBytes < 4)
   {
    return undefined;
   }
   if (picLoaded / picBytes >= 1)
   {
    swapPlace("container_mc.loader2_mc", 1);
    thisLoader.alpha(_global.FadeTime, 100);
    TransTimeInterval = setInterval(imageGen, _global.numPause, data);
    delete this.onEnterFrame;
   }
  };
}
function imageGen(data)
{
  if (_global.SlideOrder == "random")
  {
   while (randomNum == randomNumLast)
   {
    randomNum = Math.floor(Math.random() * data.length);
   }
   loadImages(data, randomNum);
   randomNumLast = randomNum;
 }
 else
 {
   if (_global.SlideOrder == "sequential")
   {
    if (p == undefined || p == data.length && _global.Loop == "yes")
    {
     p = 0;
    }
    loadImages(data, p);
    ++p;
   }
  }
  clearInterval(TransTimeInterval);
}
var randomNum = 0;
var randomNumLast = 0;
var container_mc = this.createEmptyMovieClip("container", 0);
container_mc.createEmptyMovieClip("loader1_mc", 2);
container_mc.createEmptyMovieClip("loader2_mc", 1);
this.createEmptyMovieClip("watcher_mc", 100);
image_changer_xml = new XML();
image_changer_xml.ignoreWhite = true;
image_changer_xml.onLoad = parse;
image_changer_xml.load("includes/flash/imagechanger/image_changer_addon.php");
stop();

MovieClip.prototype.alpha = function (vel, to)
{
  this.vel = vel;
  this.to = to;
  this.alpha_init = this._alpha;
  this.onEnterFrame = function ()
  {
  updateAfterEvent();
  if (this.to != undefined && this.vel != undefined)
  {
   if (this.to > this.alpha_init)
   {
    if (this._alpha <= 100)
    {
     this._alpha = this._alpha + this.vel;
    }
    else
    {
     this.onEnterFrame = null;
    }
   }
  else
  {
   if (this._alpha > this.to)
   {
    this._alpha = this._alpha - this.vel;
   }
   else
   {
    this.onEnterFrame = null;
   }
  }
  return;
  }
 };
};


The image slideshow looks great! My next post will be about a flash video player I have been working on to play videos on the site as well as search the database for relevant videos…

1. Pneurnced says:

   November 27, 2009 at 10:42 pm

   Could not find a suitable section so I written here, how to become a moderator for your forum, that need for this?
2. Romana Parody says:

   June 22, 2010 at 1:14 pm

   I feel you are too good to write Genius!Thanks for posting, maybe we can see more on this.
3. Kamala Krostag says:

   June 24, 2010 at 12:47 am

   interesting blog. It would be great if you can provide more details about it. Thanks you
4. website traffic generator says:

   July 28, 2010 at 9:42 am

   Lots of usefull information and inspiration, both of which we all need, thank you for this.
5. Frank Enreiter says:

   August 12, 2010 at 4:13 pm

   Fantastic blog! I really love how it’s easy on my eyes as well as the data are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day!
6. Abrahamsen says:

   August 17, 2010 at 11:53 pm

   I typically don’t reply on blogs but you have some good informative material.
7. Jennifer Diddle says:

   August 18, 2010 at 10:18 pm

   Thank you for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such great information being shared freely out there.
8. Shannon House says:

   August 20, 2010 at 12:28 am

   Very informative posts, glad I found this site. Thanks!
9. Ur26 says:

   August 22, 2010 at 7:44 pm

   Hey admin, extremely informative blog post! Pleasee continue this awesome work..
10. Gravura says:

    August 23, 2010 at 8:27 am

    Thank you for the work you have put into your nice blog. We will bookmark to your blog because it is very informational. We love the site and will come back to see your new posts.
11. Maribel Hopps says:

    August 24, 2010 at 7:27 pm

    I come across your blog on technorati and check several of of your early posts. Keep up the great work. I just added up your RSS feed to my MSN News Reader. Looking forward to reading more from you later on!
12. Sldkfu says:

    August 27, 2010 at 12:36 am

    Wow! I really enjoyed this blog. You give me many good information, thank you!