A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 23

Thread: Drag and Drop OS-style

  1. #1
    Member
    Join Date
    Aug 2009
    Posts
    41

    resolved [RESOLVED] Drag and Drop OS-style

    I'm looking into having a interface using multiple windows which you can drag by pulling the dragbar around.

    Each window would be a movieclip called *****_win and inside would be a dragBar that the mouse has to pull around to move the window.

    I have searched a lot on google, and decided to end up asking here.

    1) All the code I used so far did not have any borders. (The borders would be the stage, not an image).
    2) Whenever I dragged an object, it would drag the whole window.
    3) If the cursor left the window while dragging (which is does a lot), I have to drag it again.

    Anyway how I can do an OS-like way of dragging a window?
    Last edited by Anthonie Goes; 09-24-2009 at 02:00 PM.

  2. #2
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    If you'll attach a source file, I may be able to help out with this.

  3. #3
    Member
    Join Date
    Aug 2009
    Posts
    41
    I don't truly have a source file.

    I've been jumping from tutorial to tutorial, but haven't settled with any really.

  4. #4
    Member
    Join Date
    Aug 2009
    Posts
    41
    How would I go around using this tutorial for multiple movieclips?

    http://danao.org/2007/12/03/drag-n-drop-in-as3/

  5. #5
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Well I'm going to take a stab at what your going for here.

    You want to do a drag and drop, and you want to use numerous movieclips but want minimal code. Is this correct? If so, try this:

    name all your movieclips with this at the beginning of the name "dmc_", and use a number after the underscore: I.E. - dmc_1, dmc_2, dmc_3 Then use this code:

    Code:
    for (var i:uint = 1; typeof(this["dmc_"+i]) != "undefined"; i++) {
    	this["dmc_"+i].addEventListener(MouseEvent.MOUSE_DOWN, startD);
    	this["dmc_"+i].addEventListener(MouseEvent.MOUSE_UP, stopD);
    }
    function startD(evt:MouseEvent):void {
    	evt.currentTarget.startDrag(false);
    	this.setChildIndex(MovieClip(evt.currentTarget), numChildren - 1);
    }
    function stopD(evt:MouseEvent):void {
    	evt.currentTarget.stopDrag();
    }
    does this accomplish what your after? Thanks.

  6. #6
    Member
    Join Date
    Aug 2009
    Posts
    41
    Yes, almost.

    Every movieclip inside has a movieclip called dragBar. (Which could be dragBar_1 or dragBar_2 corresponding to the number of the movieclip.)

    Kind of like an operating system, I only want the object to be dragged by that 'bar'.

    Also, how would I go around making the stage's borders into dragging borders? I tried stage.height and stage.width, and it worked for the left and top border, but the bottom and right border were just open.

    Thanks a lot,

    Anthonie Goes

  7. #7
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    place a clip inside your clip called "aClip" then use this code.

    Code:
    import flash.geom.Rectangle;
    for (var i:uint = 1; typeof(this["dmc_"+i]) != "undefined"; i++) {
    	this["dmc_"+i].aClip.addEventListener(MouseEvent.MOUSE_DOWN, startD);
    	this["dmc_"+i].aClip.addEventListener(MouseEvent.MOUSE_UP, stopD);
    }
    
    function startD(evt:MouseEvent):void {
    	var rect:Rectangle = new Rectangle(0, 0, stage.stageWidth-evt.currentTarget.parent.width, stage.stageHeight-evt.currentTarget.parent.height);
    	evt.currentTarget.parent.startDrag(false, rect);
    	this.setChildIndex(MovieClip(evt.currentTarget.parent), numChildren - 1);
    }
    function stopD(evt:MouseEvent):void {
    	evt.currentTarget.parent.stopDrag();
    }
    This is assuming your clips registration point is at the top left.

    Does this help?

  8. #8
    Member
    Join Date
    Aug 2009
    Posts
    41
    I injected the code, made a movieclip called dmc_2, put a little bar on the top of dmc_2 called aClip, set their instance names to the same, and tested the movie.

    It didn't drag at all. Did I do anything wrong?

  9. #9
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Was the bar inside of dmc_2?

    also, was there a dmc_1? The loop I gave is sequential, so for a dmc_2 to exist, there must be a dmc_1 clip.

    And the dmc_number clips will only drag now when the aClip is pressed.

    If you want to attach a source file of what your doing, perhaps I can take a look and let you kno where your mistake lies.

  10. #10
    Member
    Join Date
    Aug 2009
    Posts
    41
    I managed to get it working.

    I have one trouble though, how would differently sized 'aClip's do? I have 'windows' of various sizes, like a small one, and a very big one. Every window needs to have the correctly sized aClip, perhaps I should use the frame inside aClip? How would the code look for that?

    Thanks,

    Anthonie.

  11. #11
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    You can make the aClip any size you want as long as it's the same size or smaller than it's parent clip, the code I gave bases the borders and such from the parent clip dimensions.

    The code would be the exact same, you'd just have different sized aClips.

    If you'd like, you can email me a source file at jonathon.weeks@gmail.com, and I'll do whatever I can to help.

  12. #12
    Member
    Join Date
    Aug 2009
    Posts
    41
    But I place another instance of aClip in another 'dmc' and resize it, it'll change in the other windows as well..

  13. #13
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    aClip is the instance name, you can make a different movieclip and give it that instance name in a different MC.

    say you have dmc_1

    you can have a movieclip in the library, drag it into dmc_1 and give it an instance name of dmc_1, and then the same for the rest of them.

  14. #14
    Member
    Join Date
    Aug 2009
    Posts
    41
    The borders for dmc_2 have some troubles..

    Can you help?
    Attached Files Attached Files

  15. #15
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Your problem lies in the orientation of dmc_2 you have it's movieclip orientation set to the center, this code is made for it to work with the orientation set to the top right. Know what I mean?

  16. #16
    Member
    Join Date
    Aug 2009
    Posts
    41
    I'm not really sure as of what to do.. I remade the movieclip putting it's orientation the same as dmc_1 which works fine, but the problem remains.

  17. #17
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    I've attached your file fixed. Let me know if this helps.
    Attached Files Attached Files

  18. #18
    Member
    Join Date
    Aug 2009
    Posts
    41
    Thanks, that solved all my troubles.

  19. #19
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Awesome. Glad to help.

  20. #20
    Member
    Join Date
    Aug 2009
    Posts
    41
    I was hoping to ask for one more thing, if I may.

    How do I adjust the code so it brings the movieclip to the top if the whole movieclip is clicked? Now I can bring a movieclip to top when I start dragging or click the dragbar, but I want it to go to the top when aClip is clicked.

    Thanks, and sorry for reviving this resolved thread.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center