Making a DragDrop class on as3

Question

I'm making a DragDrop class on as3. I'm trying to make movable movie clips "stick" to a target MovieClip. I've got the basic drag drop and positioning/sticking to work but when I try to create an "easing" effect using Enter Frame, somehow the movie clips move to 0 x and y position.

Here's the code that's working (without EnterFrame Event).

package {
    public class DragDrop {
        public var clip:MovieClip;
        public var targ:MovieClip;
        public var myHomeX:Number;
        public var myHomeY:Number;
        public var myFinalX:Number;
        public var myFinalY:Number;

        public function selectClip(clipV:MovieClip,targV:MovieClip):void {
            clip = clipV;
            targ = targV;
            var myHomeX = clip.x;
            var myHomeY = clip.y;
            var myFinalX = targ.x;
            var myFinalY = targ.y;

            clip.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
            clip.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
            clip.addEventListener(MouseEvent.ROLL_OVER,rollOver);
            clip.addEventListener(MouseEvent.ROLL_OUT,rollOut);

            function startDragging(e:MouseEvent):void {
                clip.startDrag();
                clip.beingDragged = true;
                clip.parent.setChildIndex(clip,clip.parent.numChildren - 1);
            }

            function stopDragging(e:MouseEvent):void {
                clip.stopDrag();
                clip.beingDragged = false;
                var onTarget:MovieClip;
                if (clip.dropTarget != null)
                {
                    onTarget = e.target.dropTarget.parent;
                }
                else
                {
                    onTarget = null;
                } 
                if ((onTarget == targ))
                {
                    clip.onTarget = true;
                    targ.gotoAndStop(2);
                    clip.x = myFinalX;
                    clip.y = myFinalY;
                }
                else
                {
                    clip.onTarget = false;
                    targ.gotoAndStop(1);
                    clip.x = myHomeX;
                    clip.y = myHomeY;
                }
            }

            function rollOver(e:MouseEvent) {
                clipGlow.restart();
            }

            function rollOut(e:MouseEvent) {
                clipGlow.reverse();
            }
        }
    }
}

Here's the code that's not working (with EnterFrame Event).

package {
    public class DragDrop {
        public var clip:MovieClip;
        public var targ:MovieClip;
        public var clip:MovieClip;
        public var targ:MovieClip;
        public var myHomeX:Number;
        public var myHomeY:Number;
        public var myFinalX:Number;
        public var myFinalY:Number;

        public function selectClip(clipV:MovieClip,targV:MovieClip):void {
            clip = clipV;
            targ = targV;
            var myHomeX = clip.x;
            var myHomeY = clip.y;
            var myFinalX = targ.x;
            var myFinalY = targ.y;

            clip.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
            clip.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
            clip.addEventListener(MouseEvent.ROLL_OVER,rollOver);
            clip.addEventListener(MouseEvent.ROLL_OUT,rollOut);
            clip.addEventListener(Event.ENTER_FRAME,slide);

            function startDragging(e:MouseEvent):void {
                clip.startDrag();
                clip.beingDragged = true;
                clip.parent.setChildIndex(clip,clip.parent.numChildren - 1);
            }

            function stopDragging(e:MouseEvent):void {
                clip.stopDrag();
                clip.beingDragged = false;
                var onTarget:MovieClip;
                if (clip.dropTarget != null)
                {
                    onTarget = e.target.dropTarget.parent;
                }
                else
                {
                    onTarget = null;
                }
                if ((onTarget == targ))
                {
                    clip.onTarget = true;
                    targ.gotoAndStop(2);

                }
                else
                {
                    clip.onTarget = false;
                    targ.gotoAndStop(1);
                }
            }

            function rollOver(e:MouseEvent) {
                clipGlow.restart();
            }

            function rollOut(e:MouseEvent) {
                clipGlow.reverse();
            }

            function slide(e:Event):void {
                if (! clip.beingDragged && ! clip.onTarget)
                {
                    clip.x -=  clip.x - clip.myHomeX / 5;
                    clip.y -=  clip.y - clip.myHomeY / 5;
                    clip.scaleX +=  (1 - clip.scaleX) / 5;
                    clip.scaleY +=  (1 - clip.scaleY) / 5;
                }
                else if (! clip.beingDragged && clip.onTarget)
                {
                    clip.x -=  clip.x - clip.myFinalX / 5;
                    clip.y -=  clip.y - clip.myFinalY / 5;
                    clip.scaleX +=  (1.5 - clip.scaleX) / 5;
                    clip.scaleY +=  (1.5 - clip.scaleY) / 5;
                }
            }
        }
    }
}

Thanks in advance for any help. :)

score 0 · Answer 1 · answered Nov 29 '16 at 13:18

0

If you do this:

var myHomeX = clip.x;
var myHomeY = clip.y;
var myFinalX = targ.x;
var myFinalY = targ.y;

Then maybe clip.myHomeX should be myHomeX only etc?

function slide(e:Event):void {
            if (! clip.beingDragged && ! clip.onTarget)
            {
                clip.x -=  clip.x -myHomeX / 5;
                clip.y -=  clip.y -myHomeY / 5;
                clip.scaleX +=  (1 - clip.scaleX) / 5;
                clip.scaleY +=  (1 - clip.scaleY) / 5;
            }
            else if (! clip.beingDragged && clip.onTarget)
            {
                clip.x -=  clip.x -myFinalX / 5;
                clip.y -=  clip.y -myFinalY / 5;
                clip.scaleX +=  (1.5 - clip.scaleX) / 5;
                clip.scaleY +=  (1.5 - clip.scaleY) / 5;
            }
        }

answered Nov 29 '16 at 13:18

David Lamm

519
1
3
12

Thank you but I've tried that and it didn't work. I solved it with a different method though. I animated it using greensock. It worked well getting the same effect I needed. Thanks for trying to help anyway. By the way, how do I mark this question as solved? – chb382 Dec 14 '16 at 10:10
Great, its not solved if you dont tell how you solved it - to help others! – David Lamm Sep 26 '17 at 10:06
I'm sorry about that. I only needed the enter frame function to add an easing in animation so I used a tween engine by Greensock instead and it worked fine. I added the tween code inside the if else in the stop drag function. – chb382 Oct 21 '17 at 09:31

Making a DragDrop class on as3

1 Answers1