Based on this post on the Adobe’s AS3 forum, I thought I would create a simple class that takes care of the requested task.
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
The AS3: Drawing dynamic anchor lines by Tiago's Weblog, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Switzerland License.
Hi! If i drag the mouse outside the flash, the box is disappear, u can correct it, when add onMouseLeave listener to stage.
ummm sir… we have a project that do the same task but i nid multiple lines.. which will be connected to multiple objects? any idea?
Hi Paulo, yeh I have a few ideas, you can either work with linked lists, or with double linked lists, you can find more about it here:
http://lab.polygonal.de/2007/11/26/data-structures-more-on-linked-lists/