unpacking possible?

[jameslavis]

Hi everyone,

I have a question regarding whether or not this idea is feasible. If I have a drag and drop game, with individiual movie clips, could I pack them together so the user would pick up a cluster of mcs, drop them, and they would seperate and become individual again? My thought process on this is to create a holder transparent mc with all the mcs inside of it. Pick it up as a whole, place it and somehow delete the holder mc (parent maybe), and promote the mc's to parent status? If anyone can help direct me that'd be great.

[Ned Murphy]

You should be able to create a movieclip and add the objects to it using the addChild() method, then assign a listener to that movieclip for the dragging of them as a whole.  Then, when you are ready to release them from there, you can reparent them to wherever else, again, using addChild.

[jameslavis]

that sounds like its on the right path. To make it a little more clear imagine a pouch of marbles. So you drag the pouch (with the marble mcs inside of it). drop it, and I want to get rid of the pouch and never bring it back, have the marbles function as individual mcs after the pouch disappears. So I would have the marbles as children, the pouch as a parent, but then how would I remove them from the parent, become individual and remove the parent (pouch) completely.

[Ned Murphy]

Here's a link to an example of it that I just made.  The objects start out as individuals, and there's a button that groups or ungroups them in a toggling manner...

http://www.nedwebs.com/Flash/AS3_Drag_Group.fla

[jameslavis]

thanks for the reply ned, in the right ballpark but I think it can be even simpler. Your example is unbelievable really! do you have an email I can send an example to, as I don't have direct web space other then a third party site like megaupload. I have two piles of text boxes, i want to drag them as a whole from the start, then when I drop them on a region, they'll leave the cluster state and become individual movieclips. I only need them clustered at the very start, and once its been dropped on a zone, i'll never repackage. I have the code for zone changes of mcs, its the start as a packed group of mcs, then unpack.

[Ned Murphy]

I don't share my email in any forums.  If you understand how what I provided works, you should be able to derive the version you want from it.   It's really a simple matter of using addChild to change the parent.  If you show your code I or someone else, should be able to help.

[jameslavis]

hi Ned,

I understand regardng the email. I've posted my fla to mediafire if that helps. I'd like to group individual mcs off the start, when they hit a drop zone, they split and never need to return to the clustered state. I appreciate the help on this one...had me stumped for a while. Never had a good grasp on the parent/child aspect in flash.

http://www.mediafire.com/?s1lo7gk9bkr1yef

[Ned Murphy]

If you are expecting me to edit your file for you that is not going to happen (for a few reasons), but someone else here might do it for you.  The file I already provided has everything you need to do what you want to do.

[jameslavis]

hey ned,

I'm not asking you to complete this idea. I'm pretty new with as3 and learning as I go. Just trying to understand the idea behind the parent/child aspect of as3. The example you posted is brilliant, but to me it seems more complicated (maybe?) then what I'm looking to do. I merely posted my fla so you could see what I'm trying to accomplish. This is not something I plan to sell, i'm actually creating this to help fellow anger management facilitators work with at-risk youth. These folks learn much better with digital programming then pen and paper. So I've had to pick up flash, very intimidating.

Now some more searching tells me that if I have all three mcs placed in a parent mc, then to accomplish what I want is that I would have to add the three mcs to the stage, then remove the parent. Is this on the right path?

[Ned Murphy]

It's not a matter of understanding parent child relationships at all, though that is good to understand so you should continue to study.

What I posted is not more complicated than what you want to do, it just has the functionality assigned and commented to allow you to see which controls and code make what happen.

Just have the objects on the stage and use addChild to place them inside another object.  If the mc is named "holdAllTextfields" and you want to add a textfield with a var named "tf" assigned to target it, then just use holdAllTextfields.addChild(tf);  ... done.  If you want to move the textfield back out to the timeline it came from just use...  this.addChild(tf).

[jameslavis]

Here's where I'm at. Been at this puppy for a few hours here. So when I drag the container into the unpackzone, I remove the full container, and will readd the children. Now it works with one perflectly (cash), when I add the second one (poverty). It does add them both, but they lose their ability to be dragged, this is not the case when only 1 is added. Any ideas?

backbutton.addEventListener(MouseEvent.CLICK, backclick);

helpbutton.addEventListener(MouseEvent.CLICK, helpclick);

answerbutton.addEventListener(MouseEvent.CLICK, answerclick);

pile1.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

cash.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

poverty.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

ineffectiveness.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

sex.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

loneliness.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

love.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

