myAlignment = new Object();
Stage.addListener(myAlignment);
myAlignment.onResize = function() {
        myFrameAdjust();
};

In the function, myFrameAdjust we can write all the things we want to happen when the browser window is adjusted. We could write all the adjustments in the onResize method, but we will want to trigger the same adjustments from other events so let’s make a separate function.

function myFrameAdjust() {
        //stretch frameborder to bottom of the Stage;
        _root.borderV._height=Stage.height;
        //re-scale lefthand doc background to fill frame;
        _root.leftDoc.bg._height=Stage.height;
        _root.leftDoc.bg._width=_root.borderV._x;
        //re-scale righthand doc background to fill frame;
        _root.rightDoc.bg._height=Stage.height;
        _root.rightDoc.bg._width=Stage.height-_root.borderV._x;
        _root.rightDoc._x=_root.borderV._x;
}

OK, that looks like a lot of code, but it should all be quite straight forward. Both the leftDoc background and the rightDoc background are stretched to the full height of the browser window, as is the frame border. Notice that the Stage objects height attribute is written without an underscore. I assume this is because height is a read-only attribute for the Stage Object whereas _height can be set for MovieClips.

Stage.height
LeftDoc._height

The widths are calculated as the distance from 0 to the frameborder (left-hand side) and the distance from the frameborder to the right-hand side of the stage (Total Stage width minus frame border _x position).

Finally the right-hand doc is moved on the x axis to align with frame border.

We’ll now add colour to the background so we can see the effect more clearly.

// Set frame colours
leftColor = new Color("_root.leftDoc.bg");
leftColor.setRGB(0xCCCC99);
rightColor = new Color("_root.rightDoc.bg");
rightColor.setRGB(0x99CCFF);

In HTML we can express the width of frames as percentages of the page width. The Stage Object makes this possible in Flash too, although we have to work out our own percentages.

Add this line to the start-up properties

widthPercent=40;

We’ll use this to set the initial position of the frameborder.

Add this line as the first line of the myFrameAdjust function.

function myFrameAdjust() {
        _root.borderV._x = (Stage.height/100)*widthPercent;
        ...}

Stage.height/100 gives us 1% of the stage width, then we simply multiply by 40.

myFrameAdjust may and may not be called when you preview your movie. To make sure it is called on startup simply add the line

myFrameAdjust();

to the end of your script page.

Test the movie and re-scale the window, either in Flash or in a browser. The two sides of the frame border should maintain thier size ratio, 40:60

Next we’ll make the frame border draggable.

If you edit the frameborder (edit in place) it should contain a button symbol. Add these actions to the button

on (press) {
        startDrag(this, false, 0, 0, Stage.height, 0);
        _root.myMouseDown = true;
}
on (release, releaseOutside) {
        stopDrag();
        _root.myMouseDown = false;
        _root.myFrameAdjust();
}

Now you should be able to click on the frame border and drag it from side-to-side, but not up and down and when you release it, it will snap back to it’s original position, as onRelease triggers the myFrameAdjust function.