I originally was thinking that I would be able to do this by having the user select the files of their choice and click one button to download the items. So depending on their selection the Flex app would download the first item, then upon complete download of the first item it would download the second item and so on.. Unfortunately I could not get this to work on various browsers as the dialog box to download the file location would never appear on the second file. So with a little exploring I was able to accomplish the task of downloading multiple files of the users choosing with the use of:

Here is a list of things that I needed to get this working.

1. AMFPHP – Lee Brimelow has an excellent tutorial to get you started: http://www.gotoandlearn.com/play?id=78
2. PHP Class file to create zip documents from an array. You can find the one I used here: http://www.phpconcept.net/pclzip/index.en.php (note I am using PHP 5.*)
3. I also grabbed this class file from FlexExamples.com for using a checkbox control as a list item renderer

Here is the process:

1. So first the user will select the files he/she wishes to download
2. The user will need to click a button to notify the server the array of files and generate a unique .zip document
3. The download button will need to be active once the zip file is created so the user can then download the new .zip file
4. User clicks the download button to download the file
5. Will need to run a cron to delete all the generated .zip files as to not load up my server. (I won’t cover this step)

Honestly I am not a PHP programmer, but this is the Service Class that I put in my Service folder in my AMFPHP setup…

The file name is ZipFile.php (also don’t forget to inlude the library for zipping files)

<?php

class ZipFile
{
	/**
	* Demo ZipFile
	* @returns file name of zip object
	*/

	function ZipFileTest($fileArr) // this is what gets called from flash
	{
		// include the library from http://www.phpconcept.net/pclzip/index.en.php
		include_once("pclzip.lib.php");

		// create a unique file name.. this is prepended with manewc.com-
		$uniqueFileName = uniqid("manewc.com-");

		// create the zip
		$archive = new PclZip('../relative/path/to/put/this/zip/file'.$uniqueFileName.'.zip');

		$v_list = $archive->create($fileArr);

  		if ($v_list == 0) {
    		$status = "Error : ".$archive->errorInfo(true);
  		}
  		else
  		{
  			$status = $uniqueFileName;
  		}

		return $status;

	}
}

?$gt;

In Flex, I just need to add the ListItemValueObject.as file from FlexExamples.com. I added this file in src/com/flexexamples/.

Here is my Main.mxml file to create the ui:

Please note that my editor generally does not render my flex code properly.. check this file here: Main.mxml.txt

I’ll have to admit that this code needs to be cleaned up.. just ran out of time at the moment.

The Main.as Document Class:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import org.cove.ape.*;

	public class Main extends Sprite
	{
		private var follow:Ball;

		private var c:Circle;
		private var vr:Number = .4;
		private var _maxpts:Number = 15; // number of drawn points, this is dependent on vr variable.
		private var cos:Number = Math.cos ( vr );
		private var sin:Number = Math.sin ( vr );

		private var _ct:Number = 0; // counter

		private var _ptarr:Array = new Array();
		private var defaultGroup:Group;
		private var _scarr:Array = new Array();

		public function Main()
		{
			init();
		}

		private function init():void
		{
			stage.frameRate = 55;

			// Initialize the engine. The argument here is the time step value.
			// Higher values scale the forces in the sim, making it appear to run
			// faster or slower. Lower values result in more accurate simulations.
			APEngine.init(1/4);

			// set up the default diplay container
			APEngine.container = this;

			//APEngine.addMasslessForce(new Vector(0,6));
			APEngine.addMasslessForce(new Vector(0,0));

			defaultGroup = new Group();

			defaultGroup.collideInternal = true;

			APEngine.addGroup(defaultGroup);
			addEventListener(Event.ENTER_FRAME, run);

			follow = new Ball();
			addChild ( follow );
			follow.x = 130;
			follow.y = 130;
			follow.addEventListener ( Event.ENTER_FRAME, drawCircleBounds );
		}

		private function drawCircleBounds (e:Event):void
		{
			var x1:Number = follow.x - stage.stageWidth / 2;
			var y1:Number = follow.y - stage.stageHeight / 2;
			var x2:Number = cos * x1 - sin * y1;
			var y2:Number = cos * y1 + sin * x1;

			follow.x = stage.stageWidth / 2 + x2;
			follow.y = stage.stageHeight / 2 + y2;

			/* CIRCLE PROPERTIES
				x:Number,
				y:Number,
				radius:Number,
				fixed:Boolean = false,
				mass:Number = 1,
				elasticity:Number = 0.3,
				friction:Number = 0
			*/

			/* Points of Circle
			------------------
			*/
			_ptarr[_ct] = new CircleParticle(follow.x, follow.y, 2, true, 1, 0);
           	_ptarr[_ct].setStyle(0, 0, 0, 0xffffff);
			defaultGroup.addParticle(_ptarr[_ct]);

			/* Connectors
			------------------
			*/

			if ( _ct > 0 )
			{
				_scarr[_ct] = new SpringConstraint(_ptarr[_ct-1], _ptarr[_ct], 4, true);
				defaultGroup.addConstraint( _scarr[_ct] );

				if ( _ct >= _maxpts )
				{
					_scarr[_ct+1] = new SpringConstraint(_ptarr[_ct], _ptarr[0], 4, true);
					defaultGroup.addConstraint( _scarr[_ct+1] );

					dropBall();
				}
			}

			/* Update
			------------------
			*/
			_ct++;

			/* Check end
			------------------
			*/
			if ( _ct > _maxpts ) follow.removeEventListener ( Event.ENTER_FRAME, drawCircleBounds );

		}

		private function dropBall():void
		{
			c = new Circle ( stage.stageWidth / 2, stage.stageHeight / 2, 30 );
			APEngine.addGroup(c);
			c.addCollidable ( defaultGroup );

			// make the ball move
			c.cp.velocity = (new Vector(10, 10));
		}

		private function run(e:Event):void
		{
			APEngine.step();
			APEngine.paint();
		}

	}
}

The Circle.as class

package
{
	import org.cove.ape.Group;
	import org.cove.ape.CircleParticle;
	import org.cove.ape.Vector;

	public class Circle extends Group
	{
		public var cp:CircleParticle;

		/*
		x:Number,
				y:Number,
				radius:Number,
				fixed:Boolean = false,
				mass:Number = 1,
				elasticity:Number = 0.3,
				friction:Number = 0
		*/

		public function Circle(x:uint, y:uint, r:Number=5, c:uint = 0xffffff)
		{
			cp = new CircleParticle(x, y, r, false, 1, 1);
			cp.setStyle(0, 0, 0, c);
			addParticle(cp);
		}
	}
}

Here is the Main.as file:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import org.cove.ape.*;

	public class Main extends Sprite
	{
		private var follow:Ball;
		private var db:DragableCircleParticle;
		private var vr:Number = .4;
		private var _maxpts:Number = 15; // number of drawn points, this is dependent on vr variable.
		private var cos:Number = Math.cos ( vr );
		private var sin:Number = Math.sin ( vr );

		private var _ct:Number = 0; // counter

		private var _ptarr:Array = new Array();
		private var defaultGroup:Group;
		private var _scarr:Array = new Array();

		public function Main()
		{
			init();
		}

		private function init():void
		{
			stage.frameRate = 55;

			// Initialize the engine. The argument here is the time step value.
			// Higher values scale the forces in the sim, making it appear to run
			// faster or slower. Lower values result in more accurate simulations.
			APEngine.init(1/4);

			// set up the default diplay container
			APEngine.container = this;

			APEngine.addMasslessForce(new Vector(0,6));

			defaultGroup = new Group();

			defaultGroup.collideInternal = true;

			APEngine.addGroup(defaultGroup);
			addEventListener(Event.ENTER_FRAME, run);

			follow = new Ball();
			addChild ( follow );
			follow.x = 130;
			follow.y = 130;
			follow.addEventListener ( Event.ENTER_FRAME, drawCircleBounds );
		}

		private function drawCircleBounds (e:Event):void
		{
			var x1:Number = follow.x - stage.stageWidth / 2;
			var y1:Number = follow.y - stage.stageHeight / 2;
			var x2:Number = cos * x1 - sin * y1;
			var y2:Number = cos * y1 + sin * x1;

			follow.x = stage.stageWidth / 2 + x2;
			follow.y = stage.stageHeight / 2 + y2;

			/* CIRCLE PROPERTIES
				x:Number,
				y:Number,
				radius:Number,
				fixed:Boolean = false,
				mass:Number = 1,
				elasticity:Number = 0.3,
				friction:Number = 0
			*/

			/* Points of Circle
			------------------
			*/
			_ptarr[_ct] = new CircleParticle(follow.x, follow.y, 2, true, 1, 0);
           	_ptarr[_ct].setStyle(0, 0, 0, 0xffffff);
			defaultGroup.addParticle(_ptarr[_ct]);

			/* Connectors
			------------------
			*/

			if ( _ct > 0 )
			{
				_scarr[_ct] = new SpringConstraint(_ptarr[_ct-1], _ptarr[_ct], 4, true);
				defaultGroup.addConstraint( _scarr[_ct] );

				if ( _ct >= _maxpts )
				{
					_scarr[_ct+1] = new SpringConstraint(_ptarr[_ct], _ptarr[0], 4, true);
					defaultGroup.addConstraint( _scarr[_ct+1] );

					dropBall();
				}
			}

			/* Update
			------------------
			*/
			_ct++;

			/* Check end
			------------------
			*/
			if ( _ct > _maxpts ) follow.removeEventListener ( Event.ENTER_FRAME, drawCircleBounds );

		}

		private function dropBall():void
		{
			db = new DragableCircleParticle(160, 150, 30, false, 10, .3);
			db.setStyle(0, 0, 0, 0x993300);
			defaultGroup.addParticle(db);
		}

		private function run(e:Event):void
		{
			APEngine.step();
			APEngine.paint();
		}

	}
}

