With our tunes playing and the volume knob to about the 3:00PM position (I prefer it loud) lets get started. First you need to create some content to drag. I just made some nice looking mockup boxes for now.

With the content boxes created they need instance names. Anything will work just give them appropriate and easy to remember names. In my case I gave them the instance names news and images accordingly.

Ok with the 'design' section out of the way now it's time to get dirty with some ActionScript. I like to keep everything on a frame in the main timeline. It allows all my code to be easily accessible and even allows me to shorten code! We'll get to that later but for now we need to figure out how we're going to set this up. See Figure 1.

To remember where the objects are dragged to we're going to have to use the shared object. Shared object is an extremely useful tool when designing Flash applications. It's exactly like a cookie but specific to Flash. It is a special beast though. The special object doesn't allow data to be directly written to it like so:

sharedObj.data.myName = "Sam";

All data that is to be written to the shared object has to be by reference. For example:

var name:String = "Sam";
sharedObj.data.myName = name;

This isn't a problem however as we only have to slightly change how we design the code portion of this project. With that sorted out let's define the three variables we'll need for this project - positions array, instances array, and the shared object itself.

//Insert your own instance names into the array
var instances:Array = [_root.news, _root.images];
var so:SharedObject = SharedObject.getLocal
( "pps.com/tutorial/userPositions");
var positions:Array = [[],[]];

I chose to have the positions of the movie clips in the instances array stored in a 2d array. I could have used objects with the properties x and y in a 1d array but I just like arrays. The positions will also be stored in the shared object as a 2d array named posArr. Now onto writing the functions we need.

For each movie clip that we want to be draggable on stage we have to write a handler. You can imagine that this would be a pain because for each instance we'd have to write these handlers.

mc.onPress = function(Void):Void{
  this.startDrag();
}
mc.onRelease = function(Void):Void {
  this.stopDrag();
}

But (bum bum bummm!) thanks to some clever coding we can use a for loop to loop through an array we take in as a parameter to set all our handlers. Lets begin function header and the for loop. (Note: I personally prefer putting all the functions etc I write above where I define my vars. It helps keep code more organized.)

function setHandlers(mcs:Array):Void {
   for( var a:Number = 0; a <= mcs.length-1; a++){

Now we need to setup the on press and on release handlers of our movie clips then just close the for loop and function.

mcs[a].onPress = function(Void):Void{
  if(this.onEnterFrame){
   delete this.onEnterFrame;
  }
  this.startDrag();
}
mcs[a].onRelease = function(Void):Void {
  this.stopDrag();
  setPositions(); //inserts object's x/y coords into SO
  }
}//end for a
}//end setHandlers

Q. Why are we checking for a nonexistent on enter frame handler?
A. Don't worry for now it'll be clear later on why we need this if test.

Q. What's this setPositions function about?
A. The setPositions function is the function we're about to write that will actually update the shared object with the positions of our elements on stage.

The set positions function is extremely simple. First we have to use a for loop to go through the instances array we defined earlier.

function setPositions(Void):Void {
  //Cycle through all the instances
  for( var a:Number = 0; a <= instances.length-1; a++){

Now, we could just reset every instance's x/y coordinates but that'd take extraneous processing power if they hadn't been moved. Because of that we just need to have a simple if test to check if the x or y coordinates of the movie clip in question are different then those in the array.

  if( instances[a]._x != positions[a][0] || instances[a]._y != positions[a][1]){
   positions[a][0] = instances[a]._x;
   positions[a][1] = instances[a]._y;
   }
  }//end for a

With our if test done and for loop closed we just have to set the shared object's 2d array posArr to positions.

so.data.posArr = positions;
so.flush(); //force so to write
}//end setPositions