Get X,Y of a symbol inside another! (harder than it seems)

[tiagosaad]

Hello, everybody!
I would like to know if anyone has a solution to get an element's coordinates on another symbol, but with the parent's coordinate system. let me explain:

I have a symbol called "arm" (x,y = 500,500). Inside this "arm" i have another symbol called "peg" x,y =(100, 100). If my arm is not rotated/scaled/skewed a simple sum solves my problem (x,y = 600,600), BUT when i start moving/rotating/scaling my "arm" my "peg" position is very hard to calculate. 

I've tried advanced math skills (using sin/cos to adjust the angle position) but i was not able to solve this. Does anyone have an idea? 

Thanks in advance!

[JoãoCésar]

Hi.

Have you tried the localToGlobal and globalToLocal methods?

Please let us know.

Regards,

JC

[tiagosaad]

Hello, João César! 
I am trying to use this, but i have not been able to make it work.
I was not using movieclips, but graphics (better for animation). Nevertheless i 'll try a little later, but i don't think it's gonna solve my problem...
Anyway: i make my scripts in a .jsfl file and i couldn't reference the right movieclip yet. I had a grip of this element using the an.getDocument().getTimeline().layers[l].frames[f].element[0] reference and if i try to use the "localToGlobal" with it i receive a javascript error, saying "localToGlobal" is not a function. Any idea?
Thanks again.
ps: Brazilian too?

[JoãoCésar]

Olá, Tiago!

Sou do Brasil sim. o/

Anyway, if you're coding in JSFL, then I'm afraid you're gonna have to figure it out the calculations...

But I guess if you look for similar cases in the JavaScript world (with or without libraries) you may find the answer you're looking for.

Please let us know.

Regards,

JC

[tiagosaad]

Thanks for your answer, João!
I've performed a simple test and created a 100x100 square and printed it's info (x, y, scalex, scaley, skewX, skewY, rotation). It works fine on a regular situation BUT if you skew it, the rotation returns NaN (not a number)... i was really upset because it seems it can jeopardize my goals. I know i can make it work on most cases (just don't skew), but i really see no reason on not returning the rotation information as usual. (if it was for some reason a text instead of a number i could parse it, but i have no idea what is returns).
Thanks again and, if you would like to know more of my work, look for Animar Estúdio on the web.
Best regards!

[JoãoCésar]

Hi, Tiago!

Yeah, that's weird. I have no idea why the skew makes the rotation returns NaN...

Maybe if you ask the creators of Flanimate Power Tools (@Vladin M. Mitov and @n. tilcheff ). They have a lot of experience doing this kind of stuff using JSFL.

And is your studio responsible for animating Galinha Pintadinha - and possibly Jacarelvis?! My kids love these YouTube cartoons.

[tiagosaad]

Hello, João!
Thanks for the tip. I'm gonna try to reach them!
Yes, i've been animating Galinha Pintadinha since 2008 and i am responsible for Jacarelvis (i make songs and sing too, rsrs... it's a small studio).
Before working with animation i graduated under Computer Engineering and i've been developing some scripts to help our animation production these days.

Now i've been having a hard time using the "an.getDocumentDOM().swapElement('libpath')" command. It requires a selection to work and i use the "selectNone" to clear (but apparently it doesn't) and "fl.getDocumentDOM().selection = fl.getDocumentDOM().getTimeline().layers[curLayer].frames[curFrame].elements;" to select. It was working before, but now it seems to select nothing.... Now i remember why i quit programming 😄

Thanks again and best wishes!

[tiagosaad]

About the swapSymbol and selection: i think i was trying to do several things at once. I was able to insert keyframes and move/rotate symbols while playing the timeline (realtime). I was trying also to swap a symbol while playing, that's why it was not working. I've separated my workflow to change those symbols after and it worked.
Thanks again!

[JoãoCésar]

Awesome! Your animations are very famous in Brazil. Congrats!

So you're like me. I like programming and creating visuals. \o/

And I'm happy that you and Vladin were able to talk and solve the problem.

Have a really nice week!

Regards,

JC

[Vladin M. Mitov]

Hi,

In order to get the coordinates of an internal element that lies within another element, the best way is to use matrix multiplication. See the documentation about:

fl.Math.concatMatrix();

[tiagosaad · Accepted solution]

Thanks, Vladin.
I've read the matrix info and didn't understand much, i assume.
But now it seems that i made it work!
I put my symbol using the sum (X  = parentX+pegX) and then i changed the transformation point to match the parents transformation point. I applied the same parameters as the parent (x,y,skew, rotation) and then returned the transformation point and transformations to it's original state.

PHEW! 😄

Thanks, everybody! 

[Vladin M. Mitov · Accepted solution]

@tiagosaad 

Hi,

If you interested to get the coordinates of the inner element, you need to use matrix multiplication in order to take in consideration all random transformations over the outer containers. (rotation, scale, skew, etc). In the example below:

if you want to calculate the position of the red cross ( the registration point of the symbol at third level ), you should use the following:

var A = fl.getDocumentDOM().selection[0];                       // the element of the stage (selected)
var B = A.libraryItem.timeline.layers[0].frames[0].elements[0]; // element at the second level (hard coded)
var C = B.libraryItem.timeline.layers[0].frames[0].elements[0]; // element at the third level (hard coded)

var compMatrix = fl.Math.concatMatrix( C.matrix, B.matrix );
    compMatrix = fl.Math.concatMatrix( compMatrix, A.matrix );

fl.trace( "x:" + compMatrix.tx + ", y:" + compMatrix.ty  );

Try this code with the example file. Select the element on the stage and run the command - you should see printed out the coordinates of the red cross, translated to screen coordinates as they displayed in the "info" palette.

Here is the sample .FLA file

Cheers!

[tiagosaad]

Wow, Vlad, you nailed it! This worked perfectly!
Thanks a lot!!!