and the Ball.as file ( this is used as the red ball )

package {
	import flash.display.Sprite;

	public class Ball extends Sprite {
		public var radius:Number;
		private var color:uint;
		public var xpos:Number = 0;
		public var ypos:Number = 0;
		public var zpos:Number = 0;
		public var vx:Number = 0;
		public var vy:Number = 0;
		public var vz:Number = 0;
		public var mass:Number = 1;

		public function Ball(radius:Number=10, color:uint=0xff0000) {
			this.radius = radius;
			this.color = color;
			init();
		}
		public function init():void {
			graphics.lineStyle(0);
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

I will be the first to admit that these files need to be cleaned up and properly coded.. but this will be a good base for a clean future project.

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import caurina.transitions.*;

	public class ImageGallery extends Sprite
	{
		private var ThumbArray:Array;
		private var tobj:Array; // thumb object array
		private var thumbMargin:Number = 5;
		private var ThumbNavigation:Sprite; // this is to hold all the thumbnails
		private var incrementArr:Array;
		private var VisibleThumbnails:Number = 4; // this will set the number of thumbnails that will be visible.
		private var MaskWidth:Number;
		private var myMask:Shape;
		private var maskHeight:Number = 100;
		private var nb:Sprite;
		private var bb:Sprite;
		private var nbs:Shape; // next button
		private var bbs:Shape; // back button
		private var CurrentIndex:Number = 0;
		private var ButtonIndex:Number;
		private var ButtonCounter:Number = 0;
		private var beginPoint:Number;
		private var endPoint:Number;
		private var destPoint:Number;
		private var ThumbNavigationOffset:Number;
		private var MainImage:LargeImage;
		private var MainImageMask:Shape;

		public function ImageGallery(iarr:Array)
		{
			// the array of the thumbnail images
			ThumbArray = new Array();

			for ( var g:uint = 0; g < iarr.length; g++ )
			{
				ThumbArray[g] = new Array ( iarr[g][0], iarr[g][1] );
			}

			addEventListener ( Event.ADDED_TO_STAGE, init );

			ButtonIndex = VisibleThumbnails;
		}

		private function init(e:Event):void
		{
			// the holder movie to hold all the thumbnail images
			ThumbNavigation = new Sprite();
			addChild ( ThumbNavigation );
			// put it off the stage
			ThumbNavigation.y = stage.stageHeight + maskHeight;

			// create the thumbnails
			tobj = new Array;

			for ( var c:uint = 0; c < ThumbArray.length; c++ )
			{
				// create a thumbnail image
				tobj.push ( new Thumbnail( ThumbArray[c][0], c ) );
			}

			// set the event to make sure all images are loaded
			addEventListener ( Event.ENTER_FRAME, checkLoadedThumb );

			// THIS IS WHERE WE WILL SET THE DEFAULT LARGE IMAGE
			DisplayLargeImage ( CurrentIndex ); // display the large image
		}

		private function checkLoadedThumb ( e:Event ):void
		{
			var loadCounter:Number = 0;

			for ( var d:uint = 0; d < ThumbArray.length; d++ )
			{
				if ( tobj[d].myWidth > 0 )
				{
					loadCounter++;
				}
			}

			if ( loadCounter == ThumbArray.length )
			{
				removeEventListener ( Event.ENTER_FRAME, checkLoadedThumb );

				// position the thumbnails
				positionThumbs();
			}
		}

		private function positionThumbs():void
		{
			var totalWidth:Number = 0;
			incrementArr = new Array();

			for ( var v:uint = 0; v < ThumbArray.length; v++ )
			{
				tobj[v].x = totalWidth;
				tobj[v].alpha = 0;

				// set the increments for each slide position when moving left to right
				incrementArr.push ( totalWidth );

				trace ( incrementArr[v] );
				// check for the width of the mask to go over thumbnail navigation
				if ( v == VisibleThumbnails )
				{
					MaskWidth = totalWidth;

					// create the mask
					CreateThumbnailMask();
				}

				totalWidth += thumbMargin + tobj[v].myWidth;
				// add the thumbnail to the stage
				ThumbNavigation.addChild ( tobj[v] );

				// thumbnail is alpha 0, let's fade it up to 80%
				Tweener.addTween(tobj[v], {alpha: .8, time:.8, transition:"easeOut"});

				// add the mouseevents
				tobj[v].addEventListener ( MouseEvent.MOUSE_OVER, ThumbOver );
				tobj[v].addEventListener ( MouseEvent.MOUSE_DOWN, ThumbDown );
				tobj[v].addEventListener ( MouseEvent.MOUSE_OUT, ThumbOut );
			}

			// show the active state of the thumbnail:
			tobj[CurrentIndex].activeState(); // set the look of the active thumbnail
		}

		private function CreateThumbnailMask():void
		{
			// Center the Menu
			ThumbNavigation.x = (stage.stageWidth / 2) - (MaskWidth / 2);
			ThumbNavigationOffset = ThumbNavigation.x;

			// Create the Mask
			myMask = new Shape();
            myMask.graphics.beginFill(0x000000);
            myMask.graphics.drawRect(ThumbNavigation.x, stage.stageHeight-maskHeight, MaskWidth, maskHeight);
            myMask.graphics.endFill();

			addChild ( myMask );

			// set the mask
			ThumbNavigation.mask = myMask;

			// show the Menu on Y axis
			Tweener.addTween(ThumbNavigation,{y:stage.stageHeight-maskHeight, time:.5, transition:"easeOut"});

			// create the next button
			NextButton();

			// create the back button
			BackButton();

			// setupUI;
			SetupUI();
		}

		private function ThumbOver (m:MouseEvent):void
		{
			if ( !m.currentTarget.getState() )
			{
				Tweener.addTween(m.currentTarget, {alpha: 1, time:.8, transition:"easeOutBack"});
				Tweener.addTween(m.currentTarget, {y: -20, time:2, transition:"easeOut"});
			}
		}

		private function DisplayLargeImage (n:int):void
		{
			if ( MainImage ) removeChild ( MainImage );

			MainImage = new LargeImage ( ThumbArray[n][1] );
			addChildAt ( MainImage, 0 );

			// Create the Main Image Mask
			MainImageMask = new Shape();
            MainImageMask.graphics.beginFill(0x000000);
            MainImageMask.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight-maskHeight-10);
            MainImageMask.graphics.endFill();
			addChild ( MainImageMask );

			MainImage.mask = MainImageMask;
		}

		private function ThumbDown (m:MouseEvent):void
		{
			if ( !m.currentTarget.getState() )
			{
				// display the default State of the previous selected thumbnail
				tobj[CurrentIndex].defaultState();

				// re initialize the index value
				CurrentIndex = m.currentTarget.myId;

				// display the active state
				m.currentTarget.activeState();

				DisplayLargeImage ( CurrentIndex );
			}
		}

		private function ThumbOut (m:MouseEvent):void
		{
			if ( !m.currentTarget.getState() ) Tweener.addTween(m.currentTarget, {alpha: .8, time:2, transition:"easeOutBack"});

			Tweener.addTween(m.currentTarget, {y: 0, time:2, transition:"easeOut"});
		}

		private function NextButton():void
		{
			nbs = new Shape();
            nbs.graphics.beginFill(0x000000);
            nbs.graphics.drawRect(stage.stageWidth - 20, stage.stageHeight-maskHeight, 20, maskHeight);
            nbs.graphics.endFill();

			nb = new Sprite();
			nb.name = "nextbutton";
			addChild ( nb );

			nb.addChild ( nbs );

			nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
		}

		private function BackButton():void
		{
			bbs = new Shape();
            bbs.graphics.beginFill(0x000000);
            //myMask.graphics.lineStyle(1, 0x000000);
            bbs.graphics.drawRect(0, stage.stageHeight-maskHeight, 20, maskHeight);
            bbs.graphics.endFill();

			bb = new Sprite();
			addChild ( bb );
			bb.name = "backbutton";
			bb.addChild ( bbs );

			bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
		}

		private function MoveThumbnails(m:MouseEvent):void
		{
			// check the current index and slide accordingly
			if ( m.currentTarget.name == "nextbutton" && ButtonIndex < ThumbArray.length )
			{
				nb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );

				ButtonIndex++;

				destPoint = ThumbNavigationOffset - incrementArr[++ButtonCounter];

				Tweener.addTween(ThumbNavigation,{x:destPoint, time:.6, transition:"easeOut", onComplete:EnableButtons("nextbutton")});
			}
			else if ( m.currentTarget.name == "backbutton" && ButtonIndex > 0 )
			{
				bb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );

				ButtonIndex--;

				destPoint = ThumbNavigationOffset - incrementArr[--ButtonCounter];
				Tweener.addTween(ThumbNavigation,{x:destPoint, time:.5, transition:"easeOut", onComplete:EnableButtons("backbutton")});
			}

			SetupUI();
		}

		private function EnableButtons(btnId:String):void
		{
			if ( btnId == "nextbutton" ) nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			if ( btnId == "backbutton" ) bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
		}

		private function SetupUI():void
		{
			// this function is to control the visibility of the next and back buttons
			trace ( "ButtonIndex: " + ButtonIndex + " " + VisibleThumbnails );
			if ( ButtonIndex > VisibleThumbnails )
			{
				Tweener.addTween(bb, {alpha: 1, time:2, transition:"easeOut"});
				// Tweener.addTween(nb, {alpha: 1, time:2, transition:"easeOut"});
				bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}
			else if ( ButtonIndex == VisibleThumbnails )
			{
				Tweener.addTween(bb, {alpha: 0, time:2, transition:"easeOut"});
				bb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}

			if ( ButtonIndex == ThumbArray.length )
			{
				Tweener.addTween(nb, {alpha: 0, time:2, transition:"easeOut"});
				nb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}
			else
			{
				Tweener.addTween(nb, {alpha: 1, time:2, transition:"easeOut"});
				nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}
		}
	}
}

