Skip to main content
A
AlexMercer
Participating Frequently
December 27, 2020
Question

Accessing Multiple animate cc canvas embedded using iframes

  • December 27, 2020
  • 2 replies
  • 1078 views

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

    This topic has been closed for replies.

    2 replies

    C
    ClayUUID
    Legend
    December 27, 2020

    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.

      A
      AlexMercerAuthor
      Participating Frequently
      December 28, 2020

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

       

      A
      AlexMercerAuthor
      Participating Frequently
      December 28, 2020

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

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      December 27, 2020

      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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices