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…
One Response 
Leave a Reply 
My name is Brandon Johnson and I am a web design and development professional from Salt Lake City, Utah. I develop web applications with particular focus on rich internet applications (RIAs) using Flash, Flex, AIR, and Ajax, with PHP/MySQL on the backend. I founded Technico Solutions in 2006 to provide coding solutions and ideas for developers in PHP, MySQL, Actionscript 2 & 3, Flash, Flex, AIR, and Ajax. 
Could not find a suitable section so I written here, how to become a moderator for your forum, that need for this?