and the Thumbnail.as file

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import caurina.transitions.*;

	public class Thumbnail extends Sprite
	{
		private var thumb:LoadImage;
		public var myWidth:Number;
		public var myId:Number;
		public var active:Boolean;

		public function Thumbnail(img:String, id:Number)
		{
			// set this id
			myId = id;

			// load in the image
			thumb = new LoadImage( img );
			addChild ( thumb );

			// check the image load
			addEventListener ( Event.ENTER_FRAME, checkLoad );
		}

		private function checkLoad ( e:Event ):void
		{
			if ( thumb.setComplete() && thumb.w() > 0)
			{
				// remove the listener
				removeEventListener ( Event.ENTER_FRAME, checkLoad );

				// get the width
				myWidth = thumb.w();
			}
		}

		public function defaultState()
		{
			active = false;
			Tweener.addTween(this, {alpha: 1, time:1, transition:"easeOut"});
		}

		public function activeState()
		{
			active = true;
			Tweener.addTween(this, {alpha: .1, time:3, transition:"easeOut"});
		}

		public function getState()
		{
			return active;
		}
	}
}

Here is the code:

package {
    import flash.display.Sprite;
    import flash.events.Event;
	import flash.events.MouseEvent;

    import org.cove.ape.*;

	public class Main extends Sprite {

		private var circle:DragableCircleParticle;
		private var circle2:DragableCircleParticle;

		public function Main()
		{
			init();
		}

		private function init():void
		{
			stage.frameRate = 55;

			// Initialize the engine. The argument here is the time step value.
			// Higher values scale the forces in the sim, making it appear to run
			// faster or slower. Lower values result in more accurate simulations.
			APEngine.init(1/4);

			// set up the default diplay container
			APEngine.container = this;

			APEngine.addMasslessForce(new Vector(0,5));

			var defaultGroup:Group = new Group();

			defaultGroup.collideInternal = true;

			/* RECTANGLE PROPERTIES
				x:Number,
				y:Number,
				width:Number,
				height:Number,
				rotation:Number = 0,
				fixed:Boolean = false,
				mass:Number = 1,
				elasticity:Number = 0.3,
				friction:Number = 0
			*/
            var floor:RectangleParticle = new RectangleParticle(stage.stageWidth/2, stage.stageHeight + 48, stage.stageWidth, 100, 0, true, 10);
            defaultGroup.addParticle(floor);

			var ceil:RectangleParticle = new RectangleParticle(stage.stageWidth/2, -50, stage.stageWidth, 100, 0, true, 10);
            defaultGroup.addParticle(ceil);

			var left:RectangleParticle = new RectangleParticle(-25, stage.stageHeight/2, 50, stage.stageHeight, 0, true, 10);
            defaultGroup.addParticle(left);

			var right:RectangleParticle = new RectangleParticle(stage.stageWidth+25, stage.stageHeight/2, 50, stage.stageHeight, 0, true, 10);
            defaultGroup.addParticle(right);

			/* CIRCLE PROPERTIES
				x:Number,
				y:Number,
				radius:Number,
				fixed:Boolean = false,
				mass:Number = 1,
				elasticity:Number = 0.3,
				friction:Number = 0
			*/

			/* BASKETBALL
			------------------
			*/
           	circle = new DragableCircleParticle(350, 150, 30, false, 20, .5);
			circle.setStyle(0, 0, 0, 0x993300);
			defaultGroup.addParticle(circle);

			/* HOOP & NET
			------------------
			*/
			var hl:CircleParticle = new CircleParticle( stage.stageWidth - 180, 300, 5, true );
			defaultGroup.addParticle ( hl ); // hoop top left

			var hl2:CircleParticle = new CircleParticle( stage.stageWidth - 170, 350, 5, false );
			defaultGroup.addParticle ( hl2 ); // hoop top left

			var hl3:CircleParticle = new CircleParticle( stage.stageWidth - 145, 430, 5, false );
			defaultGroup.addParticle ( hl3 ); // hoop top left

			var hlConnector:SpringConstraint = new SpringConstraint(hl, hl2, 0.5, true, 8);
			hlConnector.setStyle(0, 0x2c2c2c, 1, 0x2c2c2c);
			defaultGroup.addConstraint(hlConnector);  

			var hl2Connector:SpringConstraint = new SpringConstraint(hl2, hl3, 0.5, true, 8);
			hl2Connector.setStyle(0, 0x2c2c2c, 1, 0x2c2c2c);
			defaultGroup.addConstraint(hl2Connector);  

			var hr:CircleParticle = new CircleParticle( stage.stageWidth - 50, 300, 5, true );
			defaultGroup.addParticle ( hr ); // hoop top right

			var hr2:CircleParticle = new CircleParticle( stage.stageWidth - 60, 350, 5, false );
			defaultGroup.addParticle ( hr2 ); // hoop top left

			var hr3:CircleParticle = new CircleParticle( stage.stageWidth - 85, 430, 5, false );
			defaultGroup.addParticle ( hr3 ); // hoop top left

			var hrConnector:SpringConstraint = new SpringConstraint(hr, hr2, 0.5, true, 8);
			hrConnector.setStyle(0, 0x2c2c2c, 1, 0x2c2c2c);
			defaultGroup.addConstraint(hrConnector);

			var hr2Connector:SpringConstraint = new SpringConstraint(hr2, hr3, 0.5, true, 8);
			hr2Connector.setStyle(0, 0x2c2c2c, 1, 0x2c2c2c);
			defaultGroup.addConstraint(hr2Connector);

			// top of hoop connector
			var thoop:SpringConstraint = new SpringConstraint(hl, hr, 4, false, 8);
			thoop.setStyle(4, 0xffffff, 4, 0xffffff);
			defaultGroup.addConstraint(thoop);

			// bottom of hoop
			var bhoop:SpringConstraint = new SpringConstraint(hl2, hr2, 0.5, false, 8);
			bhoop.setStyle(0, 0x2c2c2c, 1, 0x2c2c2c);
			defaultGroup.addConstraint(bhoop);

			var bhoop2:SpringConstraint = new SpringConstraint(hl3, hr3, 0.5, false, 8);
			bhoop2.setStyle(0, 0x2c2c2c, 1, 0x2c2c2c);
			defaultGroup.addConstraint(bhoop2);

			// backboard
			var bb:RectangleParticle = new RectangleParticle(stage.stageWidth - 20, 220, 5, 200, 0, true, 1,.01);
			defaultGroup.addParticle ( bb ); // backboard

			APEngine.addGroup(defaultGroup);
			addEventListener(Event.ENTER_FRAME, run);
		}

		private function run(e:Event):void
		{
			APEngine.step();
			APEngine.paint();
		}
	}
}

