loading external images into array

[geminity]

hey guys

Sorry for the long post, but I've been fighting this for days and i am sure there is a simple little solution that keeps on eluding me... The source file is at http://www.imaginegreatthings.com/index10.zip. To test, download and unzip the .fla. Then create a folder "photos" in the same directory. The folder photos has to have at least 8 images called img0.jpg through img7.jpg.

Here is what I'm trying to do:
The site is a gallery with several albums, and several sets of thumbnails. The idea is to externally load all the images, so that you can view img1 while img2 is still loading. After page 1 is finished loading, page 2 would then load, etc.

Everything works except the image doesn't load into the thumbnail movie clip. Can someone please take a look at the code, I've been fighting it for days now...

Thanks in advance!! Please contact me with questions!

Details:
The site will contain a multiple galleries of images, for example, gallery 1 - weddings, gallery 2 - children, gallery 3 - model. In each gallery, there are a couple of pages of thumbnails of externally loading images. So on page 1 of wedding gallery, there are 4 thumbnails, and on page 2 there are also 4 thumbnails. On mouseover of a thumbnail, the big image appears in the "img" movie clip. The idea behind this is to externally load all the images, so that you can view img1 while img2 is still loading. After page 1 is finished loading, page 2 would then load, etc.

Logic behind coding: First, we externally load the image into the invisible big image movie clip (called "img"). The loading bar shows in the corresponding thumbnail (thumbnails are named "img0", "img1", "img2", "img3"). After the big image is done loading, we load the same image into the thumbnail movie clip. Then we put a button on that thumbnail, so that on mouse over, the big image becomes visible.

I made an output window to see the order in which everything loads. It HAS TO load in the following order:

p1 img0 loaded
p1 thumb0 loaded
p1 thumb0 showing

p1 img1 loaded
p1 thumb1 loaded
p1 thumb1 showing

p1 img2 loaded
p1 thumb2 loaded
p1 thumb2 showing

etc.
then loading in the same order on p2.


Below is the explanation of the site structure:

_root contains "gals" (galleries)
"gals" contain "wedp1", "wedp2" (stands for wedding page 1, wedding page
2)
"wedp1" contains "img" (big image) and "img0", "img1", "img2", "img3",
(four thumbnails)


Below is the explanation of the code:

In each gallery, I would create an array of thumbnails for each page.
Right now, I'm only working with two arrays, wedArr0 for wedding page 1
and wedArr1 for wedding page 2. This is the code I put in "gals". Note:
here I have 16 thumbnails in each array, but for simplicity I'm working
with 4 for now.

Code: Select all

wedArr0 = new Array(wedp1.img0, wedp1.img1, wedp1.img2, wedp1.img3,
wedp1.img4, wedp1.img5, wedp1.img6, wedp1.img7, wedp1.img8, wedp1.img9,
wedp1.img10, wedp1.img11, wedp1.img12, wedp1.img13, wedp1.img14,
wedp1.img15);

wedArr1 = new Array(wedp2.img0, wedp2.img1, wedp2.img2, wedp2.img3,
wedp2.img4, wedp2.img5, wedp2.img6, wedp2.img7, wedp2.img8, wedp2.img9,
wedp2.img10, wedp2.img11, wedp2.img12, wedp2.img13, wedp2.img14,
wedp2.img15);

wedp1 has 2 layers - big image ("img") and thumbnails (img0 through
img3)
same applies to wedp2.


Each thumbnail has this code, this one specifically is "img0" on wedp1:

Code: Select all

stop();
this.createEmptyMovieClip("thumb", 2);
thumb._visible=false;
thumb.createEmptyMovieClip("child",3);

function preload(url, mc)
//big image calls this function to show preloading in this thumbnail
{
          this.createEmptyMovieClip("controller_mc", 1);
          mc.loadMovie(url);
          controller_mc.onEnterFrame = function()
          {
                  var bl = mc.getBytesLoaded();
                  var bt = mc.getBytesTotal();
                  if (bt > 4) { // if the movie has started loading
                          var percentage = Math.round(bl / bt * 100);
                          loadBar._height = loadBarHousing._height*(percentage / 100);
                          if (bl >= bt) { // the movie has finished loading
                         _root.out.txt+="p1 img0 loaded\n";

			//THE FOLLOWING LINE DOESN'T SEEM TO WORK!!!
			_root.gals.wedp1.img0.thumb.child.loadMovie("photos/img0.jpg");

                         _root.out.txt+="p1 thumb0 loaded\n";

                         thumb._width=40;
                         thumb._height=40;
                         thumb._visible = true;

                         _root.out.txt+="p1 thumb0 showing\n";
                         gotoAndStop(2);  //go to frame 2, where there is a button
                         delete this.onEnterFrame; // delete the method
                         }
                  }
          };
}

In frame 2 of each thumbnail, there is a button, which has these
actions:

Code: Select all

on (rollOver) {
         for(i=0; i<=150; i++)
                 _parent.img.myArr[i]._visible = false;  //make all big imgs invisible
                 _parent.img.imageholder0._visible = true;       //make the current one visible

}

Here's the code for the big image ("img"):

Code: Select all

myArr = new Array();

for (i=0; i<=150; i++) //there will eventually be 150 images total
{
          myArr[i] = this.createEmptyMovieClip("imageholder"+i,i)
	  myArr[i].createEmptyMovieClip("child", i);
          myArr[i]._visible = false; // try to hide the movie clip
          if (i < 4){
          //for the first four thumbnails, call the preload function in each thumbnail

		_root.gals.wedArr0[i%4].preload("photos/img"+i+".jpg",myArr[i].child);

          }
          else if ((i < 8) and (i>=4)){

		_root.gals.wedArr1[i%4].preload("photos/img"+i+".jpg",myArr[i].child);
          }
          else if ((i < 12) and (i>=8)){

		_root.gals.wedArr2[i%4].preload("photos/img"+i+".jpg",myArr[i].child);
          }
}

[Webforumz Staff]

<s>I don't see that you are calling preload(url, mc) for each thumbnail image anywhere?

You will need to loop through all your images and their urls and call the appropriate forum in each thumbnail mc.</s>

Oops...you are...let me figure this out...

[Webforumz Staff]

I think it may have something to do with this...

Code: Select all

         myArr[i] = this.createEmptyMovieClip("imageholder"+i,i)
		 myArr[i].createEmptyMovieClip("child", i);

So these are created inside your main 'img'
but they are path to them is passed to the preload function:
_root.gals.wedArr0[i%4].preload("photos/img"+i+".jpg",myArr[i].child);

so when it gets to preload, it believes the path that it should load the preview images to is:
_level0.gals.wedp1.img.imageholder0.child
which doesn't exist!