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