Hi,

I am creating a program in which XMLbased X/y coordinates are extracted to draw lines from one movieclip to another using the createEmptyMovieClip method and lineTo. There is a line for every childNode, gathered in a for loop.

What I would like to be able to do is attach an arrowhead at the end of the arrow, hopefully pointed in a straight line with the angle of the arrow line.

Anybody with any insight shall be most praised, here's the code for the creation of the arrow line. I've gotten rid of all the variables and the for loop here because its not important, and would only add hassle.

	createEmptyMovieClip("line_mc", 10);
	line_mc.lineStyle(1, 0x000000, 100);
	line_mc.moveTo(200, 25);
	line_mc.lineTo(450, 105);

So that draws a diagonal line and I would like to cap the line with an arrow head following the aim of the line.

Thanks in advance for any suggestions!
GC

[Nutrox]

Do you want to draw the arrow head dynamically, or would you be happy using a "arrowHead" MovieClip from the library?

[Greencow]

A movieclip should be fine thanks. I figured that would be easier, but the math to get it to point in the right direction is a baffler to me.

Cheers!

[Nutrox]

I have attached some example files for you so that you can see how the little arrow head is setup in the library. This is the code in the FLA:

var line_mc:MovieClip = createLine( 100, 100, 200, 200 );
 
function createLine( x1:Number, y1:Number, x2:Number, y2:Number ):MovieClip
{
    var mc:MovieClip = createEmptyMovieClip( "line_mc", 10 );
    
    mc.lineStyle( 1, 0, 100 );
    mc.moveTo( x1, y1 );
    mc.lineTo( x2, y2 );
    
    var arrow:MovieClip = mc.attachMovie( "arrowHead", "arrowHead", 0 );
    
    arrow._x = x2;
    arrow._y = y2;
    arrow._rotation = Math.atan2( y2 - y1, x2 - x1 ) * ( 180 / Math.PI );
    
    return mc;
} 

[Greencow]

Works Brilliantly thankyou!

[jaseinatl]

Nutrox, PLEASE help I realize this is an old thread, but humor me, please.

I have a bunch of medical examiner's sheets that have various body parts and injuries that I have to make callouts for.

Basically, what my Boss wants is a way to click on a wound or a wound's label and have the wound (and the label) disappear. To prove, through process of elimination that his client is innocent.

I have blank forms and completed forms to work with.

So I scanned everything and began to separate out just the injuries from the completed forms. (in photoshop). Then I imported two images (the blank form and the completed form with injuries) to create MovieClips and set the blend mode on the "injury" clip to Multiply.

Next, using the paintbrush tool in Flash, I just drew shapes over the top of the areas that needed to be removed. I manually added labels for each wound and placed a shape behind the text of the label (to make it eaiser to click).

Then I extended the MovieClip class to fade in and out the blob that I had just painted according to mouse events (click to toggle). It also finds and stores a reference to the label clip associated with mask. So when the label is clicked or the wound is clicked, they both disappear. Alll of this works stellar.

I added all of the wound shapes to a single clip and set that clip to mask the wound composite from photoshop. Still a piece of cake.

I am sorry for all the text, but here is the problem.

Now I have to make arrows from the labels to the wounds. I cannot for the life of me figure out how to manage the scope situation to draw an arrow from one clip to another (embedded some unknown number of layers deep).

I've tried converting everything using the localtoGlobal and then globalToLocal back to the label clip (where the ArrowClip is), but that doesn't work.

I have tried everything I can think of and no luck.

I would like to be able to click and drag the labels as needed (and have the arrows update). This seems like it should be so easy, but I just haven't been able to figure it out. What's worse, is this is a Murder Case and I have to have these done today. UGGH. Right now I am manually placing about 800 arrows and I know that I could write a class to automate the arrows if I could just figure out the scope thing.

I can draw a line, calculate the angle and attach an arrow head at the right angle, but the arrow has to be separate from the label. So when you mouse over the label or the wound, the arrow appears, otherwise, it's not visible.

And since the masks have to be contained in one parent mask clip, that prohibits me from putting the arrow clip in wound clip.

I have even tried a third "arrowLayer" that holds all the arrows and can deal with the scope accodingly--no luck.

Any suggestions?

Thanks in advance,

jase

[Nutrox]

Creating another layer for the arrows sounds like a good idea to me, that way you should have the main image(s) at the bottom of the stack, then the (yet to be done) arrows on top of those, and finally your wounds/labels at the top of the stack.

The arrow problem should be easy enough to sort out, I will start getting a working demo together for you within the hour. Which version of ActionScript are you using?

[Nutrox]

Sorry jaseinatl, I can't wait any longer for a response from you regarding the ActionScript version. I am more than happy to help you out with this but it will need to be done tomorrow now.

[jaseinatl]

Nutrox.
You are so sweet and so generous.
I really didn't expect to get a response so quickly and I certainly didn't expect you to offer to work with me directly on this.
I am at once humbled and flattered by your generous offer.

To answer your question, I am stuck in AS2.0 because I haven't had the time to invest in AS3.0 (besides, I'm waiting for AS5 Just because it looks funny to type it--should be out this summer, right?)

If you can spare some time in the next week or two to help me get a hold of this scope issue with respect to coordinates, I would love it.

Here is my solution that worked for today:

top layer --- contains one MovieClip for each diagram called "D01Arrows" where D01 is Diagram 01, etc. Inside of it, I manually placed arrows that I sized from the point of the wound to it's label (and then used AS2 code inside the arrow to resize itself proportionately). The labels are numbered L01, L02, etc. for left placed labels and R01, R02, etc. for right placed labels. By doing in manually, I was also able to handle one label with multiple arrows.

next layer -- contains one MC that is set to mask with BitmapCaching. Inside of it I have a bunch of moveiClips labeled L01, L02, R01, R02 etc. to correspond with the arrows.

next layer -- bitmap image of the wounds (cached as Bitmap and masked by previous layer) enclosed in MovieClip with Multiply as the blend mode.


next Layer - labels in one clip named D01Labels and containing labels manually placed for each of the wounds. I also copied the mask layer, broke it apart and added each wounds' masked shape to the labels clips thereby enabling you to click on the wound or it's label to make it fade in or out.

Next layer - empty diagram.

It works, but I would like to enable the labels to be dragged around and have the arrows follow. Plus, I should be able to script this to all happen at once rather than piece-mealing code inside of clips.

I figure that a woundHandler script that autogenerated the label, the arrow, and linked them all together with the mask is the way to go. Right now I just extend MC of the Mask MC to look for the label or arrow with the same name.

this.labelClip=this._parent._parent.D01Labels[this._name];
this.arrowClip=this._parent._parent.D01Arrows[this._name];



Again, Nutrox, I really appreciate your offer to help and I apologize that I didn't reply right away. You have always given me great advice and I would love to have your input on this process ( I can post the semi-final product so far if you want to see it)

Jase

[Nutrox]

No worries about the response time, I just thought you needed to get this sorted out ASAP due to an imminent deadline. I will definitely put something together for you though.

[Nutrox]

I have attached a working demo for you. The code is a bit messy (AS2 and myself aren't the best of friends these days) but it works and demonstrates how the localToGlobal() function can be used to normalise the coordinates of the labels and items.

Let me know if the demo is of no help to you and I will try to approach things from a different angle.

Attached Files

coords.zip (12.2 KB, 12 views)