Create a "draggable" image in Flash CS6 Pro

Question

Hi folks,
Firstly, whilst the answer would be great, i'm also hoping for people to point me in the right direction for finding these answers myself...
I'm new to CS6, and relatively innexperienced with flash in general (certainly new to AS3).
I'm working my way through a project, and right now, i'm trying to create a background image or layer, that that is bigger than my canvas, the idea being that you can click, and drag the mouse to look around it, but NOT pull the edges of the image over the canvas (i'm sure theres a more appropriate word than canvas too).
My main issue is that i'm struggling with terminology, so whilst I know what i want to acheive, putting it into words that experts understand, or gives relevant google hits, is proving to be an issue.
Hope someone can help.
Tim.

Answer 1

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
mygfx.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDownF);
// what code to run when the mouse is released or leaves the
stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUpF);
function handleMouseDownF(e:MouseEvent):void
          // 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
          mygfx.startDrag(false,new Rectangle(
                    (-1 * extraWidth), // x
                    (-1 * extraHeight), // y
                    extraWidth, // width
                    extraHeight)); // height
function handleMouseUpF(e:MouseEvent):void
          mygfx.stopDrag();
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.