You can grab the zip file here: http://ape-general.googlegroups.com/web/dragable_particles.zip and here is what can be produced:

package {
    import flash.display.Sprite;
    import flash.events.Event;
	import flash.events.MouseEvent;

    import org.cove.ape.*;

	public class Main extends Sprite {

		private var circle:DragableCircleParticle;
		private var circle2:DragableCircleParticle;

		public function Main()
		{
			init();
		}

		private function init():void
		{
			stage.frameRate = 55;

			// Initialize the engine. The argument here is the time step value.
			// Higher values scale the forces in the sim, making it appear to run
			// faster or slower. Lower values result in more accurate simulations.
			APEngine.init(1/4);

			// set up the default diplay container
			APEngine.container = this;

			APEngine.addMasslessForce(new Vector(0,8));

			var defaultGroup:Group = new Group();

			defaultGroup.collideInternal = true;

            var rect:RectangleParticle = new RectangleParticle(350, 348, 700, 20, 0, true);
            defaultGroup.addParticle(rect);

           	circle = new DragableCircleParticle(350, 150, 25);
			defaultGroup.addParticle(circle);

			circle2 = new DragableCircleParticle(300, 150, 25);
			defaultGroup.addParticle(circle2);

			APEngine.addGroup(defaultGroup);

			addEventListener(Event.ENTER_FRAME, run);
		}

		private function run(e:Event):void
		{
			APEngine.step();
			APEngine.paint();
		}
	}
}

