Forum Moderators: open
I use an XML file to import the "image list" for the slide show. So each line of the XML has attributes for image, caption, and URL:
<?xml version="1.0" encoding="ISO-8859-1"?>
<imageData>
<image src="/images/flash/pic1.jpg" url="http://www.example.com" caption="Caption 1"/>
<image src="/images/flash/pic2.jpg" url="/cgi-bin/some_other_url.html" caption="Caption 2"/>
</imageData>
You have a movie preloader at the beginning, then each image fades out with a slight delay and you will get "loading next image" with a preload bar again, then the next image fades in. Sometimes you'll only see the image loader on a slow day.
I use this method on several sites. All you have to do once it's working is upload images and add them to the XML file.
Six objects require creation, and set as symbols with "Export for Action Script":
- preloadBar - your preload progress bar movie.
- loadertext - movie symbol, the initial text box for preload, "loading movie"
- loadingimage - movie symbol with the text "loading next image . . . " for each image preload
- preloadPicLabel - movie (text box) symbol for the caption
- preloadBox - the movie symbol representing the box holding the picture
- picButton - the clickable button symbol on top of all other objects that responds to the click.
Frame 1: Load the XML data info three arrays: images, urls, and captions.
//==== COFIGURE ACCORDINGLY ========== //
var numFadeRate = 5;
var fadeInterval:Number = 20;
var home:String = 'http://www.example.com';
var xmlSource = "/data/your-xml-file.xml";
var xmlLoaded:Boolean = (xmlLoaded==true)?true:false;
var recordNumber:Number = 0;
var autoTimer:Number = 5000;
var intervalId:Number = 0;
var fv:Number = 0;
var fo:Number = 0;
var imageLoaded:Number = 0;
var Lbytes:Number = 0;
var Tbytes:Number = 0;
var pl_width:Number = _root.preLoadBar._width;
var images:Array = new Array();
var captions:Array = new Array();
var urls:Array = new Array();
var xmlObject:XML = new XML();
xmlObject.ignoreWhite = true;
xmlObject.load(xmlSource);
_root.picBox._alpha = 0;
_root.loadingimage._alpha = 0;
_root.loadertext._alpha = 50;
_root.preLoadBar._alpha = 50;
// Load up the images, urls, and captions array.
xmlObject.onLoad = function () {
var imageData:Array =this.firstChild.childNodes;
for (i = 0; i < imageData.length; i++){
images[i]=imageData[i].attributes.src;
urls[i]=imageData[i].attributes.url;
captions[i]=imageData[i].attributes.caption;
}
xmlLoaded = true;
}
Frame 2: Preloader. Note the references to my preloader movie (preloadBar).
if (xmlLoaded && (_framesloaded>=_totalframes)) {
preLoadBar._alpha=0;
loadertext._alpha=0;
gotoAndStop(4);
}
else {
Lbytes = getBytesLoaded();
Tbytes = getBytesTotal();
preLoadBar._width = (percent > 100)?pl_width:(Lbytes/Tbytes)*pl_width;
}
Frame 3: if framesloaded does not equal _totalframes, send it back to frame 2.
gotoAndPlay(2);
Frame 4: Do the image swap. Note that this one has a fade in/fade out.
swapImage();
function swapImage () {
_root.picBox._alpha = 0;
preloadImage(recordNumber);
_root.loadingimage._alpha=50;
_root.preLoadBar._width=1;
_root.preLoadBar._alpha=50;
}
function fadeIn() {
if (_root.picBox._alpha < 100) {
_root.picBox._alpha = (_root.picBox._alpha>100)?100:_root.picBox._alpha+numFadeRate;
_root.picLabel._alpha = (_root.picLabel._alpha>100)?100:_root.picLabel._alpha+numFadeRate;
}
else { clearInterval(fv); }
}
function fadeSequence () {
fo = setInterval(fadeOut,fadeInterval);
recordNumber = ((recordNumber+1) >= images.length)?0:recordNumber+1;
}
function fadeOut() {
if (_root.picBox._alpha > 0) {
_root.picBox._alpha = (_root.picBox._alpha<0)?0:_root.picBox._alpha-numFadeRate;
_root.picLabel._alpha = (_root.picLabel._alpha<0)?0:_root.picLabel._alpha-numFadeRate;
}
else { clearInterval(fo); swapImage(); }
}
function preloadImage (num) {
var tmp:MovieClip = _root.picBox;
var mcLoader:MovieClipLoader = new MovieClipLoader();
var imgListener:Object = new Object();
imgListener.onLoadComplete = function (tmp:MovieClip) {
fv = setInterval(fadeIn,fadeInterval);
clearInterval(intervalId);
intervalId = setInterval(fadeSequence,autoTimer);
_root.loadingimage._alpha=0;
_root.preLoadBar._alpha=0;
_root.picLabel.text = captions[recordNumber];
_root.picButton.onRelease = function() { getURL(urls[recordNumber]); }
}
imgListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
preLoadBar._width =
((bytesLoaded/bytesTotal)*pl_width >
pl_width)?pl_width:(bytesLoaded/bytesTotal)*pl_width;
// Previous statement should be ALL ON ONE LINE
// returns added here for this message board
}
mcLoader.addListener(imgListener);
var test:String=home+"/"+images[num];
mcLoader.loadClip(test, "picBox");
}
[edited by: eelixduppy at 5:56 pm (utc) on July 16, 2008]
[edit reason] disabled smileys [/edit]