Accessing Multiple animate cc canvas embedded using iframes

[AlexMercer]

After spending countless hours searching and trying various methods, I'm out of ideas. I need to embed multiple canvases on a page, and trigger their timeline when they come into view from an external js file. For the sake of brevity, I'll leave that part out. 

My iframe canvases render fine, however, I can't seem to be able to target a child movie clip timeline, and can't seem to wrap my head around where I'm going wrong.

I've declared this on my main timeline as suggested in another post

var _this = this;
window.sceneOne = this;

Here is the code that is being iframed in:

<div id="animation_container" style="width:665px; height:344px">
   <canvas id="canvas" width="665" height="344" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
   <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:665px; height:344px; position: absolute; left: 0px; top: 0px; display: block;">
   </div>
</div>

Here is the parent page (where the js file lives):

<div id="scene-1-canvas" class="responsive-canvas" style="margin: 30px 0;">
   <iframe id="scene-1-iframe" src="/canvas/Scene-1/scene-1.html" scrolling="no"></iframe>
</div>

Here is the function that I want to call at a specific time:

function raiseSun() {
   var iframe = document.getElementById("scene-1-iframe").contentWindow;
   iframe.sceneOne.mainMovie.house.sun.gotoAndPlay(2); 
}
raiseSun();

sceneOne is the variable I declared to reference the main timeline. mainMovie is the instance name that lives on the main timeline. Then there is a movie clip within that (house), and then finally (sun) is within that.

Any guidance or suggestions would be greatly appreciated

[JoãoCésar]

Hi.

I have a sample here of how to establish a communication between iframes.

adobe/animate cc/html5_canvas/communication_between_iframes at master · joao-cesar/adobe (github.com...

Please let us know if this is what you're looking for.

Regards,

JC

[ClayUUID]

In situations like this, always, ALWAYS verify your assumptions. This means verify in your raiseSun() function that iframe, sceneOne, mainMovie and all the way down the chain contain valid values. Stick them in an alert() statement, or console.log(), or whatever. Verify that raiseSun() is even being called at all. Verify everything, because somewhere in your code, one or more of your assumptions has proven to be incorrect.

You don't even need to be declaring a variable in the parent, since the parent can directly access any iframe's root timeline with document.getElementById("myIframe").contentWindow.exportRoot. Still, some mechanism for the iframes informing the parent when they've finished loading would be a very good thing to have.

[AlexMercer]

I really appreciate your help with this. I'll admit I'm not the strongest front end developer. I have verified that the function is calling, and using your line of code above, I am able to get the iframe object in a console.log, however, I'm a little stuck on where to go from here. I'm trying several different ways to "talk" to the timeline, but every method not only throws a js error, but the console.log changes to "undefined".

Using this code for example:

var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;
console.log(iframe); // returns an object called lib.scene1

// I've tried this but it throws an error.		
iframe.mainMovie.house.sun.gotoAndPlay(2);

[AlexMercer]

Here is a screenshot of the console log if it will provide any more insight

[ClayUUID]

If something is undefined that shouldn't be, then either you have the reference name wrong, or you're trying to call it before it's initialized.

[AlexMercer]

Thank you for hanging with me on this. It's so frustrating. Here is my complete code that is on this page. If I remove the "exportRoot" piece, it returns the window, however, when I add the exportRoot, it comes back as undefined. Any idea on what might be causing that? I added an onload thinking that the iframe hadn't been fully loaded, but that didn't seem to help. The canvas renders as it's supposed to. I just can't seem to be able to do anything to access the timeline of it

<iframe id="scene-1-iframe" src="<?php bloginfo('url'); ?>/canvas/Scene-1/scene-1.html"  scrolling="no">
</iframe>
<script type="text/javascript">
    // Wait for iframe to load before calling function
    document.getElementById('scene-1-iframe').onload = function () {
        console.log('iframe loaded');
	raiseSun();
    }
    // Function to play movie clip
	function raiseSun(){
	var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;
	    console.log(iframe);
	}
</script>

[ClayUUID]

Are. You. Calling. Before. It's. Initiized?

[AlexMercer]

I have the iframe on the page, with the script below it. I added the onload function to wait for the iframe to load before calling the "raiseSun" function. Is there a best practice approach or a working example for this?

[AlexMercer]

Ok, I've gotten the undefined aspect fixed by using this:

$(window).on('load', function(){ 
   var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;
   console.log(iframe);
});

So now that the exportRoot is working, what is the best way to "reach" in and manipulate a movieClip's timeline?

[AlexMercer]

Finally got it working. I appreciate your time. For anybody in the future running into this, here is the code that I used:

$(window).on('load', function(){ 
   var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;
   console.log(iframe);
   iframe.mainMovie.house.gotoAndPlay(2)
});