# Photo Gallery question

**URL:** <https://forum.kirupa.com/t/photo-gallery-question/61411>\
**Category:** flash\
**Created:** [August 18, 2004, 12:22pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411 "2004-08-18T12:22:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mstern02](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mstern02](https://forum.kirupa.com/u/mstern02)\
**Post date:** [August 18, 2004, 12:22pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/1 "2004-08-18T12:22:59Z")

</div>

I used the Photo Gallery tutorial found at [http://www.kirupa.com/developer/mx/photogallery.htm](http://www.kirupa.com/developer/mx/photogallery.htm) to create a slideshow. However, it’s not bringing up the pictures. I chose not to use the buttons so I’m assuming the pictures fade in and fade out automatically. Am I right to assume this? Here’s the code I’ve got, it’s the same as what is in the tutorial except for the folder and the filenames. Was I supposed to change anything else?

Thanks for your help!

// 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 = [“cdc.gif”, “denmark\_royalty\_library.gif”, “navy.gif”, “niehs.gif”, “saic.gif”, “san\_diego.gif”, “shell.gif”, “standards\_council\_canada.gif”, “three\_valleys.gif”, “tmobile.gif”, “us\_census\_bureau.gif”];  
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;  
}  
};

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 12:51pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/2 "2004-08-18T12:51:02Z")

</div>

The code as you have it now will only show the first picture because of this line

```auto
loadMovie(this.pathToPics+this.pArray[0], _root.photo);

```

But no other functions are being called…  
To get what you’re after you have to use setInterval() (look it up in your AS dictionary;) ).  
In your case put

```auto
setInterval(this, "changePhoto", 5000, 1);

```

at the bottom of your code, the 5000 are in msecs:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 12:57pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/3 "2004-08-18T12:57:15Z")

</div>

Thanks Scotty,  
I’m pretty new at all this, was I supposed to put setInterval right under loadMovie? Also, for some reason, not even the first image loads when I test the movie. Do you know why that could be?

> [@scotty](#):
>
> The code as you have it now will only show the first picture because of this line
> 
> ```auto
> loadMovie(this.pathToPics+this.pArray[0], _root.photo);
> 
> ```
> 
> But no other functions are being called…  
> To get what you’re after you have to use setInterval() (look it up in your AS dictionary;) ).  
> In your case put
> 
> ```auto
> setInterval(this, "changePhoto", 5000, 1);
> 
> ```
> 
> at the bottom of your code, the 5000 are in msecs:)
> 
> scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 1:03pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/4 "2004-08-18T13:03:20Z")

</div>

Aah silly me:stunned:  
You can’t load gifs dynamically, just jpegs…  
And that code (the setInterval) at the bottom (the end) of all your code:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 1:07pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/5 "2004-08-18T13:07:36Z")

</div>

And, if you resave them as jpg, be sure you save them as non-progressive;)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 1:26pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/6 "2004-08-18T13:26:31Z")

</div>

Wow, that worked very well. Thanks sooooo much!!!

One last question, this is pickiness on my part. when each image fades in and out it shifts about 1 pixel to the right then when it’s in place, it shifts about one pixel to the left.

Could that just be the position of the movie?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 1:58pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/7 "2004-08-18T13:58:14Z")

</div>

No it’s Flash;)  
Try setting the final alpha to 99 or 98…  
So in the fadeIn prototype after the else statement

```auto
this.photo._alpha = 98;

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 2:03pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/8 "2004-08-18T14:03:29Z")

</div>

yeah, that worked!! thanks, you’ve been very helpful, i really appreciate it.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 2:07pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/9 "2004-08-18T14:07:40Z")

</div>

no problem=) and welcome to kirupaforum btw;)

scotty(-:

---

<div class="post-metadata">

**Author:** ![HungryArtiste](https://avatars.discourse-cdn.com/v4/letter/h/f05b48/32.png) [@HungryArtiste](https://forum.kirupa.com/u/HungryArtiste)\
**Post date:** [March 22, 2006, 6:40am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/10 "2006-03-22T06:40:11Z")

</div>

Ive pretty much followed the directions of the tutorial, but decided to test it out with 2 pictures… but when I press on the arrow buttons I have created, the word ‘NaN’ repeatedly traces.

I have no idea what to make of it, as i dont have that word/letters anywhere on my code.

Any ideas?

Thanks

```auto
 
 this.pathToPics = "";
 this.pArray = ["shoes.jpg", "ITALYtivoli.jpg"];
 this.fadeSpeed = 20;
 this.pIndex = 0;
  loadMovie(this.pathToPics+this.pArray[0], _root.photo);
 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() {
 // 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;
 }
 };

```

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 22, 2006, 7:58am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/11 "2006-03-22T07:58:09Z")

</div>

```auto
 trace(l/t);