pile1.addChild(cash);

cash.x=0

cash.y=0

pile1.addChild(ineffectiveness);

ineffectiveness.x=0

ineffectiveness.y=10

pile1.addChild(poverty);

poverty.x=0

poverty.y=20

var me:Object;

function grabMe(e:MouseEvent):void{

    me = e.currentTarget;

    me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe);

    me.startDrag();

stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);

    stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);

}

function dropMe(e:MouseEvent):void {

    stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);

    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);

    me.stopDrag();

    me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

dragchange(DisplayObject(e.currentTarget))

}

function dragMe(e:MouseEvent):void {

    e.updateAfterEvent();

}

function dragchange(e:DisplayObject):void{ 

if(unpackzone.hitTestPoint(mouseX, mouseY, true)){

while (pile1.numChildren > 0)

pile1.removeChildAt(pile1.numChildren-1);

addChild(cash);

cash.x=unpackzone.x

cash.y=unpackzone.y

addChild(poverty);

poverty.x=unpackzone.x

poverty.y=unpackzone.y

}

}

function backclick(event:MouseEvent):void{

gotoAndStop("main");

}

function helpclick(event:MouseEvent):void{

gotoAndStop("help");

}

function answerclick(event:MouseEvent):void{

gotoAndStop("answer");

}

[jameslavis]

anyone have any ideas?

[Kenneth Kawamoto]

I think you're overcomplicating things. Here's a simple example: you have MovieClips Pile, Cash, Poverty, and Ineffectiveness in the Library. On stage you have a MovieClip instance called "unpackZone".

import flash.display.MovieClip;
import flash.events.MouseEvent;

var pile:MovieClip = new Pile();
addChild(pile);
pile.addEventListener(MouseEvent.MOUSE_DOWN, pileMouseDown);
pile.addEventListener(MouseEvent.MOUSE_UP, pileMouseUp);

var cash:MovieClip = new Cash();
with (cash) {
    x = 0;
    y = 0;
}
pile.addChild(cash);

var poverty:MovieClip = new Poverty();
with (poverty) {
    x = 0;
    y = 30;
}
pile.addChild(poverty);

var ineffectiveness:MovieClip = new Ineffectiveness();
with (ineffectiveness) {
    x = 0;
    y = 60;
}
pile.addChild(ineffectiveness);

function pileMouseDown(e:MouseEvent):void {
    pile.startDrag();
}

function pileMouseUp(e:MouseEvent):void {
    pile.stopDrag();
    if (pile.hitTestObject(unpackZone)) {
        unpack();
    }
}

function unpack():void {
    var i:uint = pile.numChildren;
    while (--i) {
        addChild(pile.removeChild(pile.getChildAt(i)));
    }
}

[jameslavis]

Thanks for the reply Ken,

I tried to implement the code you posted but with a number of errors. Did you recreate new code or modify the posted code above? Like I said I'm still getting  my grounding in flash.  I posted a screenshot here, so I plan to have two piles, at the start they drag as a whole, when the hit the zone (in red, in the code listed as unpackzone), they will  be removed from the package, and need to act as individual draggable mcs (all called cash, poverty, and ineffectiveness). The black square in the picture is the temp parent container known as pile1 in the code.

[Kenneth Kawamoto]

My code was based on more dynamic setup: you have nothing but "unpackZone" MovieClip on stage. Everything else is in the Library with the Class name set accordingly.

[jameslavis]

see this is what is new to me, never used classes before. Can you add a class to an existing mc?

[Kenneth Kawamoto]

Yes, but you are not (yet) writing any classes for this set up - just check "Export for ActionScript" in the Symbol Properties dialogue box and give it a Class name.

[jameslavis]

hey ken,

I added the classes to the necessary mcs. I matched the exact case of the words you used and continue to come up with errors. Any way I can post what I've got for you?

[Kenneth Kawamoto]

Can you show us the error before that?

[jameslavis]

hey folks,

been sitting on this one all weekend. I'm thinking that I have the code to join the 3 items (cash, poverty and ineffectiness) into the mc called pile1. I can also remove them all when the hit the unpack zone. So my train of thought is to add a function to re-add them after they and pile1 are removed from the stage. Any thoughts on this? Here's what I'm working on....

backbutton.addEventListener(MouseEvent.CLICK, backclick);

helpbutton.addEventListener(MouseEvent.CLICK, helpclick);

answerbutton.addEventListener(MouseEvent.CLICK, answerclick);

pile1.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

cash.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

poverty.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

ineffectiveness.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

