Problems Creating Photo gallery

[zimmzimm]

I created the photo gallery using the code listed here on Kirupa.com in Mx 2004. Everything load's properly except the images. The image box loads as do the back and fwb buttons, but no images. When I test the movie and click on the fwd button or the back button, the output menu opens up and starts scrolling down with NaN until i close the test movie.

what did I do wrong?


------------------------------------------------------------

//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 = "product/";
// fill this array with your pics
this.pArray = ["bau", "canz", "clocks1", "clocks2", "FORKS", "keyfinal", "pigs", "reflection2", "shine", "space1", "triangle"];
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);
------------------------------------------------------------------------

The images are in the same dir as the .fla file. SO what's wrong?
Any help would be great, thanks

[Danno]

// fill this array with your pics
this.pArray = ["bau", "canz", "clocks1", "clocks2", "FORKS", "keyfinal", "pigs", "reflection2", "shine", "space1", "triangle"];

you need to put in that they are .jpg files... because right now it is looking for the literal file name of "Bau" instead of "Bau.jpg"

So it should look like this:

// fill this array with your pics
this.pArray = ["bau.jpg", "canz.jpg", "clocks1.jpg", "clocks2.jpg", "FORKS.jpg", "keyfinal.jpg", "pigs.jpg", "reflection2.jpg", "shine.jpg", "space1.jpg", "triangle.jpg"];

And your path to pics should be blank if the pictures are in the same directory.
what it should be:

this.pathToPics = "";

[scotty]

If the pictures are in the same directory, this line
this.pathToPics = "product/";
should read

this.pathToPics = "";
Further there's no .jpg extension with the picture names in the array...

scotty(-:

[Danno]

ha, beat ya scotty =]

[scotty]

:lol: a second too late...

scotty(-:

[zimmzimm]

I actually tried what you said was wrong after I posted my question yesterday and still no luck. I'm still getting nothing. The images won't load and if I press the fwd or back buttons I'm getting the repetitive "Nan" pop'n up in the Output window. I'm at a total lost to tell ya the truth.....but thanks for your help.

[mpelland]

umm are you pics jpg that you exported from photoshop? are they set for progressive download? I have had issues loading images with that setting in flash.

[zimmzimm]

Yeah, they're saved as jpgs, but progressive download, no idea what that is?

[scotty]

Did you change the path?
If that still not work post your fla with a picture:)

scotty(-:

[scotty]

If you save for web in Photoshop uncheck the progressive box, it's a format Flash can't handle:)

scotty(-:

[zimmzimm]

OH, yeah, none of my images are progressive....but here's what i'm getting when i test the movie in flash

[mpelland]

need the actual FLA and an image. not an image of the FLA

[zimmzimm]

need the actual FLA and an image. not an image of the FLA

Here ya go, sorry

[scotty]

You don't have an empty mc with the instance name photo???

scotty(-:

[zimmzimm]

Yup, it's always something simple....thanks guys. I've just got to say that this site is 10 times better then flashkit.com.....hope that doesn't piss anyone off, but I've got more out of this site in the past 2 days then I've gotten from flashkit in a month

thanks again

[scotty]

you're welcome:)

[zimmzimm]

OK, so not all my images are the same size, being a photographer, not all my images can be the same size. SO when I finally got the movie to load properly, they weren't centered. How can I control this?

[mpelland]

the way i have handled stuff like that is i stored their dimensions somewhere, loaded that in with the image information. the scaled it down to fit my area. here is an example: http://www.jasontravels.com/test/gallery.php

[scotty]

http://www.kirupa.com/forum/showthread.php?t=87633

scotty(-:

[zimmzimm]

I tried following your steps you laid out there but no luck.......
http://www.kirupa.com/forum/showthread.php?t=87633

Where should I be entering the script you wrote? Sorry I'm not the greatest at this...and should I be entering in any of the other scripts that the others listed, or just this one?
thanks
MovieClip.prototype.fadeIn = function() { this.photo._x = bg._x-this.photo._width/2; this.photo._y = bg._y-this.photo._height/2; if (this.photo._alpha<100-this.fadeSpeed) { this.photo._alpha += this.fadeSpeed; } else { this.photo._alpha = 100; this.onEnterFrame = null; }};

++++++++++++++++++++++++++++++++++++++++++++++++++ ++++



//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 = "";
// fill this array with your pics
this.pArray = ["bau.jpg","shine.jpg","clocks1.jpg","space1.jpg","shine.jpg","space1.jpg","clocks2.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);

[scotty]

LIke this

this.pathToPics = "";
this.pArray = ["bau.jpg", "shine.jpg", "clocks1.jpg", "space1.jpg", "shine.jpg", "space1.jpg", "clocks2.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
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() {
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;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
this.photo._x = bg._x-this.photo._width/2;
this.photo._y = bg._y-this.photo._height/2;
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);
//load the first picture
changePhoto(0);
Be sure you have a mc "bg" see http://www.kirupa.com/forum/showpost.php?p=764996&postcount=5

scotty(-:

[zimmzimm]

But my MovieClip instance is named photo so it doesn't work. If I change the instance name to bg, then the rest of the code doesn't work.

[scotty]

In the link I gave there's an extra mc "bg"...
To make it easier for you, decide where you want to have your pictures centered, for the example let's use x:300, y:200. Now change the fadeIn prototype like this

MovieClip.prototype.fadeIn = function() {
this.photo._x = 300-this.photo._width/2;
this.photo._y = 200-this.photo._height/2;
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};

scotty(-: