Re Drag Movie Clip

[Lola5]

Hi

I am looking to drag a movie clip onto another movie clip. Both movie clips are within a movie clip.

I have tried the following and the drag part works but it doesn't stay on the target:
on(press){
if(_level0.monitorflag==0){
startDrag(this);
}
}

on(release){
stopDrag();
if(this.droptarget=="/target_mc")
{
_level0.monitorflag=1;
}
else
{
this._x=100;
this._y=100;
}
}

Any suggestions! Thanks:

[Adamkyler]

I think that it might be going to your mouse relative to its parents position. Try rewriting it on the main timeline and use something like:

picture.clip.onPress = function()
{
picture.clip.drag = true;
}
_root.onMouseMove = function()
{
if(picture.clip.drag == true)
{
picture.clip._x = _xmouse + clip._parent._x;
picture.clip._y = _ymouse + clip._parent._y;
}
}
picture.clip.onRelease = function()
{
picture.clip.drag = false;
}

[Adamkyler]

oops, double post

[Lola5]

Hi Adam

thanks for looking at this for me. I will give it a try. A little inexperienced at this so i may need to come back to you regarding this.

Thanks Again

[Lola5]

I tried the above coe but I still can't get it to work. I have attached a sample of what I am trying to get working. The code I am using works when on level0 but when I put the items in the movie clip they don't work. Any suggestions! Thanks! sample.fla

[Lola5]

Hi

I am still having no luck getting this working. Any suggestions! I can get it to work on the main timeline but not within the movieclip. See attached file above for a smaple of what I am trying to achieve.
Thanks

[Robb@exo]

Try putting this code into the first frame of the mc "new mc", in it's own layer (ie. not attached to an object), and comment out the code that's currently there. Mind you this code is AS2, not sure if that's what you were looking for... some of the current code seems to be AS1.

stop();

monitordrag_mc.onPress = function() {
    this.startDrag();
}
monitordrag_mc.onRelease = function() {
    stopDrag();
    if(this.hitTest(target_mc)) {
        this._x = target_mc._x;
        this._y = target_mc._y;
    }
}

[Lola5]

Hi
thanks for looking at this for me. I tried the code it works but it is still doing the same as the code I was using. It won't stay on the droptarget area. Any suggestions!
Thanks

[Osteel]

Hello again .

What Robb actually suggested was right, I think you're just having trouble applying it. So starting from what he suggested, I'll explain how to set up your sample file to make it work. I've added an attachment with it working ... but we both know for some reason you can't download mine.

I'll post the code here and explain anyways.



First, it's important to keep your code in a centralized place. As a new person on Flash, you should get into the habit of putting all your code on the main timeline rather on the movieclips themselves.

But first, lets start by organizing your movieclips. Lets pretend we're both looking at your sample FLA.


Start by deleting the movieclip new_mc off the stage so it's completely empty. Now, drag monitordrag_mc and target_mc onto the stage. This way they're both on the main stage, rather nested into another movieclip. This makes things a lot easier.

Now, give the movieclips instance names of monitordrag_mc and target_mc. And the stage is set up!


IMPORTANT
I noticed both your movieclips were not aligned to the center. You generally want to do this for any movieclip you draw. To do this, double click one of the movieclips so you 'go inside' it.

With it selected now inside, open the Alignment panel (CTRL-K). Make sure 'To Stage' is selected, and then align and distribute it to the center (click the middle of the three buttons).

Basically you want the little cross hair in the center of the movieclip. Thats it, go back to the main timeline.



Now, as I mentioned before, we want to keep the code in a centralized place. So we're going to put it onto the timeline on frame 1. So click on frame 1 at the top, and open the actions panel (F9 - its all about the short cuts).

Paste the following code:

/* These variables will store the initial 
starting location of the blue circle. For when it needs to reset*/
monitorStartX = monitordrag_mc._x;
monitorStartY = monitordrag_mc._y;


//onPress function of monitordrag_mc, simple start the drag when its been pressed.
monitordrag_mc.onPress = function(){
    this.startDrag();
}


/*onRelease function, what happens when you let go of the mouse button.
    1. Stop the dragging, you're done with it.
    2. Check *IF* you are touching the target_mc movieclip (hence, hitTest() )
            If you are, then match the _x and _y of the movieclip with the targets.
            If you are *not*, then reset it back to the initial _x,_y stored in the top variables*/
monitordrag_mc.onRelease = function(){
    this.stopDrag();
    
    if (this.hitTest(target_mc)){
        this._x = target_mc._x;
        this._y = target_mc._y;
    }else{
        this._x = monitorStartX;
        this._y = monitorStartY;
    }
} 

I've commented it so that it explains what the code does. As you can see, it's nearly exactly like Robbs, save for the addition of it reseting back to it's original spot if you don't place it onto the target_mc movieclip.


And that's it! Any questions, feel free to ask.

[Lola5]

Hi again
thanks for looking at this for me. I have done what you have suggested and it works but I am still able to drag the item. It doesn't stay on the target area. I have tried setting a flag for monitordrag which is set to 0 initially and set to 1 when the target is hit but this doesn't seem to be working. Any suggestions! Thanks

[Osteel]

Oh okay!

That's easily done by adding a variable such as you suggested, but instead we'll use True/False (a boolean). Replace the entire code with the following, I have taken out the comments as well:

monitorStartX = monitordrag_mc._x;
monitorStartY = monitordrag_mc._y;
monitorFlag = true;


monitordrag_mc.onPress = function(){
    if (monitorFlag == true){
        this.startDrag();
    }
}

monitordrag_mc.onRelease = function(){
    this.stopDrag();
    
    if (this.hitTest(target_mc)){
        this._x = target_mc._x;
        this._y = target_mc._y;
        monitorFlag = false;
    }else{
        this._x = monitorStartX;
        this._y = monitorStartY;
    }
} 

[Lola5]

Hi

it's working! Thanks again for all your help! Really appreciate it! You're a star!

[Suthers]

I am learning actionScript, and I see that the method most people use is the POPULAR way. Below is a way you can drag a movie clip.

Use the swapDepths() method to get the stacking order right.

myMovieClip.addEventListener(MouseEvent.MOUSE_DOWN , onStartDrag);
myMovieClip.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);

function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
}

function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();
}

[Robb@exo]

Actually Lola5's file is in AS2/AS1, yours Suthers is AS3, and one cannot mix code versions.