StartDrag constrain to Rectangle

Question

hi there
please can somoe help with this little problem, I have a demo file that I am trying to created a constraint to a rectangle. I have the startDrag working and I am trying to constrain a square to the movie size of 600x400.
I have been searching online help files but I can not for the life of me get it to work, would someone beable to put me out of my misery. I have attached the demo file I am working with but I will also post my script here for thoughs who prefer that.....going crazy, can any help, does it have to be this difficult...aarrrghh!!
this is what I thought I could simply add
animation", false, 0, 0, 300, 300);
but know joy....anyone help   : (
my code:
////Button Listeners/////////////
// BtnNav listeners
btnNav.addEventListener(MouseEvent.ROLL_OVER, btnNavOver);
btnNav.addEventListener(MouseEvent.ROLL_OUT, btnNavOut);
btnNav.addEventListener(MouseEvent.CLICK, btnNavDown);
// change: made the graphic "red shape" a movieClip and made redShape and closeBtn a movieClip
// added this listener to that button...
animation.redShape.closeBtn.addEventListener(MouseEvent.MOUSE_UP,closeUp);
////for the click and drag
animation.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
animation.addEventListener(MouseEvent.MOUSE_UP,dragStop);
///////button 1 function ///////////
// BtnNav Over function
function btnNavOver(event:MouseEvent):void {
btnNav.gotoAndPlay("over"); // go into btn1 movieclip and play the over frame label
// BtnNav Out function
function btnNavOut(event:MouseEvent):void {
btnNav.gotoAndPlay("out"); // go into btn1 movieclip and play the out frame label
//animation.stopDrag();
// BtnNav Down function
function btnNavDown(event:MouseEvent):void {
// change: tell the movieClip animation to play...
animation.play();
//this.gotoAndPlay("animation");
// play any frame label in any movieclip
// change: added this function for the close button to have it play the animation clip...
function closeUp(event:MouseEvent):void {
animation.play();
/////for the click and drag////
function dragStart(event:MouseEvent):void {
    event.currentTarget.startDrag();
//("animation", false, 0, 0, 300, 300);
function dragStop(event:MouseEvent):void {
    stopDrag();

Answer 1

I'm afraid it does not get simpler than this (AFAIK).
Here's the (stripped down version) you could use:
import flash.geom.Rectangle;
////Button Listeners/////////////
////for the click and drag
animation.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
animation.addEventListener(MouseEvent.MOUSE_UP,dragStop);
/////for the click and drag////
function dragStart(event:MouseEvent):void {
    event.currentTarget.startDrag( false, new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ) );
function dragStop(event:MouseEvent):void {
    stopDrag();
The rectangle created defines the bounds in which the movieClip "animation" is dragged.
The registrationpoint of the movieClip "animation" will remain within these bounds. If you want the whole clip to remain within these bounds easiest is to have the registrationpoint in the middle of the clip and defin the rect like:
    var d:DisplayObject = DisplayObject( event.currentTarget );
    var r:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
    r.inflate( -d.width / 2, -d.height / 2 );
    event.currentTarget.startDrag( false, r );
Just some handy methods of the Rectangle object to inflate (or shrink) a rectangle.