Defining the functionality of the menu section buttons: Enabling the display of the roll over and roll out states and defining which thumbnails shall be loaded

Here's the enableButtons() function which has numberOfGalleries passed as a parameter to it (which is of the Number type) and it does not return a value, hence the Void keyword:

function enableButtons(numberOfGalleries:Number):Void { for (i=0; i<numberOfGalleries; i++) {

pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i]; pressedButton.onRollOver = function():Void { this.gotoAndStop(2); }; pressedButton.onRollOut = function():Void { this.gotoAndStop(1); }; pressedButton.onPress = function():Void { removeMovieClip(thumbsDisplayer); removeMovieClip(displayBigImage); tracker = 0; thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth()); clickedGallery = Number(this._name.substr(13)); howManyImages = imagesInGallery[clickedGallery]; whichGallery = galleryNames[clickedGallery]; descText.text = galleryIntros[clickedGallery]; currentRow = 0; currentColumn = 0; loadThumbnail(); }; } enableGalleryNavigation(); }

Almost all the code of the enableButtons() function is wrapped in a for loop which serves to pass through all the gallery section buttons and define their onRollOver, OnRollOut and onPress event handler functions.

Now you see how important the numberOfGalleries variable is — without it, you wouldn't be able to know the number of gallery section buttons.

The first thing that needs to be done is to set up another shorcut: a variable which will point to each button in your gallery menu as the loop progresses: pressedButton.

pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];

Of course, Flash will process the expression between the angled brackets: [ and ], which will result in galleryButton0, galleryButton1, galleryButton2, etc.

Now comes the definition of the onRollOver event handler function, which gets executed when the user rolls her mouse over a button in the gallery section menu:

pressedButton.onRollOver = function():Void { this.gotoAndStop(2);

};

Basically, what happens is that the movie clip's (which acts as a gallery section button) playhead gets sent to the second frame, where there is a different background color, to accentuate the rollover effect.

After that, the rollOut event handler function is defined, which gets run once the mouse has been pulled out of the button area. This returns the movie clip's playhead to the first frame, putting it back to its primary state.

pressedButton.onRollOut = function():Void { this.gotoAndStop(1);

};

NOTE In both event handler functions, the keyword this points to the gallery section button movie clip itself, because it is contained inside the functions (inside the curly braces). Thanks to this, there is no need to specify the full path to the movie clip.

The diagram below explains this functionality well. The gallery section button has a blue

background in the first frame and a crimson one in the second frame, when the onRollOver event has been fired and its event handler function executed.

And now, a very important event handler function comes up: onPress, which governs what actions will be taken when the user has clicked a button. What will happen is the following:

1. Any previously existing thumbnails and big image will be removed. 2. The tracking of the number of thumbnails will be reset to zero.

3. A new empty movie clip which will hold all the section's thumbnails will be created. 4. The following information will be retrieved and stored: what gallery section was selected,

how many images are in it, the name (title) of the section and its description.

5. The variables which keep track of the rows and columns into which the thumbnails are placed will be reset to zero.

6. The function for loading the section's thumbnails will be invoked. pressedButton.onPress = function():Void { removeMovieClip(thumbsDisplayer); removeMovieClip(displayBigImage); tracker = 0; thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth()); clickedGallery = Number(this._name.substr(13)); howManyImages = imagesInGallery[clickedGallery]; whichGallery = galleryNames[clickedGallery]; descText.text = galleryIntros[clickedGallery]; currentRow = 0; currentColumn = 0; loadThumbnail(); };

Any thumbnails or big images that may have been loaded before are removed with the removeMovieClip() method. If there weren't any present, it doesn't matter — nothing will happen. This is done by removing the placeholder movie clips that are created when the user clicks on a gallery section button or a thumbnail.

removeMovieClip(thumbsDisplayer); removeMovieClip(displayBigImage); Then, the tracker is reset to zero.

tracker = 0;

And the thumbsDisplayer empty movie clip is created from scratch, using the

createEmptyMovieClip() method. It will hold all the thumbnails of the gallery section that was selected by the user. This movie clip is created inside the imagesHolder movie clip, the empty movie clip which you have created on the stage during the first stages of this tutorial. You could have created this latter one dynamically via ActionScript too, but I wanted things to be a little more diverse and simplified. Not everything needs to be done through coding.

thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());

There are two parameters used in the createEmptyMovieClip() method:  The first is the instance name of the newly made empty movie clip.

 The second one is the depth level into which the new movie clip is placed. Again, the best thing to do is to use the getNextHighestDepth() method because with it, Flash automatically assigns the first free depth to the new movie clip. And of course, this depth level is the first free inside the imagesHolder movie clip, the one inside which the new empty movie clip is being created.

Now the clickedGallery variable gets its value assigned. This value will be the identification number of the gallery section movie clip which was clicked. Since it is being extracted from the movie clip's instance name, you need to pass it through the Number() method to convert the character into a number.

clickedGallery = Number(this._name.substr(13));

The substr() method of the String object is used to do the extraction, since the instance name of the movie clip is a string (text) value. It goes on like this: suppose that the user clicked on the fourth gallery section button (which is the monochrome section in my gallery example). The instance name of the clicked movie clip will be galleryButton3. Yes, there is the number 3 at the end of the instance name, because, as you remember, in the for loop which is used to create these buttons, the starting value is always zero. The extraction would proceed like this (this is pseudo-code, not real one, just to show you how this process goes):

clickedGallery = Number(this._name.substr(13)); clickedGallery = Number("galleryButton3".substr(13)); clickedGallery = Number(3);

clickedGallery = 3;

The first parameter of the substr() method is the starting point of extraction. The first character in a string (a piece of text) has the position 0 (zero).

The second parameter is the number of characters to be extracted (the length of the new, extracted string). And if it is omitted (like above), then all the characters from that point until the

end of the string will be extracted. So it doesn't matter if your button has the name

galleryButton3, galleryButton42 or galleryButton128, the number will always get extracted properly, because the extraction starts at position 13 and gets any remaining characters in the string from that point on.

After the extraction has been done, the result is converted to a mathematical value from a plain text character.

And this final value is used three times after that: howManyImages = imagesInGallery[clickedGallery]; whichGallery = galleryNames[clickedGallery]; descText.text = galleryIntros[clickedGallery]; Specifically, It is used to:

1. See how many images are in the selected gallery section (howManyImages).