The whole idea is basically to draw a line dynamically between 2 displayobjects, on top of it when one object is being dragged the line is redrawn along based on the second sprite position.

There is  a lot more that can be done, like avoiding other sprites, drawing multiple lines attached to multiple buttons and so on. but I think this class can give you a good head start for future implementations.

First of all there are a few things that we need to consider before starting, let’s take a look at the first few tasks

1. Every Sprite needs to know to which button it has been linked to. You need to store this somewhere.
2. Every Sprite needs a specific anchor point that is used as endpoint of the drawn line.
3. As soon the drag method is started we need to know where  the one end of the line (from the sprite that is not being dragged by the mouse) is positioned at. This is something that we really need to do once on a startDrag method.

Here’s what I’ve done:
Based on the notices above, I’ve created a new Class called ConnectedSprite a simple class which extends the Sprite Class but with a few more options that helps us towards our goal and this is how our class looks like:

package
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.geom.Point;
 
	public class ConnectedSprite extends Sprite
	{
		private var _anchorPoint			:Point;
		private var _relativeObject		:ConnectedSprite;
 
		public function ConnectedSprite()
		{
			super();
		}
 
		public function set anchorPoint ( p:Point ):void
		{
			_anchorPoint = p;
		}
 
		public function get anchorPoint():Point
		{
			return _anchorPoint;
		}
 
		public function set relativeObject ( co:ConnectedSprite ):void
		{
			_relativeObject = co;
		}
 
		public function get relativeObject():ConnectedSprite
		{
			return _relativeObject;
		}
	}
}

Just to give you quick overview of what we are doing here:
Basically we are extending the Sprite class and adding two new variables _anchorPoint and _relativeObject, those are accessible by using getters & setters.
The _anchorpoint variable holds a fixed x and y position where our line should connect to and the _relativeObject has a reference to the other sprite which is being conntected to.
Pretty simple but effective.

That was already it, we now just need to create two new ConnectedSprite instances pass the needed values and there you go, below the BaseClass I’ve built for this example:

public class AnchoredSprite extends Sprite
	{
		private var _spriteA			:ConnectedSprite;
		private var _spriteB			:ConnectedSprite;
 
		private var _movingTarget		:ConnectedSprite;
		private var _staticTargetPos		:Point		= new Point();
 
		private var _connector			:Sprite;
 
		public function AnchoredSprite()
		{
			_connector = new Sprite();
			addChild( _connector );
 
			_spriteA = new ConnectedSprite();
			_spriteA.graphics.beginFill( 0xff0000, 1 );
			_spriteA.graphics.drawRect( 0, 0, 50, 50 );
			_spriteA.graphics.endFill();
			_spriteA.anchorPoint = new Point( _spriteA.width / 2, _spriteA.height / 2 );
			addChild( _spriteA );
			_spriteA.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
			_spriteA.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
 
			_spriteB = new ConnectedSprite();
			_spriteB.graphics.beginFill( 0x0000ff, 1 );
			_spriteB.graphics.drawRect( 0, 0, 50, 50 );
			_spriteB.graphics.endFill();
			_spriteB.anchorPoint = new Point( _spriteB.width / 2, _spriteB.height / 2 );
			addChild( _spriteB );
			_spriteB.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
			_spriteB.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
 
			_spriteA.relativeObject = _spriteB;
			_spriteB.relativeObject = _spriteA;
		}
 
		private function mouseDownHandler( e:MouseEvent ):void
		{
			e.target.startDrag( false );
			_movingTarget = e.target as ConnectedSprite;
			_staticTargetPos.x = _movingTarget.relativeObject.x + _movingTarget.relativeObject.anchorPoint.x;
			_staticTargetPos.y = _movingTarget.relativeObject.y + _movingTarget.relativeObject.anchorPoint.y;
			addEventListener( MouseEvent.MOUSE_MOVE, drawLine );
		}
 
		private function mouseUpHandler( e:MouseEvent ):void
		{
			e.target.stopDrag();
			_movingTarget = null;
 
			removeEventListener( MouseEvent.MOUSE_MOVE, drawLine );
		}
 
		private function drawLine( e:MouseEvent ):void
		{
			_connector.graphics.clear();
			_connector.graphics.lineStyle( 1, 0x333333 );
			_connector.graphics.moveTo( _staticTargetPos.x, _staticTargetPos.y );
			_connector.graphics.lineTo( _movingTarget.x + _movingTarget.anchorPoint.x, _movingTarget.y + _movingTarget.anchorPoint.y );
			e.updateAfterEvent();
		}
	}

