Skip navigation
Bullock269
Currently Being Moderated

Create a "draggable" image in Flash CS6 Pro

Oct 24, 2013 1:43 PM

Tags: #flash #cs6 #basics

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.

 
Replies
  • kglad
    72,235 posts
    Jul 21, 2002
    Currently Being Moderated
    Oct 24, 2013 3:54 PM   in reply to Bullock269

    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.addEventListener(MouseEvent.MOUSE_DOWN,downF);

    bg_image.addEventListener(MouseEvent.MOUSE_UP,upF);

     

    function downF(e:MouseEvent):void{

        bg_image.startDrag(false,new Rectangle(stage.stageWidth-bg_image.width,stage.stageHeight-bg_image. height,bg_image.width-stage.stageWidth,bg_image.height-stage.stageHeig ht));

    }

    function upF(e:MouseEvent):void{

        bg_image.stopDrag();

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 24, 2013 3:58 PM   in reply to Bullock269

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 24, 2013 9:06 PM   in reply to Bullock269

    You're welcome :)

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points