This is a fix to the Image gallery tutorial - makes it a fully dynamic gallery

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…** :wink:

I’ve been playing with this script. All seems to work, to avoid any confusion, i’ll post the code i’ve used first. None is edited…

The PHP file:

<?php 
$dir = opendir("images"); 
while ($file = readdir($dir)) { 
if ($file=="." or $file=="..") continue; 
$string.= $file; 
$string.= ", "; 
} 
echo "imgList=".$string; 
?>
this.pathToPics = "images/";
this.fadeSpeed = 20;
this.pIndex = d=0;
hMax = 480;
//maximum height is 400
wMax = 640;
//maximum width is 300
MovieClip.prototype.changePhoto = function(d) {
	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() {
	this.photo._alpha = 100;
	this.photo.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;
		//the 249 and 213 are from the old code change them to your needs
		this.photo.centered(320, 240);
	} else {
		//trace(l/t);
	}
};
MovieClip.prototype.centered = function(x, y) {
	if (this._width>=wMax) {
		this._width = wMax;
		this._yscale = this._xscale;
	} else if (hMax<this._height) {
		this._height = hMax;
		this._xscale = this._yscale;
	}
	this._x = x-this._width/2;
	this._y = y-this._height/2;
};
MovieClip.prototype.fadeIn = function() {
	if (this.photo._alpha<100-this.fadeSpeed) {
		this.photo._alpha += this.fadeSpeed;
	} else {
		this.photo._alpha = 100;
		this.onEnterFrame = null;
	}
};
but1.onRelease = function() {
	changePhoto(1);
};
lv = new LoadVars();
lv.onLoad = function(success) {
	if (success) {
		pArray = this.imgList.split(", ");
		changePhoto(0);
	} else {
		//info.text = "could not load file";
	}
};
lv.load("filearray.php");

Now heres what I’d like to know:

1- In the current script, once it reaches the end of all the images within the folder, and the “next” button is clicked. It shows a blank slide, if the next button is clicked again, you’ll see the very first image all over. Could someone please help me get rid of the blank slide problem?

2- Instead of using buttons, I’d like to run the show (looping) automatically. Could someone please teach me how?

Thanks

Add this to your code

setInterval(this, "changePhoto", 4000, 1);

The ‘4000’ is the time in msecs. I tested the code here and ir didn’t give me a blank slide…

scotty(-:

Could someone be kind enough to post the .FLA that we’re supposed to edit all this ActionScript in ? I don’t know if it’s the original from the Tutorial, V1 or V3 … ???

Thanks!

This thread is based on the photogallery tutorial here on kirupa.
But, and that’s why I gave you the link to this thread, it’s not that hard to implement in the resize gallery:)

scotty(-:

LOL! Says the god of actionscripting…!!
Ok, gonna go try it! :cons:

ooh! one image is good!!! now … how did we make those next/back buttons…
hmmmm

ex: http://www.joel.bz/test/

ooooh!!! I did it!!! I did it!!! I put little buttons of my own!!!
YAY!!! http://www.joel.bz/test/ look! HAHAHAHAHAHAHAHA

i doubt i have been so happy since i learned how to turn on a pc!
:rabbit:

LOL, then you must be very happy;)

scotty(-:

well, i thought i had it, but i still have no idea why my pics aren’t loading. its sad, i need help please. i also dont know much about action scripting so that could be a reason why too…and i have no idea whats wrong with it my code

this.pathToPics = "[http://www.angelfire.com/musicals/distant/images/](http://www.angelfire.com/musicals/distant/images/)";
this.pArray = ["group0.jpg", "group1.jpg", "group2.jpg", "group3.jpg", "adam.jpg", "corey.jpg", "shaun.jpg", "travis.jpg"];
this.fadeSpeed = 20;
this.pIndex = d=0;
loadMovie(this.pathToPics+this.pArray[0], this.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;
};
MovieClip.prototype.changePhoto = function(d) {
 this.pIndex = (this.pIndex+d)%this.pArray.length;
 trace(this.pArray);
 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() {
 var p = this.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.photo.centered (105, 145);
 } 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;
 }
};
but1.onRelease = function() {
 changePhoto(1);
};
lv = new LoadVars();
lv.onLoad = function(success) {
 
 if (success) {
  pArray = this.imgList.split(", ");
  info.text = pArray;
 } else {
  info.text = "could not load file";
 }
};
lv.load("filearray.php");

Why you define/code pArray and load it with the PHP-file?
Are you sure the path is correct?
Are the jpg’s non-progressive?
Does your server support PHP?

Just a few questions;)

scotty(-:

Should this tutorial work if I just put the actionscript in the first frame of an empty flash-project, put php-code -> filearray.php, create image-folder, and upload to my server?

Nothing happens when I do this, the browser just loads and loads, but all I see is a blank page..

Do I need to create any buttons for scrolling, do I need to create an mc for the thumbnails etc..?

i used the code from the first post…

please help!

/henrik

I added a empty mc named photo, though still no cange…

@scotty: I’m having the same issue as Mr guitar
I’m using Flash MX on an XP/IIS server (have also tried on a 2000/IIS server)
the images are non-progressive and within the size dimensions, the path is correct in the AS (“images/”), the php works fine (http://203.167.203.135/pasteysplace/filearray.php) using your filearray.php
but the swf won’t display the pics (I’m using your actionscript) but the .fla from the tute. (http:203.167.203.135/pasteysplace/galstatic.swf).

here’s my fla - can someone who has this working already please test it on thier server even if only to tell me it doesn’t work - an image has to go in an “images/” folder off the swf location and I used scottys filearray.php - but any input would be greatly appreciated!

the only thing left I can see is that it just doesn’t work in mx - just 2004 - is this a possibility?

FINALLY SOMEONE WHO UNDERSTANDS “”““dynamic””“”

If you have to name them all 1, 2, 3, then whats dynamic about it?

CHeck my thread and if you can fix the one line of my code WE’VE GOT IT!!!

Jaboy - these guys have it working already using php and a lv.load in the AS

I read your post earlier and found this a link to some ASP dynamic loading in flash - maybe this will help you on your quest:

http://www.actionscript.com/flashweek/00000668.html

I don’t know ASP at all (just started learing php) but if you can make it work with ASP and tell me how I’m willing to try anything to get this going.

I figured it out - In case anyones still reading this link the answer to my question is:

Don’t have the <html> tags in your php script with the latest version of php . . . it’s always the stupid little syntax that’s important

. . . there’s a lesson in all of that for everyone.

I am totally lost… can someone put a zip file with the lastest files so I can have a look on those??

Thanks.

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.[/LIST]JEEEEEEEEZUS!!! I have been banging my head against the screen for several hours trying to get this gallery to work, sometimes bits worked sometimes bits didn’t. I resaved the jpegs as standard and now it works fine. I probably look like a bit of a plonker but THANK YOU geezer!!!
:pleased:

Hey, huge fan of everyone’s work on this and all posts this is an amazing forum. It’s been incredibly helpful. But I am stuck at the moment and was hoping someone could take a sec and give me some advice. I’m attaching the files I’m working on for the photo gallery. the problem is I can’t for the life of me load the thumbnail scroller that needs to be at the bottom of the screen. right now there is a placeholder mc of what it’s suppossed to look like and I want the images to scroll infinitely and highlight when you rollover them. i’m sure this is just my sheer lack of experience but perhaps someone can give me a nudge in the right direction.

many many many thanks