Photo Gallery Help!

[eac81]

I'm relatively new to flash and trying to create "header" photo gallery. I followed your tutorial on how to do this and it isn't working right. I can't figure out what's wrong. I'm not sure if I've changed all the code that needs to be changed. The first image just pops up in a totally different place than I had the movie clip positioned and none of the photos are rotating.

Here is what my code is reading now (I copied and pasted the code from the tutorial and changed out the appropriate image names and website path):

//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 = "http://www2.cybergolf.com/kemper/images/159/ (http://www2.cybergolf.com/kemper/images/159/)";
// fill this array with your pics
this.pArray = ["image1.jpg", "image2.jpg", "image3.jpg"];
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);

Here is the link to the flash file on the web: http://www2.cybergolf.com/kemper/courses/layout9.asp?id=159&page=2597 (http://www2.cybergolf.com/kemper/courses/layout9.asp?id=159&page=2597). I know I'm probably doing something dumb, but I'd appreciate any help I can get! I'm still learning! Thanks!

[darylmeter]

you'll have to make sure the registration point for your "holder" moviel clip is set to top left rather than center.
This can cause your dynamic image to position itself off the page

[eac81]

Thanks Daryl! That totally fixed my problem. I knew it was something simple! Does anyone know how to make it so the photo gallery automatically rotates every 20 seconds or so regardless of whether the user is clicking on the forward or back buttons? I'd like my photo gallery to do this but also have the buttons if someone wants to move ahead faster.

you'll have to make sure the registration point for your "holder" moviel clip is set to top left rather than center.
This can cause your dynamic image to position itself off the page

[eac81]

I figured out how to have the images rotate automatically with the controls, by using the setInterval() function, however I keep running into a problem where if I use the controller to move to the next slide just before it automatically switches, the image fades out just as fast as it fades in then moves to the next image. How can this be avoided? Is there some code I need to include? I want that interval time to restart after someone hits the forward or backward button. Someone please help if you can!

Here's the link:
http://www2.cybergolf.com/kemper/courses/layout9.asp?id=159&page=2598

[scotty]

Not tested
this.pathToPics = "http://www2.cybergolf.com/kemper/images/159/";
this.pArray = ["image1.jpg", "image2.jpg", "image3.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
//removed loading the first pic here
MovieClip.prototype.changePhoto = function(d) {
//clear the interval
clearInterval(id);
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() {
var p = this.photo;
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
//call the interval here
id = setInterval(this, "changePhoto", 10000, 1);
this.onEnterFrame = null;
}
};
//start everything
changePhoto(0);

scotty(-:

[eac81]

That works great scotty! Thanks for your help! :D

[scotty]

You're welcome :)