Components

The movie will have 5 layers, 4 movieclips, and 2 buttons.

Layers/Layer names:

• Script
• Call
• Code
• Text
• Nextbutton

MovieClips:

• Call
• Code
• MCobject
• MCtarget

Buttons:

• Next
• Objectbutton

The Main Screen

As you can see the main screen is pretty empty but the beauty is that it builds everything on the fly and lets you change the parameters to fit just exactly what it is you are trying to do.

All that appears is the text, next button, and the two script movieclips that do all the work.

Getting Started

I always make the top layer of my movie my script layer - I only place frame script in that layer. The second and third layers I reserve for movieclips that only hold script (no text or graphics).

In this particular movie I've made 2 movieclips that only hold script. The first is called (call) and it is used to call functions within the other movieclip (code).

The reason I have a movieclip that calls functions in another movieclip is (and I'm not sure if it's a bug or not) but I tried to put my calls to my movieclip in the first frame of my movie and it would not work. SO - I use this as a work around.

Script Movie Clip

The following script is located in the call movieclip. It calls functions that are located in the code movieclip:

_root.code.inits();
_root.code.placement();
_root.code.setcoords();

stop();

Code Movie Clip

The code movieclip is what does most of the work. It is used to set your variables, arrays, and build your elements to the screen. We'll break it down by function. The first function is what I use to initialize my variables and arrays.

function inits() {
//setting global variables
_root.howmany = 4; specify how many drag and drop items you want
_root.targetX = 90; sets the starting X position for your targets
_root.targetY = 90; sets the starting Y position for your targets
_root.objectX =450; sets the starting X position for your drag objects
_root.objectY = 90; sets the starting Y position for your drag objects
_root.spacing = 50; set the spacing between both targets and objects

//setting arrays
cover = new Array(); array used to tell if your targets are covered or not
target_array = new Array(); array used to hold the X & Y positions of your targets
object_array = new Array(); array used to hold the X & Y positions of your objects
}

Code Movie Clip (cont)

The second function is using attachMovie to build your screen elements. You set how many elements you wanted in the variable _root.howmany now you are looping through that many times to place your targets and objects on the screen at the X Y coordinates you specified in your first function.

function placement() {
        for (i = 0; i <_root.howmany; i ++) {

                this._parent.attachMovie("target", "t" + i, i);
                this._parent.attachMovie("object", "o" + i, i + _root.howmany);

                _root["t" + i]._x = _root.targetX;                                 setting the X placement of your target
                _root["t" + i]._y = _root.targetY;                                 setting the Y placement of your target

                _root["o" + i]._x = _root.objectX;                                setting the X placement of your object
                _root["o" + i]._y =_root.objectY;                                 setting the Y placement of your object

                _root.targetY = _root.targetY + _root.spacing;        setting target spacing
                _root.objectY = _root.objectY + _root.spacing;        setting object spacing
        }
}

Code Movie Clip (cont)

The next 2 functions work together to build the arrays that hold the actual X Y positions of you targets and your objects. These arrays are used to place the objects back into position.

function x_y(my_x,my_y) {
this.my_x = my_x;
this.my_y = my_y;
}


function setcoords() {
for (var i = 0; i <_root.howmany; i++ ) {
target_array[i] = new x_y (getProperty (_root["t" + i],_x),getProperty (_root["t" + i],_y));
object_array[i] = new x_y (getProperty (_root["o" + i],_x),getProperty (_root["o" + i],_y));
cover[i] = 0

Code Movie Clip (cont)

The final function is used to remove the movieclips once you progress to the next frame. It is call by the next button within the program: (_root.code.clearscreen();)

function clearscreen() {
for (i = 0; i <_root.howmany; i ++) {
_root["t" + i].unloadMovie();
_root["o" + i].unloadMovie();
}
}

;}
}

Drag Object Code

The following code appears in the button of the drag objects we'll start with the ON PRESS event first:

on (press) {

mydepth = _root.howmany * 2 here we are setting a variable to a certain depth (z)order so it
will always appear on top as you are dragging it around the screen.

this.swapDepths(mydepth); this is where we actually set the depth of the object

startDrag (this, true); this allows us to drag the object

for (i = 0; i <_root.howmany; i++) {
if (this.hitTest(_root["t" add i])) {
_root.code.cover[i] = 0
break;
}
}
}

The above for loop is used to set the cover of a target to 0 or False. The reason we are doing this is that if you placed an object on a target then moved it off the target - then we wanted to be able to allow other objects to be placed on that target. If an object is placed on a target we set the cover to 1 or True so no other object can be placed on that target.

Drag Object Code (On Release Event)

on (release) {

stopDrag (); this stops the object

my_num = substring(this._name, 2, length(this._name));
This function checks to see
if (this.hitTest(_root["t" add i])) { if you have landed on a target
var hit_success = 1 If so it sets a variable hit_success
break; equal to 1 or TRUE
}else{
var hit_success = 0 If not it sets the same variable
} hit_success equal to 0 or FALSE
}

for (i = 0; i <_root.howmany; i++) {

Drag Object Code (On Release Event) (cont)

The IF statement below checks to see if we have landed on a target and if we have and it's not covered then we set the objects X Y coordinates equal to the X Y coordinates of the target using the arrays we build. We also set the cover of that target to 1 or TRUE so you can't drop anything else on that target.

If either the target is covered or we aren't over a target then we used the variable that we set upon release (my_num) and we set the object back to its original X and Y coordinates.

if (hit_success == 1 && _root.code.cover[i] == 0) {
this._x = _root.code.target_array[i].my_x;
this._y = _root.code.target_array[i].my_y;
_root.code.cover[i] = 1;
}else{
this._x = _root.code.object_array[my_num].my_x;
this._y = _root.code.object_array[my_num].my_y;
}
}

Conclusion

Well that is pretty much it.

You create a target movieclip and a drag object movieclip.
You initialize your global variables and arrays.
From there you build your screen set your coordinates and use the hitTest function.

This was my first crack at developing a tutorial but I hope it helps.

Code Movie Clip (cont)

Lets see how these work together¡­..

discuss this topic to forum