Ok, my example just uses 5 images, but the same logic applies to 200, 300, 500 or how many ever images you have.
So there are 3 parts to this working properly:
1. XML
2. Flash
3. PHP
Pay special attention to the highlighted bits of code. These are the things you'll need to modify for the programming to work. At the end there is a link to see what the end product will look like. I've included a zipped folder with the source code, sample folder structure and example files at the end.
Step 1: Input the XML Data
<?xml version="1.0"?>
<images path='images/'>
<picture src='1.jpg' title='FROSTY TREES' />
<picture src='2.jpg' title='GREEN FOREVER' />
<picture src='3.jpg' title='8 BIT GAMING' />
<picture src='4.jpg' title='DIGITAL SNOWFLAKE' />
<picture src='5.jpg' title='FORD GALAXIE' />
</images>
This is an example XML file. It's important to keep the same structure, otherwise the Flash won't be able to read it. There are three main parts, the relative/absolute file path, the filename, and the title. The path should be the relative filepath to the folder from the location of the webpage showing the flash. If your image files are in seperate folders, leave it blank and add the full path into the "src" attribute. The "src" attribute refers to the filename. The "title" attribute is optional.
Step 2: Code the Flash
// XML Object
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(success) {
if(success) {
loadImage();
}
else {
trace ("XML ERROR")
}
}
// FlashVars
var currentImage = Number(currentImage);
// Load Images
function loadImage() {
Container._alpha = 0;
var path:String = xml.firstChild.attributes.path // Path to the images
var img:String = path + xml.firstChild.childNodes[currentImage].attributes.src // Path + Image Filename
var titleText = xml.firstChild.childNodes[currentImage].attributes.title // Image Title
var mcl:MovieClipLoader = new MovieClipLoader();
var mclL:Object = new Object();
mcl.addListener(mclL);
mcl.loadClip (img, Container)
mclL.onLoadProgress = function() {
preloader.alphaTo(100, .1, "easeOutQuad");
}
mclL.onLoadInit = function() {
preloader.alphaTo(0, 1, "easeOutQuad", .5, function() { title_mc.title.text = titleText });
Container.alphaTo(100, 1, "easeOutQuad", 1 );
}
}
// Load XML
xml.load("xml/images.xml")
I tried to do some basic commenting on this. I used mcTween for the alpha tweens and the MovieClipLoader class to load in the images. The only thing that you might have to change is the filepath to the xml if you choose to put it somewhere else.
Step 3: Pass the variables to Flash through PHP
<?php
$total = 5;
$limit = $total - 1;
$img = $_GET["img"];
if ($img>$limit) {
$img = $limit;
$next = $limit + 1;
$prev = $limit - 1;
}
else {
$img = $_GET["img"];
$next = $img + 1;
$prev = $img - 1;
}
?>
<html><head></head><body >
<div id="links">
<?php if($prev>=0) { echo "<a href='image.php?img=$prev'>PREVIOUS</a> /"; } ?>
<?php if($next<=$limit) { echo "<a href='image.php?img=$next'> NEXT</a>"; } ?>
</div>
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="480" height="272" id="Image" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Image.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="currentImage=<?php echo $img ?>">
<embed src="Image.swf" quality="high" bgcolor="#000000" width="480" height="272" name="Image" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>
I've included a previous / next button functionality in the PHP to allow for some navigation. To target specific images you just have to append the url. For example images.php?img=0 will take you to the first image, images.php?img=1 will take you to the second and so on. Since XML is read with the first node being node 0, the counting starts at 0 (it can be tweaked if you really need the counting to start at 1).
The one thing you'll need to modify is the $total variable to equal the total number of images. Otherwise, the flash won't display properly should someone try a url like images.php?img=10000 (i.e. a number greater than the total number of images). With the correct $total value set, if someone tries to point to a URL which speficies a $img number larger than your image library, it'll take them to the last image in your set.
To explain the whole technique of FlashVars, see the text highlighted in red. Bascially, we're taking a variable out from the URL using PHP and then sending that into Flash. Flash then treats it as a regular variable and we can use it to tell Flash which node of the XML to read (i.e. which image to show).
This method should cure your woes as it's only loading in one picture at a time on request. So, if someone doesn't want to look at all 200, they don't have to download them all. Using a databse, this could be turned into a very robust image gallery.
You can see an example of the page here (http://www.designsbyvishal.com/Demos/markg/Image.php?img=0).
You can download all of my source files here (http://www.designsbyvishal.com/Demos/markg/Mark_G.zip).