I was following this tutorial on how to add a scrolling image gallery to a Flash website.

From what I understand from this tutorial, it is just a matter of copying the Actionscript code and pasting it onto the timelines then making modifications on the XML.
(kindly see a screenshot of timeline layers I made and as to where I put the Actionscript code:

I pasted the code onto the blank keyframe labeled "Gallery"...

But all I get is this weird effect when I click on the button for the gallery...
(kindly see a screenshot of it here: http://i429.photobucket.com/albums/q...problem_02.jpg)

When you put a blank keyframe on a timeline, any content put in there is supposed to only be contained in that very frame, right? How come then that - whenever the gallery button is clicked on - the content from that section spills out onto the other sections even when I click on other button for the other areas?

I just really couldn't think why this is happening - any reason why this is so?
And how do I position the gallery right under the section header and menu bar?

Here is its AS2 code, by the way:
import mx.transitions.Tween;
import mx.transitions.easing.*;

var myGalleryXML = new XML();
myGalleryXML.ignoreWhite = true;

myGalleryXML.onLoad = function() {
_root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
_root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
_root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
_root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = myImages.length;

_root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
_root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

_root.full_x = myGalleryXML.firstChild.attributes.full_x;
_root.full_y = myGalleryXML.firstChild.attributes.full_y;



function callThumbs() {