Issue with Horizontal Scrollbar and MoveIt MC transitions

Hi,
I am using a MoveIt function to show a horizontal scrollbar in State 1 and then another mc in State 2. The scrollbar is working perfectly when the flash animation loads but after I switch to State 2 and back to State 1 the scrollbar no longer functions. Any suggestions? I would like to make it so that the scrollbar stays in its last position and is always working without reloading. I am attaching the file.

I would greatly appreciate your help. You rule!

**
Here is my code for the scrollbar**
scrolling = function (){
var scrollWidth:Number = scrollTrack._width;
var contentWidth:Number = characters._width;
var scrollFaceWidth:Number = scrollFace._width;
var maskWidth:Number = maskedView._width;
var initPosition:Number = scrollFace._x=scrollTrack._x;
var initContentPos:Number = characters._x;
var finalContentPos:Number = maskWidth-contentWidth+initContentPos;
var left:Number = scrollTrack._x;
var top:Number = scrollTrack._y;
var right:Number = scrollTrack._width-scrollFaceWidth+scrollTrack._x;
var bottom:Number = scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentWidth-maskWidth)/(scrollWidth-scrollFaceWidth);
scrollFace.onPress = function(){
var currPos:Number = this._x;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dy = Math.abs(initPosition-this._x);

        // I changed characters._x with charactersXGoal, which represents
        // the final ease step position of the characters.
        charactersXGoal = Math.round(dy*-1*moveVal+initContentPos);
    };
}
scrollFace.onMouseUp = function(){
    stopDrag();
    delete this.onMouseMove;
};
if (contentWidth<maskWidth){
    scrollFace._visible = false;
    btnUp.enabled = false;
    btnDown.enabled = false;
}else{
    scrollFace._visible = true;
    btnUp.enabled = true;
    btnDown.enabled = true;
}

// When we increase the variable easeSlowness, the movement speed decreases.
easeSlowness = 10;

// I introduced the variable widthBetweencharactersAndNextStep which represents 
// the numerical difference between the actual characters._x and the next ease position.
widthBetweencharactersAndNextStep = 0;

// I used the onEnterFrame function because the movements of the scrollFace
// and the characters can not be synchronized when we do a scroll ease.
onEnterFrame = function() {

    // widthBetweencharactersAndNextStep : description is above.
    widthBetweencharactersAndNextStep = (charactersXGoal - characters._x)/easeSlowness;
    
    // We add this difference to the characters._x, the result is the characters next ease step.
    charactersXNextEaseStep = characters._x + widthBetweencharactersAndNextStep;

    characters._x = Math.round (charactersXNextEaseStep);

}

};
scrolling();

and the transitions
Viewing_Area_1.onEnterFrame = function()
{
Viewing_Area_1._x;
Viewing_Area_1._y;
speed2 = 10;
function moveIt(endX, endY)
{
Viewing_Area_1.onEnterFrame = function()
{
this._x += (endX - this._x) / speed2;
this._y += (endY - this._y) / speed2;
if (Math.abs(this._x - endX) == 1 && Math.abs(this._y - endY) == 1)
{
this._x = endX;
this._y = endY;
}
};
}
moveIt(0,0);
};
Viewing_Area_2.onEnterFrame = function()
{
Viewing_Area_2._x;
Viewing_Area_2._y;
speed1 = 5;
function moveIt(endX, endY)
{
Viewing_Area_2.onEnterFrame = function()
{
this._x += (endX - this._x) / speed1;
this._y += (endY - this._y) / speed1;
if (Math.abs(this._x - endX) == 1 && Math.abs(this._y - endY) == 1)
{
this._x = endX;
this._y = endY;
}
};
}
moveIt(0,-1200);
};
stop();