• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Participant ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

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!

TOPICS
ActionScript

Views

689

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Participant , Nov 09, 2021 Nov 09, 2021

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! 

Votes

Translate

Translate
Engaged , Nov 10, 2021 Nov 10, 2021

@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:
example.png
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)
va
...

Votes

Translate

Translate
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

Hi.

 

Have you tried the localToGlobal and globalToLocal methods?

 

Please let us know.

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 08, 2021 Nov 08, 2021

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

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();

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

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! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

@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:
example.png
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!

 

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines