How to add duplicate movieclip "box_mc" in attached code?

I would like the "box_mc" movieClip to remain on the stage and a duplicate created when clicked on and dragged to a new location on the stage.

Actionscript Code:

box_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateBox);

var startX:Number;
var startY:Number;

function duplicateBox(event:MouseEvent):void {
    event.target.parent.addChild(event.target);
    startX = event.target.x;
    startY = event.target.y;    
    event.target.startDrag(true);
}

Thanks for any help.

If it does not contain any content added later, just create a new instance of the MovieClip. However, the way you are doing will not work. You need to give an identifier and use the new word plus classname.

Quote:

---

Originally Posted by cancerinform

If it does not contain any content added later, just create a new instance of the MovieClip. However, the way you are doing will not work. You need to give an identifier and use the new word plus classname.

---

Can you give an example using the code above?

I need the classname of the MovieClip. If you did not create any, rightclick on the MovieClip in the library and check "Export for Actionscript". Then you write something like this:

var box_mcCopy:Classnamehere = new Classnamehere();
box_mcCopy.x = event.currentTarget.x;
box_mcCopy.y = event.currentTarget.y;
addChild(box_mcCopy);

It will be automatically created on the timeline.

The classname is "myBox". How would I use your code below in my code above?

Also, I have many objects on the stage that will be dragged on the stage and I would like copies made of all of them when dragged to a new location on the stage. I am using this "duplicateBox" function with all the objects on the page so won't the code you provide be for only one object? Hope that was clear enough...

Thank you for your help.

Quote:

---

Originally Posted by cancerinform

I need the classname of the MovieClip. If you did not create any, rightclick on the MovieClip in the library and check "Export for Actionscript". Then you write something like this:

var box_mcCopy:Classnamehere = new Classnamehere();
box_mcCopy.x = event.currentTarget.x;
box_mcCopy.y = event.currentTarget.y;
addChild(box_mcCopy);

It will be automatically created on the timeline.

---

Just replace Classnamehere with myBox and place the script inside of the function.

Dang, you are too fast :-) I was trying to clarify my post by editing it before you replied:

Also, I have many objects on the stage that will be dragged on the stage and I would like copies made of all of them when dragged to a new location on the stage. I am using this "duplicateBox" function with all the objects on the page so won't the code you provide be for only one object? Hope that was clear enough...

The MCs on the stage would be:

Actionscript Code:

box_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

Quote:

---

Originally Posted by cancerinform

Just replace Classnamehere with myBox and place the script inside of the function.

---

Sorry, I don't know why I didn't put this in the original post. :confused:

Below is what I'm wanting to do except I would like the items "box_mc", "circle_mc", and "triangle_mc" to be duplicated when dragged.

Sorry for the misinformation originally.

Actionscript Code:

box_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
box_mc.addEventListener(MouseEvent.MOUSE_UP, dropItem);
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
circle_mc.addEventListener(MouseEvent.MOUSE_UP, dropItem);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
triangle_mc.addEventListener(MouseEvent.MOUSE_UP, dropItem);

var startX:Number;
var startY:Number;

function duplicateItem(event:MouseEvent):void {
    event.target.parent.addChild(event.target);
    startX = event.target.x;
    startY = event.target.y;    
    event.target.startDrag(true);
}

function dropItem(event:MouseEvent):void {
    event.target.stopDrag();
}

You'll need to get the class of the item, then create a new instance of that class

Code:

---

function duplicateItem(event:MouseEvent):void{
    var target:DisplayObject = DisplayObject(event.target);
    var clazz:Class = Class(target.constructor);
    var newOne:Sprite = Sprite(new clazz());
    newOne.x = target.x;
    newOne.y = target.y;
    target.parent.addChild(newOne);
    startX = target.x;
    startY = target.y;
    newOne.startDrag(true);
}

---

With function below I get an error 1119: Access of possibly undefined property constructor through a reference with static type flash.display: DisplayObject. This error is from the 3rd line of the function. Any ideas?

Quote:

---

Originally Posted by 5TonsOfFlax

You'll need to get the class of the item, then create a new instance of that class

Code:

---

function duplicateItem(event:MouseEvent):void{
    var target:DisplayObject = DisplayObject(event.target);
    var clazz:Class = Class(target.constructor);
    var newOne:Sprite = Sprite(new clazz());
    newOne.x = target.x;
    newOne.y = target.y;
    target.parent.addChild(newOne);
    startX = target.x;
    startY = target.y;
    newOne.startDrag(true);
}

---

---

That doesn't make sense. The constructor property is defined by Object, everything has it. I'll try to actually run the code and see what happens.

That's silly. I had to cast it to Object before it would work. Seems like a compiler error, but who knows.

Code:

---

                private function duplicateItem(event:MouseEvent):void{
                        var target:Sprite = Sprite(event.target);
                        var clazz:Class = Class(Object(target).constructor);
                        var newOne:Sprite = Sprite(new clazz());
                        newOne.x = target.x;
                        newOne.y = target.y;
                        target.parent.addChild(newOne);
                        newOne.addEventListener(MouseEvent.MOUSE_UP, dropItem);
                        newOne.startDrag(true);
                }

---

Thank you very much! :) It is working great!

What do you mean when you say "cast it"? That's a new one to me...

Quote:

---

Originally Posted by 5TonsOfFlax

That's silly. I had to cast it to Object before it would work. Seems like a compiler error, but who knows.

Code:

---

                private function duplicateItem(event:MouseEvent):void{
                        var target:Sprite = Sprite(event.target);
                        var clazz:Class = Class(Object(target).constructor);
                        var newOne:Sprite = Sprite(new clazz());
                        newOne.x = target.x;
                        newOne.y = target.y;
                        target.parent.addChild(newOne);
                        newOne.addEventListener(MouseEvent.MOUSE_UP, dropItem);
                        newOne.startDrag(true);
                }

---

---

Casting is telling the compiler that an object of one type should be treated as another type. Above, we are casting event.target to Sprite (because event.target is typed as Object), and casing that back to Object (which I guess we could have just used event.target there instead of re-casting). We also cast the new instance of the class to Sprite so that we know it's a DisplayObject that has startDrag.

Thanks 5TonsOfFlax for your great help. I am hoping you can now help me with the second part of my script in the function "dropItem". What I have below was working with my original script in this thread but with you new code in function "duplicateItem" it no longer works. Would you mind looking at "function dropItem" and see if you can see why it won't work anymore?

Also, since we changed the "startX" and "startY" the shapes box, circle, and triangle no longer go back to their original position. Any ideas on how to make them go back to their original position?

What I have is three shapes on the stage with three matching targets that the shapes are dropped on. If the shapes are not dropped on the target shapes then I want them to go back to their original position.

Actionscript Code:

box_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
box_mc.addEventListener(MouseEvent.MOUSE_UP, dropItem);
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
circle_mc.addEventListener(MouseEvent.MOUSE_UP, dropItem);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
triangle_mc.addEventListener(MouseEvent.MOUSE_UP, dropItem);

var startX:Number;
var startY:Number;

function duplicateItem(event:MouseEvent):void{
            var target:Sprite = Sprite(event.target);
            var clazz:Class = Class(event.target.constructor);
            var newOne:Sprite = Sprite(new clazz());
            newOne.x = target.x;
            newOne.y = target.y;
            target.parent.addChild(newOne);
            newOne.addEventListener(MouseEvent.MOUSE_UP, dropItem);
            newOne.startDrag(true);
        }

function dropItem(event:MouseEvent):void {
    event.target.stopDrag();
    var myTargetName:String = "target" + event.target.name;
    var myTarget:DisplayObject = getChildByName(myTargetName);
    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropItem);
        event.target.buttonMode = false;
        event.target.x = myTarget.x;
        event.target.y = myTarget.y;
    } else {
        event.target.x = startX;
        event.target.y = startY;
    }

}

I'm confused as to what you're trying to do. Since you're dragging the duplicate and not the original, there's no need to have a mouse_up listener on the originals and no need to remove the mouse_down listener in dropItem, because it never had that listener.
You can set startX and startY in duplicateItem as you did before, but that will put the duplicate in the same physical place as the original. You probably want to remove it entirely instead of moving it.

Also, look at this:

Code:

---

    var myTargetName:String = "target" + event.target.name;
    var myTarget:DisplayObject = getChildByName(myTargetName);

---

Do you see how silly that is?

Code:

---

Flax: "Hi, nice to meet you.  What's your name?"
Manx: "Manx Mariner"
Flax (to the room): "Hey, can someone find me Manx Mariner?"

---

event.target is already the reference you want. You don't need to get its name then look it up by its name!

Code:

---

var myTarget:DisplayObject = DisplayObject(event.target);

---

This is what I'm after: I have 3 shapes at the top of the stage -- "box_mc", "triangle_mc", and "circle_mc". When the user clicks on one of these 3 shapes a duplicate will be created that can dragged on top of a matching shape at the bottom of the page and it will snap to that bottom target shape and remain there. If the shape is dragged upon the wrong shape, at the bottom, then it would be removed.

As for the shape moving back to its original position, I think you are correct, I should probably just remove them since it is a duplicate. Would I use "removeChild()"?

How would you rewrite this to work as I stated above?

Quote:

---

Originally Posted by 5TonsOfFlax

I'm confused as to what you're trying to do. Since you're dragging the duplicate and not the original, there's no need to have a mouse_up listener on the originals and no need to remove the mouse_down listener in dropItem, because it never had that listener.
You can set startX and startY in duplicateItem as you did before, but that will put the duplicate in the same physical place as the original. You probably want to remove it entirely instead of moving it.

Also, look at this:

Code:

---

    var myTargetName:String = "target" + event.target.name;
    var myTarget:DisplayObject = getChildByName(myTargetName);

---

Do you see how silly that is?

Code:

---

Flax: "Hi, nice to meet you.  What's your name?"
Manx: "Manx Mariner"
Flax (to the room): "Hey, can someone find me Manx Mariner?"

---

event.target is already the reference you want. You don't need to get its name then look it up by its name!

Code:

---

var myTarget:DisplayObject = DisplayObject(event.target);

---

---

Code:

---

box_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);

function duplicateItem(event:MouseEvent):void{
            var target:Sprite = Sprite(event.target);
            var clazz:Class = Class(event.target.constructor);
            var newOne:Sprite = Sprite(new clazz());
            newOne.x = target.x;
            newOne.y = target.y;
            target.parent.addChild(newOne);
            newOne.addEventListener(MouseEvent.MOUSE_UP, dropItem);
            newOne.startDrag(true);
}

function dropItem(event:MouseEvent):void {
  var myTarget:DisplayObject = DisplayObject(event.target);
  myTarget.stopDrag();
  //I don't know about this logic.  It's equivalent to yours, but it doesn't look right.
  if (myTarget.dropTarget != null && myTarget.dropTarget.parent == myTarget){
    myTarget.removeEventListener(MouseEvent.MOUSE_UP, dropItem);
    myTarget.buttonMode = false;
  } else {
  myTarget.parent.removeChild(myTarget);
  }
}

---

I received the following errors with the function dropItem:

1061: Call to a possibly undefined method stopDrag through a reference with static type flash.display.DisplayObject.
1119: Access of a possibly undefined property dropTarget through a reference with static type flash.display.DisplayObject.

I have also attached a .fla with my old code that works without duplication, of course, and it also contains your new code commented out.

Thanks again for your patience and kindness.

Quote:

---

Originally Posted by 5TonsOfFlax

Code:

---

box_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);

function duplicateItem(event:MouseEvent):void{
            var target:Sprite = Sprite(event.target);
            var clazz:Class = Class(event.target.constructor);
            var newOne:Sprite = Sprite(new clazz());
            newOne.x = target.x;
            newOne.y = target.y;
            target.parent.addChild(newOne);
            newOne.addEventListener(MouseEvent.MOUSE_UP, dropItem);
            newOne.startDrag(true);
}

function dropItem(event:MouseEvent):void {
  var myTarget:DisplayObject = DisplayObject(event.target);
  myTarget.stopDrag();
  //I don't know about this logic.  It's equivalent to yours, but it doesn't look right.
  if (myTarget.dropTarget != null && myTarget.dropTarget.parent == myTarget){
    myTarget.removeEventListener(MouseEvent.MOUSE_UP, dropItem);
    myTarget.buttonMode = false;
  } else {
  myTarget.parent.removeChild(myTarget);
  }
}

---

---

flas are useless to me. I don't have or use Flash.

Those errors are because DisplayObject doesn't declare those properties or methods. Change the type of myTarget to Sprite and the cast accordingly.

Code:

---

var myTarget:Sprite = Sprite(event.target);

---

OK, I tried what you suggested and the shapes drag and duplicate and if not dragged on top of their target the shapes dissappear. But, the shapes don't snap to their target at the bottom of the stage if the shapes are dragged on top of the target. Here is the function "dropItem" that I have now:

Actionscript Code:

function dropItem(event:MouseEvent):void {
  var myTarget:Sprite = Sprite(event.target);
  myTarget.stopDrag();
  //I don't know about this logic.  It's equivalent to yours, but it doesn't look right.
  if (myTarget.dropTarget != null && myTarget.dropTarget.parent == myTarget){
     myTarget.removeEventListener(MouseEvent.MOUSE_UP, dropItem);
  } else {
   myTarget.parent.removeChild(myTarget);
  }
}

I don't quite get how your targets and the draggables are related. I don't understand how you can drag something on top of its own child (wouldn't the child move?)

Whatever. See the bolded line below for where to add your positioning code. You may have to use localToGlobal and globalToLocal to translate between coordinate spaces.

Code:

---

function dropItem(event:MouseEvent):void {
  var myTarget:Sprite = Sprite(event.target);
  myTarget.stopDrag();
  //I don't know about this logic.  It's equivalent to yours, but it doesn't look right.
  if (myTarget.dropTarget != null && myTarget.dropTarget.parent == myTarget){
    myTarget.removeEventListener(MouseEvent.MOUSE_UP, dropItem);
    //put positioning code here.
  } else {
  myTarget.parent.removeChild(myTarget);
  }
}

---

I have added comments to the original function "dropItem", maybe this will help understand the original code:

Actionscript Code:

function dropItem(event:MouseEvent):void {
    event.target.stopDrag();
    //below creates a text string from the word “target” plus the name of the shape dropped, 
    //creating a name that matches a target, such as "targetsquare_mc"
    var myTargetName:String = "target" + event.target.name;
    //this line looks through the document for an object with that name, and saves a 
    //reference to it in a variable called "myTarget"
    var myTarget:DisplayObject = getChildByName(myTargetName); 
    //The if statement checks to make sure that the dropTarget, or the item that is under 
    //the shape when the mouse button is released, is not null, or empty. In other words, if 
    //we release square_mc over the movie clip named “targetsquare_mc“, we receive a positive 
    //reply. If the peg is released anywhere else, we will receive a negative reply.
    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
        //When a shape is placed over the correct target, the if statement returns true, 
        //and that shape will be locked and no longer dragable.
        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, duplicateItem);
        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropItem);
        event.target.buttonMode = false;
        //once a shape is placed, it fits perfectly over the target shape
        event.target.x = myTarget.x;
        event.target.y = myTarget.y;
    } else {
        //this moved the shapes back to their origin, but I like your idea of just 
        //removing them as their are duplicates now
        event.target.x = startX;
        event.target.y = startY;
    }

Ohhh. You are using a naming convention to associate your draggables and targets. That's what I missed before. So in my code myTarget was the dragged item (because it was the event target), in yours it was the intended dropTarget.

You can put that back in. But I'd prefer to associate them without using the name property. You could simply set a property on the clip, or you could use a Dictionary to use one as a key and the other as a value.

Woah! I think my head hurts. :) I give up... so close but yet so far...

Thank you for your help, I really do appreciate it.

Quote:

---

Originally Posted by 5TonsOfFlax

Ohhh. You are using a naming convention to associate your draggables and targets. That's what I missed before. So in my code myTarget was the dragged item (because it was the event target), in yours it was the intended dropTarget.

You can put that back in. But I'd prefer to associate them without using the name property. You could simply set a property on the clip, or you could use a Dictionary to use one as a key and the other as a value.

---