The code on the previous page was just a setup to the real code that is, coincidentally, on this page. Let's take a look at the thumbnails_fn function that I briefly mentioned towards the end of the last page:

Before going through the code line-by-line, let me explain what this function does. The thumbNailScroller function, as its name implies, helps scroll the thumbnails when the mouse moves over the left or right boundaries. Most of the above code lies in determining when to start and stop the scrolling:

this.createEmptyMovieClip("tscroller", 1000);

I'm creating a new, empty movie clip called tscroller at a depth of 1000.

scroll_speed = 10;

The variable scroll_speed controls  how fast all of the thumbnails scroll left or right.

tscroller.onEnterFrame = function() {

I'm specifying the onEnterFrame of the newly created tscroller movie clip. If you recall, onEnterFrame executes any code contained within it repeatedly unless you explicitly delete the onEnterFrame.

if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {

The above if condition checks to make sure that the thumbnail scroller works only when our mouse is contained within the vertical (y) constraints of the thumbnail_mc movie clip.

The following diagram shows the constraint imposed by _root._ymouse >= thumbnail_mc._y. Anything beyond the top border of the thumbnail is fair game:

But, I also include an extra constraint to make sure that the thumbnails don't scroll when your mouse is below the thumbnail such as the Previous and Next buttons. That is fixed by the _root._ymouse<=thumbnail_mc._y+thumbnail_mc._height code.

Thumbnail_mc._y gives the numerical value of the top border of your thumbnails, and thumbnail_mc._height gives you the total height of your thumbnails. The total y position then, is the sum of both the y position of the top thumbnail border and the total thumbnail height.

Each of the above two constraints by themselves are not very practical. But, both of them combined with the && operator produces just the right vertical boundary I need, as seen by the combination of the blue and yellow rectangles as the green rectangle shown below:

The next course of action would be to limit the horizontal range of movement. You wouldn't want to have the thumbnails scroll when your mouse cursor is well to the left or right of the actual photo gallery area!

The right boundary of our horizontal scrolling is determined by:

(_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))

I check for two things. First, I check to see if the mouse cursor is 40 pixels to the left of the right-most boundary of our hit_right movie clip.

Second, I make sure that the thumbnail_mc movie clip is hitting hit_right. Even though, due to the mask, it looks as if all of the thumbnails are neatly contained within the viewing area, in reality, the thumbnails extend well towards the right-end of the screen provided there are enough images.

The hitTest makes sure that the thumbnail_mc still is hitting the hit_right movie clip. In other words, it makes sure there are still images left for us to scroll. I wouldn't want you to keep scrolling indefinitely after all of the thumbnails have left the viewing area!

The complement of this is the boundary for the left side of our thumbnail scroller:

(_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))

I do the same thing as I did for the right boundary, except I change a few signs and movie clip references. Like before, I check to make sure that the mouse is within a reasonable area on the left side before the scrolling is invoked, and I also make sure that there are images left to scroll by using the hitTest function.

thumbnail_mc._x -= scroll_speed;

If both the vertical and horizontal right boundary conditions are met, that means we are interested in scrolling our images to the left. Therefore, I have the code set to move thumbnail_mc in the horizontal direction at a speed determined by the scroll_speed variable.

thumbnail_mc._x += scroll_speed;

Likewise, if both the vertical and horizontal left boundary conditions are met, I scroll the thumbnail_mc movie clip to the right at the speed determined by scroll_speed.

if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {

if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {

thumbnail_mc._x -= scroll_speed;

} else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {

thumbnail_mc._x += scroll_speed;

}

} else {

delete tscroller.onEnterFrame;

}

The structure of this if statement is something that I have not used in any of my tutorials before. It is an if - else if form. Normally, there would be an if statement and an else statement, but I wanted to have one extra condition for executing code.

This is a nicer way of combining to if statements together, and you would suffer no loss in functionality if you decided to use two if statements instead.

delete tscroller.onEnterFrame;

I check to see if the mouse cursor is within the vertical area of the thumbnail, and if the mouse cursor is not there, that means that the user has scrolled and moved his/her mouse cursor away from the scrolling area.

Since having onEnterFrame loop continuously can be taxing on the CPU, it is good to delete them. Since our thumbNailScroller() function is called each time you hover over a thumbnail, a new empty 'tscroller' movie clip is created with a new onEnterFrame also being initiated. In other words, the deletion is only in effect until you call the thumbNailScroller() function again.

On the next page, I will do a lightning round summary of the six pages you've clobbered through already!

page 6 of 7