Here is the new class file located in org/cove/ape/DragableCircleParticle.as (relative to my Main.as file)

package org.cove.ape{
	import flash.events.MouseEvent;
	import org.cove.ape.*;
	public class DragableCircleParticle extends CircleParticle{
		private var mouseIsDown:Boolean;
		public function DragableCircleParticle(
				x:Number,
				y:Number,
				radius:Number,
				fixed:Boolean = false,
				mass:Number = 1,
				elasticity:Number = 0.3,
				friction:Number = 0){
			super(x, y, radius, fixed, mass, elasticity, friction);
			alwaysRepaint = fixed;
			mouseIsDown = false;
			sprite.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			sprite.stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
			sprite.stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
		}
		private function mouseDownHandler(evt:MouseEvent):void{
			mouseIsDown = true;					// on mouse down set mouseIsDown to true
			curr.setTo(evt.stageX,evt.stageY);	// set the current position of the particle to the position of the mouse
			prev.setTo(evt.stageX,evt.stageY);	// set the previous position of the particle to the position of the mouse
		}
		private function mouseUpHandler(evt:MouseEvent):void{
			mouseIsDown = false;			// on mouse up set mouseIsDown to false
		}
		private function mouseMoveHandler(evt:MouseEvent):void{
			if(mouseIsDown){				// On mouse move if the mouse is down
				prev.copy(curr);			// set the previous position to the curent position of the particle
				curr.setTo(evt.stageX,evt.stageY);	// set the current position to the position of the mouse
			}
		}
		public override function update(dt2:Number):void {
			if(!mouseIsDown){		// Don't update if the mouse is down
				super.update(dt2);
			}
		}
	}
}

myTextAreaComponent.setStyle("upSkin",Sprite);

This was great, but if the user clicked anywhere within the text area, there would be this blue border that appeared.. so to get rid of that, I used this line of code:

myTextAreaComponent.setStyle("focusRectSkin",Sprite);

package
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Rectangle;
	import flash.geom.Point;

	public class CopyChannel extends Sprite
	{
		public function CopyChannel()
		{
			var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x336699);
			var rect:Rectangle = new Rectangle(0, 0, 200, 200);
			var pt:Point = new Point(10, 10);

			bmd.copyChannel(bmd, rect, pt, 1, 4); // the 1 and 4 represent BitmapDataChannel.RED, BitmapDataChannel.BLUE respectively

			var bm:Bitmap = new Bitmap(bmd);
			this.addChild(bm);
		}
	}
}