A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: draggable movieclips

  1. #1
    Member
    Join Date
    Mar 2004
    Posts
    45

    Question draggable movieclips

    Hi,

    I'm trying to create draggable movieclips, and I was wondering what the best way to do that would be?
    At the moment I have a class named draggableClip set as the document class.
    The class is basically just a collection of functions (The constructor function is empty). I pass a reference of the MovieClip on stage to one of the functions and it registers the mouse event listeners to the clip...

    Here is the code I'm using for the class:
    Code:
    package {
    
    	import flash.display.MovieClip;
    	import flash.events.MouseEvent;
    
    	public class draggableClip extends MovieClip {
    
    		private var dragging:Boolean;
    
    		public function draggableClip():void {
    			trace("draggableClip class constructor called!");
    		}
    
    		public function registerClip(MC):void {
    			trace("registering MC :"+MC.name);
    			MC.dragging = false;
    			MC.addEventListener(MouseEvent.MOUSE_DOWN, thisMouseDown);
    			MC.addEventListener(MouseEvent.MOUSE_MOVE, thisMouseMove);
    			MC.addEventListener(MouseEvent.MOUSE_UP, thisMouseUp);
    			MC.addEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);
    			MC.addEventListener(MouseEvent.ROLL_OUT, thisMouseOut);
    		}
    
    		private function thisMouseDown(event: MouseEvent):void {
    			trace("here i am at "+event.target.name);
    			if (!event.target.dragging) {
    				event.target.dragging = true;
    				event.target.x = event.target.parent.mouseX;
    				event.target.y = event.target.parent.mouseY;
    			}
    		}
    
    		private function thisMouseMove(event: MouseEvent):void {
    			if (event.target.dragging) {
    				event.target.x = parent.mouseX;
    				event.target.y = parent.mouseY;
    			}
    		}
    
    		private function thisMouseUp(event: MouseEvent):void {
    			event.target.dragging = false;
    		}
    		
    		private function thisMouseOut(event: MouseEvent):void {
    			if (event.target.dragging) {
    				event.target.x = event.target.parent.mouseX;
    				event.target.y = event.target.parent.mouseY;
    			}
    		}
    	}
    }
    On the stage's first frame actions I'm calling this:

    Code:
    registerClip(p1);

    It works, but not very well...for example, if the movieclips referenced contain a textfield, it throws up runtime errors....also, if dragging too fast it seems to "let go" of the movieclip.

    Could anyone show me a better way to do this? I have a feeling this is not the best method or best practice...

    it's my first attempt at AS3 (I'm migrating from AS2).

    If you know a better way, please post it here, as I'm trying to improve my AS3

  2. #2
    Senior Member
    Join Date
    Jan 2007
    Location
    Nottingham, England
    Posts
    263
    hi,

    i'm sure there's a good reason, but why arent you using startDrag(); ? - as for what happens when you drag too fast, apparently you have to add the event listener mouse up to the stage, not the mc in question.

    the mc cant keep up with the dragging so when you release the mouse button, it's over the stage, not the mc.

  3. #3
    Member
    Join Date
    Mar 2004
    Posts
    45
    OK. Thanks that is a big help. My code now looks like this and there is no problem with dragging really fast:

    Code:
    package {
    
    	import flash.display.MovieClip;
    	import flash.events.MouseEvent;
    
    	public class draggableClip extends MovieClip {
    
    		public function draggableClip():void {
    			trace("draggableClip class constructor called!");
    		}
    
    		public function registerClip(MC):void {
    			trace("registering MC :"+MC.name);
    			MC.pointNumTXT.text = MC.name;
    			MC.addEventListener(MouseEvent.MOUSE_DOWN, thisMouseDown);
    			MC.addEventListener(MouseEvent.MOUSE_UP, thisMouseUp);
    		}
    
    		private function thisMouseDown(event: MouseEvent):void {
    			trace("clicked: "+event.target.name);
    			event.target.startDrag();
    		}
    
    		private function thisMouseUp(event: MouseEvent):void {
    			event.target.stopDrag();
    		}
    	}
    }
    However, I'm wondering if this in general is a good way to go about adding drag functionality to Movieclips on the stage? Using a class to store just the functions?

    Also, I get this error when dragging because the movieclips I'm trying to add this functionality too contain textfields:

    Code:
    ReferenceError: Error #1069: Property startDrag not found on flash.text.TextField and there is no default value.
    	at draggableClip/::thisMouseDown()

  4. #4
    Senior Member
    Join Date
    Jan 2007
    Location
    Nottingham, England
    Posts
    263
    would love to help but your at the limit of my knowledge.

    here's what i used - if it's any help:

    code:
    private function onMouseDown(event:MouseEvent):void {
    menuBox.startDrag();
    stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
    removeEventListener(Event.ENTER_FRAME, onEnterFrame);

    }
    private function onMouseUp(event:MouseEvent):void {
    stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
    menuBox.stopDrag();
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }


  5. #5
    Member
    Join Date
    Mar 2004
    Posts
    45

    Thumbs up

    Where are you keeping/calling the code from please Inquizard?

    I'm wondering if it's better for me to have keep it in a class file or somewhere else?

    Thanks very much for all the help by the way

  6. #6
    Senior Member
    Join Date
    Jan 2007
    Location
    Nottingham, England
    Posts
    263
    the code is seperate class called "inquizard" (handy heh?) which inturn imports seperate classes for drawn objects...


    no probs with the help - this stuff is driving me mad - i've spent far too long trying to figure out how to get a movieclip from my library on to the stage without success - just glad i could help someone else, if only a little.

  7. #7
    Member
    Join Date
    Mar 2004
    Posts
    45
    I'm guessing you've also recently made the move from AS2 to AS3?
    What I find funny is that some of the more complicated things tend to be similar to AS2....However, the "simple" things like clickable buttons, draggable clips and basically anything requiring an eventhandler seem to be very different and will certainly take a lot of getting used to!

    Thanks again, You have certainly helped me get my first program to work in AS3, an important step in getting used to it - David

  8. #8
    Senior Member
    Join Date
    Jan 2007
    Location
    Nottingham, England
    Posts
    263
    glad to help - i'm going back to as2 at this rate.

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