I will show you now the following things that are part of the thumbnails' functionality: Big image preloading
Disabling the thumbnails while the big image is preloading Selecting the right description for the chosen image
function thumbClickable():Void { currentThumbnail.onPress = function() { bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth()); target = displayBigImage.imageHolder_mc; bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg"; whatIsLoading = "big"; disableThumbs(); loader.loadClip(bigImagePath, target); if (clickedGallery>0) { var descPosition:Number = 0; for (i=0; i<clickedGallery; i++) { descPosition += imagesInGallery[i]; } descPosition = descPosition+Number(bigNumber)-1; imageDesc = descriptions[descPosition]; } else { imageDesc = descriptions[Number(bigNumber)-1]; } descText.text = imageDesc; }; currentThumbnail.enabled = false; }
The first thing that can be noticed is that nearly all the code inside the thumbClickable() function is stored inside the current thumbnail's onPress event handler function definition. This is to be expected, because the onPress event handler tells Flash what to do when the user click on a thumbnail.
The first that you have to do is make Flash extract the number of the big image that is going to be preloaded once the user clicks on a thumbnail:
bigNumber = this._name.substr(9);
This is done in exactly the same manner as it was for the thumbnails (explained on the previous page), so I won't repeat myself here.
Next, the big image holder movie clip is pulled out of from the Library and attached to the imagesHolder empty movie clip using the attachMovie() method which you now well by now: displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc",
imagesHolder.getNextHighestDepth());
Of course, once again, a variable is used as a shortcut to point to the newly attached movie clip: displayBigImage. As a reminder, this movie clip contains:
1. The white background with thin black outline,
2. The empty movie clip inside which the big JPEG image will be loaded and 3. The dynamic text field which will display the percentage-based preloader.
And so the empty movie clip (mentioned under no.2 above) is defined as the target for loading the external JPEG and will be passed as such to the MovieClipLoader later:
target = displayBigImage.imageHolder_mc;
The path to the big JPEG image is defined in a way similar to those of the thumbnails: bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
The variables whichGallery and bigNumber are used to guide Flash to the right folder and right image. And the path is stored inside the bigImagePath variable.
Just like for the thumbnails before, you have to tell Flash what you're loading here too: whatIsLoading = "big";
And the thumbnails have to be disabled — this will stay so throughout the preloading process and also while the big image is being displayed. They will be re-enabled only once the user has clicked on the big image and it has disappeared, showing the thumbnails again. This is done through the disableThumbs() function which I will explain to you later.
disableThumbs();
loader.loadClip(bigImagePath, target);
The above is done using the loadclip() method of the MovieClipLoader object, exactly in the same manner as was done for the thumbnails. Only the path and the target empty movie clip are different.
The next chunk of code is the one where the description for the selected big image is being searched for, found and displayed in the big text field below the image:
if (clickedGallery > 0) { var descPosition:Number = 0; for (i=0; i<clickedGallery; i++) { descPosition += imagesInGallery[i]; } descPosition = descPosition+Number(bigNumber)-1; imageDesc = descriptions[descPosition]; } else { imageDesc = descriptions[Number(bigNumber)-1]; } descText.text = imageDesc;
The search for description is placed inside an if/else conditional statement. Basically, this conditional logic boils down to this: if the user has clicked any gallery section than the first one (clickedGallery > 0), a for loop will be initiated for calculating the precise position of the selected image's description. If the first gallery section is selected by the user, a much simpler search is performed. I will explain the first case in more detail noe.
First there is the descPosition variable, whose initial value is 0. This variable will hold the number which will be the image's description position inside the descriptions array. var descPosition:Number = 0;
Then, the for loop is initiated. The condition for the loop to exist is that i, set to zero, must be lesser than the value of clickedGallery. Remember, clickedGallery is a variable that holds the number of the clicked gallery.
for (i=0; i <clickedGallery; i++) { descPosition += imagesInGallery[i]; }
Every time a loop iteration is made, the value of descPosition is updated. The value on the equation's right side is added to the descPosition's current value, through the use of the addition assignment (+=) operator. What's on the right side is a construct that is pulling values out of the imagesInGallery array. All this is done in order for Flash to be able to find and display the proper image description.
It will be best explained by an example. In my gallery example, suppose the user has clicked on the sixth thumbnail in the third gallery section (it is circled in red below, while the gallery
section is in rollover state, just for the purpose of showing it here). The text for this image should be "Empty silos."
Since the user has clicked the third gallery, the value of clickedGallery is 2, because they start from zero. The first iteration (when i equals 0) goes like this:
descPosition += imagesInGallery[i]; 0 += imagesInGallery[0];
0 += 5; 5
So the value of descPosition is now 5. Why? Because the array imagesInGallery stores values which correspond to the number of images in each gallery section. In my example, they are as follows, from the first to last gallery section: 5,6,19,9,7 (corresponding to architecture, essays, factory, monochrome and nature sections, respectively). The point is that you have to arrive to the gallery section which the user has selected.
Ok, here comes the next loop iteration, when i equals 1. descPosition += imagesInGallery[i];
5 += imagesInGallery[1]; 5 += 6;
11
The value of descPosition is now 11. Why? Simple. Because the loop has come to en and. Once i has reached the value of 1, the next iteration won't be performed because the condition won't validate any more: when i equals 2, the condition i < clickedGallery is false, because clickedGallery equals 2, in this particular example.
And after that, the next line is executed, which updates the value of descPosition. Flash has arrived at the third gallery section, but now it must find the description inside this particular section. This boils down to adding a number until you reach the matching description.
Still using the example above, the equation would be calculated like this: descPosition = descPosition+Number(bigNumber)-1;
descPosition = 11+Number(6)-1; descPosition = 11+6-1;
descPosition = 16;
First, bigNumber had to be converted into a numerical value (from a String type to a Number type), because it was a simple text character, not a numerical value, since it was pulled out of current big image's name.
Then, one is substracted from it, since I chose to give the thumbnails (and subsequently, the big images too) the numbers starting from 1 and not 0.
And there you go! The right description is really chosen: it is the 17th description in the
descriptions array, placed at number 16, because the counting inside an array starts from 0. In this case, it is "Empty silos." And that's what precisely the next line of code is about: pulling out this description from the descriptions array and putting it inside the imageDesc variable. imageDesc = descriptions[descPosition];
And now for the else part of the conditional statement: } else {
imageDesc = descriptions[Number(bigNumber)-1]; }
It is used when the user has clicked on the first gallery section. No looping is necessary here, because this section's descriptions are right at the beginning of the descriptions array. And that's why the image description is pulled out from the array in a single line of code.
The description of the big image is subsequently displayed in the big dynamic text field below it: descText.text = imageDesc;
That's it for the thumbnail's onPress event handler. The one line of code that is executed outside this event handler function, but inside the thumbClickable() function is the following:
currentThumbnail.enabled = false;
...which disables the thumbnail until all of them are loaded for the current gallery section. And here come now the two functions that disable and enable the clickability of the thumbnails. The first one, disableThumbs() serves to turn off the clickability of the thumbnails. This function is invoked whenever the user clicks on a thumbnail and the big image starts to load.
function disableThumbs():Void { for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = false; }
}
How does it work? It uses a for loop to loop through all the thumbnails. It will loop as many times as there are thumbnails in the selected gallery section (i < howManyImages). Then, they are disabled one by one via turning their enabled property to false. Each thumbnail is accessed through the expression thumbsDisplayer["thumbnail"+(i+1)]. Why i+1? Well, again, I repeat, I have named the thumbnails thumbnail1, thumbnail2, etc, while the starting value of i in the loop is 0.
The function that restores the clickability of the thumbnails, enableThumbs(), works in the exact same way, the only difference being the enabled property turned to true this time. This function is invoked either when the user clicks on a gallery section button in the menu and all the thumbnails have been successfully loaded or when the big image was clicked, closed and the thumbnails for the selected section have appeared again.
function enableThumbs():Void { for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = true; }
}
Allright, that's it for the thumbnails. But what about the big image? It has to be made clickable, for the user to be able to close it once she or he wishes to return to the thumbnails. That's what the bigClickable() function is here for.
Top of page