The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.

Results 1 to 8 of 8

Thread: Drag and Drops

  1. #1
    14
    posts
    Registered User

    Drag and Drops

    I'm building a simple little drag and drop game and I'm having some troubles with the movie clips return to the original position. The user can drag a movie clip to a target, and it will show something in another movie clip, and when the user moves their mouse away from the target area, then the dragged movie clip should return to it's original position.

    The trouble I'm having is that when the it does this only once. Afterwards, when I drag the movieclips again, they don't want to be moved from that specific area (still draggable), but like limiited to where it doesn't snap to the center drop target again. If anybody could help me with this I'll be so grateful!

    My Code:
    Code:
    stop();
    
    function dragSetup(clip, targ) {
        clip.onPress = function() {
            startDrag(this);
            this.beingDragged=true; 
        };
        clip.onRelease = clip.onReleaseOutside=function () {
            stopDrag();
            this.beingDragged=false; 
            if (eval(this._droptarget) == targ) {
                this.onTarget = true;
                        
                switch(clip._name) {
                    case "drag1":
                        answer.gotoAndStop(2); 
                        break;
                    case "drag2":
                        answer.gotoAndStop(3); 
                        break;
                    case "drag3":
                        answer.gotoAndStop(4); 
                        break;
                    case "drag4":
                        answer.gotoAndStop(5); 
                        break;
                    case "drag5": 
                        answer.gotoAndStop(6); 
                        break;
                }
            } else {
                this.onTarget = false;
                answer.gotoAndStop(1);
            }
        };
            
        clip.myHomeX = clip._x;
        clip.myHomeY = clip._y;
        clip.myFinalX = targ._x;
        clip.myFinalY = targ._y;    
        
        clip.onEnterFrame = function() {
            if (!this.beingDragged && !this.onTarget) {
                this._x -= (this._x-this.myHomeX)/5;
                this._y -= (this._y-this.myHomeY)/5;
                
            } else if (!this.beingDragged && this.onTarget) {
                this._x -= (this._x-this.myFinalX)/5;
                this._y -= (this._y-this.myFinalY)/5;
                
                
                clip.onRollOut = function() {
                    this.onEnterFrame = function() {
                        this._x -= (this._x-this.myHomeX)/5;
                        this._y -= (this._y-this.myHomeY)/5;
                    }
                    answer.gotoAndStop(1);
                }
            } 
            
        };
    }

  2. #2
    I had this problem here's what i did

    Code:
    master_mc.circle_mc.onPress = function() {
    startDrag(this);
    };
    master_mc.circle_mc.onRelease = master_mc.circle_mc.onReleaseOutside=function () {
    stopDrag();
    trace(this._droptarget);
    if (this._droptarget == "/master_mc/targetCircle") {
    this.onTarget = true;
    _root.master_mc.targetCircle.gotoAndStop(2);
    } else {
    this.onTarget = false;
    _root.targetCircle.gotoAndStop(1);
    }
    };
    //the variables below will store the clips starting position
    master_mc.circle_mc.myHomeX=master_mc.circle_mc._x;
    master_mc.circle_mc.myHomeY=master_mc.circle_mc._y;
    //the variables below will store the clips end position
    master_mc.circle_mc.myFinalX = 45.6;
    master_mc.circle_mc.myFinalY = 37.0;
    master_mc.circle_mc.onMouseDown = function() {
    //this variable tells us if the mouse is up or down
    mousePressed = true;
    };
    master_mc.circle_mc.onMouseUp = function() {
    mousePressed = false;
    };
    master_mc.circle_mc.onEnterFrame = function() {
    //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
    // then move the MC back to its original starting point (with a smooth motion)"
    if (mousePressed == false && this.onTarget == false) {
    this._x -= (this._x-this.myHomeX)/5;
    this._y -= (this._y-this.myHomeY)/5;
    //if the circle is dropped on any part of the target it slides to the center of the target
    } else if (mousePressed == false && this.onTarget == true) {
    this._x -= (this._x-this.myFinalX)/5;
    this._y -= (this._y-this.myFinalY)/5;
    }
    };
    take in mind these are my MC instance name's
    targetCircle
    master_mc - main MC
    circle_mc

    Also if its a game you might want to load drop and drops Externally
    so if you want to do that put this on the 1st frame of your main MC
    Code:
    import mx.transitions.Tween; 
    import mx.transitions.easing.*;
    
    
    //the variables below will store the clips starting position
    circle_mc.myHomeX = circle_mc._x;
    circle_mc.myHomeY = circle_mc._y;
    
    
    circle_mc2.myHomeX = circle_mc2._x;
    circle_mc2.myHomeY = circle_mc2._y;
    
    
    circle_mc.onPress = function() {
        startDrag (this, false);
    }
    
    
    circle_mc.onRelease = circle_mc.onReleaseOutside=function () {
        stopDrag();
        if (eval(this._droptarget) == targetCircle) {
            this.onTarget = true;
            targetCircle.gotoAndStop(2);
        } else {
            this.onTarget = false;
            targetCircle.gotoAndStop(1);
            var moveBack1X:Tween = new Tween(this, "_x", Regular.easeOut, this._x, this.myHomeX, 10, false);
            var moveBack1Y:Tween = new Tween(this, "_y", Regular.easeOut, this._y, this.myHomeY, 10, false);
        }
        var moveDropX:Tween = new Tween(this, "_x", Regular.easeOut, this._x, eval(this._droptarget)._x, 10, false);
        var moveDropY:Tween = new Tween(this, "_y", Regular.easeOut, this._y, eval(this._droptarget)._y, 10, false);
    }
    
    
    circle_mc2.onPress = function() {
        startDrag(this, false);
    };
    
    
    circle_mc2.onRelease = circle_mc2.onReleaseOutside=function () {
        stopDrag();
        if (eval(this._droptarget) == targetCircle2) {
            this.onTarget = true;
            targetCircle2.gotoAndStop(2);
        } else {
            this.onTarget = false;
            targetCircle2.gotoAndStop(1);
            var moveBack1X:Tween = new Tween(this, "_x", Regular.easeOut, this._x, this.myHomeX, 10, false);
            var moveBack1Y:Tween = new Tween(this, "_y", Regular.easeOut, this._y, this.myHomeY, 10, false);
        }
        var moveDropX:Tween = new Tween(this, "_x", Regular.easeOut, this._x, eval(this._droptarget)._x, 10, false);
        var moveDropY:Tween = new Tween(this, "_y", Regular.easeOut, this._y, eval(this._droptarget)._y, 10, false);
    }
    Take in mind iv used my MC instance names,
    Hope this helps this is for 1 of my drop and drop item's.
    Last edited by MAGG0T; April 2nd, 2012 at 08:31 AM.

  3. #3
    1,391
    posts
    Registered User
    actually this can be reduced quite a bit, be much cleaner and perform the operation correctly and dynamically - little bit more like this:
    PHP Code:
    ximport mx.transitions.*;
    import mx.transitions.easing.*;

    stop();

    var 
    tweenX:Tween;
    var 
    tweenY:Tween;

    function 
    dragSetupcliptarg ):Void {
        
    clip.onMouseDown drag;
        
    clip.onMouseUp drop;
        
    clip.home = new Pointclip._xclip._y );
        
    clip.targ targ;
    }

    function 
    drag():Void {
        
    this.startDrag();
    }

    function 
    drop():Void {
        
    this.stopDrag();
        if( 
    this.hitTest(this.targ) ) {
            
    tweenX = new Tweenthis"_x"Strong.easeOutthis._xthis.targ._x10false );
            
    tweenY = new Tweenthis"_y"Strong.easeOutthis._ythis.targ._y10false );
            
    answer.gotoAndStopNumber(this._name.charAt(4)) + );
        }else{
            
    tweenX = new Tweenthis"_x"Strong.easeOutthis._xthis.home.x10false );
            
    tweenY = new Tweenthis"_y"Strong.easeOutthis._ythis.home.y10false );
            
    answer.gotoAndStop(1);
        }


  4. #4
    14
    posts
    Registered User
    Thanks for the help guys. I appreciate the help! "cbeech" thanks for the showing me how simplified it can get. Unfortunately since I'm working with other people who already are using this code, I can't change much for that reason :S. I'm saving that as a code snippet for later use though .

    I do have one quick question though, can you do a hitTest WHILE one of the movieclips is being dragged. So if I wanted to change the look of the target dropzone, WHILE the dragged movieclip is over it (mouse not released yet). How would you go about doing that?

  5. #5
    1,391
    posts
    Registered User
    you can do one of two things - either start a enterframe event running, or use onMouseMove - in either, perform your test against the target object and take appropriate action - but this is going to get very messy in your current code since you have several enterframes running and being added that you are not *removing* - this means that ultimately your program will slow to a crawl with the increased memory load each time you drag an object

    btw - the above code i wrote will not effect anything else in your program since i used the same function name - you should be able to replace it and still call dragSetup and pass the same arguments as before - but it will also not blow up the program since there are no enterframe events being added (it uses tweens instead)

  6. #6
    14
    posts
    Registered User
    Thanks cbeech for the help. I guess this is what I ended up doing for now. I took out the second onEnterFrame, and the the switch statements. Mixing a bit of your awesome code with mine. Thanks for the all the information! I'm probably going to scrap this code, and talk to the other guys about implementing a different code. Thanks!

    Code:
    stop();
    
    function dragSetup(clip, targ) {
        clip.onPress = function() {
            startDrag(this);
            this.beingDragged=true; 
        };
            
        clip.onRelease = clip.onReleaseOutside=function () {
            stopDrag();
            this.beingDragged=false; 
            if (eval(this._droptarget) == targ) {
                this.onTarget = true;
                answer.gotoAndStop( Number(clip._name.charAt(4)) +1);
            } else {
                this.onTarget = false;
                answer.gotoAndStop(1);
            }
        };
        
        clip.myHomeX = clip._x;
        clip.myHomeY = clip._y;
        clip.myFinalX = targ._x;
        clip.myFinalY = targ._y;    
        
        clip.onEnterFrame = function() {
            if (!this.beingDragged && !this.onTarget) {
                this._x -= (this._x-this.myHomeX)/5;
                this._y -= (this._y-this.myHomeY)/5;
                
            } else if (!this.beingDragged && this.onTarget) {
                this._x -= (this._x-this.myFinalX)/5;
                this._y -= (this._y-this.myFinalY)/5;
            
            } else if(clip.hitTest(target)) {
                target.gotoAndStop(2);
                answer.gotoAndStop( Number(clip._name.charAt(4)) +1);
                
            } else if(!clip.hitTest(target)) {
                target.gotoAndStop(1);
                answer.gotoAndStop(1);
            }
        };
        
        clip.onRollOut = function() {
            this.onTarget = false;
            answer.gotoAndStop(1);
            target.gotoAndStop(1);
        }
    }
    
    
    dragSetup(drag1,target);
    dragSetup(drag2,target);
    dragSetup(drag3,target);
    dragSetup(drag4,target);
    dragSetup(drag5,target);

  7. #7
    1,391
    posts
    Registered User
    you're welcome leeto - cool - that does look a bit better without the nested enterframe on rollover

    but i'm noticing something else atm - looks like you have a hard reference to 'target' throughout - but i don't see it declared, which means it must be on stage - i'm not certain that references to the object will be within scope on the methods assigned to 'clip' - you'll probably want to store the passed in reference within a property of the clip itself

    additionally, the 3rd and 4th conditions in the enterframe are probably not going to get triggered, since the first two oppose each other, in other word only those two conditions will ever get fulfilled - 3/4 will never be

  8. #8
    14
    posts
    Registered User
    cbeech, again thank you for the help with the drag and drops. I'm working on a new project now, and implementing the code that you wrote up there. I'm having some issues with the dragging. It seems that I can't have to more than one drag set up. I think it's because when I start the drag anywhere I click on the stage will drag that particular movieclip. Any ideas of why this is?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this 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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012