Creating Connected Lines - Page 5

In the previous page, 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:

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi about | facebook | twitter

1 | 2 | 3 | 4 | 5