it’s quite a long base class for this simple task, it could have been reduced using other drawing methods, but that is something that I leave up to you.

Below a working example and you can download the source files here: ConnectedSprite

Who doesn’t know SWFObject & SWFAddress? These two JavaScript buddies are the best a serious Flash Developer can have.

SWFObject embeds your Flash nicely and browser independent, it has gone a long way and now it’s even the default publishing method in Flash Builder and Flash Catalyst (not sure about Flash CS5 ), you can read a more detailed history on the projects history site.

SWFAddress is a small library that provides deep-linking functionality in your Flash projects, it enables you to create unique virtual URL’s which enables Search Engines to index your flash content and of course the utilisation of the browsers back and forward buttons eg. history capabilities.

Usually in our development process we integrate these 2 buddies right at the beginning of the project, before we even code any AS3 line, these two are already in the html template inside FlashBuilder. Last time I started a new project I downloaded the latest versions (at that time) from these libraries and implemented them. Everything was working fine, and it works fine, but sadly only on FF3+ and IE8.. what happened to the strength of SWFObject?

After scrolling through a few posts and forums I decided to gradually downgrade every version of each Library backwards to see what happens. I must mention that the default embedding and display of flash content works perfectly, but when you need to send flashvars or parameters to your swf, there’s when things break.

Solution?
It’s an easy one, but painful to find out as it took me a few hours to get it to work.
SWFObject and SWFAddress are in deed buddies, but they need to be coordinated  properly.

First pitfall:
The order that the javascript is being placed is very important, you NEED to place it in the order:
1. SWFObject 2. SWFAddress all other Javascripts you might have in place shouldn’t bother these two, but it’s always safer to put your custom stuff after the SWFAddress import.

Second pitfall:
There are various versions of each library some work together some don’t. I didn’t had the time to create a nice working table, but I promise you that I’m going to post one in the near future, but I can tell you what definately works 100%, SWFObject 2.2 & SWFAddress 2.2, yes both libraries with the same version number.

Third pitfall:
Sometimes ( I can’t tell you in which formation ) flashvars as parameters don’t get through to the SWF, the only workaround I found was to instead of using a parameters array I’ve passed an arguments array, that fixed all the troubles.

I know it’ s weird and I would like to elaborate more on this, but currently I just don’t have the time to do it, but don’t be afraid I will get a list up soon with my testing results.
If you have any questions to this topic, drop me a line and I will try to help you out.

UPDATE:
Changed version numbers from 2.3 to 2.2, thanks to Ven

So let’s begin from the ground up, your goal is to resize and save the newly resized files back again into a jpeg. Sounds easy?
It should be but it isn’t!!

First of all I have to tell you that I began my project with Zinc 3.0 which supports bytearrays, it was really cool to work with it, as I was able to use the JPEGEncoder class that anyway writes bytearrays.

Let’s look at the methods available:
setData();
writeData();
setDataBA();
writeDataBA();

You would achieve our goal somehow like this:

var bmp:Bitmap = DisplayToBitmap.draw(bSprite, false);
var bmd:BitmapData = new BitmapData(bmp.width, bmp.height);
bmd.draw(bmp);
 
var jpgEnc:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEnc.encode(bmd);
 
var jpgPath:String = persFolder + "\\My Pictures\\myScreensaverThumbs\\" + _arrayCCopy[i];
 
_convertedArray.push(jpgPath);
 
mdm.FileSystem.BinaryFile.setDataBA(jpgStream);
mdm.FileSystem.BinaryFile.writeDataBA(jpgPath);

