Using Flash's lineTo() method, you can easily make a connection between several points or several points spread around several objects. Some tricky problems arise when you want to maintain a connected line between moving objects.

For an example of what you will create towards the end of this tutorial, in the following animation, drag the circles around and you will see a connected line moving accordingly:

[ 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.

In the previous section, you created a working connected lines example using five draggable circles as the endpoints of the lines. In the next few pages you will learn more about how the code works.

Displaying Circles

There are several main parts to the animation you created earlier. The first part involves displaying the circles!

If you recall in the previous section, you drew the circle, converted the circle to a movie clip, gave it a linkage identifier, and deleted the circle from the stage. So, the first part of our code is to take the circle out of the library and place it on the stage. That code is contained in our init() function, and the relevant portions are highlighted below:

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();
  }
}

The above highlighted code places five circles from the Library, gives each circle a unique name, and places them on a random location on the stage. Let's go through each line of code:

---

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

This for loop will execute any code contained in it five times. The variable i starts at zero, and after each iteration, it increases by 1 until it becomes less than 5.

---

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

With this line of code, you are retrieving the circle from your library referenced by blueCircle, giving it a name "blue"+i, and placing it at the next highest depth. The linkage identifier blueCircle is the identifier name you gave your circle from the Convert to Symbol window earlier.

The name "blue"+i is dependent on the value of i as seen earlier in the for loop. For each iteration of the loop, the value of i changes. Therefore, the name of the blueCircle object you retrieve from the library would  also. In our example, with the for loop terminating before i reaches 5, the circle names will be: blue0, blue1, blue2, blue3, and blue4.

Each object that is placed on the stage is given a depth. You cannot have two objects sharing the same depth, so you need to find a way of giving each object a unique depth. While you can use numbers that increase with each object created, the safest bet is to let Flash determine the depth using the getNextHighestDepth() method.

---

var mc:MovieClip = this["blue"+i];
mc._x = Math.round(Math.random()*300);
mc._y = Math.round(Math.random()*200);

The above three lines are fairly straightforward. For each movie clip we retrieve from the library, we need a good way of referencing it. The this[...] method allows you to create a reference to an object containing the name you pass into it - In our case, blue + i. This reference is stored in the variable mc.

Now that you have a reference to the movieclip recently retrieved from the Library, you can assign them various properties that you would to any normal movieclip. Two properties we alter are the X and Y positions of the movieclip, and those are the last two lines you see above. The numbers 300 and 200 correspond to the width and height of the movie respectively.

---

We have barely scratched the surface of the code. There is more in the next section!

In the previous section, you learned about the code responsible for displaying the circles on the stage. In this page, I will explain how to get dragging to work.

Dragging the Circles

The code for dragging the circles is highlighted in the following chunk of code:

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();
  }
}

The dragging code is basically two parts. The first part initiates the drag, and the second part cancels the drag when you release the mouse. Let's look at the pieces of code that help you do that in greater detail:

---

mc.onPress = function() {
  this.startDrag();
};

The name mc dynamically references the movie clip you recently moved from the library via the this[...] command. Because the reference is almost as good as pointing to an actual movie clip, you have access to the MovieClip class's methods such as onPress event handler.

So, when somebody presses on the mc movieclip, the onPress handler fires and any code contained within it is executed. The code that is executed is:

this.startDrag();

The startDrag() method allows the object (this) to be dragged around wherever your mouse cursor is.

---

mc.onRelease = function() {
  this.stopDrag();
};

This section of code is largely the exact opposite of the section of code explained earlier. When you release your mouse press, the code executes. Instead of initiating the drag behavior, you are stopping the drag instead!

---

We've covered a lot of ground in the last two pages. In the next section, you will learn about how the connected lines are drawn, and how they remain connected!

In the previous section, we figured out how to drag the circles and stop the drag when the mouse cursor was no longer depressed over the object. What this tutorial is about, the connected lines, will be covered in this page.

Creating the Connected Lines

The code for displaying the lines between the circles is highlighted below:

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);
  //3->2
  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();
}

Phew - that's a lot of code. Don't worry, it isn't really that bad. Let's take it from the top:

---

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

In the init function, after the for loop, I create a new empty movie clip called line at a depth of -1. This empty movie clip will store our actual lines, and you will see more of it shortly.

---

drawLine();

In this line, the drawLine function is called. The drawLine function is responsible for creating the lines between the circles, and we want the lines to be drawn immediately after our circles have been displayed. You will learn more about the drawLine method shortly.

---

this.onMouseMove = function() {
  drawLine();
}

This section of code is very similar to the earlier line of code that only contained a call to the drawLine() function. The only difference is that every time the mouse moves, the drawLine function is called.

---

And now, we enter into the drawLine function. Keep in mind that the drawLine function is called every time the mouse moves, whereas the init function is called only once:

line.clear();

Every time the drawLine function is called, all current lines are cleared from the stage. If you did not clear the lines, any new lines caused by the circles moving would appear next to the old lines. You will have something that looks like the following image:

[ what removing line.clear() will do ]

---

We have one more page left! So, feel free to take a short break and let's go on to the next section!

In the previous section, we started delving into the code that draws the connected lines. We did not fully get done, so let's continue off with where we left off:

---

line.lineStyle(10, 0xBFD7EE);

You will need to specify how your line looks. By using the lineStyle method, you can specify the line's width as well as the color as shown above.

---

//4->3
line.moveTo(blue4._x, blue4._y);
line.lineTo(blue3._x, blue3._y);

In the above lines of code, we draw a line between the blue4 circle and the blue3. Notice the order in which the lines are being drawn in:

1. First you need to specify the origin of your line. In the above code, our origin is the X and Y position of the blue4 movie clip. The origin is specified by using the moveTo method, and that is applied to the line movie clip we created earlier.
2. Second, you specify the destination of your line. Our destination is the X and Y position of the blue3 movieclip, and that is designated by the lineTo method.

I repeat the above two lines of code for the remaining circles. The only things that are different are the circle origins and the circle destinations.

---

updateAfterEvent();

This line of code ensures that whatever code you are executing occurs after the event is invoked. What makes this unique is that this ensures that the rate at which the code executes is not dependent not the frame rate. You will get away with the animation by omitting this line, but if your frame rate is really low, your movement will not be smooth.

Also, note that the updateAfterEvent() only works when the onClipEvent handler is mouseDown, mouseUp, mouseMove, keyDown, keyUp, onMouseMove, onMouseDown, onMouseUp, onKeyDown, and onKeyUp. For all other event handlers, this line does nothing.

---

Conclusion

Well, this wraps up this tutorial. We covered a lot of useful material in the last five pages. Beyond learning just about how to create connected lines, you learned about retrieving objects stored in the library via their linkage identifiers, assigning them instance names via the this[..] method, and the nuances of the udpateAfterEvent() method.

I have provided the source code used for creating the animation you have been working on over the past few pages:

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