sex.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

loneliness.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

love.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

pile1.addChild(cash);

cash.x=0

cash.y=0

pile1.addChild(ineffectiveness);

ineffectiveness.x=0

ineffectiveness.y=10

pile1.addChild(poverty);

poverty.x=0

poverty.y=20

var me:Object;

function grabMe(e:MouseEvent):void{

    me = e.currentTarget;

    me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe);

    me.startDrag();

stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);

    stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);

}

function dropMe(e:MouseEvent):void {

    stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);

    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);

    me.stopDrag();

    me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

dragchange(DisplayObject(e.currentTarget))

}

function dragMe(e:MouseEvent):void {

    e.updateAfterEvent();

}

function dragchange(e:DisplayObject):void{

if(unpackzone.hitTestPoint(mouseX, mouseY, true)){

while (pile1.numChildren > 0)

pile1.removeChildAt(pile1.numChildren-1);

readdmc(DisplayObject(e.currentTarget))

}

}

function readdmc(e:DisplayObject):void{ 

stage.addChild(cash);

}

function backclick(event:MouseEvent):void{

gotoAndStop("main");

}

function helpclick(event:MouseEvent):void{

gotoAndStop("help");

}

function answerclick(event:MouseEvent):void{

gotoAndStop("answer");

}

[Kenneth Kawamoto]

> a function to re-add them after they and pile1 are removed from the stage.

Yes that should work. It's pretty much the same as what I showed to you though

function unpack():void {
    var i:uint = pile.numChildren;
    while (--i) {
        addChild(pile.removeChild(pile.getChildAt(i)));
    }
}

...this removes the children from pile and re-add them to Stage. The only deference is that you are saying remove pile (thus its children too) from the stage, rather than removing children from pile.

[jameslavis]

ok ken now we have this cooking. Ok here's my code, now this works perfectly but 1 of the three bundled items does not retain its ability to be dragged, any idea why two become draggable and not the last one? heres the revised code.

backbutton.addEventListener(MouseEvent.CLICK, backclick);

helpbutton.addEventListener(MouseEvent.CLICK, helpclick);

answerbutton.addEventListener(MouseEvent.CLICK, answerclick);

pile1.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

cash.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

poverty.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

ineffectiveness.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

sex.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

loneliness.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

love.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

import fl.transitions.Tween;

import fl.transitions.easing.*;

import fl.transitions.TweenEvent;

import flash.media.Sound;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.display.StageDisplayState;

pile1.addChild(cash);

cash.x=0

cash.y=0

pile1.addChild(ineffectiveness);

ineffectiveness.x=0

ineffectiveness.y=10

pile1.addChild(poverty);

poverty.x=0

poverty.y=10

var me:Object;

function grabMe(e:MouseEvent):void{

    me = e.currentTarget;

    me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe);

    me.startDrag();

stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);

    stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);

}

function dropMe(e:MouseEvent):void {

    stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);

    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);

    me.stopDrag();

    me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);

unpackpile(DisplayObject(e.currentTarget))

}

function dragMe(e:MouseEvent):void {

    e.updateAfterEvent();

}

function unpackpile(e:DisplayObject):void{

if(unpackzone.hitTestPoint(mouseX, mouseY, true)){

var i:uint = pile1.numChildren;

    while (--i) {

        addChild(pile1.removeChild(pile1.getChildAt(i)));

}

}

}

function backclick(event:MouseEvent):void{

gotoAndStop("main");

}

function helpclick(event:MouseEvent):void{

gotoAndStop("help");

}

function answerclick(event:MouseEvent):void{

gotoAndStop("answer");

}

[Kenneth Kawamoto]

Ah may be the iteration is not right - what do you get if you trace?

...
trace(addChild(pile1.removeChild(pile1.getChildAt(i))));
...

[jameslavis]

Hey Ken,

I get

[object MovieClip]

[object MovieClip]

[object MovieClip]

I've uploaded the file to mediafire if you can have a look, might be easier to see the problem, its the mc called poverty that remains unmoveable.

http://www.mediafire.com/?ml7nf60ga77hu82

[Kenneth Kawamoto]

>

I get

[object MovieClip]

[object MovieClip]

[object MovieClip]

I suppose they are 3 child MovieClips

If so I'd do like this: remove the initial addEventListener() to those MovieClips, and instead add the listener when you "unpacking":

...
var movieclip:MovieClip = addChild(pile1.removeChild(pile1.getChildAt(i))) as MovieClip;
movieclip.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
...