kirupa.com - Connected Lines, Page 5


#1
by kirupa | 25 June 2006 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: 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. 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. 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: If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out! THE KIRUPA NEWSLETTER Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox! ( View past issues for an idea of what you've been missing out on all this time! ) 1 | 2 | 3 | 4 | 5

This is a companion discussion topic for the original entry at http://www.kirupa.com/developer/actionscript/connectedLines5.htm