Highlighted

Accessing Movie Clips IN a HTML5 canvas iframe FROM external document

New Here ,
Mar 28, 2020

Copy link to clipboard

Copied

Hi,
I've been struggling with between sibling iframe / parent DOM / easel.js hierarchy structure for quite a frustrating while now, and i'm finally making some headway.

an example of something i just got working with the help of this post: https://community.adobe.com/t5/dreamweaver/i-have-two-iframes-with-html-generated-with-animate-cc-ho...


one example like that in the post above as something i tested:

my parent doc has this:
` document.getElementById('sliders_panel_iframe').contentDocument.functionToFire(); `

which calls this from the iframe window with the Animate HTML canvas :
' document.functionToFire = function(){ console.log("functionToFire fired"); }; '

this all works perfectly.


what i'm trying to do now is have the parent doc able to listen for changes in attributes of things nested kind of deeply in my HTML5 canvas.
is this possible?


To monitor the horizontal status of a thumb object on a slider, I'm doing this with no avail...

var thumbAllPartsX = document.getElementById('sliders_panel_iframe').contentDocument.exportRoot.All_Parts.sliderGroup.sliderThumb_All_Parts.x


Animate CC movie clip levels are, (for clarification):
exportRoot
All_Parts
sliderGroup
sliderThumb_All_Parts

.x (sliderThumb_All_Parts' horizontal)


This gives me the console error message "TypeError: document.getElementById(...).contentDocument.exportRoot is undefined"

It seems I'd need something between contentDocument and exportRoot possibly?
.contentDocument <-- __?__--> .exportRoot ?

Do I have to include ".stage" somewhere in there?


NOTE: this slider/thumb arrangement is dynamically created and named as one of many.

made like this:


sliderNewInstance = new lib.sliderUnit();
exportRoot.addChild ( sliderNewInstance );

in a for loop for a list of items which all get renamed etc.

the top level Movie Clip is a clone of a library asset called sliderUnit and has been given the ID of "All_Parts" and it's slider thumb control button has the ID of "sliderThumb_All_Parts". I don't know if using ID's in this hierarchical way works.

if a class CAN be used? which?

also I'm curious as to how can i access from my parent document classes given to objects in Animate, through using for example: fooMC.className = fooClass.

No CSS i write for them effects anything on them.


Any help on this issue i've been struggling with for months would be greatly appreciated!

Views

148

Likes

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

Accessing Movie Clips IN a HTML5 canvas iframe FROM external document

New Here ,
Mar 28, 2020

Copy link to clipboard

Copied

Hi,
I've been struggling with between sibling iframe / parent DOM / easel.js hierarchy structure for quite a frustrating while now, and i'm finally making some headway.

an example of something i just got working with the help of this post: https://community.adobe.com/t5/dreamweaver/i-have-two-iframes-with-html-generated-with-animate-cc-ho...


one example like that in the post above as something i tested:

my parent doc has this:
` document.getElementById('sliders_panel_iframe').contentDocument.functionToFire(); `

which calls this from the iframe window with the Animate HTML canvas :
' document.functionToFire = function(){ console.log("functionToFire fired"); }; '

this all works perfectly.


what i'm trying to do now is have the parent doc able to listen for changes in attributes of things nested kind of deeply in my HTML5 canvas.
is this possible?


To monitor the horizontal status of a thumb object on a slider, I'm doing this with no avail...

var thumbAllPartsX = document.getElementById('sliders_panel_iframe').contentDocument.exportRoot.All_Parts.sliderGroup.sliderThumb_All_Parts.x


Animate CC movie clip levels are, (for clarification):
exportRoot
All_Parts
sliderGroup
sliderThumb_All_Parts

.x (sliderThumb_All_Parts' horizontal)


This gives me the console error message "TypeError: document.getElementById(...).contentDocument.exportRoot is undefined"

It seems I'd need something between contentDocument and exportRoot possibly?
.contentDocument <-- __?__--> .exportRoot ?

Do I have to include ".stage" somewhere in there?


NOTE: this slider/thumb arrangement is dynamically created and named as one of many.

made like this:


sliderNewInstance = new lib.sliderUnit();
exportRoot.addChild ( sliderNewInstance );

in a for loop for a list of items which all get renamed etc.

the top level Movie Clip is a clone of a library asset called sliderUnit and has been given the ID of "All_Parts" and it's slider thumb control button has the ID of "sliderThumb_All_Parts". I don't know if using ID's in this hierarchical way works.

if a class CAN be used? which?

also I'm curious as to how can i access from my parent document classes given to objects in Animate, through using for example: fooMC.className = fooClass.

No CSS i write for them effects anything on them.


Any help on this issue i've been struggling with for months would be greatly appreciated!

Views

149

Likes

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
Mar 28, 2020 0
Adobe Community Professional ,
Mar 29, 2020

Copy link to clipboard

Copied

Hi.

 

Instead of

document.getElementById('sliders_panel_iframe').contentDocument.exportRoot.All_Parts.sliderGroup.sliderThumb_All_Parts.x;

 

try

document.getElementById('sliders_panel_iframe').contentWindow.exportRoot.All_Parts.sliderGroup.sliderThumb_All_Parts.x;
 
And didn't quite get your doubts about the classes and CSS. Can you provide more info?
 
 
Regards,
JC
__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 29, 2020 0
Gliftek LATEST
New Here ,
Apr 08, 2020

Copy link to clipboard

Copied

hmm.. yeah that didn't help.

Likes

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
Reply
Loading...
Apr 08, 2020 0