A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: How to drag MC back out of target MC?

  1. #1
    Senior Member
    Join Date
    Apr 2003
    Location
    Seattle
    Posts
    177

    How to drag MC back out of target MC?

    Hello, I would like to create a drag n drop target like the drawer in the game machinarium.

    Basically, in this point+click game a drawer tweens in and out of the stage area from the top when the user hovers over it. Items can be dragged and dropped into it and then taken out and used throughout the game. When the user hovers off the drawer, it closes and the items in it go away with the drawer.

    I have the drag and drop, the target, and the tween working, however after I drop an object into the drawer, I'm having troubles re-initiating the drag and drop cycle.

    My question is, using the code I'm working with, once I've dropped an mc into the target mc, how can I drag it back out again?

    Here's my code:

    Code:
    import com.greensock.*;
    import flash.events.MouseEvent;
    import flash.display.MovieClip;
    import flash.geom.Rectangle;
    
    var drawer:MovieClip
    
    //red_mc is draggable
    red_mc.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
    red_mc.addEventListener(MouseEvent.MOUSE_UP, endDrag);
    red_mc.buttonMode = true;
    
    //black_mc is the target drawer
    red_mc.targetNode = black_mc;
    black_mc.nodeBounds = new Rectangle (black_mc.x, black_mc.y, black_mc.width, black_mc.height);
    
    //script for the drag and also to initiate red_mc to open the drawer
    function beginDrag(e:MouseEvent):void{
    	drawer = e.currentTarget as MovieClip;
    	stage.addEventListener(MouseEvent.MOUSE_MOVE, openDrawer);
    	e.target.startDrag();
    }
    
    //script for red_mc to open the drawer
    function openDrawer(e:MouseEvent):void{
    	if(drawer.hitTestObject(drawer.targetNode)){
    		   TweenLite.to(black_mc, 1, {x:275.5, y:32.5});
    		   stage.removeEventListener(MouseEvent.MOUSE_MOVE, openDrawer);}
    }
    
    //script for drop with target
    function endDrag(e:MouseEvent):void{
    	e.target.stopDrag();
    	if(red_mc.y>0 && red_mc.y<96){
    		black_mc.addChild(red_mc);
    		red_mc.x=-225;
    		red_mc.y=0;}
    	else 
    	{red_mc.x= red_mc.x;
    	 red_mc.y= red_mc.y;}
    }
    
    //script for the mouse to open+close the drawer
    hitArea_mc.addEventListener(MouseEvent.MOUSE_OVER, open);
    hitArea_mc.addEventListener(MouseEvent.MOUSE_OUT, close);
    
    function open(e:MouseEvent):void{
    TweenLite.to(black_mc, 1, {x:275.5, y:32.5});
    	removeEventListener(MouseEvent.MOUSE_OVER, open);}
    
    function close(e:MouseEvent):void{
    	TweenLite.to(black_mc, 1, {x:275.5, y:-35.5});
    	removeEventListener(MouseEvent.MOUSE_OUT, close);}
    Any help will be appreciated!

    Thanks in advance,
    Llyfre

  2. #2
    Senior Member
    Join Date
    Apr 2003
    Location
    Seattle
    Posts
    177

    Update with revision, but still need help....

    I've come around this a slightly different way in order to simplify things, however I'm still stuck without being able to drag my mc off the target after i've dropped it there. Please send me a little help....

    Code:
    import com.greensock.*;
    import flash.events.MouseEvent;
    
    red_mc.redHit_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragRed);
    red_mc.redHit_mc.addEventListener(MouseEvent.MOUSE_UP, dropRed);
    red_mc.redHit_mc.addEventListener(MouseEvent.MOUSE_OVER, openDrawer);
    
    //successful drag drop with target
    red_mc.buttonMode = true;
    function dragRed(event:MouseEvent):void{
    	 red_mc.startDrag();}
    
    function dropRed(event:MouseEvent):void{
    		red_mc.stopDrag();
    		if (red_mc.hitTestObject(drawer_mc.drawerHit_mc)){
    		drawer_mc.addChild(red_mc);
    		red_mc.x=-225;
    		red_mc.y=0;}
    }
    //script for dragging mc to open drawer
    function openDrawer(e:MouseEvent):void{
    		if (red_mc.hitTestObject(hitArea_mc.drawerHit_mc)){
    		TweenLite.to(drawer_mc, 1, {x:275.5, y:32.5});
    		removeEventListener(MouseEvent.MOUSE_OVER, openDrawer);}
    }
    
    //script for the mouse to open the drawer
    hitArea_mc.addEventListener(MouseEvent.MOUSE_OVER, open);
    hitArea_mc.addEventListener(MouseEvent.MOUSE_OUT, close);
    
    function open(e:MouseEvent):void{
    	TweenLite.to(drawer_mc, 1, {x:275.5, y:32.5});
    	removeEventListener(MouseEvent.MOUSE_OVER, open);}
    
    function close(e:MouseEvent):void{
    	TweenLite.to(drawer_mc, 1, {x:275.5, y:-35.5});
    	removeEventListener(MouseEvent.MOUSE_OUT, close);}

  3. #3
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Code:
    import com.greensock.*;
    import flash.events.MouseEvent;
    import flash.display.MovieClip;
    import flash.geom.Rectangle;
    
    var item_mc:MovieClip;
    
    red_mc.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
    red_mc.addEventListener(MouseEvent.MOUSE_UP, endDrag);
    red_mc.buttonMode = true;
    red_mc.baseX = -225;
    red_mc.baseY = 0;
    red_mc.targetNode = drawer_mc;
    
    green_mc.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
    green_mc.addEventListener(MouseEvent.MOUSE_UP, endDrag);
    green_mc.buttonMode = true;
    green_mc.baseX = -175;
    green_mc.baseY = 0;
    green_mc.targetNode = drawer_mc;
    
    drawer_mc.nodeBounds = new
    Rectangle(drawer_mc.x,drawer_mc.y,drawer_mc.width,drawer_mc.height);
    drawer_mc.addEventListener(MouseEvent.MOUSE_OVER, openIt);
    drawer_mc.addEventListener(MouseEvent.MOUSE_OUT, closeIt);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, chkDrawer);
    
    function beginDrag(e:MouseEvent):void {
            item_mc = e.currentTarget as MovieClip;
            if (item_mc.parent == drawer_mc) {
                    addChild(item_mc);
                    item_mc.x = mouseX;
                    item_mc.y = mouseY;
            }
            item_mc.startDrag();
    }
    function chkDrawer(e:MouseEvent):void {
            if (item_mc != null) {
                    if (item_mc.hitTestObject(item_mc.targetNode)) {
                            openIt();
                    }else{
                            closeIt();
                    }
            }
    }
    function endDrag(e:MouseEvent):void {
            item_mc.stopDrag();
            if (item_mc.hitTestObject(item_mc.targetNode)) {
                    drawer_mc.addChild(item_mc);
                    item_mc.x = item_mc.baseX;
                    item_mc.y = item_mc.baseY;
            } else {
                    if (item_mc.parent == drawer_mc) {
                            addChild(item_mc);
                    }
                    item_mc.x = mouseX;
                    item_mc.y = mouseY;
                    if (! item_mc.hitTestObject(item_mc.targetNode)) {
                            closeIt();
                    }
            }
            item_mc = null;
    }
    function openIt(e:MouseEvent=null):void {
            TweenLite.to(drawer_mc, 1, {x:275, y:32});
    }
    function closeIt(e:MouseEvent=null):void {
            TweenLite.to(drawer_mc, 1, {x:275, y:-35});
    }

  4. #4
    Senior Member
    Join Date
    Apr 2003
    Location
    Seattle
    Posts
    177

    Still not quite there....

    Thanks for your code, dawsonk. I'm finding that now after the mc's are dragged and dropped into the drawer, I am unable to open the drawer back up, thereby putting me in an equal position to the drawer opening back up but my not being able to take the mc's back out again.

    Any thoughts would be appreciated....

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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center