But since I had to use Zinc 2.5 because of performance problems with the application, guess what? You don’t have the possibility to write a bytearray down to the harrdisk with the writeDataBA() method. So how the heck are you going to write a jpeg?

Let’s look at the methods available:
setData();
writeData();

Yeh, it’s not much, and yeh it didn’t change a lot in Zinc 3.0 besides that you can write Bytearrays.
So what you have to do is basicall write HEX code or Pipe ( | ) delimited strings, do that on a few dozen images and you can go get a cup of coffee and when you back it might be done by then.

var bmp:Bitmap = DisplayToBitmap.draw(sp, true);
var pngBA:ByteArray = PNGEncoder.encode(bmp.bitmapData);
MonsterDebugger.trace(this, pngBA);
var dataString:String = "";
for(var i:uint=0; i < pngBA.length; i++){
    if(i>0)
    {
	dataString += "|";
    }
    dataString += pngBA[i];
}
mdm.FileSystem.BinaryFile.setData(dataString);
mdm.FileSystem.BinaryFile.writeData(persFolder + "\\My Pictures\\myScreensaverThumbs\\" + _arrayCCopy[v]);

Now that you know how to to handle this, let’s think about  a few methods that Zinc 2.5 API provides you with:

bmpToJpg();
Nice little function but it only works if you have .bmp’s on your harddrive, who uses .bmp’s nowadays?

jpgToBmp();
hmm.. sounds better, you can grab a jpeg and convert it to a .bmp file, after that you can use the bmpToJpg() method to save them back, but come on, does that really make sense? After all you are using 2 methods to do a simple conversion and resave.

deleteFile();
Believe me or not, actually it’s quite obvious, you converted a jpeg to bmp and the bmp to jpeg, now you have
1) an original file
2) a bitmap file
3) a converted file
Isn’t that one too much?
Yep, now you have to use the deletefile() method to delete the bmp file which you are definately not going to use.

Now you used 3 methods to accomplish a simple task, that can be done in pure as3 with less lines of code. Now you ask yourself  “Tiago you are talking about Zinc 2.5, that’s anyway outdated” have a look at the methods available for Zinc 3.0. As you see they don’t have a simple “read jpeg / save jpeg” method. WHY NOT?????

But let’s continue, by now you know how to resize and resave images with Zinc 2.5 and Zinc 3.0, but you are probably not only going to convert one single image on the fly, that would be kind of boring no?

Let’s try to get a list of files from a specific directory, to accomplish that we need the getFileList() method, below a simple line on how to use it

var myFiles:Array = mdm.FileSystem.getFileList("c:\\my images\\", "*.jpg");

Sounds simple, you build an array and call the getFileList method pointing to the location you wish and filtering it based on the file ending, at the end you don’t want to get some weird errors because you try to convert a .doc or whatsoever into a .bmp / .jpg

if you don’t believe me, then try this out on your own doesn’t matter which version of Zinc you own

1. Create a folder on your c drive (it’s easier to target then anything else)
2. Drop a few images and rename the filetype of some of the files to .JPEG, .jpg, .jpeg (case sensitive)
3. Run the code above in your project using the path to the folder you just created

Result:
Only the files with the case sensitive .jpg will be pushed into the array, yeh now you know it, this damn thing is case sensitive, so let’s create some more arrays to handle the different filetypes and use some more processing time and memory then needed, the same goes for every filetype you want to push in. In my case I had to get all images with a filetype of (.jpg, .jpeg, .JPG, .JPEG, .bmp, .BMP, .png, .PNG) 8 querys on the filesystem all using the same method, sigh..

Have you ever ran into a Zinc problem before, let us hear your experience with it.

Normally you would use the yourTextField.setSelection(startIndex, endIndex); method, but like I said before that doesn’t really work very well.

You just need to set the focus to the textfield and then set the selection:

Example: (assuming you have a textfield called “tf”)

....
tf.stage.focus = tf;
tf.setSelection(0, tf.length);
...

And that’s how you solve the textfield.setSelection() problem