Skip to main content
Hugo_Reyes
Hugo_Reyes
Participant
May 8, 2019
Answered

How to insert an iFrame in Animate CC?

  • May 8, 2019
  • 3 replies
  • 5343 views

I'm doing a walkthrough with animations, that I need to export in HTML 5, but also what I want to include is an iFrame to load a google map on it.

Is it possible to have a google map inside a canvas with Animate?

I would appreciate some help a ton!

Regards,

Hugo

This topic has been closed for replies.
Correct answer Joseph Labrecque

If you use any of the HTML5 Canvas components, they get added to a DOM overlay layer which rests atop the actual canvas element. With that layer existing... you could use some JavaSCript target it and add child elements (such as an iframe).

You could also write your own component specifically for this task:

https://www.pluralsight.com/courses/animate-cc-building-custom-html5-components

3 replies

S
starfleetUpTo.date
Inspiring
November 10, 2020

Hi... if you want your map to be responsive to the canvas respectively animation container I recommend for example following method:

var newDiv = document.createElement("div"); 

/*determine by rule of three object related to camvas size:*/
newDiv.style.width = "...%";
newDiv.style.height = "...%";
newDiv.style.left = "...%";
newDiv.style.top = "...%";
newDiv.style.right = "...%";
newDiv.style.bottom = "...%";

newDiv.style.position = "relative";


newDiv.innerHTML = '<iframe name="NewIframe" scrolling="no" src="https://www.google.com/maps/..." marginwidth="0px" marginheight="0px" id="myFrame" allowfullscreen="" style="width: 100%; height: 100%; border:0px none #ffffff;  border: 0;"  frameborder="0"> </iframe>';

document.getElementById("animation_container").appendChild(newDiv);



var newDiv = document.createElement("div"); 

/*determine with rule of three based on original object's width and hight realted to canvas size:*/
newDiv.style.width = "39.05258%";
newDiv.style.height = "38.888888888%";
newDiv.style.left = "22.552083333333%";
newDiv.style.top = "38.611111111111%";
newDiv.style.right = "38.39533666667%";
newDiv.style.bottom = "22.5%";



newDiv.style.borderRadius = "10px";
newDiv.style.backgroundColor = "#ff0000";
newDiv.style.position = "relative";


newDiv.innerHTML = '<iframe scrolling="no" src="https://..." marginwidth="0px" marginheight="0px" id="myFrame" allowfullscreen="" style="width: 100%; height: 100%; border:0px none #ffffff;  border: 0;"  frameborder="0"> </iframe>';

document.getElementById("animation_container").appendChild(newDiv);
leendeneve31
leendeneve31
Participant
March 16, 2020

Did you manage to insert the iframe in Animate CC? I watched the video-example with Edge Animate but this doesn't work in ANCC ... Struggling with the same problem... 😞

 

C
ClayUUID
Legend
May 8, 2019

The HTML5 canvas element is a 2-dimensional bitmap. You can put pixels in it. Nothing more, nothing less.

If you want to include any other native HTML elements "in" your canvas document, you have to fake it by floating them above the canvas element.

Hugo_Reyes
Hugo_ReyesAuthor
Participant
May 8, 2019

I found an old tutorial in youtube, but it is for Adobe Edge.

Adding a Google Map - YouTube

Do you think this works for animate CC?

I have to clarify that I'm not a coder.

Joseph Labrecque
Community Expert
Joseph LabrecqueCommunity ExpertCorrect answer
Community Expert
May 9, 2019

If you use any of the HTML5 Canvas components, they get added to a DOM overlay layer which rests atop the actual canvas element. With that layer existing... you could use some JavaSCript target it and add child elements (such as an iframe).

You could also write your own component specifically for this task:

https://www.pluralsight.com/courses/animate-cc-building-custom-html5-components

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