Flash
	Basics / Animation
	ActionScript
	Special Effects
	HTML5
	CSS / HTML Basics
	Animation
	JavaScript
	Common Tasks
	Windows Phone
	Get Help

[ click and drag a circle in the above animation to see the connected line ]

In the above animation, notice that the lines remain connected to their moving circles. At the end of this tutorial, you will learn what pieces of code allow that to happen and why it happens in the way it does.

Let's Get Started:

1. After you have launched Flash, draw a blue circle. If you have the time, feel free to make yours look like mine below:

[ draw a circle ]

2. Select the circle you have drawn, and press F8 (or go to Modify | Convert to Symbol). The Convert to Symbol window should appear. From this window, select the option for Movie Clip and give your symbol a name:

[ the Convert to Symbol window ]

4. You are not done with the Convert to Symbol window just yet. Press the Advanced button. Your window will now expand to display more options. Check the box for "Export for Actionscript", and in the Identifier text-field, type the name blueCircle, and press OK to close the Convert to Symbol window:

[ make sure your Linkage area looks like the above image ]

5. So, now your stage contains your newly converted movie-clip circle. Select the circle on your stage and press the Delete key to remove it. Don't worry. Your circle and associated Linkage Identifier are kept intact in your library.

6. Right click on a frame in your timeline and select the option for Actions to bring up the Actions Window. Copy and paste the following code into it:

function init() {

for (var i:Number = 0; i<5; i++) {

this.attachMovie("blueCircle", "blue"+i, this.getNextHighestDepth());

var mc:MovieClip = this["blue"+i];

mc._x = Math.round(Math.random()*300);

mc._y = Math.round(Math.random()*200);

mc.onPress = function() {

this.startDrag();

};

mc.onRelease = function() {

this.stopDrag();

};

}

this.createEmptyMovieClip("line", -1);

drawLine();

this.onMouseMove = function() {

drawLine();

}

}

init();

//

function drawLine() {

line.clear();

line.lineStyle(10, 0xBFD7EE);

//4->3

line.moveTo(blue4._x, blue4._y);

line.lineTo(blue3._x, blue3._y);

//3->2

line.moveTo(blue3._x, blue3._y);

line.lineTo(blue2._x, blue2._y);

//2->1

line.moveTo(blue2._x, blue2._y);

line.lineTo(blue1._x, blue1._y);

//1->0

line.moveTo(blue1._x, blue1._y);

line.lineTo(blue0._x, blue0._y);

//0->4

line.moveTo(blue0._x, blue0._y);

line.lineTo(blue4._x, blue4._y);

//

updateAfterEvent();

}

If you test your animation, you should see five circles with lines connecting them. In the next few pages, I will explain what causes it by describing each line of code.

Onwards to the next page!