```

Take this line out or comment it (’//’)

scotty(-:

---

<div class="post-metadata">

**Author:** ![HungryArtiste](https://avatars.discourse-cdn.com/v4/letter/h/f05b48/32.png) [@HungryArtiste](https://forum.kirupa.com/u/HungryArtiste)\
**Post date:** [March 22, 2006, 8:11am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/12 "2006-03-22T08:11:54Z")

</div>

> [@scotty](#):
>
> ```auto
> trace(l/t);
> 
> ```
> 
> Take this line out or comment it (‘//’)
> 
> scotty(-:

thank you, it has stopped tracing randomness…

although i have arrow buttons that work, the pictures continue to load, like an automated slide show.

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 22, 2006, 11:45am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/13 "2006-03-22T11:45:40Z")

</div>

But your pictures do load?  
Can you post your .fla?

scotty(-:

---

<div class="post-metadata">

**Author:** ![HungryArtiste](https://avatars.discourse-cdn.com/v4/letter/h/f05b48/32.png) [@HungryArtiste](https://forum.kirupa.com/u/HungryArtiste)\
**Post date:** [March 23, 2006, 2:15am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/14 "2006-03-23T02:15:17Z")

</div>

> [@scotty](#):
>
> But your pictures do load?  
> Can you post your .fla?
> 
> scotty(-:

ah nevermind, i had added the bit of code you had suggested to the last person, which was causing the automated slideshow.

the pictures (though weirdly cropped by my mask) and buttons work now. thank you!

is there any simple photo gallery w/ thumbnail tutorial that doesnt need XML?

if not, does the XML code mentioned in the kirupa tutorial go in the actions box?

---

<div class="post-metadata">

**Author:** ![layin](https://avatars.discourse-cdn.com/v4/letter/l/ebca7d/32.png) [@layin](https://forum.kirupa.com/u/layin)\
**Post date:** [March 24, 2006, 1:14am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/15 "2006-03-24T01:14:01Z")

</div>

Making this for my website, and the slide show work graet and simple.  
However, I am trying to make a Play button and pause button so the user can pause at something by looking at it.

I have created 2 buttons, one pause and one play.  
I know the code involves

on (release) {  
stop ();  
}"

and

On (release {  
start();  
}

but it doesn’t seem to be working.

Please help…

---

<div class="post-metadata">

**Author:** ![ohyiohyioh](https://avatars.discourse-cdn.com/v4/letter/o/c0e974/32.png) [@ohyiohyioh](https://forum.kirupa.com/u/ohyiohyioh)\
**Post date:** [March 24, 2006, 9:32pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/16 "2006-03-24T21:32:26Z")

</div>

and is it possible to set out the \_x,\_y of the image in this AS?  
thanx in adv.

---

<div class="post-metadata">

**Author:** ![drake0013](https://avatars.discourse-cdn.com/v4/letter/d/0ea827/32.png) [@drake0013](https://forum.kirupa.com/u/drake0013)\
**Post date:** [March 29, 2006, 4:24pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/17 "2006-03-29T16:24:45Z")

</div>

I am also having some trouble getting any pictures to show up. I am pretty sure that none of my jpgs are progressive. I still just get my grey box instead of pictures. Can anyone figure this out?

[http://www.ryancopeland.com/index.fla](http://www.ryancopeland.com/index.fla)

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 30, 2006, 9:40am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/18 "2006-03-30T09:40:37Z")

</div>

@ layin: change this line

```auto
setInterval(this, "changePhoto", 5000, 1);

```

in

```auto
myInterval = setInterval(this, "changePhoto", 5000, 1);

```

then for your stop button and play button (code in the actions layer)

```auto

play_btn.enabled = 0;
stop_btn.onRelease = function(){
   clearInterval(myInterval)
   play_btn.enabled = 1;
}
play_btn.onRelease = function(){
   this.enabled =0;
   myInterval = setInterval(this, "changePhoto", 5000, 1);
}

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 30, 2006, 9:46am UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/19 "2006-03-30T09:46:14Z")

</div>

@ drake0013: your paths are wrong, in line 11 and 29 you have '\_root.photo’  
change them in ‘this.photo’

scotty(-:

---

<div class="post-metadata">

**Author:** ![drake0013](https://avatars.discourse-cdn.com/v4/letter/d/0ea827/32.png) [@drake0013](https://forum.kirupa.com/u/drake0013)\
**Post date:** [March 30, 2006, 4:07pm UTC](https://forum.kirupa.com/t/photo-gallery-question/61411/20 "2006-03-30T16:07:40Z")

</div>

thanks, scotty. that fixed it right up.

[Next page](https://forum.kirupa.com/t/photo-gallery-question/61411.md?page=2)