Why does the content spill over and how do I position this under the menu and title?

Question

I was following this tutorial on how to add a scrolling image gallery to a Flash website.
(http://www.republicofcode.com/tutorials/flash/xmlimagegallery/index.php)
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:
http://i429.photobucket.com/albums/qq19/tsujzpie/imagegalleryproblem_01.jpg )
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/qq19/tsujzpie/imagegalleryproblem_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.load("gallery.xml");
          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;
                    callThumbs();
                    createMask();
                    scrolling();
          function callThumbs() {
                    _root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
                    container_mc._x = _root.gallery_x;
                    container_mc._y = _root.gallery_y;
                    var clipLoader = new MovieClipLoader();
                    var preloader = new Object();
                    clipLoader.addListener(preloader);
                    for (i=0; i<myImagesTotal; i++) {
                              thumbURL = myImages[i].attributes.thumb_url;
                              myThumb_mc = container_mc.createEmptyMovieClip(i,           container_mc.getNextHighestDepth());
                              myThumb_mc._y = _root.thumb_height*i;
                              clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);
                              preloader.onLoadStart = function(target) {
                                        target.createTextField("my_txt",target.getNextHighestDepth          (),0,0,100,20);
                                        target.my_txt.selectable = false;
                              preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
                                        target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
                              preloader.onLoadComplete = function(target) {
                                        new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
                                        target.my_txt.removeTextField();
                                        target.onRelease = function() {
                                                  callFullImage(this._name);
                                        target.onRollOver = function() {
                                                  this._alpha = 50;
                                        target.onRollOut = function() {
                                                  this._alpha = 100;
          function callFullImage(myNumber) {
                    myURL = myImages[myNumber].attributes.full_url;
                    myTitle = myImages[myNumber].attributes.title;
                    _root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
                    fullImage_mc._x = _root.full_x;
                    fullImage_mc._y = _root.full_y;
                    var fullClipLoader = new MovieClipLoader();
                    var fullPreloader = new Object();
                    fullClipLoader.addListener(fullPreloader);
                    fullPreloader.onLoadStart = function(target) {
                              target.createTextField("my_txt",fullImage_mc.getNextHighestDepth          (),0,0,200,20);
                              target.my_txt.selectable = false;
                    fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
                              target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
                    fullPreloader.onLoadComplete = function(target) {
                              new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
                              target.my_txt.text = myTitle;
                    fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);
          function createMask() {
                    _root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());
                    mask_mc._x = _root.gallery_x;
                    mask_mc._y = _root.gallery_y;
                    mask_mc.beginFill(0x000000,100);
                    mask_mc.lineTo(_root.gallery_width,0);
                    mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
                    mask_mc.lineTo(0,_root.gallery_height);
                    mask_mc.lineTo(0,0);
                    container_mc.setMask(mask_mc);
          function scrolling() {
                    _root.onEnterFrame = function() {
                              container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)          *Math.PI)*15;
                              if (container_mc._y>mask_mc._y) {
                                        container_mc._y = mask_mc._y;
                              if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc.          _height))) {
                                        container_mc._y = mask_mc._y-(container_mc._height-          mask_mc._height);

Answer 1

You should create a manually movieclip symbol with nothing in it and take a copy of it from the library and place it in the frame where you intend for the gallery to display.  Give it an instance name of "container_mc" and remove the following line from your callThumbs function
_root.createEmptyMovieClip("container_mc",_root.getNextHigh estDepth());
You probably need to do the same for the mask and the full images since they appear to also be created using dynamic mc's.