dcsimg
A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: [MX] Drag & Drop with drawLine

  1. #1
    Member
    Join Date
    Dec 2008
    Posts
    50

    [MX] Drag & Drop with drawLine

    Hi,

    I am creating a drag and drop where the user drags an object to the target and in doing so they create a line between where the object started and the target.

    I have got this working fine for one set of objects, however, if there are three on the screen the drawline function only works for the first one, the others do not draw a line.

    Is there a method I should be using so that I can have multiple objects and targets with lines drawn between them?

    Code is here :

    PHP Code:
    // code for UK
    _root.createEmptyMovieClip("line_mc"1);

    onMouseMove = function(){
    updateAfterEvent();


    MovieClip.prototype.drawLine = function()
        {
        
    this.clear();
        
    this.lineStyle(2,0xFF9900,100);
        
    this.moveTo(mc1._xmc1._y);
        
    this.lineTo(mc2._xmc2._y);
        
    this.this._x;
        
    this.this._y;
        }

        
    // ensure movieclips are in front of line
        
    mc1.swapDepths(2);
        
    mc2.swapDepths(3);

        
    // draw initial line
        
    line_mc.drawLine();

    mc2.onPress = function()
        {
        
    this.startDrag();
        
    line_mc.onEnterFrame drawLine;
        }

    mc2.onRelease = function()
        {
        
    delete line_mc.onEnterFrame;
        
    this.stopDrag();
        
    checkTarget(this);
        if (eval(
    this._droptarget) == uktarget) {
        
    this._x uktarget._x;
        
    this._y uktarget._y;
        } else if (eval(
    this._droptarget) == francetarget) {
        
    this._x francetarget._x;
        
    this._y francetarget._y;
        }else if (eval(
    this._droptarget) == germantarget) {
        
    this._x germantarget._x;
        
    this._y germantarget._y;
        } else {
        
    this._x this.x;
        
    this._y this.y;
        }
    }
    function 
    checkTarget(drag){
    // trace(drag+ "has been dropped on "+eval(drag._droptarget));
    if (drag.hitTest(uktarget)) {
    trace(drag+" has been dropped on greyCircle");
    } else {
    trace("you missed the target");
    }

    Last edited by wakey; 01-20-2009 at 04:14 AM.

  2. #2
    Member
    Join Date
    Dec 2008
    Posts
    50
    Any ideas on how to get two lines appearing anyone?

  3. #3
    :
    Join Date
    Dec 2002
    Posts
    3,518

    Maybe you can adapt this to what you are trying to do...

    Code:
    var vals = [[mc2, mc1, "lineA", targetA], [mc4, mc3, "lineB", targetB]];
    // 
    for (i = 0; i < vals.length; i++) {
    	var myM2 = vals[i][0];
    	myM2.x = myM2._x;
    	myM2.y = myM2._y;
    	myM2.m1 = vals[i][1];
    	myM2.swapDepths((i * 3) + 1);
    	myM2.m1.swapDepths((i * 3) + 2);
    	myM2.line = _root.createEmptyMovieClip(vals[i][2], i * 3);
    	drawLine(myM2, myM2.m1, myM2.line);
    	myM2.onPress = function() {
    		this.startDrag();
    		this.onEnterFrame = function() {
    			drawLine(this, this.m1, this.line);
    		};
    		this.onRelease = this.onReleaseOutside = function () { delete this.onEnterFrame;stopDrag();checkTarget(this);};
    	};
    }
    function drawLine(m2, m1, line) {
    	line.clear();
    	line.lineStyle(2, 0xFF9900, 100);
    	line.moveTo(m1._x, m1._y);
    	line.lineTo(m2._x, m2._y);
    	line.x = line._x;
    	line.y = line._y;
    }
    function checkTarget(drag) {
    	var hitOne = false;
    	for (i = 0; i < vals.length; i++) {
    		var target = vals[i][3];
    		if (drag.hitTest(target)) {
    			trace(drag._name + " has been dropped on: " + target._name);
    			drag._x = target._x;
    			drag._y = target._y;
    			hitOne = true;
    		}
    	}
    	if (!hitOne) {
    		trace("you missed the target");
    		drag._x = drag.x;
    		drag._y = drag.y;
    	}
    	drawLine(drag, drag.m1, drag.line);
    }

  4. #4
    Member
    Join Date
    Dec 2008
    Posts
    50
    Thank you for your suggestion, I will try it later today and see how I get on.

  5. #5
    Member
    Join Date
    Dec 2008
    Posts
    50
    Thanks again for this code, just having a look at it now properly. Need to adapt it a little bit but using the loops is a big help

  6. #6
    Junior Member
    Join Date
    Dec 2010
    Posts
    1

    Wink Would like to add...

    I know this thread is old but I would like to add what I managed to make from of your codes with a total of seven targets

    I'm very new so my code might be messy but it's functional...

    PHP Code:
    var vals = [[mc2mc1"targetD"targetD], [mc4mc3"targetF"targetF],[mc6mc5"targetA"targetA],[mc8mc7"targetC"targetC],[mc10mc9"targetE"targetE],[mc12mc11"targetB"targetB],[mc14mc13"targetG"targetG]];
    // 
    for (0vals.lengthi++) {//????????
        
    var myM2 vals[i][0];
        
    myM2.myM2._x;
        
    myM2.myM2._y;
        
    myM2.m1 vals[i][1];
        
    myM2.swapDepths((3) + 1);
        
    myM2.m1.swapDepths((3) + 2);
        
    myM2.line _root.createEmptyMovieClip(vals[i][2], 3);
        
    drawLine(myM2myM2.m1myM2.line);
        
        
    myM2.onPress = function() {//drag function
            
    this.startDrag();
            
    this.onEnterFrame = function() {
                
    drawLine(thisthis.m1this.line);
            };
            
    this.onRelease this.onReleaseOutside = function () { delete this.onEnterFrame;stopDrag();checkTarget(this);};
        };
    }
    function 
    drawLine(m2m1line) {//Creating the line
        
    line.clear();
        
    line.lineStyle(30x000000100);
        
    line.moveTo(m1._xm1._y);
        
    line.lineTo(m2._xm2._y);
        
    line.line._x;
        
    line.line._y;
    }
    function 
    checkTarget(drag) { //target/drop
        
    var hitOne false;
        for (
    0vals.lengthi++) {
            var 
    target vals[i][3];
    /*        if (drag.hitTest(target)) {
                trace(drag._name + " has been dropped on: " + target._name);
                drag._x = target._x;
                drag._y = target._y;
                hitOne = true;
            }*/
                
    if (mc2.hitTest(targetD)) {
                
    mc2._visible=false;
                
    mc2._x targetD._x;
                
    mc2._y targetD._y;
                
    hitOne true;
                }
                else{
                    
    mc2._x mc2.x;
                    
    mc2._y mc2.y;
                    }
                if (
    mc4.hitTest(targetF)) {
                
    mc4._visible=false;
                
    mc4._x targetF._x;
                
    mc4._y targetF._y;
                
    hitOne true;
                }
                else{
                    
    mc4._x mc4.x;
                    
    mc4._y mc4.y;
                    }
                if (
    mc6.hitTest(targetA)) {
                
    mc6._visible=false;
                
    mc6._x targetA._x;
                
    mc6._y targetA._y;
                
    hitOne true;
                }
                else{
                    
    mc6._x mc6.x;
                    
    mc6._y mc6.y;
                    }
                if (
    mc8.hitTest(targetC)) {
                
    mc8._visible=false;
                
    mc8._x targetC._x;
                
    mc8._y targetC._y;
                
    hitOne true;
                }
                else{
                    
    mc8._x mc8.x;
                    
    mc8._y mc8.y;
                }
                if (
    mc10.hitTest(targetE)) {
                
    mc10._visible=false;
                
    mc10._x targetE._x;
                
    mc10._y targetE._y;
                
    hitOne true;
                }
                else{
                    
    mc10._x mc10.x;
                    
    mc10._y mc10.y;
                    }
                if (
    mc12.hitTest(targetB)) {
                
    mc12._visible=false;
                
    mc12._x targetB._x;
                
    mc12._y targetB._y;
                
    hitOne true;
                }
                else{
                    
    mc12._x mc12.x;
                    
    mc12._y mc12.y;
                    }
                if (
    mc14.hitTest(targetG)) {
                
    mc14._visible=false;
                
    mc14._x targetG._x;
                
    mc14._y targetG._y;
                
    hitOne true;
                }
                else{
                    
    mc14._x mc14.x;
                    
    mc14._y mc14.y;
                    }
    //Idividual set targets & destinations
        
    }
        if (!
    hitOne) { //RETURN PITON TO ORIGINAL POSITION
            
    trace("you missed the target");
            
    drag._x drag.x;
            
    drag._y drag.y;
        }
        
    drawLine(dragdrag.m1drag.line);


  7. #7
    Member
    Join Date
    Sep 2010
    Posts
    73
    it might be easyer to attach a new clip with that you have already so it draws a line for each object in a new clip each time.
    google
    attachMovie
    WiiStream A Social Movie Network Version 0.1.1 Demo Testers Aproved http://wiistream.net/WiiStream.exe

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