Photo slide show

OK, I did the photo gallery tutorial and I am wondering how I could ad to that some.

What I am attempting to do is to have the photo slide show play on it’s own, fading in and out of the pics every 3 seconds or so. Then when the user is ready to take control of the presentation he or she could then use the arrows to navigate back and forth on their own. So if the photo slide show is on photo 31 and the user clicks the next arrow, it would take them to 42 and at this point the user is manually controling the show. The automated portion will then conclude.

At any point in the manual (arrows back and forth) that the user wanted to go back to the automated slide show, they could by pressing a button that would continue to the next pic that is in line and it would be back to the automated sequence. I have an example of what I am trying to achieve, but it is too large for me to post.

I think it will be pretty easy.

Supra’s code is very neat and tidy, I’ll try to come up with something that does it justice.

question/suggestion: would it be acceptable to have the movie autoplay whenever the mouse is outside of a certain area? You could have it set up to simply autoplay all the time, but as soon as the mouse is over pic area, it stops the autoplay.

… well, I’ll think about this anyway. I just have to figure out how to write a prototype. :stuck_out_tongue:

ok… something I don’t understand… maybe one of our MXer’s can fill me in.

//Code written by sbeener (suprabeener)
/*
   i wrote this code, but you can use and abuse it however you like.
   the methods are defined in the order which they occur to make it
   easier to understand.
*/
// 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 = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg"];

this is what I don’t currently get. How is this array called pArray created using this syntax. I’m trying to create a for loop to generate the names in this array, but I can’t figure out how to do it.


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);
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;
	} 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;
	}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
	if (Key.getCode() == Key.LEFT) {
		this.changePhoto(-1);
	} else if (Key.getCode() == Key.RIGHT) {
		this.changePhoto(1);
	}
};
Key.addListener(this);

Hey david,

I was hoping to stop the show and then go to manual and have the user restart when they are ready. But if you can find or have a solution to make this work where the series starts automatically when mouse is outside of a certian area than that will work also.

Working on it. I’m also working on having the whole thing fed from an external txt file (for the image array).

Almost completed. Just running into a couple of small errors

cool, looking forward to it!!