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:
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:
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:
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:
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);
}
}
Submit Your Article
Announcements
Contact
