After searching and reading a couple of hundred post on the **truly GREAT **Kirupa image gallery tutorial - and wondering why nobody has written a new tutorial or at least updated the “old” one to avoid overloading the net with flash image gallery questions.
Im trying to create a new thread that will serve as a basic startingpoint for all Kirupa gallery questions. Im no überscripter nor do I know a lot about flash, but with a little common sense and perhaps some help from all of you… oh well - here goes:
Quick Checklist:
[list]
[] If your JPG’s wont load - Make sure you don’t save them as progressive JPG’s, as they wont load in Flash.
[]If your images dont align to the photo container movieclip it is probably because your registration point of the photo MC is set to center instead of topleft.
[/list]Below is the code I have pieced together from different posts on the subject (I would like to credit all the authors, but that would require me reading all the posts again, as I have forgotten where I got them.
It produces a gallery that loads files dynamicaly thru a phpscript and checks for maximum image height/width and scales the images to fit within the *photo *MC. It also sets the center of the displayed images to a given coordinate (x,y).
All in all this is a install and forget image gallery, where the only maintaining required is uploading new pictures to the image folder.
On the server the file/directory structure is:
[list]
[]gallery swf
[]filearray.php
[]images/
[list]
[]file_x.jpg
[]file_y.jpg
[]etc…
[/list]
[/list]This is the filearray.php - modify this to check for files in the path set in the actionscript line: *this.pathToPics = “images/”;
<?php
if ($dir = opendir("images")) {
while (($file = readdir($dir)) !== false) {
$cont++;
if ($file == "." || $file == "..") { } else {
$string.= ($file);
$string.= "&";
}
}
closedir($dir);
}
print($string);
?>
This is the modified actionscript from the original Kirupa gallery script:
// This loads the array created by filearray.php and puts it into pArray
lv = new LoadVars();
lv.load("filearray.php");
lv.onData = function(text){
pArray = text.split("&");
for (i=0; i<pArray.length-1; i++) {
trace(pArray*);
}
}
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "images/";
// fill this array with your pics (set from filearray.php)
this.pArray = pArray;
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
// Center the photo at (x,y) the coordinates are set in line 69
MovieClip.prototype.centered = function(x, y) {
this._x = x-this._width/2;
this._y = y-this._height/2;
};
// Makes sure that the image fits within (wMax, hMax)
MovieClip.prototype.resize = function(wMax, hMax) {
while (this._width>wMax || this._height>hMax) {
this._xscale = this._yscale -= 1;
}
};
// This line sets max width and max height (wMax, hMax)
photo.resize(397, 297);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
// This line sets the (x,y) center of the image on the stage
this.photo.centered(249, 213);
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
This should do it - the only thing I (think) I need some help with is changing the script to actually load the FIRST image, when the gallery loads. For some reason beyond my knowledge you have to click the next button for a image to load… What part of the script needs to be changed to make sure that a image is loaded on startup???
** I hope someone will take the time to help develope this gallery tutorial / help file… It would be great if you added som more steps to the quick checklist… and of course fixed the load image on start problem…** 
much appreciated. Now i gotta scale the images. any suggestions on that?
