1 person found this helpful
convert your image to a movieclip and assign it an instance name (in the properties panel, eg bg_image). you can then add 2 event listeners to bg_image. one that detects a mousedown and one a mouseup. in the mousedown listener function apply startDrag() to bg_image and in the mouseup listener function apply stopDrag().
don't look at the code below if you want to figure this out for yourself. otherwise, if you want to be spoon-fed:
bg_image.startDrag(false,new Rectangle(stage.stageWidth-bg_image.width,stage.stageHeight-bg_image.height,bg_image.widt h-stage.stageWidth,bg_image.height-stage.stageHeight));
This is pretty easy but will require some code. Here's a sample file you can look at. (we call the canvas the "Stage").
In this example I made a 200x200 document size with an object that is 400x400. What the code will do is figure out how much larger the image is than the stage. It will then calculate a rectangle size and position where the object is allowed to be dragged.
Example FLA (saved down to CS4)
The code is pretty simple:
// what code to run when the mouse is pressed
// what code to run when the mouse is released or leaves the
// get the extra area we need which it's allowed
// to move in (object size minus the stage size)
var extraWidth:int = int(mygfx.width - stage.stageWidth);
var extraHeight:int = int(mygfx.height - stage.stageHeight);
// use that extra space to make a negative value rectangle
(-1 * extraWidth), // x
(-1 * extraHeight), // y
extraWidth, // width
extraHeight)); // height
To start I converted the big ugly object into a symbol (F8), a MovieClip. I then clicked on that MovieClip and in the properties panel I gave it the instance name "mygfx". This allows me to access that object in code by just using it's name, like you see in the code above. I'm trying to keep it simple.
I attached a couple listeners for the events MouseEvent.MOUSE_DOWN (the user is holding down the left mouse button on the object) and MouseEvent.MOUSE_UP (the user let the left button go). I'm running a different function for those 2 different events as you can see.
The math is easy but the concept of what's going on here is a little harder to explain.
When I created the symbol, I used the default upper left registration point. That means any time you move the object on stage, the x/y position reported in the Info Panel will be the location ot the "upper left" of the object. Check the help section if you don't know what registration points are.
With upper left registration and the object placed at x:0, y:0 on the stage, you can only see 1/4 of the upper left of the image. In this circumstance you can use a special function called "startDrag()" on any display object to allow the user to drag it. To keep it on screen you can specify a rectangular area it must be confined to. That's where the simple math came in.
I subtracted the stages size from the larger image size which told me how many pixels to the left and up the drag was allowed to go. You want to subtract the stage size so you reduce the amount it can move so it won't go off the stage. We know the stage is 200x200 and the object is double at 400x400, so 400-200=200. So I want to make the limiting bounding Rectangle(-200,-200,200,200). That means I can move the object up negative 200 pixels and left negative 200 pixels. If you change the size of the object the math will calculate the correct amount (as long as the image is larger than the stage height/width). Just keeping it easy for now.
Lastly when the user lets the mouse up the dragging is stopped with the display objects "stopDrag()" function.
Thank you Kglad.
thats an awesomely helpfull and thoughtfull response,
thank you very much!
You're welcome :)